prefers-reduced-data
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Expérimental: Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.
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
Loading…
Voir aussi
- L'entête HTTP
Save-Data