12 малоизвестных фактов о CSS (часть 2)
В предыдущей части этой статьи мы начали разговор о двенадцати малоизвестных особенностей CSS, которые могут помочь вам в работе над версткой сайта. Сегодня мы расскажем о некоторых особенностях работы анимацией, необычном способе именования классов, некоторых особенностях псевдо-элементов и о том, почему все-таки нужно обращать внимание на реестр при написании кода.
7. В списках классов HTML можно использовать недопустимые символы
Эту концепцию описывал Бен Эверард еще в 2013 году, и я считаю, что ее стоит рассмотреть более подробно. Статья Бена была об использовании символа слеша (\"/\") для разделения классов HTML на группы, чтобы код был более удобочитаемым. Как он утверждает, несмотря на то, что неэкранированный слеш является недопустимым символом, браузеры не цепляют его, а просто игнорируют. Поэтому пример HTML может выглядеть следующим образом:
<div class=\"col col-4 col-8 c-list bx bx--rounded bx--transparent\">А со слешами это будет выглядеть так:
<div class=\"col col-4 col-8 / c-list / bx bx--rounded bx--transparent\">Чтобы добиться такого же эффекта, можно использовать любые символы (допустимые или нет):
<div class=\"col col-4 col-8 ** c-list ** bx bx--rounded bx--transparent\">
<div class=\"col col-4 col-8 || c-list || bx bx--rounded bx--transparent\">
<div class=\"col col-4 col-8 && c-list && bx bx--rounded bx--transparent\">Все эти варианты работают довольно хорошо. Это можно проверить в демо.Конечно, такие разделители нельзя использовать в таблицах стилей в качестве классов, почему я и назвал их недопустимыми . Поэтому, следующий вариант будет неправильным и не сработает на указанном стиле:
./ {
color: blue;
}Если вам нужно использовать символы такого типа в классах HTML в целях определения их направления в CSS, их можно вставлять экранированными с помощью этого инструмента. Поэтому, приведенный выше пример будет работать только в случае, если CSS будет выглядеть следующим образом:
.\/ {
color: blue;
}И даже больше, символы Unicode вообще не нужно экранировать, поэтому вы можете сделать вот такую глупость:
<div class=\"♥ ★\"></div>После чего сделать следующее в CSS:
.♥ {
color: hotpink;
}
.★ {
color: yellow;
}С другой стороны, вы можете экранировать такие виды символов вместо того, чтобы вводить их прямо так. Следующий код приведет к тому же результату, что и предыдущий блок:
.\2665 {
color: hotpink;
}
.\2605 {
color: yellow;
}8. Итерации анимации могут иметь дробные значения
Если вы создавали в CSS анимацию по ключевым кадрам, вы наверняка знаете, что свойство animation-iteration-count можно использовать для определения количества раз воспроизведения анимации:
.example {
animation-iteration-count: 3;
}Целое число в этом примере сообщает, что анимация будет воспроизводиться три полных раза. Но вряд ли вы знали, что можно использовать дробные числа:
.example {
animation-iteration-count: .5;
}В этом случае анимация будет проигрываться полраза (то есть, она остановится на середине первой итерации). Давайте рассмотрим пример в демо, в котором анимированы два мяча на странице. Количество итераций верхнего мяча равно 1, а нижнего 0,5.
Тут интересно, что длительность итерации не основана на свойстве/значении анимируемого объекта. Другими словами, если вы анимируете объект длиной 100 пикселей, середина пути не обязательно будет именно на 50 пикселях. Например, в предыдущей анимации используется функция управления временем linear, поэтому это обеспечивает, чтобы второй мяч визуально останавливался на середине пути.
Вот те же две анимации, в этот раз с использованием функции управления временем ease.
Обратите внимание, что второй мяч проходит мимо средней точки, прежде чем остановиться. Опять же, это обосновано использованием другой функции управления временем.
Если вы понимаете функции управления временем, тогда вы поймете, что значение ease-in-out поместит мяч в то же положение, что и linear. Поиграйтесь с дробными значениями и функциями управления временем, и посмотрите на различные результаты.
9. Сокращение может сломать анимацию из-за ее названия
Некоторые разработчики заметили это случайно, и теперь в спецификации по этому поводу есть предупреждение. Скажем, у вас есть следующий код анимации:
@keyframes reverse {
from {
left: 0;
}
to {
left: 300px;
}
}
.example {
animation: reverse 2s 1s;
}Обратите внимание, что анимация названа reverse. С первого взгляда кажется, что все в порядке, но посмотрите, что произойдет, если использовать вышеприведенный код на живом примере.
Анимация не работает, так как reverse это действующее значение ключевого слова свойства animation-direction. Именно это происходит с названиями любой анимации, которые совпадают с действующими значениями ключевых слов, используемых в синтаксисе сокращений. Но этого не происходит, если использовать полное название.
Названия анимаций, которые нарушают синтаксис сокращений, включают любые ключевые слова функций управления временем, в том числе infinite, alternate, running, paused и так далее.
10. Диапазоны элементов можно выбирать
Я не знаю, кто использовал это первым, но я впервые это увидел в этом демо Гуннара Биттерсмана. Предположим, у вас есть упорядоченный список из 20 элементов, и вам нужно выбрать элементы с 7 по 14 включительно. Вот как это можно сделать с помощью одного селектора:
ol li:nth-child(n+7):nth-child(-n+14) {
background: lightpink;
}В Safari есть баг, который не дает этой технике работать. К счастью, в этом может помочь решение, которое предложил Мэтт Помаски: нужно просто задать цепь в обратном порядке, чтобы она выглядела следующим образом:
ol li:nth-child(-n+14):nth-child(n+7)В WebKit нет этого бага, поэтому можно сделать так, чтобы это нормально работало в Safari.В этом коде используются структурные выражения псевдо-классов. Несмотря на то, что выражения сами по себе кажутся сложными, диапазон, на который вы ориентируетесь, можно увидеть по номерам, которые используются в выражении. Объясню, что именно делает эта функция: в первой части цепи в выражении говорится выбрать 7й элемент, а потом каждый элемент после него . Во второй части говорится выбрать 14й элемент, а потом каждый элемент перед ним . Но так как селекторы взаимосвязаны, каждый ограничивает рамки другого. Поэтому вторая часть цепи не позволяет первой части пройти дальше 14, а первая часть цепи не позволяет второй подняться выше 7. Если вы хотите более подробно узнать о таких видах селекторов и выражений, можете почитать мою старую статью по этой теме.
11. Псевдо-элементы можно применять к некоторым пустым элементам
В какой-то момент вы наверняка пытались применить псевдо-элемент к рисунку или форме ввода. Это не сработает, так как псевдо-элементы не работают на заменяемых элементах. Многие разработчики предполагали, что все пустые элементы (то есть элементы, в которых нет закрывающих тегов) входят в эту категорию. Но это не так.
Псевдо-элементы можно применять к некоторым пустым элементам, которые не являются заменяемыми. Сюда входят элементы hr, как в этом демо.
Цветная область в этом примере это горизонтальная линейка (элемент hr), и она включает псевдо-элементы ::before и ::after, которые к ней применены. Интересно, что у меня не получилось добиться того же результата при использовании элемента br, который также является незаменяемым пустым элементом.
Также псевдо-элементы можно добавлять в мета-теги и элементы link, если вы достаточно безумны, чтобы конвертировать их в display: block, как показано в нижеприведенном демо.
12. Некоторые значения атрибутов чувствительны к регистру в селекторах
И, наконец, вот один довольно непонятный факт. Предположим, у вас есть следующий HTML-код:
<div class=\"box\"></div>
<input type=\"email\">Вы можете оформить оба эти элемента с помощью селектора атрибута следующим образом:
div[class=\"box"] {
color: blue;
}
input[type=\"email"] {
border: solid 1px red;
}Это будет работать. Но как насчет этого?
div[class=\"BOX"] {
color: blue;
}
input[type=\"EMAIL"] {
border: solid 1px red;
}Обратите внимание, что оба значения атрибутов введены в верхнем регистре. В данном случае, элемент .box не получит оформления, так как атрибут class чувствителен к регистру. К полю ввода электронной почты, с другой стороны, оформление будет применено, так как значение атрибута type нечувствительно к регистру. Здесь нет ничего революционного, но, возможно, вы этого раньше не знали.