Caractéristique média CSS prefers-reduced-data
Disponibilité limitée
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
Want more browser support for this feature? Tell us why.
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.
Attention : 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.
Le navigateur obtient généralement cette information en interrogeant les préférences du système d'exploitation sous-jacent pour la réduction des données.
Syntaxe
no-preference-
Indique qu'aucune préférence n'a été exprimée par l'utilisateur·ice dans le système. Ce mot-clé est évalué à faux dans un contexte booléen.
reduce-
Indique que l'utilisateur·ice a exprimé une préférence pour un contenu alternatif allégé.
Exemples
Utilisation simple
Dans cet exemple, le fichier de police montserrat-regular.woff2 n'est 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.) sert 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
| Spécification |
|---|
| Media Queries Level 5 # prefers-reduced-data |
Compatibilité des navigateurs
Voir aussi
- L'entête HTTP
Save-Data