Выделение и CSS
Навык выделения текста и других объектов сформировался у пользователей компьютеров много лет назад. Мы выделяем содержимое веб-страниц по разным причинам. Возможно, нужно скопировать текст и где-то его процитировать, возможно — кому-то просто легче читать текст, выделяя его фрагменты. На мобильных устройствах, правда, выделять что-либо сложнее. Меня, например, это раздражает. Мне не нравится выделять содержимое веб-страниц на телефоне. Эта операция кажется какой-то «неправильной».
Основы
На MDN можно узнать о том, что псевдоэлемент ::selection позволяет применить стили к части документа, который был выделен пользователем (например, с помощью мыши).
Для использования ::selection достаточно воспользоваться следующей конструкцией:
Вот пример, с которым можно поэкспериментировать.
Свойства, поддерживаемые ::selection
Настройка собственных эффектов выделения
Что если нам нужно, чтобы выделение выглядело бы по-особенному? Например, чтобы выделение имело бы определённую высоту или некий интересный фон? Взгляните на следующий рисунок.
Пример особой настройки выделения
Это возможно, хотя и потребует приложения некоторых усилий. Вот как сделано выделение, показанное выше:
Об этой методике я узнал здесь.
На следующем рисунке показано разъяснение этой методики.
Реализация градиентного выделения
Надеюсь, я смог понятно объяснить эту идею. Вот рабочий пример.
Анимирование выделения
Работая над предыдущим примером, я задался следующим вопросом: «Реально ли анимировать выделение?». Например, в процессе выделения текста высота выделения составляет 50%. А когда указатель мыши уводят в сторону, высота выделения увеличивается до 80%. Как это сделать? А вот так:
Текст в процессе выделения
Текст после завершения выделения
Вот видео, в котором демонстрируется анимированное выделение.
Многострочный текст
После этого элементы надо стилизовать. Затем к каждому из них надо добавить псевдоэлемент:
Если посмотреть на эту конструкцию в деле, то окажется, что она работает, но не совсем так, как можно ожидать. Ниже показан пример выделения многострочного текста. Можно заметить, что выделение выглядит неоднородным.
Я бы сказал, что подобное многострочное выделение получается не очень хорошим, и что его не стоит использовать в глобальном масштабе. Возможно, его стоит применять лишь, скажем, для организации выделения какого-то отдельного абзаца.
Тут с таким выделением можно поэкспериментировать.
Креативный подход к использованию ::selection и text-shadow
▍Выделение с длинными тенями
Выделенный текст отбрасывает длинные тени
Вот как реализовать этот эффект:
▍Эффект контурного текста
Выделенный текст становится контурным
Эту идею я нашёл в данной статье. Речь идёт о том, что с помощью свойства text-shadow можно сымитировать эффект контурного текста.
▍Эффект размытия
Выделенный текст выглядит размытым
Уверен, что вы сами сможете придумать ещё очень много примеров применения text-shadow для стилизации выделений. Это свойство даёт нам безграничные возможности.
▍Тени текстов и производительность
Использование очень сложных стилей при настройке выделения текста
Представленный здесь неоновый эффект очень сложен. Обратите внимание на то, что при выделении этого текста заметна задержка между моментом выделения текста и моментом применения стилизации. Кроме того, обратите внимание на то, что сверху и слева появляется то, что появляться не должно. Поэтому прошу вас использовать text-shadow осмотрительно.
Выделяются ли элементы форм?
Краткий ответ на вопрос, вынесенный в заголовок этого раздела, будет звучать как «да». Мне кажется, что это неправильно: выделяешь страницу, а оказывается, что содержимое внутри полей ввода тоже выделяется. Вот как это выглядит.
Содержимое внутри полей ввода выделяется
Исследование свойства user-select
Сценарии использования user-select
▍Текст и иконка
Если в элементе есть текст и иконка — в виде символа или значка, взятого из какого-нибудь шрифта, то при выделении текста будет выделяться и эта иконка. Рассмотрим пример, представленный на следующем рисунке.
Кнопка с текстом и иконкой
Вот код этой кнопки:
При выделении этого элемента он выглядит так, как показано ниже.
▍Флажки
Меня раздражает такое поведение флажков, когда, устанавливая или снимая флажок, я случайно выделяю текст его описания. Вот как это выглядит.
Текст описания флажка выделен случайно
Решить эту проблему можно, стилизовав элемент следующим образом:
▍Выделение всего текста
Фрагмент текста, оформленный таким стилем, можно выделить одним щелчком мыши по нему.
Веб-приложения
Веб-приложение должно восприниматься пользователем как настоящее приложение. Можно ли выделять текст кнопок в обычных приложениях? Нет, нельзя. Важно, чтобы веб-приложения отражали привычные черты обычных приложений, делая это даже с учётом того, что они созданы с использованием HTML и CSS.
Рассмотрим несколько примеров из жизни.
▍Slack
В Slack можно выделять метки и поля ввода. Однако тексты кнопок не выделяются.
Подписи кнопок не выделяются
Вот ещё один пример.
Подпись в заголовке модального окна выделяется
А дату чата выделить нельзя.
Дату выделить нельзя
▍Notion
Подход к выделению элементов, реализованный в Notion, мне нравится больше. Это веб-приложение больше похоже на реальное приложение, а не на веб-сайт, любую часть интерфейса которого можно выделить.
То, что не должно выделяться, не выделяется
Ни один фрагмент текста с этого рисунка не выделяется. Это — именно то, чего можно ожидать от приложения.
Не используйте глобальное отключение выделения
Не рекомендуется отключать выделение глобально. Когда вы пользуетесь отключением выделения — постарайтесь, чтобы оно отключалось бы лишь у элементов, для которых оно не имеет смысла. Для этого можно создать вспомогательный класс. Например — такой:
Нехороший паттерн
Есть один UX-паттерн, который мне крайне не нравится. Он заключается в показе предупреждения при попытке выделения текста. Это раздражает и создаёт у пользователя такое ощущение, будто его взаимодействием с сайтом пытаются управлять. Пример этого паттерна показан ниже.
Запрет выделения с показом уведомления
Пожалуйста, не делайте так.
Выделение на мобильных устройствах
Стили ::selection тоже не работают.
А свойство user-select: none работает так, как ожидается.
Вместе с полезным текстом скопировано и (listen)
Итоги
Здесь мы рассмотрели методы настройки выделения элементов веб-страниц с использованием средств CSS. Возможно, вам интересно будет взглянуть и на этот материал.
Уважаемые читатели! Как вы настраиваете выделение текстов в своих проектах?
Если вы знаете о том, что WebKit умеет изменять вид тэга SPAN на кнопку, или на поле ввода, или если вы знаете каким свойством можно диктовать поведение элемента в момент тапа по нему, то вам не сюда.
И так, есть несколько очень интересных свойств, которые присущи движкам WebKit. Например, есть свойство
-webkit-touch-callout
Это свойство позволяет вам диктовать поведение браузера в момент тапа и удержания пальца на ссылке. По умолчанию в браузерах всплывает окно, содержащее информацию о ссылке. По умолчанию у этого свойства выставлено значение default, но установив значение none окошко с информацией всплывать не будет.
Это свойство полезно применять в тех случаях когда на ссылку повешен какой-либо JavaScript/AJAX.
-webkit-user-drag
Свойство указывает на то, что во время перетаскивания блока двигаться должен именно блок, а не содержимое внутри него.
-webkit-appearance
Задавая это свойство элементу вы можете определять то, как будет выглядеть элемент SPAN. Например, как radio button:
Всего таких значений около 50. Весь список можно посмотреть тут.
-webkit-text-security
Оказывается, маску при вводе пароля можно изменять. Например, вместо кружков можно отображать квадраты.
-webkit-user-select
Определяет что пользователь может выбирать внутри элемента.
На этом все. Это был вольный перевод данной статьи.
UPD. Уточнение по свойству -webkit-touch-callout.
CSS свойство user-select
Недавно обратил внимание на одно интересное свойство в CSS, которое позволяет исключить выделение текста на элементах страницы. Опишу ситуацию, проблема была с блоком, который имел скроллинг рабочей области. Рабочая область содержала текст и другие элементы. При скроллинге иногда возникала неприятная вещь: некоторые элементы блока а так же текст в нём произвольно выделялись, что в действительности выглядело не очень. В итоге был поиск, и нашлось решение, оно пожалуй, было одним из простых — это воспользоваться свойством user-select в CSS. После этого всё что находится в блоке просто перестанет выделяться курсором мыши, это в принципе и было нужно.
Пример CSS:
Стоит понимать, что данное свойство может не работать в некоторых браузерах, особенно, что касается старых IE. Официально оно пока не поддерживается, однако многие полезные свойства, которые уже сегодня расписаны в стандарты, начинали своё существование подобным образом. Во всяком случае, я воспользовался CSS-свойством user-select.
Браузеры которые поддерживают:
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| все | все | все | 27+ | 10+ | 4.1+ | 7.1+ |
Теперь что касается всеми любимого IE, то здесь немного всё иначе, делается таким образом в коде html:
Посредством специального атрибута onselectstart, запрещаем выделение текста элемента. Для запрета выделения текста ключевым стало свойство user-select, данное свойство не кроссбраузерно, однако в каждом браузере есть своя реализация, которая работает. Собрав всё в кучу, мы получили запись, указанную выше.
Webkit user select что это
Создание сайтов на Django
Данный курс научит Вас создавать сайты на очень мощном фреймворке – Django. Курс состоит из 9 разделов, в которых Вы с нуля освоите данный фреймворк на примере создания полноценного Интернет-магазина.
В рамках многочисленных упражнений Вы так же создадите свой собственный сайт, что даст Вам ту необходимую практику для закрепления материала, а также полноценную серьёзную работу для своего портфолио.
Помимо самого курса Вас ждёт ещё и бесплатный ценный Бонус: «Unit-тестирование сайта на Django». В этом Бонусе Вы узнаете, как можно написать автоматические тесты для проекта на Django. Это позволит находить оперативно ошибки, а также даст возможность в будущем добавлять новый функционал, не боясь что-то сломать в старом.
Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.
Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.
Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.
Зачем Вы изучаете программирование/создание сайтов?
Написание лайфхаков на Python для начинающих
Данный курс покажет Вам, как можно автоматизировать рутинные задачи с помощью Python. В курсе Вас ждёт несколько примеров и все исходники.
Чтобы получить Видеокурс,
заполните форму
Как создать профессиональный Интернет-магазин
— Вы будете знать, как создать Интернет-магазин.
— Вы получите бесплатный подарок с подробным описанием каждого шага.
— Вы сможете уже приступить к созданию Интернет-магазина.
Вендорные префиксы
Время чтения: 6 мин
Обновлено 18 августа 2021
Кратко
Вендорные префиксы — это приставки перед свойствами, селекторами, функциями или другими сущностями в CSS, позволяющие браузерам внедрять экспериментальные фичи до того, как они полностью стандартизированы и готовы для использования. Когда префикс отбрасывается — это знак, что всё готово.
Кто такие вендоры?
Чтобы понять, что такое вендорные префиксы и зачем они нужны, надо немного разобраться с тем, как и кто разрабатывает CSS.
CSS — это одна из трёх основных мощных технологий, на которых строится веб. Его используют в своей работе тысячи разработчиков. А результат — стили сайта — видят миллионы пользователей.
Чтобы CSS во всём мире был единым, над его развитием работает так называемая Рабочая группа CSS (CSS Working Group), или коротко CSSWG. Они собирают потребности разработчиков сайтов и описывают возможности CSS в новых модулях. Получившийся документ называется спецификацией. В ней содержится описание того, как новое свойство должно работать.
Дальше наступает этап внедрения в браузеры. Каждый браузер разрабатывает отдельная компания, отдельные команды разработки. Когда в черновиках спецификации появляется новая CSS-фича, разработчики браузера начинают её реализовывать. Поскольку в спецификации не всегда описаны конкретные технические решения (черновик на то и черновик, что может меняться), то каждая команда разработки может делать это чуть иначе и принципы работы фичи вполне могут меняться со временем. До момента, пока не стабилизируется спецификация или пока не будут написаны все тесты, фича может работать в тестовом режиме, с вендорным префиксом.
Каждый браузер — это отдельный вендор (от англ. vendor — продавец) услуг просмотра сайтов, интернета. Отсюда и слово «вендорный». Буквально это означает, что существуют некие отдельные префиксы — они же приставки — которые работают в конкретном браузере — вендоре.
Префиксы
Основные браузеры используют следующие префиксы:
Где нужны префиксы?
В CSS существует много разных сущностей: селекторы и псевдоэлементы, свойства и их значения, функции, директивы. В процессе внедрения любой новой фичи используются вендорные префиксы.
Директивы
Самый частый случай, когда вам может пригодится вендорный префикс для директивы — @keyframes :
Написать директивы @-webkit-keyframes и @keyframes через запятую, чтобы не дублировать их содержимое, не получится.
Псевдоклассы
В последнее время в CSS появляется много новых очень мощных псевдоклассов. Например, стилизовать плейсхолдер в поле ввода можно при помощи такого кода:
Как и в случае с директивами, префиксы в псевдоэлементах тоже приводят к дублированию кода: если перечислить всё через запятую, браузеры вас не поймут.
Значения свойств
Бывает и так, что свойство старое, а вот значение для него новое, экспериментальное. В данный момент таким новым значением является функция image-set() для свойства background-image :
Но браузер на этом не остановится и пойдёт дальше: если он поддерживает значение без префикса, то он предпочтёт его — ведь оно последнее. Поэтому порядок следования свойств с префиксами в значениях тоже важен: сначала идут значения с префиксами, потом — без, чтобы браузеры выбрали последний, максимально современный вариант.
Селекторы
Как всё запомнить?
Скорее всего, вы сейчас думаете, а как же запомнить, где какие префиксы нужно писать, и для каких свойств они действительно нужны, а какие поддерживаются и без них.
Самый простой способ проверить поддержку свойства — найти его на сайте Can I use. Там, в том числе, написано, какие префиксы для каких браузеров нужны.
Но чаще всего разработчики не пишут префиксы руками, а используют инструменты автоматизации. Самым популярным из них на сегодня является Автопрефиксер. Вы можете попробовать его онлайн: вставляете ваш CSS, указываете, какие браузеры должны поддерживаться, и получаете код с проставленными префиксами там, где это нужно.
Порядок важен
Очень важно указывать сущности (свойства, селекторы, директивы и так далее) с вендорными префиксами выше, чем без префиксов:
Это нужно для того, чтобы браузер использовал самую последнюю стабильную реализацию. Если браузер уже поддерживает фичу без префиксов, то применится последнее из перечисленных. А если нет, то сработает подходящая запись из кода выше.