12 малоизвестных фактов о CSS (часть 1)

Больше года назад была опубликована статья \"12 малоизвестных фактов о CSS\", которая и до сегодняшнего дня остается одной из наиболее популярных статей на SitePoint. После публикации этой статьи CSS существенно изменился, поэтому настало время для новой партии малоизвестных фактов. Мы уверенны, что для большинства из нас хотя бы некоторые из этих пунктов станут открытием.

1. В свойстве border-radius можно использовать синтаксис слеш

Об этом уже упоминалось в нескольких статьях, но до сих пор большинство новичков и даже некоторые опытные разработчики не знают о существовании такой функции.

Верьте или нет, но следующий кусок кода с border-radius вполне верен:

.box {
  border-radius: 35px 25px 30px 20px / 35px 25px 15px 30px;
}

Если вы никогда такого не видели, это может выглядеть слегка странным. Поэтому вот объяснение из спецификации:

Если значения указываются через слеш, то значения перед слешем задают горизонтальный радиус, а значения после слеша вертикальный радиус. Если слеша нет, то значения задают оба радиуса.

В спецификации также приведена следующая схема:

Поэтому использование слеша в значении позволяет создавать несимметричные скругленные углы. Если вы хотите более подробное описание этой функции, посмотрите на это небольшое удобное интерактивное демо от MDN.

Большинство генераторов border-radius не позволяют задавать такие опциональные значения. Генератор MDN это единственный, который делает это, из тех, что мы нашли.

2. Свойство font-weight принимает относительные ключевые слова

Как правило, если вы видите определение свойства font-weight, значение указывается либо как normal, либо bold. Также иногда можно увидеть целое значение кратное 100: 100, 200 и пр., до 900.

Однако люди часто забывают про два других значения - bolder и lighter.

Согласно спецификациям, эти ключевые слова определяют более жирный или менее насыщенный шрифт, чем унаследованное значение. Это играет особо важную роль, когда речь идет о шрифте с несколькими видами насыщенности, например, более жирный, чем просто жирный , и менее насыщенный, чем обычный текст.

В сотенных значениях жирный соответствует 700, а нормальный соответствует 400. Поэтому, если у вашего шрифта значение 300, но не ниже, значение lighter даст 300, если унаследованное значение равно 400. Если нет более легкой насыщенности (т.е. 400 это наименее насыщенное значение), тогда она просто останется равной 400, и значение lighter не сработает.

Посмотрите на следующее демо от CodePen.

В этом примере использован шрифт под названием Exo 2, у которого есть 18 различных стилей. В демо представлены только некурсивные стили, которые достаточно хорошо демонстрируют разные типы насыщенности для каждого сотенного значения. Обратите внимание, что демо включает 12 вложенных элементов box (ячейка) с различными значениями font-weight, включая bolder и lighter , поэтому вы можете наблюдать, как они влияют на насыщенность текста в различных контекстах наследования. Ниже приведен CSS из этого примера. Обратите внимание на комментарии в коде, и не забывайте, что каждая последующая ячейка вложена в предыдущую:

.box {
  font-weight: 100;
}
.box-2 {
  font-weight: bolder; /* соответствует 400 */
}
.box-3 {
  font-weight: bolder; /* соответствует 700 */
}
.box-4 {
  font-weight: 400;
}
.box-5 {
  font-weight: bolder; /* соответствует 700 */
}
.box-6 {
  font-weight: bolder; /* соответствует 900 */
}
.box-7 {
  font-weight: 700;
}
.box-8 {
  font-weight: bolder; /* соответствует 900 */
}
.box-9 {
  font-weight: bolder; /* соответствует 900 */
}
.box-10 {
  font-weight: lighter; /* соответствует 700 */
}
.box-11 {
  font-weight: lighter; /* соответствует 400 */
}
.box-12 {
  font-weight: lighter; /* соответствует 100 */
}

В данном случае ключевые слова bolder и lighter соответствуют только значениям 100, 400, 700 и 900. При наличии 9 различных стилей эти ключевые слова никогда не будут соответствовать значениям 200, 300, 500, 600 и 800.

Это происходит потому, что вы говорите браузеру выбрать следующий шрифт из набора, который считается либо жирным , либо тонким . Поэтому он выбирает не следующий более жирный или более тонкий, а просто жирный или ненасыщенный шрифт по отношению к унаследованному. Однако если самый ненасыщенный шрифт начинается со значения 300 (как в случае с Open Sans), а унаследованное значение равно 400, тогда значение менее насыщенного шрифта будет соответствовать 300.

Поначалу это все может быть немного сложно, но вы можете поиграться с демо, чтобы понять, как работают эти ключевые слова.

3. Существует свойство outline-offset

Свойство outline известно практически всем благодаря его способности помогать в отладке (оно не влияет на формат страницы). Однако в спецификации добавили еще одно свойство outline-offset (смещение границы), которое делает именно то, что подразумевает его название оно позволяет определять, насколько далеко от элемента следует сместить границу.

В представленном демо можно подвигать слайдер диапазона влево или вправо, чтобы посмотреть на изменение смещения границы. В данном примере диапазон захватывает от 0px до 30px, но в CSS вы можете сделать его любого размера. Обратите внимание, что, несмотря на то, что свойство outline является собирательным, оно не включает outline-offset, вам придется каждый раз определять outline-offset отдельно.

Единственным существенным недостатком свойства outline-offset является тот факт, что он поддерживается всеми браузерами, за исключением Internet Explorer (даже IE 11).

4. Существует свойство table-layout

Вы наверное думаете Это не новость. \"Я знаю все о display: table. Это простейший способ центрирования по вертикали!\". Но речь не об этом. Обратите внимание, что мы говорим о свойстве table-layout , а не display.

Свойство table-layout это свойство CSS, которое не так просто объяснить, поэтому давайте сначала заглянем в спецификации, а потом рассмотрим пример. В спецификации сказано:

Благодаря этому (быстрому) алгоритму, горизонтальная выкладка таблицы не зависит от содержимого ячеек; она зависит только от ширины таблицы, ширины столбцов и границ или промежутков между ячейками.

В следующем демо, в CSS добавлено свойство таблицы table-layout: fixed. Нажмите на кнопку-переключатель, чтобы включить или выключить его.

Вы видите в этом примере преимущество использования свойства table-layout: fixed по сравнению со стандартным auto. Этот вариант подойдет не для каждого случая и далеко не всегда будет необходим, но его стоит запомнить на случай работы с таблицами, в которых есть ячейки с данными разной ширины.

5. Свойство vertical-align работает по-разному на ячейках таблицы и на других элементах

Если вы начали разрабатывать сайты с середины 2000-х или раньше, или если вы написали немало HTML-писем, тогда вы наверняка задумывались, что свойство vertical-align это стандартное обновление старого HTML4-атрибута valign, который сегодня указывается, как устарелая, неподдерживаемая в HTML5 функция.

Однако в CSS vertical-align на самом деле работает не так. За исключением таблиц. Мне кажется, что это довольно странно, но я считаю, что это имеет больше смысла, чем если бы эта функция вообще не работала на таблицах.

Так в чем же разница, если использовать это свойство в обычных элементах и ячейках таблицы?Если свойство vertical-align применяется не к ячейкам таблицы, оно соблюдает следующие базовые правила:

• Оно работает только в строковых или строчно-блочных элементах.
  
  • Оно не влияет на содержимое элемента, но вместо этого изменяет выравнивание самого элемента по отношению к другим строковым или строчно-блочным элементам.
    
  • На него могут влиять настройки текста/шрифта, такие как высота строки, а также размер прилегающего строчного или строчно-блочного элемента.

Вот демо.

Свойство vertical-align определяется как элемент input. Нажимая одну из кнопок, вы можете изменять значение на то, которое написано на кнопке. Вы заметите, что каждое из значений изменяет положение элемента input.

Когда речь идет о таблицах, vertical-align работает абсолютно по-другому. В таком случае вы применяете свойство/значение к одной или нескольким ячейкам таблицы, и на содержимое ячеек таблицы влияет выбранный вариант выравнивания. Как показано в демо, только четыре значения работают в табличных ячейках, и несмотря на то, что это влияет на одинаковые ячейки со значением baseline, основной эффект проявляется на выравнивании контента внутри ячейки, на которую вы применили vertical-align.

6. Псевдо-элемент ::first-letter умнее, чем вы думаете

Псевдо-элемент ::first-letter позволяет оформлять первую букву элемента, и дает возможность создавать эффект инициала, который использовался в печати на протяжении многих лет. Самое интересное в этом свойстве то, что в браузерах существует достаточная поддержка того, что представляет собой первую букву элемента.

Примеры в CodePen.

Четыре основных браузера поддерживают эту функцию одинаково, и это отлично. Было бы немного странным, если бы какой-либо элемент, вроде открытой скобки, воспринимался как первая буква. Тогда это стоило бы назвать первым символом, что должно быть вообще отдельным классом.