CSS – это не чрезмерно сложный инструмент в арсенале Web-разработчика. Тем не менее, даже, если вы его используете уже много лет, возможно, некоторые особенности могут быть вам неизвестны.

Именно эти особенности мы разберем в данной статье.

Итак, начнем с простых вещей и постепенно перейдем к более сложным.

1. Внешние и внутренние отступы блока в процентах, рассчитываются относительно ширины, а не высоты

Как хорошо известно, ширина для блока в процентах рассчитывается относительно родительского контейнера.

В случае с использованием процентных единиц для padding-top, padding-bottom, margin-top, margin-botton, расчет производится относительно ширины родительского блока.

See the Pen Внешние и внутренние отступы блока в процентах by Sergey Bogdanov (@sbogdanov108) on CodePen.

Обратите внимание на то, что во внутреннем блоке .box объявлены три значения с процентами:

.box {
  …
  padding-top: 10%;
  padding-bottom: 10%;
  margin-bottom: 5%;
}

2. Свойство border и его расширенные возможности

Стандартное использование свойства border таково:

.box {
  border: solid 1px red;
}

В этом случае оно дает быстрый доступ к таким свойствам, как border-style, border-width и border-color.

Но это ещё не всё! Каждое из этих свойств, само по себе является быстрым доступом к более детальному определению параметров. Например, через border-width можно установить ширину линии каждой стороны по отдельности:

.box {
  border-width: 1px 2px 3px 0;
}

Тоже самое относится также и к border-color и border-style, как показано в этом прекрасном демо 🙂

See the Pen Свойство border by Sergey Bogdanov (@sbogdanov108) on CodePen.

3. Свойство для таблиц empty-cells

Это свойство отвечает за то, будет ли показана пустая ячейка в таблице или нет:

table {
  empty-cells: hide;
}

Свойство empty-cells поддерживается всеми браузерами, включая Internet Explorer 8 и выше.

See the Pen Свойство для таблиц empty-cells by Sergey Bogdanov (@sbogdanov108) on CodePen.

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

В подавляющем большинстве случаев, для свойства font-style используются значения normal или italic. Но это свойство может также принимать значение oblique.

See the Pen font-style: oblique by Sergey Bogdanov (@sbogdanov108) on CodePen.

Почему же данное свойство дает эффект, похожий на italic? Спецификация объясняет, что данное свойство применяет набор шрифта к тексту, помеченного как oblique. Если такого шрифта нет, тогда происходит выбор набора italic. Или производится эмуляция наклонного шрифта при отсутствии набора italic.

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

5. Свойство word-wrap идентично overflow-wrap

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

See the Pen word-wrap & overflow-wrap by Sergey Bogdanov (@sbogdanov108) on CodePen.

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

На данный момент, свойство word-wrap переименовано в overflow-wrap, содержится в спецификации CSS3 и является альтернативным синтаксисом для overflow-wrap.

6. Свойствоoutline-offset

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

Новое свойство позволяет определить насколько далеко будет располагаться outline от элемента:

See the Pen Свойство outline-offset by Sergey Bogdanov (@sbogdanov108) on CodePen.

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

И главный недостаток этого свойства заключается в том, что оно не поддерживается никакой из версий Internet Explorer.

7. Свойство table-layout

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

Работу данного алгоритма объяснить на словах довольно-таки трудно, поэтому лучше всего обратиться к следующему примеру:

See the Pen Свойство table-layout by Sergey Bogdanov (@sbogdanov108) on CodePen.

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

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

Для начала важно понимать работу свойства vertical-align НЕ на табличных ячейках:

• Свойство работает только с элементами inline и inline-block
• Оно не оказывает влияния на контент элемента
• Изменяет выравнивание элемента относительно других inline и inline-block элементов
• На него могут влиять свойства текста, шрифтов, такие, как line-height
• Также на него воздействуют размеры примыкающих inline и inline-block элементов

See the Pen Свойство vertical-align - часть 1 by Sergey Bogdanov (@sbogdanov108) on CodePen.

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

See the Pen Свойство vertical-align - часть 2 by Sergey Bogdanov (@sbogdanov108) on CodePen.

Как было показано в предыдущем демо, в случае применения данного свойства к табличным ячейкам, доступно всего четыре значения. Несмотря на то, что при значении baseline затрагиваются соседние ячейки, основной эффект применяется к содержимому ячейки с голубым фоном.

9. Псевдо-элемент ::first-letter умнее, чем вы предполагаете. Предупреждение от Сары Коннор…

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

Чтобы разобраться подробней, рассмотрим следующий пример:

See the Pen Псевдо-элемент ::first-letter by Sergey Bogdanov (@sbogdanov108) on CodePen.

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

10. Вы можете использовать “неправильные” символы для разделителей в списке классов

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

Рассмотрим пример обычного HTML кода со списком классов:

<div class="col col-4 col-8 c-list bx bx--rounded bx--transparent"></div>

Теперь добавим “неправильных” символов в качестве разделителей для классов:

<div class="col col-4 col-8 ** c-list ** bx bx--rounded bx--transparent"></div>
<div class="col col-4 col-8 || c-list || bx bx--rounded bx--transparent"></div>
<div class="col col-4 col-8 && c-list && bx bx--rounded bx--transparent"></div>

Данные вариации разделителей будут работать правильно, в чем можно убедится в следующем демо:

See the Pen Неправильные символы для разделителей HTML-классов by Sergey Bogdanov (@sbogdanov108) on CodePen.

Такие разделительные символы нельзя использовать в таблицах стилей для обозначения классов. В следующем примере показано неправильное применение подобных символов:

./ {
  color: red;
}

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

.\/ {
  color: red;
}

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

<div class="♥ ★"></div>

Более того, подобный Unicode символы можно использовать в таблицах стилей. Например, так:

.♥ {
  color: green;
}

.★ {
  color: black;
}

На этом всё. Мы разобрали несколько интересных, порой немного сумасшедших и нелепых случаев применения CSS. Желаю дальнейших успехов в изучении web-разработки!

Исходные коды к статье доступны по ссылке: http://codepen.io/collection/DBaOVQ/