От автора: каскадные таблицы стилей или CSS, как их обычно называют, составляют основу современной сети. Как HTML отвечает за структуру, а JavaScript — за интерактивные функции, CSS обрабатывает все стили, делая веб-сайт таким великолепным, как он есть.
Теперь, несмотря на то, что CSS не является языком программирования (разберитесь с этим), его все еще так характеризуют. Особенно в последние годы я бы сказал, что функции CSS выросли до такой степени, что их использование без «поиска в Google», автозаполнения или других справочных материалов довольно сложно.
Среди этих растущих особенностей CSS — его система единиц измерения. Давно прошли времена «идеальных по пикселям» дизайнов, в которых использовались единицы измерения px, и теперь они являются относительными, позволяя разработчикам создавать адаптивные дизайны для множества форм-факторов современных устройств.
Итак, сегодня я хотел бы немного остановиться на основах и провести вас через все единицы измерения CSS, объяснить, что они означают, как они работают, а также их кроссбраузерную поддержку и некоторые мои личные размышления о них. Надеюсь, что вы найдете ее полезной. Давайте погрузимся в эти знания!
Абсолютные единицы
Начнем с самых «простых», абсолютных единиц. Здесь у нас есть все единицы, которые следует использовать только для определенных частей дизайна веб-сайта или при его настройке для печати.
px
Наиболее часто используемый из группы. Хотя px обычно ассоциируется с пикселем, из-за аббревиатуры, он не обязательно равен одному пикселю на экране. Означает ли это, что px на самом деле не абсолютны? Ну, вроде да, но в то же время и нет.
Это единица измерения, специально разработанная для CSS, и ее реальное значение зависит от «разрешения» экрана или принтера, также известной как PPI (пикселей на дюйм) или DPI (точек на дюйм) соответственно. В этом плане это несколько относительно. Используя экраны разного разрешения и одинаковых размеров, чтобы убедиться в этом — вы увидите, что независимо от разрешения, px должны выглядеть одинаково.
Тем не менее px, это не лучшая единица измерения для создания адаптивного дизайна. Это относительно PPI / DPI, но это только гарантирует, что он будет выглядеть одинаково при разном разрешении экрана. Это не связано с каким-либо конкретным значением, которое может быть установлено разработчиком. Это, безусловно, будет полезно для установки, например, основных font-size или минимальных / максимальных размеров элемента, но вы не должны злоупотреблять ими.
cm / mm / in
Здесь я собрал 4 единицы, так как они имеют некоторые общие свойства. Все они обычно используются в реальных измерениях. Из-за этого они, в основном, подходят для стилизации веб-сайта для печати (согласно правилу @media print {}), а не непосредственно для просмотра на экране.
Хотя использование этих единиц для печати должно привести к относительно правильному представлению в реальном мире, то же самое не относится к их использованию на экранах. Поэтому, если вы поместите линейку на экран (не делайте этого), не ожидайте, что элемент с width 1cm будет соответствовать реальному размеру 1 см.
Тем не менее, есть возможность выполнить некоторые математические вычисления, чтобы отобразить на экране «настоящие» см: 1in = 2.54cm = 25.4mm = 101.6q = 96px
Примечание: я также добавил q (четверть миллиметра) в сравнение, которая равна 1/4 мм — очень непопулярная единица, использование которой не рекомендуется — для экранов, принтеров и т.д.
И вот некоторые доказательства, подтверждающие эти расчеты:
Имейте в виду, что, хотя такие измерения возможны, их не рекомендуется использовать (если вы не применяете виртуальную линейку или что-то в этом роде).
pt / pc
Наконец, у нас есть 2 очень разных единицы по сравнению с тем, что мы уже видели: pt (points) и pc (picas).
Эти единицы в настоящее время широко не используются ни в виртуальном, ни в реальном мире, хотя они уходят корнями к типографическому дизайну. Может быть, поэтому они, в основном, используются с такими свойствами, как font-size.
Что касается математики и визуализации: 6pc = 72pt = ~ 1in
Относительные единицы
Теперь, когда абсолютные единицы остались позади, пришло время рассмотреть относительные. Когда дело доходит до поддержки браузером, здесь все становится немного сложнее . В то время как все упомянутые абсолютные единицы поддерживаются «с самого начала эры браузеров», многие относительные единицы являются довольно новыми и предназначены для удовлетворения постоянно растущего спроса на адаптивный дизайн.
%
Начнем с самой узнаваемой относительной единицы — процента %. В CSS все, что использует эту единицу, относится к:
Родителю (общее правило).
Последнему родительскому элементу, для которого значение position установлено relative, когда значние элемента установлено absolute.
Корневому элементу, когда для position устанавливается fixed.
Однако с этим есть несколько подводных камней, например, при задании значения width или height в процентах не работают, когда размеры родительского элемента определяются автоматически (установлены auto или не установлены вообще).
Но когда все работает и правильно структурировано, проценты отлично подходят для установки размеров больших контейнеров, или элементов, которые довольно высоки в иерархии DOM, или элементов, которые должны занимать всю страницу (модальные окна, панели инструментов и т.д.)
ex / ch
Далее у нас есть ex и ch- очень специфические единицы, которые действительно полезны только при работе с моноширинными шрифтами.
ex соответствует «x-height» текущего шрифта, где «x-height» означает высоту строчного x символа. С другой стороны, ch соответствует ширине символа 0. Таким образом, в обоих случаях мы имеем дело с измерением размера символа по оси x или y. Если вам интересно — да, на эти единицы влияет элемент font-size.
Поскольку обычные шрифты имеют символы разной высоты и ширины, вам либо нужно иметь очень конкретный вариант использования для этих единиц, либо использовать моноширинный шрифт и проектировать в соответствии с ним (например, онлайн-редактор кода или что-то еще).
ex, как % и другие, все абсолютные единицы поддерживаются практически повсеместно, немного хуже ситуация с ch, но поддержку все же можно считать отличной (почти 98%):
Поддержка единицы ch по данным caniuse.com
Для шрифта Nunito, который используется на этом веб-сайте, с размером шрифта 17px или 16px зависимости от размера области просмотра, здесь вы можете увидеть эти единицы в действии:
em / rem
Наконец, мы дошли до моих любимых – em и rem. Если вы когда-либо создавали современный адаптивный веб-сайт, значит, вы слышали о них и, скорее всего, использовали их.
em является относительной единицей, или я должен сказать равной элементу font-size. Так что, если font-size задан 16px, это значение 1em. Таким образом, эти единицы идеально подходят для масштабируемых проектов, а также имеют отличную поддержку браузера.
Однако с em может быть сложно справиться, так как font-size передается дочерним элементам каждый раз, когда он устанавливается. Из-за этого вы можете быстро потерять представление о том, чему на самом деле равно font-size (особенно при установке самого font-size с помощью em, делая его относительно родительского font-size). И вот тут-то и вмешивается rem.
rem (он же root em) похож на своего старшего брата em в том смысле, что он относителен font-size, но только для корневого элемента (того, который представлен <html> тегом). Использование rem в проектах позволяет вам контролировать все размеры на веб-сайте с помощью одного единственного свойства. Он имеет немного худшую поддержку, чем em, но это также то, на что я лично полагаюсь и называю лучшей относительной единицей в CSS.
Поддержка rem по данным caniuse.com
Вот пример того, как em и rem с любым font-size 17px или 16px зависит от размера области просмотра. Имейте в виду, что этот font-size установлен только на верхнем уровне веб-сайта, поэтому не удивляйтесь, что они выглядят одинаково.
vh / vw / vmin / vmax
Из последних относительных единиц у нас есть единицы, основанные на области просмотра. Они являются новейшими из всех, с немного худшей, но все еще не вызывающей беспокойства поддержкой, и предоставляют некоторые функции, которые раньше были невозможны.
Легко понять, что на самом деле означает каждая из этих единиц, просто взглянув на их названия. В каждом из них (vh, vw, vmin, vmax) часть v, как уже упоминалось, означает «окно просмотра» (область — важнейшая составляющая относительности единиц). Все относится к тому, какая именно единица измерения области просмотра, относится к — высоте, ширине, меньшему и большему размеру соответственно.
Все эти единицы просмотра очень полезны при работе с фиксированными и абсолютно позиционированными элементами, такими как модальные окна и всплывающие окна. Поддержка не является проблемой, так как она находится на уровне 97%.
Поддержка единиц области просмотра по данным caniuse.com
Что касается некоторых примеров — ниже вы должны увидеть 2 пары полос одинаковой ширины, которые зависят от вашего окна просмотра:
Другие единицы
Мы рассмотрели все единицы длины CSS (по крайней мере, из того, что я знаю), но есть и другие виды единиц CSS, которые мы должны изучить!
Время: s / мs
Единицы времени в CSS — секунды (s) и миллисекунды (ms) используются со свойствами, которые требуют от вас указания продолжительности чего-либо, например, animation или transition (и их «подсвойств»).
Это невозможно продемонстрировать с помощью столбцов, поэтому я оставлю вам только математику, которую вы почти наверняка уже знаете: 1s = 1000ms
Угол: deg / rad / grad / turn
В CSS мы также можем столкнуться с ситуациями, когда нам нужно установить какой-то угол. Для случаев, когда в transform применяют вращение или CSS градиенты, могут быть использованы единицы deg, rad, grad, и turn. Самый популярный из них – deg означает градусы, как мы все знаем. Остальные три также используются в реальном мире — радианы, градиенты и повороты (вращения на 360 градусов).
В целом, я рекомендую придерживаться deg, возможно, вы можете использовать rad и grad, если они действительно соответствуют вашим конкретным потребностям (например, значения, полученные из вычислений в JavaScript). Повороты действительно удобны, но они не так популярны, как градусы, поэтому лучше придерживаться того, что известно.
Что касается математики: 360deg = 400grad = 1turn = ~ 6.28rad
Советы по синтаксису единиц измерения
Это все, как и все единицы CSS, которые существуют сейчас и о которых я знаю. Конечно, в будущем могут появиться новые, и, возможно, я могу пропустить некоторые — если так, просто дайте мне знать в комментариях ниже.
Но в качестве небольшого резюме я хотел бы дать вам несколько советов о том, как вам следует использовать эти единицы, большинство из которых вы должны уже подсознательно понимать, даже если вы этого не знаете:
Вы можете прикреплять единицы для целых чисел и чисел с плавающей запятой, например, 1cm, -1px, 1.5s, когда данное значение имеет смысл (не добавляйте, например, -1s).
Значению может предшествовать минус (-), а также плюс (+), если вам это нравится, поэтому оба значения +1rem и -2em являются действительными.
Имена единиц не чувствительны к регистру, поэтому вы можете указать их как 1tUrN или 1REM, но разумной практикой является сохранение всех их в нижнем регистре.
Между значением и обозначением единицы не допускается пробел.
Безразмерные единицы – 0 не разрешены для единиц измерения времени.
Заключение
Итак, это все, что я хотел сказать! Я думаю, это было весело. Единицы измерения CSS — довольно простая тема, но даже такие простые вещи могут быть интересны.
Тем не менее, я придерживаюсь основ, и для меня набор px, rem, %, ms и deg — это все, что мне нужно, и все, что я действительно использую для создания дизайнов. Возможно, я время от времени, добавляю единицу окна просмотра, когда имею дело с определенными элементами, но это действительно все.
Какой у вас «стандартный» набор единиц CSS? Узнали ли Вы что-то нового, чего не знали раньше? Вы хотите видеть больше таких простых, но интересных постов в блогах? Дайте мне знать в комментариях ниже! Спасибо за чтение и удачного кодирования!
Автор: Arek Nawo
Источник: areknawo.com
Редакция: Команда webformyself.