Псевдоклассы CSS. Основы

Псевдоклассы CSS. Основы

От автора: скорее всего, вы уже знаете некоторые псевдоклассы CSS, такие как: :link, :visited, :hover, :active и :focus. Пройдемся по ним еще раз.

Важно: ключевые моменты

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

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

Чтобы улучшить доступность, добавьте :focus ко всем :hover, так как не все пользователи используют мышь для навигации по сайту.

hover можно применить к любому элементу на странице, а не только к ссылкам и элементам формы.


Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

focus и active относятся к ссылкам, элементам формы, элементам с редактируемым контентом, а также к любым элементам с атрибутом tabindex.

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

Следующие псевдоклассы находят элементы по атрибутам, пользовательскому взаимодействию и состоянию элементов формы:

enabled — Любой активный элемент интерфейса. Обычно это элемент формы, поддерживающий атрибут disabled, к которому он на данный не применен.

disabled — Наоборот, неактивный элемент интерфейса: элемент формы, поддерживающий атрибут disabled, к которому на данный момент применен данный атрибут.

checked — Для выбранных радиокнопок и отмеченных чекбоксов.

indeterminate — Для элементов формы, которые и не отмечены галкой, и отмечены. Например, если поставить галку во всех чекбоксах в группе, затем снять некоторые галки, то чекбокс «выбрать все» можно установить в состояние indeterminate (с помощью JS), чтобы показать, что этот чекбокс и не отмечен, и не снят.

target — Этот селектор выделяет целевой элемент активного внутристраничного якоря. Это звучит сложнее, чем есть на самом деле: вы уже знаете, что по странице можно использовать якоря с помощью символа # и ID целевого элемента. Например, на вашей странице может быть ссылка «перейти к контенту», по клику на которую вы перепрыгиваете на элемент с ID контента.

Переход по якорю меняет URL на thispage.html#content, а :target теперь совпадает с элементом в документе, контент которого равен ID. Это как если бы вы временно добавили селектор #content. Временно потому, что как только пользователь кликнет на новый якорь, target будет равен новому целевому элементу.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Узнать подробнее

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

valid — Применяется к валидным элементам. Валидность определяется по типу, шаблону и другим атрибутам инпута (см. Главу 4).

invalid — Применяется к элементам с пустыми обязательными атрибутами, а также к элементам, не прошедшим валидацию по типу или атрибутам шаблона.

in-range — Применяется к элементам с ограничениями по диапазону, где значение находится в пределах этих ограничений. Применяется, например, к типам инпута date/time, number, range с атрибутами min и max. Если значение равно NULL, то оно попадает в in-range.

out-of-range — Противоположность in-range: применяется к элементам, чье значение выходит за рамки диапазона. Пустое значение не считается выходящим за рамки диапазона.

required — Применяется к элементам формы с установленным атрибутом required.

optional- Применяется к элементам форы без атрибута required.

read-only — Применяется к элементам, контент в которых не должен редактироваться пользователями. К таким элементам относится большая часть элементов, у которых не задан атрибут contenteditable.

read-write — Применяется к элементам, чей контент могут изменять пользователи. Это компоненты contenteditable и записываемые инпуты.

Эти атрибуты поддерживаются в браузерах, которые поддерживают атрибуты в элементах форм. Другими словами, браузеры, поддерживающие required и pattern, также поддерживают связанные с ними псевдоклассы valid и invalid.

IE8 и ниже не поддерживают checked, enabled, disabled и target. Однако данные селекторы поддерживаются в IE9 за исключением user-interface селекторов. IE10 и 11 поддерживают indeterminate, required и optional, но не поддерживают default, in-range, out-of-range, read-only и read-write.

Пока поддержки нет, можно использовать JS-библиотеку Selectivizr для таргетирования этих псевдоклассов в IE.

Автор: Alexis Goldstein, Estelle Weyl, Louis Lazaris

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.


Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree