Создание пользовательского ввода диапазона, который выглядит одинаково во всех браузерах

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

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

Анатомия ввода диапазона

Ввод диапазона состоит из двух основных частей:

1. Отслеживать
   Это часть ползунка, по которой проходит большой палец. Или, другими словами, это длинный элемент, представляющий диапазоны значений, которые можно выбрать.
2. Большой палец
   Это элемент на дорожке, который пользователь может перемещать, чтобы выбрать различные значения диапазона.

Если бы это было математическое уравнение:

ввод диапазона = дорожка + большой палец

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

Несоответствия браузера

Чтобы продемонстрировать, почему нам вообще нужно руководство по стилю ввода диапазона, мы рассмотрим несколько снимков экрана ввода диапазона HTML по умолчанию и того, как он отображается в четырех основных браузерах (Chrome, Firefox, Safari и Край). Или, если хотите, вы можете просмотреть эту демонстрацию CodeSandbox в каждом из соответствующих браузеров, чтобы увидеть несоответствия браузеров во всей их красе.

Примечание. Эти снимки экрана были сделаны по состоянию на сентябрь 2021 года и могут быть изменены при обновлении соответствующих браузеров.

Давайте начнем с Chrome, который, на мой взгляд, по умолчанию отображает наиболее удобную для пользователя версию ввода.

Далее следует Firefox, который отличается от ввода, отображаемого в Chrome. В Firefox высота дорожки немного короче. С другой стороны, высота и ширина большого пальца больше и не имеют такого же синего цвета фона, как в версии для Chrome.

Слайдер Safari по внешнему виду наиболее близок к версии Firefox, но, опять же, он все же отличается. На этот раз кажется, что дорожка имеет теневой эффект, а высота и ширина большого пальца меньше, чем в версиях Chrome и Firefox. Если вы присмотритесь, вы также увидите, что большой палец не находится прямо по центру дорожки, что придает ей неполированный вид.

И последнее, но не менее важное — это Edge, который теперь, когда Microsoft Edge построен на основе Chromium, гораздо больше соответствует трем другим браузерам, чем его предшественник до Chromium. Однако мы видим, что он по-прежнему отображается иначе, чем в трех других браузерах. Представление Edge ввода диапазона очень похоже на версию Chrome, за исключением более темного серого цвета фона для большого пальца и левой стороны дорожки перед большим пальцем.

Теперь, когда мы увидели, насколько непоследовательно каждый браузер отображает ввод диапазона, мы рассмотрим, как мы можем использовать CSS для их унификации.

Сброс диапазона (базовые стили)

Поскольку несоответствия браузеров очень сильно различаются, нам нужно начать с равных условий. Как только стили по умолчанию, применяемые каждым браузером, будут удалены, мы можем начать работать над тем, чтобы сделать ввод более унифицированным. Мы будем использовать селектор атрибутов элемента input[type="range"] и примененные здесь стили будут действовать как сброс CSS для ввода.

Чтобы применить базовые стили, нам нужны четыре свойства:

1. -webkit-appearance: none;
   Это свойство является префиксом поставщика, который применяется ко всем основным браузерам. Присвоив ему значение none , это говорит каждому соответствующему браузеру очистить все стили по умолчанию. Это позволяет нам начать с нуля и построить внешний вид ввода с этой точки.
2. background: transparent;
   Это очищает фон по умолчанию, который применяется к входу.
3. cursor: pointer;
4. width
   Устанавливает общую ширину ввода.

 input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; width: 15rem; }

Стилизация трека

При стилизации дорожки (и бегунка) нам нужно настроить таргетинг на префиксы конкретных поставщиков различных браузеров, чтобы применить правильные стили к соответствующему элементу. В дальнейшем любой псевдоэлемент с префиксом -webkit будет применяться к браузерам Chrome, Safari, Opera и Edge (после Chromium). Все, что имеет префикс -moz , относится к Firefox.

Ниже приведены псевдоэлементы, которые мы будем использовать для нацеливания на трек:

• ::-webkit-slider-runnable-track
  Таргетинг на дорожку в Chrome, Safari и Edge Chromium.
• ::-moz-range-track
  Нацеливает трек в Firefox.

 /***** Track Styles *****/ /***** Chrome, Safari, Opera, and Edge Chromium *****/ input[type="range"]::-webkit-slider-runnable-track { background: #053a5f; height: 0.5rem; } /******** Firefox ********/ input[type="range"]::-moz-range-track { background: #053a5f; height: 0.5rem; }

Единственными обязательными свойствами дорожки являются height и background . Тем не менее, обычно применяется border-radius , чтобы скруглить края.

Укладка большого пальца

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

Ниже приведены псевдоэлементы, которые мы будем использовать для нацеливания на большой палец:

• ::-webkit-slider-thumb
  Ориентирован на большой палец в Chrome, Safari и Edge Chromium.
• ::-moz-range-thumb
  Ориентирован на большой палец в Firefox.

Поскольку браузеры Firefox и Webkit имеют разные проблемы со стилем, я рассмотрю каждую проблему отдельно и покажу, как справиться с каждым из причудливых значений по умолчанию, которые применяются к большому пальцу.

Chrome, Safari, Edge Chromium (Webkit)

Первый стиль, который нам нужно применить к псевдоэлементу ::-webkit-slider-thumb , — это -webkit-appearance: none; префикс поставщика. Мы использовали это свойство в разделе «Базовые стили», чтобы переопределить общие стили по умолчанию, которые применяются браузером, и оно служит аналогичной цели для большого пальца.

Как только стили по умолчанию удалены, мы можем применить наши собственные стили. Предполагая, что мы применяем height , width и background-color к большому пальцу, вот пример того, что у нас было бы до сих пор:

По умолчанию браузеры WebKit отображают бегунок так, что он не находится по центру дорожки.

Чтобы правильно центрировать бегунок на дорожке, мы можем использовать следующую формулу и применить ее к свойству margin-top :

margin-top = (высота дорожки в пикселях/2) - (высота большого пальца в пикселях/2)

Взяв стили, которые мы применили в предыдущих разделах, и преобразовав rems в пиксели, мы получили бы высоту дорожки 8 пикселей и высоту большого пальца 32 пикселя. Это будет означать, что:

верхнее поле = (8/2) - (32/2) = 4 - 16 = -12px

Исходя из этого, наши окончательные стили для браузеров webkit будут выглядеть как следующий блок кода:

 /***** Thumb Styles *****/ /***** Chrome, Safari, Opera, and Edge Chromium *****/ input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; /* Override default look */ appearance: none; margin-top: -12px; /* Centers thumb on the track */ background-color: #5cd5eb; height: 2rem; width: 1rem; }

Fire Fox

При применении стилей к большому пальцу в Firefox вам нужно будет использовать ::-moz-range-thumb . К счастью, Firefox не страдает от той же проблемы с центрированием, что и браузеры Webkit. Тем не менее, есть одна ошибка, связанная с радиусом границы по умолчанию и серой рамкой, которая применяется к большому пальцу.

Чтобы исправить серую рамку по умолчанию, мы можем добавить border: none; имущество. Чтобы удалить применяемый по умолчанию радиус границы, мы можем добавить свойство border-radius: 0 , и теперь бегунок будет выглядеть одинаково во всех браузерах.

Исходя из этого, наши окончательные стили для браузера Firefox будут выглядеть так:

 /***** Thumb Styles *****/ /***** Firefox *****/ input[type="range"]::-moz-range-thumb { border: none; /*Removes extra border that FF applies*/ border-radius: 0; /*Removes default border-radius that FF applies*/ background-color: #5cd5eb; height: 2rem; width: 1rem; }

Примечание. Браузеры Webkit не применяют этот радиус к границе автоматически, поэтому, если вы обнаружите, что хотите применить некоторую форму радиуса границы к бегунку, а не отменить его, как мы сделали выше, вам понадобится чтобы применить желаемые размеры border-radius к -webkit-slider-thumb и ::-moz-range-thumb .

Стили фокуса

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

Согласно документации WAI-ARIA: Slider рекомендуется:

Фокус помещается на ползунок (визуальный объект, который будет перемещать пользователь мыши, также известный как большой палец).

Первое, что мы хотим сделать, это удалить стили фокуса по умолчанию, чтобы мы могли заменить их пользовательскими стилями. Чтобы ориентироваться на стили фокуса большого пальца, мы можем использовать ::-webkit-slider-thumb и ::-moz-range-thumb , которые мы использовали в предыдущем разделе, и объединить их с псевдоклассом :focus . Затем мы можем использовать свойства CSS-контура и контура-смещения, чтобы стилизовать его так, как мы хотим.

 /***** Focus Styles *****/ /* Removes default focus */ input[type="range"]:focus { outline: none; } /***** Chrome, Safari, Opera, and Edge Chromium *****/ input[type="range"]:focus::-webkit-slider-thumb { border: 1px solid #053a5f; outline: 3px solid #053a5f; outline-offset: 0.125rem; } /******** Firefox ********/ input[type="range"]:focus::-moz-range-thumb { border: 1px solid #053a5f; outline: 3px solid #053a5f; outline-offset: 0.125rem; }

Примечание . Если к большому пальцу применяется border-radius , Firefox отображает контур в форме большого пальца , в то время как другие браузеры отображают блочный контур. К сожалению, для этого нет простого исправления CSS, и это единственное несоответствие, которое будет присутствовать. Тем не менее, основная цель добавления этих стилей заключается в обеспечении доступности, а основная цель, предоставление визуального индикатора, когда элемент находится в фокусе, по-прежнему достигается.

Собираем все вместе

Теперь, когда мы рассмотрели все стили, необходимые для унификации ввода диапазона, вот как будет выглядеть окончательная таблица стилей CSS:

 /********** Range Input Styles **********/ /*Range Reset*/ input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; width: 15rem; } /* Removes default focus */ input[type="range"]:focus { outline: none; } /***** Chrome, Safari, Opera and Edge Chromium styles *****/ /* slider track */ input[type="range"]::-webkit-slider-runnable-track { background-color: #053a5f; border-radius: 0.5rem; height: 0.5rem; } /* slider thumb */ input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; /* Override default look */ appearance: none; margin-top: -12px; /* Centers thumb on the track */ /*custom styles*/ background-color: #5cd5eb; height: 2rem; width: 1rem; } input[type="range"]:focus::-webkit-slider-thumb { border: 1px solid #053a5f; outline: 3px solid #053a5f; outline-offset: 0.125rem; } /******** Firefox styles ********/ /* slider track */ input[type="range"]::-moz-range-track { background-color: #053a5f; border-radius: 0.5rem; height: 0.5rem; } /* slider thumb */ input[type="range"]::-moz-range-thumb { border: none; /*Removes extra border that FF applies*/ border-radius: 0; /*Removes default border-radius that FF applies*/ /*custom styles*/ background-color: #5cd5eb; height: 2rem; width: 1rem; } input[type="range"]:focus::-moz-range-thumb { border: 1px solid #053a5f; outline: 3px solid #053a5f; outline-offset: 0.125rem; }

Заключение

В дополнение к методам, описанным в статье, вы также можете воспользоваться генератором CSS для ввода диапазона, который я создал под названием range-input.css . Суть этого проекта заключалась в создании инструмента, упрощающего этот процесс для разработчиков. Генератор CSS позволяет быстро стилизовать общие свойства CSS и предоставляет демонстрационный ползунок, который отображает в режиме реального времени предварительный просмотр стилей, которые вы хотите применить.

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

Дополнительные ресурсы по Smashing Magazine

• Генераторы CSS
• Упрощение стилей форм с помощью accent-color
• Умные CSS-решения для распространенных задач пользовательского интерфейса
• Глубокое погружение object-fit и background-size в CSS