Thema's toepassen op door de browser gegenereerde UI

Webfuncties: ::selection user-select accent-color color-scheme scrollbar-color scrollbar-width :user-valid en :user-invalid :placeholder-shown ::placeholder field-sizing resize (CSS-eigenschap) Aanpasbare <select> appearance :has() ::file-selector-button

De meeste door de browser gegenereerde UI kan tot op zekere hoogte worden aangepast met CSS. Zelfs als er moderne functies voor nodig zijn, werkt het prima in oudere browsers en is er vaak geen polyfill of fallback nodig.

Voordat je de UI van de browser opnieuw maakt (formulierbesturingselementen, schuifbalken, selecties, foutmeldingen, enzovoort), controleer je eerst het volgende:

  1. de browser-UI niet genoeg kan worden aangepast aan je behoeften, zelfs niet met moderne CSS,
  2. de gewenste aanpassing is belangrijk genoeg om de nadelen van het opnieuw maken van de ingebouwde UI te rechtvaardigen, met name het verlies van toegankelijke semantiek, toetsenbordverwerking, IME en AT-integratie die de systeemeigen UI kosteloos biedt.

Voorbeelden van mogelijke aanpassingen:

  • Gebruik ::selection om de kleuren van gemarkeerde tekst aan te passen.
  • Pas user-select: none NIET toe op contenttekst. Dit verstoort kopiëren en plakken, vertaaltools en AT-gebaren voor 'vanaf hier lezen'. Beperk het tot de Chrome-interface (sleepgrepen, werkbalken, overbodige knoplabels).
  • Gebruik accent-color om de accentkleur van de pagina toe te passen op een door de browser gegenereerde UI.
  • Gebruik color-scheme om de browser-UI aan te passen aan de lichte/donkere modus.
  • Gebruik scrollbar-color om de kleuren van de scrollbalk aan te passen en scrollbar-width om de dikte van de scrollbalk te bepalen. Zorg dat de duim duidelijk te onderscheiden is van de track (≥3:1) en stel scrollbar-width: none niet in op scrollbare gebieden (gebruik dit alleen als scrollen volledig is vervangen door een andere mogelijkheid).
  • Gebruik :user-invalid / :user-valid voor geldige opmaak, niet :invalid / :valid. Deze komen alleen overeen nadat de gebruiker interactie heeft gehad met het veld, waardoor de onvriendelijke standaardinstelling wordt vermeden om vereiste lege velden als fouten te markeren bij het laden van de pagina. Sluit schuifregelaars voor bereik uit als je input breed target (bijv. input:not(input[type="range"]):user-valid), zodat de randen of achtergronden van de veldgeldigheid niet worden toegepast als je een schuifregelaar aanpast.
  • Knoppen en tekstvelden (waaronder <textarea>) kunnen over het algemeen worden opgemaakt als normale elementen.
  • Gebruik font-size om te schalen en andere teksteigenschappen om de typografie te beheren

Tekstvelden opmaken (<input> en <textarea>)

Voor de meeste opmaakdoeleinden (bijvoorbeeld kleuren, randen, achtergronden, typografie) behandelt u deze elementen als normale tekstcontainers.

  • Gebruik :placeholder-shown en ::placeholder om tijdelijke aanduidingen voor invoer op te maken.
  • Gebruik field-sizing: content om de grootte van tekstvelden aan te passen aan de content.
  • Gebruik voor <textarea>-elementen resize: vertical om horizontaal formaat aanpassen uit te zetten of resize: none om alle formaat aanpassen uit te zetten.

Bedieningselementen voor meerkeuzevragen (selecteren, keuzerondjes, selectievakjes)

  • Zo selecteer je een van de vele opties in een dropdownmenu: Gebruik een <select> + appearance: base-select + ::picker(select). Ga naar Stijl van Branded Select voor meer informatie.
  • Een of meer opties selecteren uit meerdere opties die inline op de pagina staan: Gebruik een <input type=checkbox> of <input type=radio> in een <label> voor elke optie. Stijl via label:has(:checked).
  • Stijl selectievakjes, keuzerondjes en schakelaars via appearance: none + gegenereerde content (::before/::after) of achtergrondafbeeldingen om de aangevinkte status te tekenen.

Niet-tekstuele <input>'s (knoppen, schuifregelaars, bestandsinvoer, enzovoort)

  • Bestandsinvoer: Gebruik ::file-selector-button om de knop op te maken.
  • Gebruik <input> niet met een type van button, submit of reset. Gebruik in plaats daarvan <button> en stijl het als een normaal element.
  • Schuifregelaars: Gebruik appearance: none + thumb-pseudo-elementen (::-webkit-slider-thumb, ::-moz-range-thumb, enzovoort) en track-pseudo-elementen (::-webkit-slider-runnable-track, ::-moz-range-track, enzovoort) voor gedetailleerdere controle.