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

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

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

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

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

Взгляните на демо ниже:

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

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

Это свойство определяет цвет текстового наполнения элемента на переднем плане. Кроме того, он используется, чтобы обеспечить потенциальное косвенное значение …для любых других свойств, которые принимают значение color. Я не могу вспомни ничего такого, что могло бы быть квалифицировано как «передний план», но если вы вспомните, дайте нам знать в комментариях.

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

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

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

К сожалению, не все браузеры обрабатывают collapse должным образом. Посмотрите следующее демо:

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

В Chrome, не имеет никакого значения примените ли вы collapse или hidden (См. этот отчет об ошибке и комментарии)

В Firefox, Opera, и ИЕ11, collapse вроде должно работать как следует: Строка удаляется, а нижняя строка движется вверх.

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

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

В CSS2.1 сокращенное свойство background принимает 5 значений — background-color,background-image, background-repeat, background-attachment, и background-position. В CSS3 и выше на данный момент входят еще три значения, что в общей сложности составляет 8. Вот как выглядит полный набор значений:

Обратите внимание на «/», подобно тому, как сокращенные формы font и border-radius могут быть написаны. Косая черта позволяет включать значение background-size. К тому же, у вас есть два способа для объявления background-origin и background-clip. Таким образом, синтаксис будет следующий:

Вы можете протестировать в браузере следующее демо:

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

4. Свойство clip работает только для элементов, имеющих position: absolute

Говоря о background-clip, скорее всего вы уже видели свойство clip раньше. Оно выглядит следующим образом:

Этот код «обрежет» элемент в заданных местах (подробнее здесь). Единственный подвох состоит в том, что элемент, которому вы задаете clip должен быть спозиционирован абсолютно. То есть, вам нужно проделать следующее:

Вы можете видеть, как обрезка отменяется при отключении position: absolute:

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

5. Величины в процентах для верхних и нижних отступов рассчитываются относительно ширины, а не высоты

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

Вот пример того, как вы можете изменять параметры с помощью слайдера и видеть их работу:

Обратите внимание, что заданы 3 «вертикальных» процентных величины, объявленных для внутреннего блока (верхний и нижний padding, и нижний margin). Когда слайдер двигается, он изменяет только ширину контейнера. Но другие величины изменяются в соответствии, страница показывает, что эти величины, объявленные в процентах, основываются на ширине контейнера.

6. Свойство border «поглощает» значения

Мы все когда-то делали такое:

Свойство border является сокращением для border-style, border-width, и border-color – все в одном объявлении:

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

Это задаст разную ширину каждой из четырех границ. То же самое верно и для border-color и border-style, что демонстрирует следующее демо:

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

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

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

Я знал, что хоть один пункт в этом списке поразит ваше воображение. Теперь это – сокращение, согласно спецификации:

Это свойство теперь представляет собой 3 свойства: text-decoration-line, text-decoration-color, и text-decoration-style. К сожалению, единственным браузером их поддерживающим является Firefox, и (я полагаю для обратной совместимости), пока не поддерживает их в виде сокращения. Посмотрите следующее демо в Firefox:

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

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

Не совсем открытие Америки, и далеко не новое, но, вдобавок к стандартным величинам длины (например, 5px или 1em), свойство border-width принимает три ключевых значения: medium, thin и thick. В частности, начальное значение свойства border- “medium”. Демо пример ниже показывает значение “thick”.

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

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

Я описал о свойстве CSS3 border-image на SitePoint некоторое время назад. Это свойство поддерживается всеми современными браузерами за исключением IE10 и ниже. Но кому это интересно? Оно кажется классной возможностью, позволяющей создавать «резиновые» границы в виде изображений. Попробуйте изменить размер в этом демо, чтобы протестировать его:

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

10. Существует свойство empty-cells

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

Как вы уже возможно узнали, оно используется для таблиц HTML. Оно сообщает браузеру о том, где показывать или скрывать ячейки таблицы, которые не имеют контента внутри. Попробуйте включить-отключить это свойство, чтобы увидеть эффект, создаваемый empty-cells:

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

11. Свойство font-style принимает значение “oblique”

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

Но что конкретно оно означает? Но почему оно выглядит также как “italic”?

Спецификация объясняет, что свойство “oblique”…

«…выбирает тот шрифт, который обозначен как “oblique” в наборе шрифтов, или курсив, если шрифта “oblique” нет в наборе.»

Описание “italic” в спецификации практически совпадает. Термин “oblique” – типографический, который обозначает наклонный текст, но не совсем курсив. Благодаря тому, как CSS обращается с наклонным текстом, то наклонный текст и курсив взаимозаменяемы, иначе (как объясняет спецификация) использоваться будет шрифт, обозначенный как “oblique”.

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

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

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

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

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

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

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

Сколько вещей из перечисленных были для вас в диковинку? Узнали ли вы что-то новое из этого поста? Я надеюсь, что так. Наверное, наиболее опытные разработчики CSS уже знали многие, если не все вышеперечисленные моменты. Но скорее всего тем, кто недавно начал работать c CSS это будет полезно.

Автор: Louis Lazaris

Источник: //www.sitepoint.com/

Редакция: Команда webformyself.

Комментарии Вконтакте: