В последнее время я пытался переосмыслить правила CSS, которые я принял в своей практике. Я написал огромное количество кода без реального понимания того, почему он работает именно так.
Я просто решал задачи определенным способом, основываясь на общепринятой практике. Но с недавних пор я задумался, могу ли я узнать хотя бы приблизительно причину, почему все работает так, а не иначе?
Некоторые детали реализации браузера нечеткие, наверное потому что я в действительности не читал спецификацию. Теперь все чаще я пытаюсь себя спрашивать — почему все работает именно так? И все это привело меня к моментам озарения, которыми я надеюсь поделиться с вами.
Общепринятый шаблон в дизайне, который мы часто видим на сайтах — это идеальный круг. Иногда круг имеет какой-либо цветовой фон или изображение в качестве фона.
CSS круги на Rdio, Dribbble, и Codecademy
Такой трюк часто достигается использованием CSS свойства border-radius. Я решал эту задачу следующим образом — создавал квадрат и устанавливал border-radius в 50%. Я никогда не задавался вопросом, почему нужно делать именно так, я просто согласился с тем, что если установить радиус как половину высоты/ширины квадрата на всех углах, то я получу круг.
Рассмотрим пример. Пусть у нас есть квадрат размерами 150px на 150px, превратим его в круг, установив радиус для каждого угла в 50%. Согласно стандарту W3C в разделе о border-radius, процентные единицы для border-radius относятся к ширине и к высоте элемента. В моем примере, ширина/высота элемента составляет 150px, таким образом 50% вернет нам значение в 75px.
Преобразование квадрата в круг на CSS свойства border-radius (см. на CodePen)
Иногда я вижу реализацию данной дизайнерской задумки путем установки border-radius в 100%. Я сам сделал также в своем проекте несколько дней назад, даже не задумываясь. Это выглядело точно также, образуя идеальный круг. Но почему?
В презентации Lea Verou, The Humble Border Radius, указывает на W3C правило о пересекающихся изгибах:
если суммарное значение радиуса границы для двух смежных углов превышает размер элемента, то браузер выполняет дополнительные вычисления для пропорционального масштабирования радиуса границы каждого угла до тех пор, пока они не пересекутся.
Если верхний левый угол границы квадрата равен 100%, тогда радиус простирается от нижнего левого угла до верхнего правого угла квадрата. Это тоже самое, что и установка радиуса границы в 150px, то есть размер квадрата. И если верхний правый радиус границы также равен 100%, то суммарное значение двух углов составит 200%. И тогда браузер говорит: «Это недопустимо — установите значение для правого угла!» и масштабирует оба радиуса до тех пор, пока они не войдут в квадрат. В этот момент каждый угол становится равным половине от 100%.
Как браузер уменьшает border-radius 100% при масштабировании CodePen
Браузер также будет масштабировать все остальные углы, пока каждый угол не будет иметь радиус 50%, и мы не получим наш круг. Даже если вы укажете радиус в 150px для каждого угла, в действительности вы получите радиус в 75px, так как это максимальное значение которое позволяет установить браузер для каждого угла.
Если установить радиус границы в 100% для всех углов элемента, браузер за кулисами выполнит дополнительную работу, чтобы масштабировать углы до тех пор, пока они не сойдутся. Я не уверен, есть ли какие-то последствия в плане производительности при установке border-radius в 100% для всех ваших кругов.
По крайней мере, это кажется довольно бессмысленным, если вы заранее знаете, что браузер в любом случае будет масштабировать радиусы до 50%. Использование 50% кажется верным решением.
А для меня время исправить расставленные мною случайные CSS свойства за последнею неделю…
Я просто решал задачи определенным способом, основываясь на общепринятой практике. Но с недавних пор я задумался, могу ли я узнать хотя бы приблизительно причину, почему все работает так, а не иначе?
Некоторые детали реализации браузера нечеткие, наверное потому что я в действительности не читал спецификацию. Теперь все чаще я пытаюсь себя спрашивать — почему все работает именно так? И все это привело меня к моментам озарения, которыми я надеюсь поделиться с вами.
Идеальные круги в CSS
Общепринятый шаблон в дизайне, который мы часто видим на сайтах — это идеальный круг. Иногда круг имеет какой-либо цветовой фон или изображение в качестве фона.
CSS круги на Rdio, Dribbble, и Codecademy
Такой трюк часто достигается использованием CSS свойства border-radius. Я решал эту задачу следующим образом — создавал квадрат и устанавливал border-radius в 50%. Я никогда не задавался вопросом, почему нужно делать именно так, я просто согласился с тем, что если установить радиус как половину высоты/ширины квадрата на всех углах, то я получу круг.
Рассмотрим пример. Пусть у нас есть квадрат размерами 150px на 150px, превратим его в круг, установив радиус для каждого угла в 50%. Согласно стандарту W3C в разделе о border-radius, процентные единицы для border-radius относятся к ширине и к высоте элемента. В моем примере, ширина/высота элемента составляет 150px, таким образом 50% вернет нам значение в 75px.
Преобразование квадрата в круг на CSS свойства border-radius (см. на CodePen)
Как же действительно работает border-radius?
Иногда я вижу реализацию данной дизайнерской задумки путем установки border-radius в 100%. Я сам сделал также в своем проекте несколько дней назад, даже не задумываясь. Это выглядело точно также, образуя идеальный круг. Но почему?
В презентации Lea Verou, The Humble Border Radius, указывает на W3C правило о пересекающихся изгибах:
если суммарное значение радиуса границы для двух смежных углов превышает размер элемента, то браузер выполняет дополнительные вычисления для пропорционального масштабирования радиуса границы каждого угла до тех пор, пока они не пересекутся.
Если верхний левый угол границы квадрата равен 100%, тогда радиус простирается от нижнего левого угла до верхнего правого угла квадрата. Это тоже самое, что и установка радиуса границы в 150px, то есть размер квадрата. И если верхний правый радиус границы также равен 100%, то суммарное значение двух углов составит 200%. И тогда браузер говорит: «Это недопустимо — установите значение для правого угла!» и масштабирует оба радиуса до тех пор, пока они не войдут в квадрат. В этот момент каждый угол становится равным половине от 100%.
Как браузер уменьшает border-radius 100% при масштабировании CodePen
Браузер также будет масштабировать все остальные углы, пока каждый угол не будет иметь радиус 50%, и мы не получим наш круг. Даже если вы укажете радиус в 150px для каждого угла, в действительности вы получите радиус в 75px, так как это максимальное значение которое позволяет установить браузер для каждого угла.
Вывод
Если установить радиус границы в 100% для всех углов элемента, браузер за кулисами выполнит дополнительную работу, чтобы масштабировать углы до тех пор, пока они не сойдутся. Я не уверен, есть ли какие-то последствия в плане производительности при установке border-radius в 100% для всех ваших кругов.
По крайней мере, это кажется довольно бессмысленным, если вы заранее знаете, что браузер в любом случае будет масштабировать радиусы до 50%. Использование 50% кажется верным решением.
А для меня время исправить расставленные мною случайные CSS свойства за последнею неделю…