Автор

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

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


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



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

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

Интересные плагины, которые вы сможете использовать при создании навигации в ваших проектах.

Представляю вашему вниманию jQuery, Mootools, CSS меню, выполненные в различных вариантах и стилевых исполнениях: вертикальные и горизонтальные меню,  меню c анимированными JavaScript эффектами, круговые меню, графические меню, прокручивающиеся меню, меню с CSS3 эффектами, фиксированные навигационные панели, всегда находящиеся в поле видимости и другие примеры навигации.

 


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

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


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

Небольшой скрипт автоматически изменит год в нижней части (футере) вашего сайта. Не нужно каждый год менять его в шаблоне сайта — обновится сам, в зависимости от настроек посетителя.


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

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


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close