Автор

Чего ожидать от селекторов четвертого уровня

Чего ожидать от селекторов четвертого уровня


Шумиха по поводу 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;
}

Продолжение следует..

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

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеРазное

Чего ожидать от селекторов четвертого уровня

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


Чего ожидать от селекторов четвертого уровня

Эта ссылка «Back to top» позволяет пользователям плавно перемещаться вверх по странице. Это небольшая деталь, которая улучшает навигацию на веб-сайте с длинными страницами.


Чего ожидать от селекторов четвертого уровня

В передыдущих уроках «Интересные кнопки поделиться в соцсетях на CSS3»  и «Анимация кнопки читать в Twitter на CSS3» я писал как можно сделать интересные и необычные кнопки для соцсетей, а самое главное, что без скриптов и на чистом CSS. Продолжая эту тему хочу поделиться очередной рпример оформления своего сайта!


Чего ожидать от селекторов четвертого уровня

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


Раскрутка в соцсетях

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


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

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

Close