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 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