12 малоизвестных фактов о CSS

С тем, что CSS не слишком сложный язык мало кто будет спорить. Но если вы писали на нем довольно продолжительное время, наверняка до сих пор открываете для себя все новые и новые его особенности - свойства, которыми ранее вы не пользовались, значения которые не принимали во внимание, или специфические детали, о которых даже не слышали.

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

Конечно же, не все из них найдут практическое применение, но, быть может, некоторые окажутся полезными для вас в будущем.

1. Свойство color не только для текста

Давайте начнем с самого простого. Свойство color используется очень часто каждым CSS-разработчиком. Некоторые из вас, кто ещё не столь искушен в CSS, могут не осознавать этого, однако color определяет не только цвет текста.

Рассмотрим пример.

Заметьте, что мы используем только одно свойство color, в элементе body, установленное в значение yellow.

И как вы видите, все на странице принимает желтый цвет:

• alt-комментарии к незагруженным изображениям;
• граница списка;
• точки или маркеры ненумерованного списка;
• номера позиций нумерованного списка;
• элемент hr.

Интересно то, что hr по умолчанию не наследует свойство color, но я заставил его это сделать, используя border-color: inherit. Для меня эта особенность кажется немного странной.

Все описанное выше отображено в спецификации.

Не могу придумать ничего, что ещё можно назвать «передний план», но если у вас есть идеи относительно этого - поделитесь в комментариях.

2. Свойство visibility может принимать значение «collapse»

Думаю, вы использовали свойство visibility не одну сотню раз. Наиболее распространено его использование со значениями visible (по умолчанию у всех элементов) и hidden, которое делает элемент невидимым и одновременно позволяет ему занимать свое пространство в разметке (в отличие от display: none).

Третий, и наиболее редкий вариант использования свойства visibility - значение collapse. Работает оно так же, как и hidden со всеми элементами, за исключением ячеек, групп ячеек, столбцов и групп столбцов таблиц.

В случае с элементами таблиц, значение collapse предполагает работу, схожую с display: none - область, занятая свернутой ячейкой/столбцом таблицы может быть занята другим содержимым разметки.

Но что же происходит на самом деле? Браузеры отображают значение collapse совсем не одинаково.

Рассмотрим пример.

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

Я прокомментирую этот совет, исходя из моего личного опыта:

• Google Chrome не видит разницы между collapse и hidden (смотрите отчет об ошибках и комментарии);
• Firefox, Opera, и IE11 обрабатывают collapse как и должны: ячейка убрана и на ее место сдвинута нижестоящая.

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

3. Сокращенное свойство background получило новые значения

В спецификации CSS 2.1 сокращенное свойство background имеет 5 значений - background-color,background-image, background-repeat, background-attachment, и background-position.

В CSS3 и более поздних версиях добавлены ещё три значения. Итого их стало восемь.

Вот полный синтаксис:

background: [background-color] [background-image] [background-repeat]             [background-attachment] [background-position] / [ background-size]             [background-origin] [background-clip];

Заметьте наличие прямого слеша. Он может использоваться так же, как и в случае со свойствами font и border-radius. Слеш позволит вам включить значение background-size после определения позиции, но только в браузерах, которые это поддерживают.

Вдобавок ко всему прочему, у вас в распоряжении есть два необязательных свойства background-origin и background-clip.

Синтаксис таков:

.example {
background: aquamarine url(img.png)               
no-repeat               
scroll
center
center / 50%               
content-box 
content-box; }

Можете опробовать это в своем браузере, используя этот демо-режим.

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

4. Свойство clip применимо только к элементам с абсолютным позиционированием

Упоминая background-clip, вы наверняка вспомните, что видели перед ним значение clip.

Выглядело это примерно так.

.example { clip: rect(110px, 160px, 170px, 60px); }

Этот код будет «обрезать» элемент в определенных областях (здесь описано более подробно).

Единственное, о чем хочу вас предупредить: необходимо позиционировать «обрезаемый» элемент абсолютно.

Примерно таким образом:

.example {
position: absolute;
clip: rect(110px, 160px, 170px, 60px);
}

В примере ниже вы можете увидеть, как запретить «обрезание», когда включено свойство position: absolute.

Просмотреть пример.

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

5. Процентное значение вертикальных величин задается относительно ширины контейнера, а не высоты элемента

То, о чем я писал ранее, могло ввести вас в некоторое заблуждение.

Возможно, вам известно, что при определении ширины элемента в процентах, значение рассчитывается на основе ширины контейнера.

Но и значения таких свойств, как margin-top, margin-bottom, padding-top и padding-bottom, при указании процентных значений, также рассчитываются на основе ширины этого же контейнера, а не его высоты, как могло показаться логичным.

Для наглядности, в этом примере, вы сможете использовать слайдер для установки значения width.

Просмотреть пример.

Заметьте, что я задаю в процентах три значения для внутренней области (margin-top, margin-bottom и padding-bottom). Слайдер меняет только значение ширины контейнера.

Величина остальных параметров области меняется относительно ширины, как задано в процентном соотношении. Это также отображено в примере.

6. Свойство border

Все мы когда-либо использовали подобный код:

.example {   border: solid 1px black; }

Свойство border - сокращенный вариант записи нескольких свойств, который определяет значения border-style, border-width, и border-color.

Но не забывайте о том, что каждое свойство, которое вы описываете с помощью сокращенного свойства border, само по себе является сокращенным свойством.

Таким образом, border-width может быть определено отдельно:

.example {   border-width: 2px 5px 1px 0; }

Код выше установит различные величины ширины для каждой из четырех рамок. Для свойств border-color и border-style это также работает, как мы видим из примера ниже:

Просмотреть пример.

Вдобавок ко всему, каждое из этих свойств может быть разбито на border-left-style, border-top-width, border-bottom-color и так далее.

Но соль в том, что вы не можете использовать обычное свойство border для установки различных значений для различных сторон.

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

7. Свойство text-decoration теперь является сокращенным

Уверен, что код ниже потрясет вас. Теперь это стандарт, отображенный в спецификации:

a { text-decoration: overline aqua wavy; }

Теперь это свойство содержит в себе три: text-decoration-line, text-decoration-color, и text-decoration-style.

Странно то, что Firefox, пока что единственный браузер, поддерживающий все эти три свойства, не поддерживает вариант их краткой записи. Предполагаю, что причина в вопросе обратной совместимости.

Запустите этот демо-пример в Firefox.

В этой демонстрации использована полная форма записи. В конечном итоге, это будет очень сложно, потому что на данный момент любой браузер, который поддерживает свойства text-decoration, будет обнулять их объявление полностью, что собственно не хорошо для обратной совместимости.

8. Свойство border-width работает с ключевыми значениями

Это не потрясло мир, это не ново, но, вдобавок к стандартным числовым значениям длины (к примеру, 5px или 1em), свойство border-width теперь допускает три ключа: medium, this и tricks.

В действительности, значение border-width по умолчанию – «medium». В демонстрационном примере используется «thick».

Спецификация не требует от браузеров приведения ключей к определенным значениям, но, как я могу видеть, все браузеры используют 1px, 3px и 5px соответственно.

9. Никто не использует свойство border-image

Я писал о свойстве border-image из спецификации CSS3 ранее. Эта фича поддерживается всеми браузерами за исключением IE 10.

Но разве кому-нибудь это нужно?

Это лаконичное свойство позволяет вам создавать подвижные рамки для изображений. Воспользуйтесь демо-примером, чтобы понять, как это выглядит.

Неожиданно, но border-image выглядит как некое новшество, которое большинство боится использовать. Возможно, я и ошибаюсь.

Если вам доводилось встречать используемое в коде действующих проектов свойство border-image, или же вы использовали его сами - дайте знать мне об этом в комментариях.

10. А как вам свойство empty-cells?

Это свойство поддерживается всеми браузерами, в том числе и IE8:

table {   empty-cells: hide; }

Как вы могли догадаться, оно используется для HTML-таблиц. Оно определяет будут показываться пустые ячейки или нет.

Попробуйте покрутить кнопку в этом демо-режиме для того, чтобы наглядно увидеть как работает изменение свойства empty-cells:

Просмотреть пример.

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

11. Свойство font-style теперь может принимать значение «oblique»

Практически каждый раз, когда вы видите свойство font-style, оно используется в значении «normal» или «italic». Но оно также можете иметь значение «oblique»:

Просмотреть пример.

Что это означает на самом деле и почему выглядит как обычный “italic”?

В спецификации о значении «oblique» говорится ...

«…выбирается тип шрифта «наклонный» либо же используется тип шрифта «курсив», если «наклонный» отсутствует».

Описание значения «italic» в спецификации примерно такое же. Слово «oblique» типографский термин и представляет собой наклонный шрифт, но это не курсив.

В связи с тем, как CSS обрабатывает наклонный шрифт, он может быть взаимозаменяем с курсивом, если (как отражено в спецификации), используемый шрифт не имеет, собственно, наклонного типа.

Никогда не слышал о каком-либо шрифте, который бы имел наклонный тип, но, опять же - возможно я ошибаюсь.

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

Из чего, если я не все-таки не ошибаюсь, следует, что если шрифт не имеет вида «курсив», а в CSS вы прописали ему font-style: italic - браузер отобразит его как font-style: oblique.

12. word-wrap то же самое, что и overflow-wrap

Не могу отнести свойство word-wrap к часто используемым, но в некоторых моментах оно может оказать большую помощь.

Один из самых распространенных примеров, который приходят на ум – использование word-warp в случаях, когда длинную строку, а-ля URL-адрес, нужно уместить в некую ограниченную область.

Смотрите пример.

Так как данная вещь является оригинальной разработкой компании Microsoft, то поддерживается всеми браузерами вплоть до IE 5.5.

Несмотря на кросс-браузерность, W3C решила заменить word-wrap на overflow-wrap и, предполагаю, из-за того, что употребление прежнего наименования было признано неверным.

.overflow-wrap имеет тот же самый набор значений, что word-wrap, а word-wrap теперь называется «альтернативным синтаксисом» к overflow-wrap.

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

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

Как много нового вы узнали?

Скажите, Вы почерпнули что-то новое из этого поста? Надеюсь что почерпнули.

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

Было бы интересно знать, сколько новых моментов увидели для себя в этой статье наши читатели. Расскажите в комментариях, что вы для себя открыли (к примеру, 6/12, 4/12) или же все оказались вам в новинку.

РедакцияПеревод статьи «12 Little-Known CSS Facts»