Шумиха по поводу CSS4 возникла абсолютно из ниоткуда, так как мы только привыкли к CSS3, и все планируют использовать эту технологию еще какое-то время. Разработчики браузеров усиленно работают над тем, чтобы их продукт поддерживал самые последние эффекты и свойства, а разработчики внешних интерфейсов создают все больше и больше инструментов для более эффективной работы с таблицами стилей. И сейчас довольно странно слышать что-либо о CSS4. Сразу навязывается вопрос: «А как же CSS3? Разве уже всё?».
Зачем нам 4й уровень? Level 4 (Уровень 4, или 4-я версия спецификации) – это всего лишь версия W3C-документа. Слышали ли вы о новой спецификации «Filter Effects, Level 1» (Эффекты фильтров, Уровень 1)? Не важно, так как CSS - это просто CSS. Селекторы первыми достигнут 4-го уровня спецификации, и уже сейчас над этим ведется работа, пишутся черновые работы.
Прогресс не стоит на месте и сразу после CSS3, к нам приходит новый CSS4, разработкой которой занимается W3C. Исторически так сложилось, что процесс развития CSS не зависит от процесса разработки веб-браузеров – оба разрабатываются параллельно. Это привело к тому, что разные браузеры поддерживают различные наборы спецификации CSS. Но вернемся к CSS4.
W3C периодически обновляет рабочую спецификацию CSS4 и я хочу предоставить вам первую информацию о том, что уже включено в спецификацию CSS селекторов 4 уровня.
Довольно много новых изменений было внесено в CSS4. Сразу же скажу что на данный момент в CSS4 нет новых псевдо-элементов, возможно их добавят позже. Тем не менее, на развитие псевдо-классов было уделено намного больше внимания. Новые элементы, которые появились в CSS4 (на текущий момент): логические комбинации, элементные и селекторы атрибутов, новые псевдо-классы, комбинаторы и селекторы сетки.
Логические комбинации: Псевдо-классы отрицания.
В CSS3, псевдо-класс отрицания :not может применяться только к простым селекторам, псевдо-классам, тегам, идентификаторам, классам и к параметрам селекторов класса. Псевдо-элементы и такие комбинации, как UL LI или UL > LI не поддерживались, также мы не могли использовать псевдо-класс :not на самом себе. В CSS4, элемент :not( ) можно применить к списку селекторов и к сложным селекторам. Теперь можно не разделять список селекторов на отдельные блоки кода для каждого селектора.
p:not(.active, .visible) {
color: yellow;
}То же самое относится к :matches - новый псевдо-класс, который сопоставляет стили с определенными элементами. Вы можете использовать псевдо-класс :matches для группы селекторов.
article:matches(.active, .visible) {
background: green;
}Селекторы атрибутов: Чувствительность к регистру.
В настоящее время в CSS4, атрибуты не чувствительны к регистру если использовать идентификатор i перед закрывающей скобкой ]. Например:
[frame=hsides i] { border-style: solid none; }атрибут "hsides" будет применяться к элементу "frame", будь то "HSIDES ',' hsides ',' Hsides" и так далее. И это применяется даже к XML с чувствительными к регистру значениями атрибутов. Это помогает избежать длительной отладки.
Языковые Псевдо-классы.
Существует еще один новый CSS4 псевдо-класс - :dir. Он используется в качестве псевдо-класса директории в HTML5, чтобы помочь нам определить директорию элементов, наряду с другими факторами, такими как окружающий текст. Псевдо-класс :dir(rtl) задает направление справа налево, в то время как :dir(ltr) будет иметь противоположную направленность: слева-направо. Обратите внимание, что :dir не то же самое что и селектор атрибутов [dir=...], так как :dir совпадает со значением.
Также изменился языковой псевдо-класс :lang. Например :lang(de-DE) совпадает со всеми соответствиями языковых тегов, а не только ‘de-DE’ и ‘de-DE-1996′ '. Шаблоны на родном языке, установлены со знаком звездочки. Например, *-СН будет соответствовать 'DE-CH', it-CH', и так далее.
Проверьте пример, который описывает следующее: два последующих селектора представляют собой HTML документ, который написан на бельгийском, французском или немецком языке. Два последующих селектора представляют цитаты в произвольной элементе на бельгийском, французском или немецком:
html:lang(fr-be)
html:lang(de)
:lang(fr-be) > q
:lang(de) > qПсевдо-классы местонахождения
Псевдо-классы местонахождения определяют расположение пользователя на вашем сайте (не путать с геокодированием). Новые изменения происходят в кпсевдо-классах местонахождения. Псевдо-класс по имени :any-link является гиперссылкой.
Второй псевдо-класс :local-link, отвечает за стиль гиперссылки, в зависимости от места расположения пользователя на сайте. Этот псевдо-класс также может различать внешние и внутренние ссылки. Псевдо-класс :local-link относится к элементам, у которых есть исходная гиперссылка, назначение которой совпадает с URL документа в нефункциональном использовании. В функциональном использовании :local-link может быть в виде иерархической схемы:
:local-link(0)– представляет собой элемент ссылки, назначение которой находится в том же документе:local-link(1)– представляет собой элемент ссылки, назначение которой имеет одинаковое происхождение и первый сегмент пути:local-link(2)– представляет собой элемент ссылки, назначение которой находится в том же документе, первого и второго сегмента- и т.д.
Псевдо-класс :scope обозначает элементы, которые находятся в наборе опорного элемента. Это ряд элементов, которые устанавливают точку отсчета для селекторов, например вызов querySelector() в[SELECTORS-API2] или родительского элемента <style> с псевдо-классом :scope в HTML5.
nav :local-link { text-decoration: none; }
a:local-link(0) {...}
a:local-link(1) {...}Пользовательские псевдо-классы действия: Псевдо-классы drag-and-drop
Псевдо-класс :drop применяется к элементам, которые установлены в качестве отдельных областей на странице, или другими словами области, на которые пользователь может перетащить выбранный элемент.
Пример:
:valid-drop-target { box-shadow: 0 0 5px yellow; }
:active-drop-target { outline: solid red; }Псевдо-классы :enabled и :disabled
Псевдо-класс :enabled представляет элементы пользовательского интерфейса, которые находятся во включенном состоянии; у таких элементов есть соответствующее нерабочее состояние. С другой стороны псевдо-класс :disabled представляет элементы пользовательского интерфейса, которые находятся в нерабочем состоянии; у таких элементов есть соответствующее рабочее состояние.
Псевдо-класс :default
Псевдо-класс :default применяется к одному или к нескольким элементам UI, которые должны иметь значение по умолчанию среди подобных элементов. Обычно применяется к элементам контекстного меню, кнопкам и избранным спискам/меню.
Псевдо-класс :indeterminate
Псевдо-класс :indeterminate применяется к элементам UI, значение которых находится в неопределенном состоянии.
Псевдо-классы :valid и :invalid
Элемент :valid или :invalid применяются, когда содержание или значение допустимо или недопустимо в соответствии с семантикой достоверности данных, которая определяется языком документа.
Псевдо-классы :in-range и :out-of-range
Псевдо-классы :in-range и :out-of-range применяются только к элементам, у которых есть ограничения диапазона. Элемент :in range или :out-of-range, применяется к элементу, значение которого находится в диапазоне или вне диапазона относительно его пределов, которые определены языком документа.
Псевдо-класс в виде дерева
Существует два структурных псевдо-класса (:empty и :root), к ним добавили новый псевдо-класс :blank. Он подобен псевдо-классу :empty, за исключением того, что он также относится к символам между элементами. Например:
<p>
</p>Также были добавленные два новых структурных псевдо-класса :nth-match(An+B of <selector>) и :nth-last-match(An+B of <selector>). Псевдо-класс :nth-match обозначает одноуровневые элементы (An+B-1), которые соответствуют списку селекторов.
Комбинаторы
Этот псевдо-класс позволяет соединять элементы, используя A/ATTR/B, тогда как один элемент ID ссылается с атрибутом ATTR другого элемента.
label:matches(:hover, :focus) /for/ input,
label:matches(:hover, :focus):not([for]) input {
box-shadow: yellow 0 0 10px;
}Ориентация на родительский элемент
CSS4 позволяет нам ориентироваться на родительский элемент, используя A! > B, где элемент А - родитель элемента B. Как Вы знаете в выпадающем меню, когда активен последний пункт, родительский элемент всегда теряет фокус в CSS3. Однако с возможностью ориентирования на родителя, появилась возможность установить родительскому элементу определенные стили, когда дочерний элемент активен, проверьте следующий пример:
ul! li:hover {
color: blue;
}Продолжение следует..
Материал взят из зарубежного источника - script-tutorials.com/css4-selectors-level-4 и представлен исключительно в ознакомительных целях.
