CSS-update Mediaquery

Pas uw gebruikersinterface aan de vernieuwingsfrequentiemogelijkheden van het scherm aan.

Adam Argyle

CSS- mediaquery's zijn een krachtig hulpmiddel waarmee u de weergave van uw website of webapp kunt bepalen op basis van het apparaat waarop deze wordt bekeken. Met mediaquery's kunt u verschillende lay-outs maken voor verschillende schermformaten, oriëntaties en andere factoren.

De update biedt u een manier om de gebruikersinterface aan te passen aan de vernieuwingsfrequentie van een apparaat. De functie kan een waarde van fast , slow of none rapporteren die betrekking heeft op de mogelijkheden van verschillende apparaten.

Browserondersteuning

• 113
• 113
• 102
• 17

Bron

Apparaten en vernieuwingsfrequentie

De meeste apparaten waarvoor u ontwerpt, hebben waarschijnlijk een hoge vernieuwingsfrequentie. Dit omvat desktops en de meeste mobiele apparaten.

U kunt het apparaat bevragen, kijken of het een hoge vernieuwingsfrequentie heeft voor het weergeven van inhoud en dienovereenkomstig stylen, terwijl u nog steeds één stylesheet levert.

@media (update: fast) {
  /* computer screens, totally cool to animate */
}

eReaders en apparaten zoals betalingssystemen met een laag vermogen kunnen een trage verversingssnelheid hebben. Wetende dat het toestel niet overweg kan met animaties of frequente updates, betekent dat je batterijverbruik of foutieve weergave-updates kunt besparen.

@media (update: slow) {
  /* e-book readers or severely underpowered devices */
}

Ten slotte zijn er scenario's zoals gedrukt papier of e-ink-displays die mogelijk slechts één renderpassage bieden. Dergelijke uitvoer kan helemaal niet worden vernieuwd en wordt none genoemd. Het kan als volgt worden opgevraagd:

@media (update: none) {
  /* one time render like printed paper */
}

In de volgende CodePen ziet u een geleidelijk verbeterde zweefanimatie met behulp van deze nieuwe updatemediaquery:

Meer hulpbronnen

• CSS-mediaquery's niveau 4
• Update mediaquery op MDN