Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Создание уникальных выпадающих списков с использованием CSS3

19 февраля 2016 | Опубликовано в css | Нет комментариев »

Спецификация CSS3 определяет свойство pointer-events (события при взаимодействии с указателем) как: «Свойство pointer-events позволяет контролировать, можно ли и при каких условиях взаимодействовать с элементом при помощи указателя, например, мыши. Это свойство используется для задания обстоятельств, при которых событие, создаваемое указателем мыши, будет распространяться сквозь элемент на лежащий под ним элемент. Это также применимо при определении, попадает ли указатель пользователя на определенный элемент, например, для псевдоклассов :hover (при наведении указателя мыши), :active (при нажатии), :focus (при активации элемента), гиперссылок и метода Document.elementFromPoint()». 

Это свойство изначально было только у элементов SVG, но со временем браузеры и W3C приняли ограниченную версию и для элементов HTML.

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

Свойство -webkit-appearance: none нужно, чтобы движок Webkit не применял свойства по умолчанию для задания внешнего вида. Однако это свойство так же отменяет изначальную стрелку выпадающего списка, и новая уникальная стрелка может заслонять часть текста, так что приходится добавить внутренний отступ справа 30px элементу выбора только для движка Webkit.

Можно легко определить, поддерживается ли свойство pointer-events с помощью кода JS, и применять его, только если оно поддерживается, например, добавляя или удаляя класс элемента:

if(!('pointerEvents' in document.body.style)) {

...
}

У библиотеки Modernizer есть более полный скрипт определения поддержки, его код довольно краток, так что его можно переделывать по необходимости.

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

За дополнительной информацией можно обратиться к следующим источникам:

• спецификация W3C 

статья Mozilla Developer Network

Автор урока Lea Verou

Перевод — Дежурка

Смотрите также:




Оставить ответ


шесть + = 9

Вставить изображение