Deze pagina is vertaald door de Cloud Translation API.

CSS geeft de voorkeur aan verminderde transparantie

Optimaliseer en pas aan voor gebruikers die de voorkeur geven aan een ondoorzichtige gebruikersinterface.

Adam Argyle

Vanaf Chrome 118 is de nieuwe functie voor mediaquery's prefers-reduced-transparency van CSS Media Queries 5 beschikbaar. Niet-ondoorzichtige interfaces kunnen hoofdpijn veroorzaken of een visuele strijd zijn bij verschillende soorten gezichtsstoornissen. Dit is de reden waarom Windows, macOS en iOS systeemvoorkeuren hebben die de transparantie van de gebruikersinterface kunnen verminderen of verwijderen.

Browserondersteuning

Bron

Met deze nieuwe mediaquery in de browser kan CSS de interface aanpassen voor gebruikers die een wens voor verminderde transparantie specificeren:

.example {
  --opacity: .5;

  background: hsl(200 100% 50% / var(--opacity));

  @media (prefers-reduced-transparency: reduce) {
    --opacity: .95;
  }
}

In het voorgaande codevoorbeeld heeft een CSS-variabele een dekkingswaarde van 50% , die vervolgens met HSL wordt gebruikt om een semi-transparante blauwe achtergrond te creëren. De geneste mediaquery controleert op een gebruikersvoorkeur voor verminderde transparantie en past, indien waar, de dekkingsvariabele aan naar 95% , een bijna ondoorzichtige dekkingswaarde.

Deze mediaquery sluit goed aan bij de andere voorkeursmediaquery's, waardoor ontwerpers en ontwikkelaars creatief kunnen zijn en zich tegelijkertijd kunnen aanpassen aan gebruikers. Je kunt deze mediaquery's zien als een stoel in een auto die de positie automatisch aanpast aan de gebruiker; Wanneer een gebruiker uw website bezoekt, past deze zich automatisch aan, zonder dat hij erom vraagt. Zo cool.

Gebruik cases voor het verminderen van transparantie

De volgende paragrafen zullen gewijd zijn aan het tonen van momenten en mogelijkheden om de transparantie op zinvolle manieren te verminderen.

Semi-transparante bijschriften op afbeeldingen

Het is vrij gebruikelijk om een miniatuur van een afbeelding of video te bedekken met een semi-transparant bijschrift of samenvatting. Het volgende voorbeeld illustreert één manier om met een voorkeur voor verminderde transparantie om te gaan. De overlay wordt volledig verwijderd en dezelfde inhoud van het bijschrift wordt onder de afbeelding weergegeven in plaats van eroverheen.

Transparante modaliteiten, meldingen en popovers

Een andere manier waarop UI-elementen inhoud overlappen, wat vaak betekent dat er elementen van ondoorzichtigheid aanwezig zijn, is met modals, meldingen en popovers. In deze gevallen kan het verhogen van de dekking de voorkeur van de gebruiker respecteren, terwijl er nog steeds een subtiele hoeveelheid kleur van achter de overlay doorheen kan gluren.

.card {
  background: hsl(none none 100% / 20%);

  @media (prefers-reduced-transparency: reduce) {
    background: hsl(none none 0% / 80%);
  }
}

Adaptief matglas

Een andere populaire stijl voor beeldoverlay is matglas. In het volgende voorbeeld is de afbeelding achter het onderschrift een spiegelreflectie van de productafbeelding. Dit heeft een aantal voordelen: het beeld wordt niet bijgesneden en de voorkeur voor licht of donker kan wat meer naar voren komen in het eindresultaat.

.adaptive-glass {
  --glass-lightness: 100%;
  --glass-alpha: 50%;

  background: hsl(0 0% var(--glass-lightness) / var(--glass-alpha));
  backdrop-filter: blur(40px);

  @media (prefers-color-scheme: dark) {
    --glass-lightness: 0%;
  }

  @media (prefers-reduced-transparency: reduce) {
    --glass-alpha: 85%;
  }
}

Held koptekst

Een veelvoorkomend startpagina-element heeft een vetgedrukte boodschap over een herhalende video of geanimeerde afbeelding. Het volgende voorbeeld heeft een kleurrijke, semi-transparante verloopoverlay en een oneindig bewegende achtergrondafbeelding. Hoewel dit veel aandacht kan trekken, zal het voor velen ook problemen opleveren, vanwege het lage contrast met transparantie en beweging die niet onder controle kunnen worden gehouden.

Dit kan worden opgelost met twee CSS-mediaquery's: geeft de voorkeur aan verminderde beweging en geeft de voorkeur aan verminderde transparantie. Binnen de mediaquery met verminderde beweging kunt u de oneindige animatie alleen toepassen als de gebruiker "geen voorkeur" heeft voor verminderde beweging, wat aan de code aangeeft dat deze gebruiker geen beweging mag hebben.

Bovendien kunt u met de mediaquery met verminderde transparantie de dekking verlagen, zodat de overlaykleur bijna 100% is. Nu kan de boodschap gemakkelijk worden gelezen zonder bewegingsafleiding of problematisch contrast.

Voeg het allemaal samen en u kunt een creatieve UI-look inzetten en er tegelijkertijd voor zorgen dat de doelgroep het kan lezen en de boodschap kan begrijpen.

.Hero img {
  @media (prefers-reduced-motion: no-preference) {
    animation: zoom 30s ease infinite;
  }
}

.Hero .overlay {
  background: hsl(none none 0% / 95%);

  @media (prefers-reduced-transparency: no-preference) {
    background: linear-gradient(
      to top right in oklab,
      oklch(40% 0.3 340 / 70%),
      oklch(40% 0.4 200 / 70%)
    );
  }
}

Additieve versus subtractieve perspectieven op gebruikersvoorkeuren

In het vorige voorbeeld werd bij deze gebruikersvoorkeuren niet gecontroleerd op hun verminderde voorkeur, maar werd er gecontroleerd of er geen voorkeur was.

@media (prefers-reduced-transparency: no-preference) {
  …
}

Ontwikkelaars en ontwerpers 'vallen' vaak terug op de gebruikerservaring op basis van deze voorkeuren, in een subtractieve mentaliteit. Dit manifesteert zich in de mediaquery's als een controle op 'verminderen', waarna iets uit de gebruikersinterface wordt verwijderd. Het voorbeeld laat een additieve mentaliteit zien, waarbij beweging en transparantie worden toegevoegd als de gebruiker dat goed vindt.

Deze aanpak helpt je na te denken over een gezonde basiservaring die op zichzelf stevig staat. Voeg vervolgens, als de gebruiker het goed vindt, iets toe aan de ervaring.

Ontwikkeltools

De Chrome DevTools kunnen deze voorkeur emuleren voor verminderde transparantie (en meer) op het tabblad Rendering . In de volgende video ziet u hoe u de mediaquery's 'Voorkeurskleurenschema' en 'Voorkeur voor verminderde transparantie' kunt schakelen om de lichte, donkere, transparante en verminderde transparantievarianten van de matglaskaart te laten zien.

https://codepen.io/web-dot-dev/pen/dyaojxr

Optimaliseer en pas aan voor gebruikers die de voorkeur geven aan een ondoorzichtige gebruikersinterface.

Adam Argyle

Browserondersteuning

Bron

Met deze nieuwe mediaquery in de browser kan CSS de interface aanpassen voor gebruikers die een wens voor verminderde transparantie specificeren:

.example {
  --opacity: .5;

  background: hsl(200 100% 50% / var(--opacity));

  @media (prefers-reduced-transparency: reduce) {
    --opacity: .95;
  }
}

Gebruik cases voor het verminderen van transparantie

De volgende paragrafen zullen gewijd zijn aan het tonen van momenten en mogelijkheden om de transparantie op zinvolle manieren te verminderen.

Semi-transparante bijschriften op afbeeldingen

Transparante modaliteiten, meldingen en popovers

.card {
  background: hsl(none none 100% / 20%);

  @media (prefers-reduced-transparency: reduce) {
    background: hsl(none none 0% / 80%);
  }
}

Adaptief matglas

.adaptive-glass {
  --glass-lightness: 100%;
  --glass-alpha: 50%;

  background: hsl(0 0% var(--glass-lightness) / var(--glass-alpha));
  backdrop-filter: blur(40px);

  @media (prefers-color-scheme: dark) {
    --glass-lightness: 0%;
  }

  @media (prefers-reduced-transparency: reduce) {
    --glass-alpha: 85%;
  }
}

Held koptekst

Een veelvoorkomend startpagina-element heeft een vetgedrukte boodschap over een herhalende video of geanimeerde afbeelding. Het volgende voorbeeld heeft een kleurrijke, semi-transparante verloopoverlay en een oneindig bewegende achtergrondafbeelding. Hoewel dit veel aandacht kan trekken, zal het voor velen ook voor problemen zorgen, vanwege het lage contrast met de transparantie en de beweging die niet kan worden gecontroleerd.

Voeg het allemaal samen en u kunt een creatieve UI-look inzetten en er tegelijkertijd voor zorgen dat de doelgroep het kan lezen en de boodschap kan begrijpen.

.Hero img {
  @media (prefers-reduced-motion: no-preference) {
    animation: zoom 30s ease infinite;
  }
}

.Hero .overlay {
  background: hsl(none none 0% / 95%);

  @media (prefers-reduced-transparency: no-preference) {
    background: linear-gradient(
      to top right in oklab,
      oklch(40% 0.3 340 / 70%),
      oklch(40% 0.4 200 / 70%)
    );
  }
}

Additieve versus subtractieve perspectieven op gebruikersvoorkeuren

In het vorige voorbeeld werd bij deze gebruikersvoorkeuren niet gecontroleerd op hun verminderde voorkeur, maar werd er gecontroleerd of er geen voorkeur was.

@media (prefers-reduced-transparency: no-preference) {
  …
}

Deze aanpak helpt je na te denken over een gezonde basiservaring die op zichzelf stevig staat. Voeg vervolgens, als de gebruiker het goed vindt, iets toe aan de ervaring.

Ontwikkeltools

https://codepen.io/web-dot-dev/pen/dyaojxr