12 малоизвестных возможностей CSS

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

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

color не только текст красит

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

HTML

<img alt="Example alt text" width="200" height="200">

<ul>
  <li>Example list item</li>
</ul>

<ol>
  <li>Example list item</li>
</ol>

<hr>

CSS

body {
  color: yellow;
  background: #444;
  font-size: 20px;
  font-family: Arial, sans-serif;
  text-align: center;
}

ul {
  border: solid 2px;
  text-align: left;
}

ol {
  text-align: left;
}

hr {
  border-color: inherit;
}

Обратите внимание, что в CSS свойство color:yellow используется лишь раз применительно к элементу body. Как видите, всё окрасилось в желтый цвет:

• Альтернативный текст на месте отсутствующего изображения
• Рамка у элементов списка
• Маркер ненумерованного списка
• Номер упорядоченного списка
• Элемент hr

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

Продемонстрированное подтверждается спецификацией:

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

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

Свойство visibility может иметь значение collapse

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

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


Ожидаемое поведение

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

Из того, что обнаружил я:

• В Хроме разницы между collapse и hidden не наблюдается (посмотрите этот баг репорт и комментарии)
• В Файрфоксе, Опере и ИЕ 11 collapse, похоже, работает как следует: ряд таблицы удаляется, а тот, что был ниже, поднимается наверх

Теперь вы знаете чуточку больше, тем не менее из-за разного поведения браузеров использовать visibility:collapse вряд ли имеет смысл.

Новые значения свойства background

В CSS 2.1 короткая запись свойства background включала в себя пять значений следующих свойств: background-color, background-image, background-repeat, background-attachment и background-position. Начиная с CSS 3 добавилось еще три значения, так что данное свойство теперь выглядит так:

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

Обратите внимание на слеш, который ставится там подобно короткой записи свойства font и border-radius [ссылка]. Этот слеш позволит вам включить значение background-size после background-position в тех браузерах, которые это поддерживают. Также вы можете добавить еще два значения: background-origin и background-clip.

Итоговый синтаксис:

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

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

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

Наверняка вы в курсе свойства clip. Используется оно так:

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

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

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

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

Помимо position:absolute вы также можете использовать position:fixed, поскольку, согласно документации, зафиксированные элементы также квалифицируются как «абсолютно спозиционированные».

Вертикальные проценты рассчитываются относительно ширины контейнера, а не его высоты

По началу это трудно понять, и я об этом писал. Возможно, вы знаете, что длины элементов, указанные в процентах, рассчитываются, исходя из длины их контейнера. Так вот, верхние и нижние внутренние отступы (padding) и те же внешние (margin) тоже рассчитываются исходя из ширины контейнера, а не его высоты.

Посмотрите демо.

Заметьте, что вложенный элемент имеет три отступа, заданных в процентах (верхний и нижний внутренние отступы и нижний внешний отступ). Слайдер изменяет только ширину контейнера. Однако её изменение влияет на просчет отступов. Зависимость именно от ширины контейнера показана в выводе величин на страницу.

Свойство border

Все мы когда-либо делали это:

.example {
  border: 1px solid black;
}

Свойство border объединяет значения свойств border-width, border-style и border-color в единую конструкцию. Но не забывайте, что каждое из свойств, значение которых содержит border, само по себе является сокращенной записью. Так, например, border-width может быть записано следующим образом:

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

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

HTML

<div class="box"></div>
<p>Please don't ever do this.</p>

CSS

body {
  font-family: Arial, sans-serif;
}

.box {
  width: 150px;
  height: 150px;
  margin: 20px auto;
  border-color: peachpuff chartreuse thistle firebrick;
  border-style: solid dashed dotted double;
  border-width: 10px 3px 1px 8px;
}

p {
  text-align: center;
}

Можно пойти еще дальше и задать эти значения по отдельности с помощью свойств border-left-style, border-top-width, border-bottom-color и так далее.

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

Свойство text-decoration — теперь сокращенная запись

Я знал: что-нибудь из этого списка обязательно вскружит вам голову. А спецификация гласит, что теперь это стандарт.

a {
  text-decoration: overline aqua wavy;
}

Данное свойство теперь может содержать в себе значения трех свойств: text-decoration-line, text-decoration-color и text-decoration-style. К сожалению, Файрфокс — единственный браузер, который поддерживает новые свойства, но при этом (видимо, для обеспечения обратной совместимости) не поддерживает сокращенный синтаксис.


Ожидаемый результат

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

Свойство border-width поддерживает ключевые значения

Это, конечно, не нечто из ряда вон выходящее, да и не ново, тем не менее помимо обычных значений ширины (напр., 5px или 1em) border-width поддерживает три ключевых значения: medium, thin и thick.

По факту, начальное значение свойтва border-width — medium. Ниже продемонстрировано значение thick:



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

«Никто не использует border-image»

Не так давно я писал о свойстве border-image на SitePoint. Оно поддерживается всеми современными браузерами, за исключением IE 10 и ниже. Но кому какая разница?

border-image — весьма забавное свойство, которое позволяет обрамлять контейнер неким изображением.



Также посмотрите демо.

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

Есть такое свойство empty-cells

И оно поддерживается всеми браузерами, включая IE 8:

table {
  empty-cells: hide;
}

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

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

Свойство font-style поддерживает значение oblique

Наиболее используемые значения данного свойства — normal и italic. Но есть еще и oblique.



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

Спецификация объясняет данное поведение следующим образом:

… выбирает шрифт, помеченный как наклонный, иначе — курсивный.

Описание курсива в спецификации — примерно о том же. Термин «наклонный» (oblique) — из типографики, обозначает, собственно, наклоненный текст, но не настоящий италик.

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

Не знаю шрифтов, которые бы имели наклонное начертание, но я могу ошибаться. (Ошибается. Сам привести конкретных названий шрифтов не могу (они однозначно существуют), но в комментариях к оригинальной статье в пример приводят шрифт Helvetica, — прим. переводчика) Насколько я понял, шрифт не может иметь оба начертания: курсив и наклонное — одновременно, поскольку наклонное начертание является искусственной заменой курсива в тех шрифтах, в которых его нет. (Здесь тоже несколько сомнительно, особенно что касается замены курсива, — прим. переводчика)

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

Большое спасибо Ogi за комментарии относительно путаницы в терминологии, теперь это исправлено и вместо «гарнитуры» — «начертание», а вместо «италика» — «курсив», — прим. переводчика

word-wrap — то же, что и overflow-wrap

Свойство word-wrap используется не так часто, однако в некоторых случаях может оказаться полезным. Очень распространенный пример — разбиение длинной непрерывной строки текста во избежание выхода за пределы контейнера.

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

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

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

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

Много ли нового узнали вы из всего этого?

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

Добро пожаловать в комментарии!