Tworzenie niestandardowych danych wejściowych zakresu, które wyglądają na spójne we wszystkich przeglądarkach

Jako jeden z opiekunów biblioteki komponentów UI, zaimplementowałem i stylizowałem mnóstwo elementów wejściowych. Pewnego dnia przydzielono mi zadanie dodania wejścia zakresu do biblioteki i pomyślałem, że będzie to podobny proces do innych wejść, które zaimplementowałem w przeszłości. To założenie było poprawne, dopóki nie zacząłem testować wprowadzania zakresu w wielu przeglądarkach i szybko zdałem sobie sprawę, że mam o wiele więcej pracy na swoich rękach.

Po wielu badaniach udało mi się w końcu wskazać wystarczającą liczbę postów na blogu, artykułów i szczegółowych samouczków, które pomogły mi w stylizacji danych wejściowych zakresu tak, aby były spójne renderowane. Zamiast przeszukiwać wiele zasobów, celem tego posta na blogu jest zapewnienie punktu kompleksowej obsługi, w którym można dowiedzieć się, jak prawidłowo stylizować dane wejściowe zakresu, które będą wyglądały spójnie we wszystkich przeglądarkach. Jest to artykuł, który chciałbym mieć, kiedy musiałem to zrobić sam i mam nadzieję, że pomoże ci to przyspieszyć i usprawnić ten proces.

Anatomia wejścia zakresu

Wejście zakresowe składa się z dwóch głównych części:

1. Tor
   To jest część suwaka, wzdłuż której przebiega kciuk. Innymi słowy, jest to długi element reprezentujący zakresy wartości, które można wybrać.
2. Kciuk
   Jest to element na torze, po którym użytkownik może poruszać się, aby wybrać różne wartości zakresu.

Gdyby to było równanie matematyczne:

wejście zakresu = ścieżka + kciuk

Wejście zakresu jest czasami określane jako „suwak” i przez resztę tego artykułu będę używał tych terminów zamiennie.

Niespójności przeglądarki

Aby zademonstrować, dlaczego w ogóle potrzebujemy samouczka na temat stylizacji danych wejściowych zakresu, przyjrzymy się kilku zrzutom ekranu z domyślnymi danymi wejściowymi zakresu HTML i sposobami ich renderowania w czterech głównych przeglądarkach (Chrome, Firefox, Safari i Krawędź). Lub, jeśli wolisz, możesz wyświetlić demo CodeSandbox w każdej z odpowiednich przeglądarek, aby zobaczyć niespójności przeglądarek w całej okazałości.

Uwaga: te zrzuty ekranu zostały zrobione we wrześniu 2021 r. i mogą ulec zmianie wraz z aktualizacją odpowiednich przeglądarek.

Zacznijmy od spojrzenia na Chrome, który moim zdaniem domyślnie renderuje najbardziej przyjazną dla użytkownika wersję danych wejściowych.

Firefox jest następny i wygląda inaczej niż dane wejściowe renderowane w Chrome. W Firefoksie wysokość toru jest nieco krótsza. Z drugiej strony wysokość i szerokość kciuka są większe i nie mają tego samego niebieskiego koloru tła, co wersja Chrome.

Suwak Safari wygląda najbliżej wersji Firefox, ale po raz kolejny jest inny. Tym razem ścieżka wydaje się mieć niewyraźny efekt, a wysokość kciuka i szerokość są mniejsze niż wersje Chrome i Firefox. Jeśli przyjrzysz się uważnie, możesz również zauważyć, że kciuk nie jest wyśrodkowany bezpośrednio na torze, co nadaje mu nieoszlifowany wygląd i styl.

Ostatni, ale nie mniej ważny jest Edge, który teraz, gdy Microsoft Edge jest zbudowany z Chromium, jest znacznie bardziej dostosowany do pozostałych trzech przeglądarek niż jego poprzednik przed Chromium. Widzimy jednak, że nadal renderuje się inaczej niż pozostałe trzy przeglądarki. Wersja Edge'a z wejściem zakresu wygląda bardzo podobnie do wersji Chrome, z wyjątkiem tego, że ma ciemniejszy szary kolor tła dla kciuka i lewej strony ścieżki przed kciukiem.

Teraz, gdy widzieliśmy, jak bardzo niespójnie każda przeglądarka renderuje dane wejściowe zakresu, przyjrzymy się, jak możemy użyć CSS do ich ujednolicenia.

Resetowanie zakresu (style bazowe)

Ponieważ niespójności przeglądarek są bardzo różne, musimy zacząć od równych szans. Po usunięciu domyślnych stylów, które stosuje każda przeglądarka, możemy zacząć pracować nad stworzeniem bardziej ujednoliconego wyglądu danych wejściowych. Użyjemy selektora atrybutu input[type="range"] , a zastosowane tutaj style będą działać jak resetowanie CSS dla danych wejściowych.

Aby zastosować style linii bazowych, potrzebujemy czterech właściwości:

1. -webkit-appearance: none;
   Ta właściwość to prefiks dostawcy, który ma zastosowanie do wszystkich głównych przeglądarek. Nadając mu wartość none , oznacza to, że każda przeglądarka ma wyczyścić wszystkie domyślne style. Dzięki temu możemy zacząć od zera i od tego momentu budować wygląd danych wejściowych.
2. background: transparent;
   Spowoduje to wyczyszczenie domyślnego tła zastosowanego do danych wejściowych.
3. cursor: pointer;
4. width
   Ustawia całkowitą szerokość danych wejściowych.

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

Stylizacja utworu

Podczas stylizowania ścieżki (i kciuka) będziemy musieli kierować reklamy na różne prefiksy dostawców poszczególnych przeglądarek, aby zastosować odpowiednie style w odpowiednim elemencie. Idąc dalej, każdy pseudoelement z prefiksem -webkit zostanie zastosowany do przeglądarek Chrome, Safari, Opera i Edge (post-Chromium). Wszystko z prefiksem -moz odnosi się do Firefoksa.

Poniżej znajdują się pseudoelementy, których użyjemy do namierzenia ścieżki:

• ::-webkit-slider-runnable-track
  Kieruje na ścieżkę w Chrome, Safari i Edge Chromium.
• ::-moz-range-track
  Kieruje na ścieżkę w Firefoksie.

 /***** 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; }

Jedyne wymagane właściwości toru to height i background . Jednak często stosuje się border-radius w celu zaokrąglenia krawędzi.

Stylizacja kciuka

Stylizacja kciuka (środkowego pokrętła, którym porusza się użytkownik) zawiera więcej niuansów, które należy wziąć pod uwagę, ponieważ istnieje więcej niespójności między przeglądarkami w tej części wejściowego zakresu.

Poniżej znajdują się pseudoelementy, których użyjemy do namierzenia kciuka:

• ::-webkit-slider-thumb
  Kieruje na kciuk w Chrome, Safari i Edge Chromium.
• ::-moz-range-thumb
  Celuje w kciuk w Firefoksie.

Ponieważ przeglądarki Firefox i Webkit mają różne problemy ze stylami, omówię każdy problem indywidualnie i zademonstruję, jak radzić sobie z każdym dziwacznym domyślnym ustawieniem, które jest stosowane do kciuka.

Chrome, Safari, Edge Chromium (Webkit)

Pierwszym stylem, jaki musimy zastosować do ::-webkit-slider-thumb , jest -webkit-appearance: none; prefiks dostawcy. Użyliśmy tej właściwości w sekcji „Style bazowe”, aby zastąpić ogólne domyślne style stosowane przez przeglądarkę i służy ona do podobnego celu w przypadku kciuka.

Po usunięciu domyślnych stylów możemy zastosować własne niestandardowe style. Zakładając, że zastosujemy height , width i background-color do kciuka, oto przykład tego, co mieliśmy do tej pory:

Domyślnie przeglądarki WebKit renderują kciuk tak, aby nie był wyśrodkowany na ścieżce.

Aby właściwie wyśrodkować kciuk na ścieżce, możemy użyć następującego wzoru i zastosować go do właściwości margin-top :

margin-top = (wysokość ścieżki w pikselach / 2) - (wysokość kciuka w pikselach /2)

Biorąc style, które zastosowaliśmy w poprzednich sekcjach i konwertując rems na piksele, mielibyśmy wysokość ścieżki 8px i wysokość kciuka 32px. Oznaczałoby to, że:

górny margines = (8/2) - (32/2) = 4 - 16 = -12px

Na tej podstawie nasze sfinalizowane style dla przeglądarek webkit będą wyglądać jak następujący blok kodu:

 /***** 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; }

Firefox

Stosując style do kciuka w Firefoksie, musisz wykorzystać pseudoelement ::-moz-range-thumb . Na szczęście Firefox nie ma tego samego problemu z centrowaniem, co przeglądarki Webkit. Jednak jest to jedna gotcha wokół domyślnego promienia obramowania i szarej granicy, która dotyczy kciuka.

Aby naprawić domyślną szarą ramkę, możemy dodać border: none; własność. Aby usunąć domyślny border-radius, który jest stosowany, możemy dodać właściwość border-radius: 0 i teraz kciuk będzie wyglądał spójnie we wszystkich przeglądarkach.

Na tej podstawie nasze sfinalizowane style dla przeglądarki Firefox będą wyglądać tak:

 /***** 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; }

Uwaga: przeglądarki Webkit nie stosują automatycznie tego promienia do obramowania, więc jeśli okaże się, że chcesz zastosować jakąś formę promienia obramowania do kciuka, w przeciwieństwie do anulowania go, jak to zrobiliśmy powyżej, będziesz potrzebować aby zastosować żądane wymiary border-radius zarówno do -webkit-slider-thumb jak i ::-moz-range-thumb .

Style ostrości

Ponieważ dane wejściowe zakresu są elementem interaktywnym, konieczne jest dodanie stylów fokusu, aby były zgodne z najlepszymi praktykami i standardami dotyczącymi ułatwień dostępu. Zastosowanie stylów fokusu stanowi wizualny wskaźnik dla użytkowników i jest szczególnie ważne dla osób korzystających z klawiatury do poruszania się po stronie.

Zgodnie z dokumentacją WAI-ARIA: Slider zaleca się, aby:

Fokus jest umieszczany na suwaku (obiekt wizualny, który użytkownik myszy poruszałby, znany również jako kciuk).

Pierwszą rzeczą, którą będziemy chcieli zrobić, to usunąć domyślne style fokusu, abyśmy mogli nadpisać je niestandardowymi stylami. Aby skupić się na stylach kciuka, możemy wykorzystać ::-webkit-slider-thumb i ::-moz-range-thumb , których użyliśmy w poprzedniej sekcji, i połączyć je z pseudoklasą :focus . Następnie możemy użyć właściwości CSS outline i outline-offset, aby nadać mu odpowiedni styl.

 /***** 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; }

Uwaga : jeśli do kciuka zostanie zastosowany border-radius , Firefox renderuje kontur w kształcie kciuka , podczas gdy inne przeglądarki wyświetlają kontur blokowy. Niestety nie ma na to prostej poprawki CSS i jest to jedyna niespójność, która będzie obecna. Jednak głównym celem dodawania tych stylów jest ułatwienie dostępu, a główny cel, zapewnienie wizualnego wskaźnika, gdy element jest skupiony, jest nadal osiągany.

Kładąc wszystko razem

Teraz, gdy omówiliśmy wszystkie style potrzebne do ujednolicenia wprowadzania zakresu, oto jak będzie wyglądał ostateczny arkusz stylów 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; }

Wniosek

Oprócz metod opisanych w tym artykule, możesz również skorzystać z utworzonego przeze mnie generatora CSS z wprowadzaniem zakresu o nazwie range-input.css . Sednem tego projektu było stworzenie narzędzia, które ułatwi ten proces programistom. Generator CSS umożliwia szybkie stylizowanie typowych właściwości CSS i udostępnia suwak demonstracyjny, który wyświetla w czasie rzeczywistym podgląd stylów, które chcesz zastosować.

Mamy nadzieję, że w przyszłości wprowadzanie zakresu stylizacji będzie prostsze. Jednak dopóki ten dzień nie nadejdzie, wiedza na temat pseudoelementów i prefiksów dostawców, do których należy kierować, pomoże ci na dobrej drodze do stylizacji suwaków, aby odpowiadały twoim potrzebom.

Dalsze zasoby dotyczące magazynu Smashing

• Generatory CSS
• Uproszczenie stylów form z accent-color
• Inteligentne rozwiązania CSS dla typowych wyzwań związanych z interfejsem użytkownika
• Głębokie zagłębienie się w object-fit i background-size w CSS