Motywy interfejsu generowanego przez przeglądarkę

Funkcje internetowe: ::selection user-select accent-color color-scheme scrollbar-color scrollbar-width :user-valid i :user-invalid :placeholder-shown ::placeholder field-sizing resize (właściwość CSS) Możliwość dostosowania elementu <select> appearance :has() ::file-selector-button

Większość elementów interfejsu generowanych przez przeglądarkę można w pewnym stopniu dostosować za pomocą CSS. Nawet jeśli wymaga nowoczesnych funkcji, działa poprawnie w starszych przeglądarkach, więc często nie wymaga kodu polyfill ani kreacji zastępczej.

Zanim odtworzysz interfejs przeglądarki (elementy sterujące formularza, paski przewijania, zaznaczenia, komunikaty o błędach itp.), sprawdź, czy:

  1. interfejsu przeglądarki nie można dostosować do Twoich potrzeb, nawet przy użyciu nowoczesnego CSS;
  2. żądane dostosowanie jest na tyle ważne, że uzasadnia kompromisy związane z ponownym tworzeniem wbudowanego interfejsu użytkownika – przede wszystkim utratę semantyki ułatwień dostępu, obsługi klawiatury, edytora IME i integracji z technologiami wspomagającymi, które natywny interfejs użytkownika zapewnia bezpłatnie.

Przykładowe możliwe dostosowania:

  • Użyj ::selection, aby dostosować kolory wyróżnienia niestandardowego tekstu.
  • NIE stosuj atrybutu user-select: none do tekstu treści – uniemożliwia to kopiowanie i wklejanie, korzystanie z narzędzi do tłumaczenia i gestów „czytaj od tego miejsca” w technologiach wspomagających. Ogranicz je do elementów interfejsu (uchwyty do przeciągania, paski narzędzi, zbędne etykiety przycisków).
  • Użyj accent-color, aby zastosować kolor uzupełniający strony do dowolnego interfejsu wygenerowanego przez przeglądarkę.
  • Użyj color-scheme, aby dostosować interfejs przeglądarki do trybu jasnego lub ciemnego.
  • Użyj scrollbar-color, aby dostosować kolory paska przewijania, i scrollbar-width, aby kontrolować jego grubość. Suwak powinien być wyraźnie odróżniony od ścieżki (≥3:1). Nie ustawiaj scrollbar-width: none w obszarach przewijania (używaj tej właściwości tylko wtedy, gdy przewijanie jest całkowicie zastąpione przez inną funkcję).
  • Do stylizacji poprawności używaj :user-invalid / :user-valid, a nie :invalid / :valid – te ostatnie są dopasowywane dopiero po interakcji użytkownika z polem, co pozwala uniknąć oznaczania wymaganych pustych pól jako błędów podczas wczytywania strony. Wyklucz suwaki zakresu, gdy kierujesz reklamy na input szeroko (np. input:not(input[type="range"]):user-valid), aby dostosowanie suwaka nie powodowało stosowania do niego obramowań ani tła pola.
  • Przyciski i pola tekstowe (w tym <textarea>) można zwykle stylizować jak zwykłe elementy.
  • Używaj font-size do skalowania i innych właściwości tekstowych, aby kontrolować typografię

Stylizowanie pól tekstowych (<input> i <textarea>)

W większości przypadków (np.kolory, obramowania, tła, typografia itp.) traktuj te elementy jak zwykłe kontenery tekstowe.

  • Użyj :placeholder-shown i ::placeholder, aby nadać styl obiektom zastępczym danych wejściowych.
  • Użyj field-sizing: content, aby dopasować rozmiar pól tekstowych do zawartości.
  • W przypadku elementów <textarea> użyj resize: vertical, aby wyłączyć zmianę rozmiaru w poziomie, lub resize: none, aby wyłączyć zmianę rozmiaru w ogóle.

Elementy sterujące wielokrotnego wyboru (wybór, przyciski, pola wyboru)

  • Aby wybrać jedną z wielu opcji wyświetlanych w menu, użyj kombinacji <select> + appearance: base-select + ::picker(select). Więcej informacji znajdziesz w artykule Stylizacja Branded Select.
  • Wybieranie co najmniej jednej z wielu opcji ułożonych w wierszu na stronie: użyj elementu <input type=checkbox> lub <input type=radio> wewnątrz elementu <label> dla każdej opcji. Styl: label:has(:checked).
  • Stylizuj pola wyboru, przyciski opcji i przełączniki za pomocą appearance: none i wygenerowanej treści (::before/::after) lub obrazów tła, aby narysować stan zaznaczenia.

Elementy <input>, które nie są tekstem (przyciski, suwaki, pola wprowadzania plików itp.)

  • Dane wejściowe pliku: użyj ::file-selector-button, aby nadać styl przyciskowi.
  • Nie używaj <input> z type o wartości button, submit lub reset. Zamiast tego użyj <button> i nadaj mu styl zwykłego elementu.
  • Suwaki: używaj pseudoelementów appearance: none + thumb (::-webkit-slider-thumb, ::-moz-range-thumb itp.) i pseudoelementów track (::-webkit-slider-runnable-track, ::-moz-range-track itp.), aby uzyskać bardziej szczegółową kontrolę.