Attribut media de <style> HTML

Balise HTML <style>

Définition et utilisation

media Propriété utilisée pour définir le média ou l'appareil cible (optimisé) des styles CSS.

Cette propriété est utilisée pour définir les styles applicables à des appareils spécifiques (comme iPhone), aux médias vocaux ou à l'impression.

Astuce :Cette propriété peut accepter plusieurs valeurs.

Exemple

Exemple 1

Définir les styles utilisés pour l'impression :

<style media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>

Essayer personnellement

Exemple 2

Les deux groupes de styles sont distingués en utilisant la propriété width de l'attribut media :

<style media="screen AND (max-width:500px)" type="text/css">
a {
  background-color: grey;
  color: white;
  padding: 15px;
}
</style>
<style media="screen AND (min-width:500px)" type="text/css">
a {
  color: red;
  font-weight: 400;
}
</style>

Essayer personnellement

Remarque :Les styles du premier groupe sont utilisés lorsque la largeur de la fenêtre du navigateur est inférieure à 500 pixels, et les styles du second groupe sont utilisés lorsque la largeur de la fenêtre est supérieure à 500 pixels.

Syntaxe

<style media="value>

Opérateurs possibles

Opérateurs Description
and Opérateur de règle ET.
not Opérateur de règle NON.
, Opérateur de règle OU.

Les conditions d'utilisation des styles peuvent être conçues de manière très détaillée. Ce qui doit être clairement déterminé en premier est le type d'appareil cible. Le tableau suivant résume toutes les valeurs conformes aux règles :

Appareil

Appareil Description
all Par défaut. Appliqué à tous les appareils.
aural Synthétiseur vocal.
braille Appareils de feedback en braille.
handheld Appareils portables (écran de petite taille, bande passante limitée).
projection Projecteur.
print Mode aperçu avant impression / page d'impression.
screen Écran d'ordinateur.
tty Téléimprimeurs et autres médias utilisant une grille de caractères à espacement fixe.
tv Appareils de télévision (faible résolution, capacité de défilement limitée).

Le navigateur est responsable de l'interprétation de la classification des appareils. Certains types d'appareils (comme screen et print) sont interprétés de manière plus ou moins cohérente sur différents navigateurs, mais d'autres appareils (comme handheld) peuvent être interprétés de manière plus aléatoire. Par conséquent, il est très nécessaire de vérifier si l'interprétation de l'appareil cible par le navigateur est conforme à celle de votre propre interprétation.

Caractéristiques

Caractéristiques Description
width

Définit la largeur de la zone d'affichage cible.

Il est possible d'utiliser les préfixes "min-" et "max-".

Par exemple : media="screen and (min-width:500px)"
height

Définit la hauteur de la zone d'affichage cible.

Il est possible d'utiliser les préfixes "min-" et "max-".

Par exemple : media="screen and (max-height:700px)"
device-width

Définit la largeur de l'écran cible/papier.

Il est possible d'utiliser les préfixes "min-" et "max-".

Par exemple : media="screen and (device-width:500px)"
device-height

Définit la hauteur de l'écran cible/papier.

Il est possible d'utiliser les préfixes "min-" et "max-".

Par exemple : media="screen and (device-height:500px)"
orientation

Définit la direction de l'écran cible/papier.

Les valeurs supportées : portrait ou landscape.

Cette caractéristique n'a pas de terme limitatif.

Par exemple : media="all and (orientation: landscape)"
aspect-ratio

Définit le ratio largeur/hauteur de la zone d'affichage cible.

Il est possible d'utiliser les préfixes "min-" et "max-".

Par exemple : media="screen and (aspect-ratio:16/9)"
device-aspect-ratio

Définit le ratio largeur/hauteur de l'écran cible/papier.

Il est possible d'utiliser les préfixes "min-" et "max-".

Par exemple : media="screen and (aspect-ratio:16/9)"
color

Définit le nombre de bits par couleur de l'écran cible.

Il est possible d'utiliser les préfixes "min-" et "max-".

Par exemple : media="screen and (color:3)"
color-index

Définit le nombre de couleurs que l'écran cible peut traiter.

Il est possible d'utiliser les préfixes "min-" et "max-".

Par exemple : media="screen and (min-color-index:256)"
monochrome

Définit le nombre de bits par pixel dans le tampon de couleur monochrome.

Il est possible d'utiliser les préfixes "min-" et "max-".

Par exemple : media="screen and (monochrome:2)"
resolution

Définit la densité de pixels de l'écran cible/papier (dpi ou dpcm).

Il est possible d'utiliser les préfixes "min-" et "max-".

Par exemple : media="print and (resolution:300dpi)"
scan

Définit le mode de balayage du téléviseur.

Les valeurs supportées sont progressive et interlace.

Cette caractéristique n'a pas de terme limitatif.

Par exemple : media="tv and (scan:interlace)"
grille

Définir l'appareil de sortie en réseau ou en bitmap.

Les appareils en grille utilisent un réseau fixe pour afficher le contenu, par exemple les terminaux basés sur les caractères et les téléphones portables affichant en une ligne.

Les valeurs supportées sont 0 et 1 (1 représentant un appareil en grille).

Cette caractéristique n'a pas de terme limitatif.

Par exemple : media="handheld and (grid:1)"

Les caractéristiques telles que width sont généralement utilisées avec les termes min et max. Sans ces termes, l'utilisation des styles dépend de la taille très précise de la fenêtre, mais avec ces termes, la condition devient plus flexible.

Le tableau suivant liste et décrit les différentes fonctionnalités disponibles. Sauf indication contraire, ces fonctionnalités peuvent être modifiées par min- et max-, formant des seuils plutôt que des valeurs précises.

Comme pour les appareils spécifiés, ces fonctionnalités sont également expliquées par le navigateur. La situation spécifique de la reconnaissance des fonctionnalités par le navigateur et de l'identification de ces fonctionnalités quant à leur existence et à leur utilisation est complexe. Si vous souhaitez appliquer des styles en fonction de ces fonctionnalités, veuillez effectuer des tests complets et être prêt à utiliser des styles de secours en cas d'inutilisation des fonctionnalités prévues.

Compatibilité des navigateurs

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support

Balise HTML <style>