Telegram-бот для фронтендеров
База плагинов jQuery

Множество различных jQuery примеров, элементы CSS
и большое количество других инструментов для Вашего сайта!

> Новые возможности псевдоклассов: CSS4

Новые возможности псевдоклассов: CSS4

Новая редакция CSS, где значительная часть возможностей реализована за счёт псевдоклассов, открывает перед разработчиками новые возможности.


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

Логические комбинаторы

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

Многих также заинтересует :not — псевдокласс, уже знакомый по третьей версии CSS. Однако только CSS4 раскроет все его возможности. С его помощью, как и в случае с предыдущим комбинатором, можно легко и быстро исключить из выборки элементы, обладающие определённым признаком.

Псевдоклассы для обработки ссылок

В четвёртой версии языка W3C намеренно ушли от разделения ссылок на посещённые и не посещённые — теперь все ссылки будут делиться на «глобальные» и локальные. Первые объединяются псевдоклассом :any-link — пока что это имя рассматривается как временное.

Вторые объединяются псевдоклассом :local-link, который будет интересен разработчикам благодаря своей новизне. С помощью такой команды можно будет выделить любые персональные ссылки, например личную страницу, не затрагивая все остальные.

Управление временем и состоянием

Таблица стилей четвёртой версии позволяет подсвечивать уже произнесённый и произносимый текст с помощью псевдоклассов :past, :current, :future — это будет актуально для программ чтения с экрана, а также для создания «эффекта караоке».

С помощью псевдокласса :indeterminate можно будет выявлять элементы, которые пользователь пропустил (прежде это было затруднительно, поскольку все состояния определялись бинарно: да/нет, включён/выключен).

Древовидные структуры

Новые правила CSS4 дают разработчикам возможность использовать псевдокласс :nth-match для использования нескольких параметров выборки и для последовательного прохода по структурам дочерних элементов с любым количеством уровней вложенности.

Аналогичный псевдокласс :nth-last-match работает по той же причине, только выборка строится, начиная с конца DOM-дерева. Перспектива использования разрабатываемых псевдоклассов — применение принципов работы с древовидными структурами не только в таблицах, но и в колоночных макетах.

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

SEO-продвижение

Автоматическое продвижение сайта в TOP.

Если Вы нашли ошибку в тексте, пожалуйста, выделите область и нажмите Ctrl + Enter.

Последняя версия jQuery:

Скачать
v.1.4.1 или v.3.0.0

Небольшое руководство по тому, как скачать самую актуальную версию библиотеки jQuery, а также рекомендации по подключению скрипта.

Популярное за неделю:

Шаблоны:

Подборки интерфейсов:

^