prefers-reduced-data
Limited availability
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.
Note : Cette fonctionnalité n'est prise en charge par aucun agent utilisateur et ses spécificités sont susceptibles d'évoluer.
La caractéristique média CSS prefers-reduced-data permet de détecter si un·e utilisateur·ice a demandé à ce que le contenu web consomme moins de données internet.
Syntaxe
no-preference-
Indique qu'aucune préférence n'a été exprimée par l'utilisateur·ice dans le système. Cette valeur-clé est évaluée à faux dans un contexte booléen.
reduce-
Indique que l'utilisateur·ice a exprimé une préférence pour un contenu alternatif allégé.
Préférences utilisateur
Actuellement, aucun agent utilisateur·ice n'implémente cette fonctionnalité, bien que divers systèmes d'exploitation prennent en charge ce type de préférence. Si cette requête média est un jour prise en charge, les agents utilisateur·ice·s s'appuieront probablement sur les réglages du système d'exploitation.
Exemples
Note : Aucun navigateur n'implémente actuellement cette fonctionnalité, l'exemple suivant ne fonctionnera donc pas.
Dans cet exemple, le fichier de police montserrat-regular.woff2 ne sera ni préchargé ni téléchargé si l'utilisateur·ice préfère réduire la consommation de données. Dans ce cas, la « pile de polices système » (angl.) servira de police de secours :
HTML
<head>
<link
rel="preload"
href="fonts/montserrat-regular.woff2"
as="font"
media="(prefers-reduced-data: no-preference)"
crossorigin />
<link rel="stylesheet" href="style.css" />
</head>
CSS
@media (prefers-reduced-data: no-preference) {
@font-face {
font-family: Montserrat;
font-style: normal;
font-weight: 400;
font-display: swap;
/* latin */
src:
local("Montserrat Regular"),
local("Montserrat-Regular"),
url("fonts/montserrat-regular.woff2") format("woff2");
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
U+FEFF, U+FFFD;
}
}
body {
font-family:
Montserrat,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Helvetica,
Arial,
"Microsoft YaHei",
sans-serif,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol";
}
Spécifications
| Specification |
|---|
| Media Queries Level 5 # prefers-reduced-data |
Compatibilité des navigateurs
Chargement…
Voir aussi
- L'entête HTTP
Save-Data