From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../css/@media/-moz-device-pixel-ratio/index.html | 46 ++++++ .../css/@media/-moz-mac-graphite-theme/index.html | 34 +++++ .../web/css/@media/-moz-maemo-classic/index.html | 30 ++++ files/fr/web/css/@media/-moz-os-version/index.html | 34 +++++ .../@media/-moz-scrollbar-end-backward/index.html | 32 +++++ .../@media/-moz-scrollbar-end-forward/index.html | 32 +++++ .../-moz-scrollbar-start-backward/index.html | 32 +++++ .../@media/-moz-scrollbar-start-forward/index.html | 32 +++++ .../-moz-scrollbar-thumb-proportional/index.html | 32 +++++ .../web/css/@media/-moz-touch-enabled/index.html | 46 ++++++ .../index.html | 46 ++++++ .../web/css/@media/-moz-windows-classic/index.html | 34 +++++ .../css/@media/-moz-windows-compositor/index.html | 32 +++++ .../@media/-moz-windows-default-theme/index.html | 34 +++++ .../web/css/@media/-moz-windows-glass/index.html | 25 ++++ .../web/css/@media/-moz-windows-theme/index.html | 43 ++++++ .../fr/web/css/@media/-webkit-animation/index.html | 38 +++++ .../@media/-webkit-device-pixel-ratio/index.html | 119 ++++++++++++++++ .../web/css/@media/-webkit-transform-2d/index.html | 36 +++++ .../web/css/@media/-webkit-transform-3d/index.html | 71 ++++++++++ .../web/css/@media/-webkit-transition/index.html | 51 +++++++ files/fr/web/css/@media/any-hover/index.html | 72 ++++++++++ files/fr/web/css/@media/any-pointer/index.html | 105 ++++++++++++++ files/fr/web/css/@media/aspect-ratio/index.html | 111 +++++++++++++++ files/fr/web/css/@media/aural/index.html | 42 ++++++ files/fr/web/css/@media/color-gamut/index.html | 68 +++++++++ files/fr/web/css/@media/color-index/index.html | 84 +++++++++++ files/fr/web/css/@media/color/index.html | 94 +++++++++++++ .../web/css/@media/device-aspect-ratio/index.html | 59 ++++++++ files/fr/web/css/@media/device-height/index.html | 53 +++++++ files/fr/web/css/@media/device-width/index.html | 53 +++++++ files/fr/web/css/@media/display-mode/index.html | 84 +++++++++++ files/fr/web/css/@media/forced-colors/index.html | 86 ++++++++++++ files/fr/web/css/@media/grid/index.html | 83 +++++++++++ files/fr/web/css/@media/height/index.html | 83 +++++++++++ files/fr/web/css/@media/hover/index.html | 72 ++++++++++ files/fr/web/css/@media/index.html | 155 +++++++++++++++++++++ files/fr/web/css/@media/index/index.html | 12 ++ files/fr/web/css/@media/inverted-colors/index.html | 92 ++++++++++++ files/fr/web/css/@media/monochrome/index.html | 85 +++++++++++ files/fr/web/css/@media/orientation/index.html | 88 ++++++++++++ files/fr/web/css/@media/overflow-block/index.html | 71 ++++++++++ files/fr/web/css/@media/overflow-inline/index.html | 78 +++++++++++ files/fr/web/css/@media/pointer/index.html | 101 ++++++++++++++ .../web/css/@media/prefers-color-scheme/index.html | 103 ++++++++++++++ .../fr/web/css/@media/prefers-contrast/index.html | 86 ++++++++++++ .../css/@media/prefers-reduced-motion/index.html | 135 ++++++++++++++++++ .../@media/prefers-reduced-transparency/index.html | 84 +++++++++++ files/fr/web/css/@media/resolution/index.html | 75 ++++++++++ files/fr/web/css/@media/scan/index.html | 85 +++++++++++ files/fr/web/css/@media/scripting/index.html | 87 ++++++++++++ files/fr/web/css/@media/shape/index.html | 97 +++++++++++++ .../fr/web/css/@media/update-frequency/index.html | 82 +++++++++++ files/fr/web/css/@media/width/index.html | 90 ++++++++++++ 54 files changed, 3634 insertions(+) create mode 100644 files/fr/web/css/@media/-moz-device-pixel-ratio/index.html create mode 100644 files/fr/web/css/@media/-moz-mac-graphite-theme/index.html create mode 100644 files/fr/web/css/@media/-moz-maemo-classic/index.html create mode 100644 files/fr/web/css/@media/-moz-os-version/index.html create mode 100644 files/fr/web/css/@media/-moz-scrollbar-end-backward/index.html create mode 100644 files/fr/web/css/@media/-moz-scrollbar-end-forward/index.html create mode 100644 files/fr/web/css/@media/-moz-scrollbar-start-backward/index.html create mode 100644 files/fr/web/css/@media/-moz-scrollbar-start-forward/index.html create mode 100644 files/fr/web/css/@media/-moz-scrollbar-thumb-proportional/index.html create mode 100644 files/fr/web/css/@media/-moz-touch-enabled/index.html create mode 100644 files/fr/web/css/@media/-moz-windows-accent-color-in-titlebar/index.html create mode 100644 files/fr/web/css/@media/-moz-windows-classic/index.html create mode 100644 files/fr/web/css/@media/-moz-windows-compositor/index.html create mode 100644 files/fr/web/css/@media/-moz-windows-default-theme/index.html create mode 100644 files/fr/web/css/@media/-moz-windows-glass/index.html create mode 100644 files/fr/web/css/@media/-moz-windows-theme/index.html create mode 100644 files/fr/web/css/@media/-webkit-animation/index.html create mode 100644 files/fr/web/css/@media/-webkit-device-pixel-ratio/index.html create mode 100644 files/fr/web/css/@media/-webkit-transform-2d/index.html create mode 100644 files/fr/web/css/@media/-webkit-transform-3d/index.html create mode 100644 files/fr/web/css/@media/-webkit-transition/index.html create mode 100644 files/fr/web/css/@media/any-hover/index.html create mode 100644 files/fr/web/css/@media/any-pointer/index.html create mode 100644 files/fr/web/css/@media/aspect-ratio/index.html create mode 100644 files/fr/web/css/@media/aural/index.html create mode 100644 files/fr/web/css/@media/color-gamut/index.html create mode 100644 files/fr/web/css/@media/color-index/index.html create mode 100644 files/fr/web/css/@media/color/index.html create mode 100644 files/fr/web/css/@media/device-aspect-ratio/index.html create mode 100644 files/fr/web/css/@media/device-height/index.html create mode 100644 files/fr/web/css/@media/device-width/index.html create mode 100644 files/fr/web/css/@media/display-mode/index.html create mode 100644 files/fr/web/css/@media/forced-colors/index.html create mode 100644 files/fr/web/css/@media/grid/index.html create mode 100644 files/fr/web/css/@media/height/index.html create mode 100644 files/fr/web/css/@media/hover/index.html create mode 100644 files/fr/web/css/@media/index.html create mode 100644 files/fr/web/css/@media/index/index.html create mode 100644 files/fr/web/css/@media/inverted-colors/index.html create mode 100644 files/fr/web/css/@media/monochrome/index.html create mode 100644 files/fr/web/css/@media/orientation/index.html create mode 100644 files/fr/web/css/@media/overflow-block/index.html create mode 100644 files/fr/web/css/@media/overflow-inline/index.html create mode 100644 files/fr/web/css/@media/pointer/index.html create mode 100644 files/fr/web/css/@media/prefers-color-scheme/index.html create mode 100644 files/fr/web/css/@media/prefers-contrast/index.html create mode 100644 files/fr/web/css/@media/prefers-reduced-motion/index.html create mode 100644 files/fr/web/css/@media/prefers-reduced-transparency/index.html create mode 100644 files/fr/web/css/@media/resolution/index.html create mode 100644 files/fr/web/css/@media/scan/index.html create mode 100644 files/fr/web/css/@media/scripting/index.html create mode 100644 files/fr/web/css/@media/shape/index.html create mode 100644 files/fr/web/css/@media/update-frequency/index.html create mode 100644 files/fr/web/css/@media/width/index.html (limited to 'files/fr/web/css/@media') diff --git a/files/fr/web/css/@media/-moz-device-pixel-ratio/index.html b/files/fr/web/css/@media/-moz-device-pixel-ratio/index.html new file mode 100644 index 0000000000..2aa1ca70a4 --- /dev/null +++ b/files/fr/web/css/@media/-moz-device-pixel-ratio/index.html @@ -0,0 +1,46 @@ +--- +title: '-moz-device-pixel-ratio' +slug: Web/CSS/@media/-moz-device-pixel-ratio +tags: + - '@media' + - CSS + - Caractéristique média + - Déprécié + - Non-standard +translation_of: Web/CSS/@media/-moz-device-pixel-ratio +--- +
{{cssref}} {{Non-standard_header}} {{Deprecated_header}}{{h3_gecko_minversion("-moz-device-pixel-ratio", "2.0")}} {{deprecated_inline("16")}}
+ +

La caractéristique média -moz-device-pixel-ratio, associée à @media, est une caractéristique propre à Gecko et peut être utilisée pour appliquer certains styles en fonctions du nombres de pixels physiques par pixel CSS.

+ +
+

Ne pas utiliser cette fonctionnalité ! La caractéristique resolution et l'unité dppx permettent d'obtenir le même mécanisme.
+
+ -moz-device-pixel-ratio peut être utilisée si besoin d'être compatible avec des versions de Firefox antérieures à la version 16 et -webkit-device-pixel-ratio peut être utilisée avec les navigateurs WebKit qui ne prennent pas en charge dppx. Par exemple :

+ +
@media (-webkit-min-device-pixel-ratio: 2), /* Navigateurs basés sur Webkit */
+       (min--moz-device-pixel-ratio: 2),    /* Anciens Firefox (avant Firefox 16) */
+       (min-resolution: 2dppx),             /* La méthode standard */
+       (min-resolution: 192dpi)             /* Utilisée si dppx n'est pas gérée */
+ +

Voir cet article du CSSWG pour les bonnes pratiques quant à la compatibilité de resolution et dppx.

+
+ +
Note : Cette caractéristique est également implémentée par Webkit et IE 11 pour Windows Phone 8.1 sous le nom -webkit-device-pixel-ratio. Les versions préfixées pour les seuils minimal / maximal sont intitulées min--moz-device-pixel-ratio et max--moz-device-pixel-ratio sous Gecko, tandis que sous Webkit, elles sont intitulées  -webkit-min-device-pixel-ratio et -webkit-max-device-pixel-ratio.
+ +

Syntaxe

+ +
+
{{cssxref("<number>")}}
+
Le nombre de pixels physiques pour un pixel CSS.
+
+ +


+ Média : {{cssxref("Media/Visual")}}
+ Gestion des préfixes min/max : Oui

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.media.-moz-device-pixel-ratio")}}

diff --git a/files/fr/web/css/@media/-moz-mac-graphite-theme/index.html b/files/fr/web/css/@media/-moz-mac-graphite-theme/index.html new file mode 100644 index 0000000000..0e40cdfb52 --- /dev/null +++ b/files/fr/web/css/@media/-moz-mac-graphite-theme/index.html @@ -0,0 +1,34 @@ +--- +title: '-moz-mac-graphite-theme' +slug: Web/CSS/@media/-moz-mac-graphite-theme +tags: + - '@media' + - CSS + - Caractéristique média + - Non-standard +translation_of: Archive/Web/CSS/@media/-moz-mac-graphite-theme +--- +
{{cssref}} {{Non-standard_header}}
+ +
+

Note : Depuis Firefox 58, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.

+
+ +

La caractéristique média -moz-mac-graphite-theme, rattachée à la règle @  @media, est spécifique à Gecko et peut être utilisée afin d'appliquer des styles si, sur macOS, l'utilisateur utilise le thème "Graphite".

+ +

Syntaxe

+ +
+
{{cssxref("<integer>")}}
+
Si l'utilisateur a configuré son appareil afin d'utiliser le thème "Graphite" de macOS X, cette caractéristique vaut 1. Sinon, elle vaut 0.
+
+ +


+ Média : {{cssxref("Media/Visual")}}
+ Gestion des préfixes min/max : Non

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/-moz-maemo-classic/index.html b/files/fr/web/css/@media/-moz-maemo-classic/index.html new file mode 100644 index 0000000000..1711266448 --- /dev/null +++ b/files/fr/web/css/@media/-moz-maemo-classic/index.html @@ -0,0 +1,30 @@ +--- +title: '-moz-maemo-classic' +slug: Web/CSS/@media/-moz-maemo-classic +tags: + - '@media' + - CSS + - Caractéristique média + - Non-standard +translation_of: Archive/Web/CSS/@media/-moz-maemo-classic +--- +
{{CSSRef}}{{Non-standard_Header}}{{Gecko_MinVersion_Header("1.9.2")}}
+ +

La caractérique média -moz-maemo-classic, rattachée à la règle @ @media, est spécifique à Gecko et permet d'appliquer des styles si l'agent utilisateur utilise le thème Maemo original.

+ +

Syntaxe

+ +
+
{{cssxref("<integer>")}}
+
Si l'agent utilisateur utilise Maemo avec le thème original, cette caractéristique vaut 1. Sinon, elle vaut 0.
+
+ +


+ Média : {{cssxref("Media/Visual")}}
+ Gestion des préfixes min/max : Non.

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/-moz-os-version/index.html b/files/fr/web/css/@media/-moz-os-version/index.html new file mode 100644 index 0000000000..5fafbdb5c5 --- /dev/null +++ b/files/fr/web/css/@media/-moz-os-version/index.html @@ -0,0 +1,34 @@ +--- +title: '-moz-os-version' +slug: Web/CSS/@media/-moz-os-version +tags: + - '@media' + - CSS + - Caractéristique média + - Non-standard +translation_of: Archive/Web/CSS/@media/-moz-os-version +--- +
{{cssref}}{{Non-standard_header}}
+ +
+

Note : Depuis Firefox 58, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.

+
+ +

La caractéristique média -moz-os-version, rattachée à la règle @ @media, est spécifique à Gecko et permet d'appliquer des styles en fonction de la version de Windows de l'utilisateur. Cela peut être utile afin d'adapter l'apparence d'une interface utilisateur en fonction de la version du système d'exploitation.

+ +

Syntaxe

+ +

Valeurs

+ +
+
windows-win7
+
Le système d'exploitation est Windows 7.
+
windows-win8
+
Le système d'exploitation est Windows 8.
+
windows-win10
+
Le système d'exploitation est Windows 10.
+
+ +


+ Média : {{cssxref("Media/Visual")}}
+ Gestion des préfixes min/max : Non

diff --git a/files/fr/web/css/@media/-moz-scrollbar-end-backward/index.html b/files/fr/web/css/@media/-moz-scrollbar-end-backward/index.html new file mode 100644 index 0000000000..823591be7f --- /dev/null +++ b/files/fr/web/css/@media/-moz-scrollbar-end-backward/index.html @@ -0,0 +1,32 @@ +--- +title: '-moz-scrollbar-end-backward' +slug: Web/CSS/@media/-moz-scrollbar-end-backward +tags: + - '@media' + - CSS + - Caractéristique média + - Non-standard +translation_of: Archive/Web/CSS/@media/-moz-scrollbar-end-backward +--- +
{{cssref}}{{Non-standard_header}}
+ +
+

Note : Depuis Firefox 58, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.

+
+ +

Syntaxe

+ +
+
{{cssxref("<integer>")}}
+
Si l'interface de l'appareil affiche une flèche à la fin des ascensceurs (scrollbars), cette caractéristique vaut 1 et sinon 0.
+
+ +


+ Média : {{cssxref("Media/Visual")}}
+ Gestion des préfixes min/max : Non

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/-moz-scrollbar-end-forward/index.html b/files/fr/web/css/@media/-moz-scrollbar-end-forward/index.html new file mode 100644 index 0000000000..2d7bb0dd8a --- /dev/null +++ b/files/fr/web/css/@media/-moz-scrollbar-end-forward/index.html @@ -0,0 +1,32 @@ +--- +title: '-moz-scrollbar-end-forward' +slug: Web/CSS/@media/-moz-scrollbar-end-forward +tags: + - '@media' + - CSS + - Caractéristique média + - Non-standard +translation_of: Archive/Web/CSS/@media/-moz-scrollbar-end-forward +--- +
{{cssref}} {{Non-standard_header}}
+ +
+

Note : Depuis Firefox 58, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.

+
+ +

Syntaxe

+ +
+
{{cssxref("<integer>")}}
+
Si l'interface de l'appareil affiche un bouton avec une flèche à la fin des ascenseurs (scrollbars), cette caractéristique vaut 1, sinon elle vaut 0.
+
+ +


+ Média : {{cssxref("Media/Visual")}}
+ Gestion des préfixes min/max : Non

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/-moz-scrollbar-start-backward/index.html b/files/fr/web/css/@media/-moz-scrollbar-start-backward/index.html new file mode 100644 index 0000000000..1424cda885 --- /dev/null +++ b/files/fr/web/css/@media/-moz-scrollbar-start-backward/index.html @@ -0,0 +1,32 @@ +--- +title: '-moz-scrollbar-start-backward' +slug: Web/CSS/@media/-moz-scrollbar-start-backward +tags: + - '@media' + - CSS + - Caractéristique média + - Non-standard +translation_of: Archive/Web/CSS/@media/-moz-scrollbar-start-backward +--- +
{{cssref}} {{Non-standard_header}}
+ +
+

Note : Depuis Firefox 58, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.

+
+ +

Syntaxe

+ +
+
{{cssxref("<integer>")}}
+
Si l'interface de l'appareil affiche un bouton avec une flèche vers l'arrière à la fin des ascenseurs (scrollbars), cette caractéristique vaut 1 et sinon 0.
+
+ +


+ Média : {{cssxref("Media/Visual")}}
+ Gestion des préfixes min/max : non

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/-moz-scrollbar-start-forward/index.html b/files/fr/web/css/@media/-moz-scrollbar-start-forward/index.html new file mode 100644 index 0000000000..851323ed06 --- /dev/null +++ b/files/fr/web/css/@media/-moz-scrollbar-start-forward/index.html @@ -0,0 +1,32 @@ +--- +title: '-moz-scrollbar-start-forward' +slug: Web/CSS/@media/-moz-scrollbar-start-forward +tags: + - '@media' + - CSS + - Caractéristique média + - Non-standard +translation_of: Archive/Web/CSS/@media/-moz-scrollbar-start-forward +--- +
{{cssref}} {{Non-standard_header}}
+ +
+

Note : Depuis Firefox 58, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.

+
+ +

Syntaxe

+ +
+
{{cssxref("<integer>")}}
+
Si l'interface de l'appareil affiche une flèche vers l'avant au début des ascenseurs (scrollbars), cette caractéristique vaut 1 et sinon 0.
+
+ +


+ Média : {{cssxref("Media/Visual")}}
+ Gestion des préfixes min/max : Non.

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/-moz-scrollbar-thumb-proportional/index.html b/files/fr/web/css/@media/-moz-scrollbar-thumb-proportional/index.html new file mode 100644 index 0000000000..575085f65a --- /dev/null +++ b/files/fr/web/css/@media/-moz-scrollbar-thumb-proportional/index.html @@ -0,0 +1,32 @@ +--- +title: '-moz-scrollbar-thumb-proportional' +slug: Web/CSS/@media/-moz-scrollbar-thumb-proportional +tags: + - '@media' + - CSS + - Caractéristique média + - Non-standard +translation_of: Archive/Web/CSS/@media/-moz-scrollbar-thumb-proportional +--- +
{{cssref}} {{Non-standard_header}}
+ +
+

Note : Depuis Firefox 58, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.

+
+ +

Syntaxe

+ +
+
{{cssxref("<integer>")}}
+
Si l'interface de l'appareil affiche une barre de défilement dont la taille est proportionnelle au pourcentage du document visible, cette caractéristique vaut 1 et sinon 0.
+
+ +


+ Média : {{cssxref("Media/Visual")}}
+ Gestion des préfixes min/max : Non

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/-moz-touch-enabled/index.html b/files/fr/web/css/@media/-moz-touch-enabled/index.html new file mode 100644 index 0000000000..76b8621ab3 --- /dev/null +++ b/files/fr/web/css/@media/-moz-touch-enabled/index.html @@ -0,0 +1,46 @@ +--- +title: '-moz-touch-enabled' +slug: Web/CSS/@media/-moz-touch-enabled +tags: + - '@media' + - CSS + - Caractéristique média + - Non-standard +translation_of: Archive/Web/CSS/@media/-moz-touch-enabled +--- +

{{CSSRef}}{{Non-standard_Header}}{{Gecko_MinVersion_Header("1.9.2")}}

+ +
+

Note : Depuis Firefox 58, cette caractéristique média ne peut plus être utilisée pour du contenu web, elle est uniquement accessible pour du code pour le chrome/XUL. Voir {{bug(1396066)}} pour plus de détails.

+
+ +

Syntaxe

+ +
+
{{cssxref("<integer>")}}
+
Cette caractéristique vaut 1 si l'appareil prend en charge les évènements tactiles et 0 sinon.
+
+ +


+ Média : {{cssxref("Media/Visual")}}
+ Gestion des préfixes min/max : Non

+ +

Exemples

+ +

Cette caractéristique peut être utilisée pour afficher des boutons plus gros si l'utilisateur emploie un appareil tactile.

+ +
button {
+  padding: .5em;
+}
+
+@media (-moz-touch-enabled) {
+  button {
+    padding: 1em;
+  }
+}
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/-moz-windows-accent-color-in-titlebar/index.html b/files/fr/web/css/@media/-moz-windows-accent-color-in-titlebar/index.html new file mode 100644 index 0000000000..3b2937525c --- /dev/null +++ b/files/fr/web/css/@media/-moz-windows-accent-color-in-titlebar/index.html @@ -0,0 +1,46 @@ +--- +title: '-moz-windows-accent-color-in-titlebar' +slug: Web/CSS/@media/-moz-windows-accent-color-in-titlebar +tags: + - '@media' + - CSS + - Caractéristique média + - Non-standard +translation_of: Archive/Web/CSS/@media/-moz-windows-accent-color-in-titlebar +--- +
{{cssref}} {{Non-standard_header}}
+ +
+

Note : Depuis Firefox 58, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.

+
+ +

La caractéristique média -moz-windows-accent-color-in-titlebar, spécifique à Gecko et rattachée à la règle @ @media, peut-être utilisée afin d'appliquer des styles selon que les couleurs d'accentuation de Microsoft Windows pour les barres de titres sont activées ou non.

+ +

Syntaxe

+ +
+
{{cssxref("<integer>")}}
+
Cette caractéristique vaut 1 si les couleurs d'accentuation sont activées pour les barres de titre des fenêtres (pour les versions récentes de Windows, par exemple Windows 10). Sinon, elle vaut 0.
+
+ +


+ Média : {{cssxref("Media/Visual")}}
+ Gestion des préfixes min/max : non

+ +

Exemples

+ +
@media (-moz-windows-accent-color-in-titlebar: 1) {
+  h1 {
+    color: -moz-win-accentcolortext;
+  }
+
+  body {
+    background-color: -moz-win-accentcolor;
+  }
+}
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/-moz-windows-classic/index.html b/files/fr/web/css/@media/-moz-windows-classic/index.html new file mode 100644 index 0000000000..eed112dbf8 --- /dev/null +++ b/files/fr/web/css/@media/-moz-windows-classic/index.html @@ -0,0 +1,34 @@ +--- +title: '-moz-windows-classic' +slug: Web/CSS/@media/-moz-windows-classic +tags: + - '@media' + - CSS + - Caractéristique média + - Non-standard +translation_of: Archive/Web/CSS/@media/-moz-windows-classic +--- +
{{cssref}} {{Non-standard_header}}
+ +
+

Note : Depuis Firefox 58, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.

+
+ +

Syntaxe

+ +
+
{{cssxref("<integer>")}}
+
Cette caractéristique vaut 1 si l'utilisateur utilise Windows sans aucun thème (c'est-à-dire en mode classique plutôt qu'en mode uxtheme). Sinon, elle vaut 0.
+
+ +


+ Média : {{cssxref("Media/Visual")}}
+ Gestion des prefixes min/max : non

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/-moz-windows-compositor/index.html b/files/fr/web/css/@media/-moz-windows-compositor/index.html new file mode 100644 index 0000000000..c590e35390 --- /dev/null +++ b/files/fr/web/css/@media/-moz-windows-compositor/index.html @@ -0,0 +1,32 @@ +--- +title: '-moz-windows-compositor' +slug: Web/CSS/@media/-moz-windows-compositor +tags: + - '@media' + - CSS + - Caractéristique média + - Non-standard +translation_of: 'Archive/Web/CSS/:-moz-system-metric/-moz-windows-compositor' +--- +
{{cssref}} {{Non-standard_header}}
+ +
+

Note : Depuis Firefox 58, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.

+
+ +

Syntaxe

+ +
+
{{cssxref("<integer>")}}
+
Cette caractéristique vaut 1 si l'utilisateur utilise Windows avec le compositeur DWM. Sinon, elle vaut 0.
+
+ +


+ Média : {{cssxref("Media/Visual")}}
+ Gestion des préfixes min/max : non

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/-moz-windows-default-theme/index.html b/files/fr/web/css/@media/-moz-windows-default-theme/index.html new file mode 100644 index 0000000000..8a84ca3119 --- /dev/null +++ b/files/fr/web/css/@media/-moz-windows-default-theme/index.html @@ -0,0 +1,34 @@ +--- +title: '-moz-windows-default-theme' +slug: Web/CSS/@media/-moz-windows-default-theme +tags: + - '@media' + - CSS + - Caractéristique média + - Non-standard +translation_of: Archive/Web/CSS/@media/-moz-windows-default-theme +--- +
{{cssref}} {{Non-standard_header}}
+ +
+

Note : Depuis Firefox 58, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.

+
+ +

Syntaxe

+ +
+
{{cssxref("<integer>")}}
+
Si l'utilisateur utilise un thème Windows par défaut (Luna, Royale, Zune ou Aero (incluant Vista Basic, Vista Advanced et Aero Glass)), cette caractéristique vaut 1 et sinon elle vaut 0.
+
+ +


+ Média : {{cssxref("Media/Visual")}}
+ Gestion des préfixes min/max : non

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/-moz-windows-glass/index.html b/files/fr/web/css/@media/-moz-windows-glass/index.html new file mode 100644 index 0000000000..9fdccd49a6 --- /dev/null +++ b/files/fr/web/css/@media/-moz-windows-glass/index.html @@ -0,0 +1,25 @@ +--- +title: '-moz-windows-glass' +slug: Web/CSS/@media/-moz-windows-glass +tags: + - '@media' + - CSS + - Caractéristique média + - Non-standard +translation_of: Archive/Web/CSS/@media/-moz-windows-glass +--- +
{{cssref}} {{Non-standard_header}}
+ +
+

Note : Depuis Firefox 58, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.

+
+ +

Syntaxe

+ +
+
{{cssxref("<integer>")}}
+
Cette caractéristique vaut 1 si l'utilisateur utilise l thème Windows Glass et 0 sinon. Note : ce thème n'existe que pour Windows 7 et les versions antérieures.
+
+ +

Média : {{cssxref("Media/Visual")}}
+ Gestion des préfixes min/max : non

diff --git a/files/fr/web/css/@media/-moz-windows-theme/index.html b/files/fr/web/css/@media/-moz-windows-theme/index.html new file mode 100644 index 0000000000..c0bebdf7f1 --- /dev/null +++ b/files/fr/web/css/@media/-moz-windows-theme/index.html @@ -0,0 +1,43 @@ +--- +title: '-moz-windows-theme' +slug: Web/CSS/@media/-moz-windows-theme +tags: + - '@media' + - CSS + - Caractéristique média + - Non-standard +translation_of: Archive/Web/CSS/@media/-moz-windows-theme +--- +
{{cssref}} {{Non-standard_header}}
+ +
+

Note : Depuis Firefox 58, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.

+
+ +

La caractéristique média -moz-windows-theme, spécifique à Gecko et rattachée à la règle @ @media, permet de personnaliser les éléments d'interfaces afin que ceux-ci soient bien intégrés par rapport au thème Windows utilisé par l'utilisateur.

+ +

Syntaxe

+ +

La caractéristique -moz-windows-theme est un mot-clé indiquant le thème Windows actuellement utilisé.

+ +

Valeurs

+ + + +

Média : {{cssxref("Media/Visual")}}
+ Gestion des préfixes min/max : non

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/-webkit-animation/index.html b/files/fr/web/css/@media/-webkit-animation/index.html new file mode 100644 index 0000000000..bdb863a659 --- /dev/null +++ b/files/fr/web/css/@media/-webkit-animation/index.html @@ -0,0 +1,38 @@ +--- +title: '-webkit-animation' +slug: Web/CSS/@media/-webkit-animation +tags: + - CSS + - Caractéristique média + - Non-standard + - Reference +translation_of: Web/CSS/@media/-webkit-animation +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

-webkit-animation est une caractéristique média booléenne non-standard qui permet d'indiquer si les animationsCSS ({{cssxref("animation")}}) sont prises en charge dans leurs versions préfixées. Cette caractéristique est uniquement prise en charge par les navigateurs basés sur WebKit. L'alternative standard correspondante consiste à utiliser {{cssxref("@supports")}}.

+ +

Exemples

+ +
@media (-webkit-animation) {
+  /* CSS à utiliser si les animations sont prises en charge */
+}
+ +

Spécifications

+ +

Cette caractéristique média est une caractéristique média propriétaire liée à WebKit/Blink. Elle ne fait partie d'aucune spécification. Elle est décrite plus en détails dans la référence CSS Apple pour Safari (en anglais).

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.media.-webkit-animation")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/-webkit-device-pixel-ratio/index.html b/files/fr/web/css/@media/-webkit-device-pixel-ratio/index.html new file mode 100644 index 0000000000..189f3d58b7 --- /dev/null +++ b/files/fr/web/css/@media/-webkit-device-pixel-ratio/index.html @@ -0,0 +1,119 @@ +--- +title: '-webkit-device-pixel-ratio' +slug: Web/CSS/@media/-webkit-device-pixel-ratio +tags: + - CSS + - Caractéristique média + - Non-standard + - Reference +translation_of: Web/CSS/@media/-webkit-device-pixel-ratio +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

-webkit-device-pixel-ratio est une caractéristique média non-standard, alternative à la caractéristique média standard {{cssxref("@media/resolution","resolution")}}.

+ +

Sa valeur correspond au nombre de pixels physiques utilisés par l'appareil pour représenter un pixel CSS (px). Bien que la valeur soit de type {{cssxref("<number>")}}, sans unité donc, l'unité implicite est dppx.

+ +
+

Attention ! Cette caractéristique est spécifique à WebKit. Tant que possible, on utilisera {{cssxref("@media/resolution","resolution")}}.

+
+ +

Syntaxe

+ +

-webkit-device-pixel-ratio est une valleur décrivant un intervalle. On peut également utiliser -webkit-min-device-pixel-ratio et -webkit-max-device-pixel-ratio pour fixer un seuil minimum/maximum.

+ +

Valeurs

+ +
+
{{cssxref("<number>")}}
+
Le nombre de pixels physiques pour chaque pixel (px) CSS. Bien que la valeur soit un nombre et ne permette pas d'utiliser des unités, l'unité implicite est dppx.
+
+ +

Implémentation

+ +
/* Unité dppx implicite */
+@media (-webkit-min-device-pixel-ratio: 2) { ... }
+/* équivalent à */
+@media (min-resolution: 2dppx) { ... }
+
+/* De même */
+@media (-webkit-max-device-pixel-ratio: 2) { ... }
+/* équivalent à */
+@media (max-resolution: 2dppx) { ... }
+
+ +

Exemples

+ +

CSS

+ +
/* Résolution exacte */
+@media (-webkit-device-pixel-ratio: 1) {
+  p {
+    color: red;
+  }
+}
+
+/* Résolution minimale */
+@media (-webkit-min-device-pixel-ratio: 1.1) {
+  p {
+    font-size: 1.5em;
+  }
+}
+
+/* Résolution maximale */
+@media (-webkit-max-device-pixel-ratio: 3) {
+  p {
+    background: yellow;
+  }
+}
+ +

HTML

+ +
<p>Voici un test pour la densité de pixel de votre appareil.</p>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Compat', '#css-media-queries-webkit-device-pixel-ratio', '-webkit-device-pixel-ratio')}}{{Spec2('Compat')}}Définition initiale dans un standard.
Safari CSS Reference
+ 'media query extensions' in that document.		Documentation non-officielle, non-standard.Documentation initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.media.-webkit-device-pixel-ratio")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/-webkit-transform-2d/index.html b/files/fr/web/css/@media/-webkit-transform-2d/index.html new file mode 100644 index 0000000000..70111c8f46 --- /dev/null +++ b/files/fr/web/css/@media/-webkit-transform-2d/index.html @@ -0,0 +1,36 @@ +--- +title: '-webkit-transform-2d' +slug: Web/CSS/@media/-webkit-transform-2d +tags: + - CSS + - Caractéristique média + - Non-standard + - Reference +translation_of: Web/CSS/@media/-webkit-transform-2d +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

-webkit-transform-2d est une caractéristique média booléenne non-standard qui indique si les transformations CSS en 2D (cf. {{cssxref("transform")}}) préfixées sont prises en charge par le navigateur.

+ +
+

Note : Cette caractéristique est uniquement prise en charge par WebKit et Blink. Mieux vaut utiliser la méthode alternative standard avec {{cssxref("@supports")}} à la place si possible.

+
+ +

Spécifications

+ +

Cette caractéristique média est une caractéristique média propriétaire liée à WebKit/Blink. Elle ne fait partie d'aucune spécification. Elle est décrite plus en détails dans la référence CSS Apple pour Safari (en anglais) .

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.media.-webkit-transform-2d")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/-webkit-transform-3d/index.html b/files/fr/web/css/@media/-webkit-transform-3d/index.html new file mode 100644 index 0000000000..90db3f262d --- /dev/null +++ b/files/fr/web/css/@media/-webkit-transform-3d/index.html @@ -0,0 +1,71 @@ +--- +title: '-webkit-transform-3d' +slug: Web/CSS/@media/-webkit-transform-3d +tags: + - CSS + - Caractéristique média + - Non-standard + - Reference +translation_of: Web/CSS/@media/-webkit-transform-3d +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

-webkit-transform-3d est une caractéristique média booléenne non-standard qui indique si les transformations CSS en 3D (cf. {{cssxref("transform")}}) préfixées sont prises en charge par le navigateur.

+ +
+

Note : Cette caractéristique est uniquement prise en charge par WebKit et Blink. Une méthode alternative standard consiste à utiliser {{cssxref("@supports")}} à la place.

+
+ +

Exmple

+ +
@media (-webkit-transform-3d) {
+  .toto {
+    transform-style: preserve-3d;
+  }
+}
+
+@media (-webkit-transform-3d: 1) {
+  .toto {
+    transform-style: preserve-3d;
+  }
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Compat', '#css-media-queries-webkit-transform-3d', '-webkit-transform-3d')}}{{Spec2('Compat')}}Définition initiale dans un standard.
Safari CSS Reference
+ 'media query extensions' in that document.		Documentation non-officielle, non-standard.Documentation initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.media.-webkit-transform-3d")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/-webkit-transition/index.html b/files/fr/web/css/@media/-webkit-transition/index.html new file mode 100644 index 0000000000..a2fe3ef854 --- /dev/null +++ b/files/fr/web/css/@media/-webkit-transition/index.html @@ -0,0 +1,51 @@ +--- +title: '-webkit-transition' +slug: Web/CSS/@media/-webkit-transition +tags: + - CSS + - Caractéristique média + - Non-standard + - Obsolete + - Reference +translation_of: Web/CSS/@media/-webkit-transition +--- +
{{CSSRef}}{{Non-standard_header}}{{obsolete_header}}
+ +

-webkit-transition est une caractéristique média booléenne non-standard qui permet d'indiquer si les transitions CSS ({{cssxref("transition")}}) sont prises en charge dans leurs versions préfixées.

+ +
+

Note : Cette caractéristique est uniquement prise en charge par les navigateurs basés sur WebKit. L'alternative standard correspondante consiste à utiliser {{cssxref("@supports")}}.

+
+ +

Privilégier @supports

+ +

S'il vous faut déterminer si les transitions CSS sont prises en charges, évitez d'utiliser -webkit-transition. En lieu et place, on utilisera la règle @ {{cssxref("@supports")}} :

+ +
@supports(transition: initial) {
+  /* Les règles CSS à utiliser si   */
+  /* les transitions sont prises en */
+  /* charge. */
+}
+ +

Spécifications

+ +

Cette caractéristique média est une caractéristique média propriétaire liée à WebKit/Blink. Elle ne fait partie d'aucune spécification. Elle est décrite plus en détails dans la référence CSS Apple pour Safari (en anglais).

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.media.-webkit-transition")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/any-hover/index.html b/files/fr/web/css/@media/any-hover/index.html new file mode 100644 index 0000000000..c4c315b0e9 --- /dev/null +++ b/files/fr/web/css/@media/any-hover/index.html @@ -0,0 +1,72 @@ +--- +title: any-hover +slug: Web/CSS/@media/any-hover +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/any-hover +--- +
{{CSSRef}}
+ +

any-hover est une caractéristique média CSS qui permet de vérifier si un mécanisme de saisie/d'entrée permet à l'utilisateur de survoler les éléments.

+ +

Syntaxe

+ +

La caractéristique any-hover est définie avec un mot-clé parmi ceux de la liste ci-après.

+ +
+
none
+
Parmi les mécanismes de saisi, aucun ne permet de survoler les éléments (ou il n'existe aucun dispositif de pointage).
+
hover
+
Un ou plusieurs mécanismes de saisie permettent de survoler le contenu simplement.
+
+ +

Exemples

+ +

HTML

+ +
<a href="#">Essayez de me survoler !</a>
+ +

CSS

+ +
@media (any-hover: hover) {
+  a:hover {
+    background: yellow;
+  }
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#descdef-media-any-hover', 'any-hover')}}{{Spec2('CSS4 Media Queries')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.media.any-hover")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/any-pointer/index.html b/files/fr/web/css/@media/any-pointer/index.html new file mode 100644 index 0000000000..abec9dcecb --- /dev/null +++ b/files/fr/web/css/@media/any-pointer/index.html @@ -0,0 +1,105 @@ +--- +title: any-pointer +slug: Web/CSS/@media/any-pointer +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/any-pointer +--- +
{{CSSRef}}
+ +

any-pointer est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui peut être utilisée afin de déterminer si un des mécanismes de saisie/d'entrée disponibles est un dispositif de pointage et sa précision le cas échéant.

+ +
+

Note : Si on souhaite tester la précision du mécanisme de pointage principal, on pourra utiliser la caractéristique pointer à la place.

+
+ +

Syntaxe

+ +

La caractéristique any-pointer est définie comme un mot-clé parmi ceux de la liste ci-après.

+ +
+
none
+
L'appareil ne dispose d'aucun dispositif de pointage.
+
coarse
+
Il existe au moins un mécanisme d'entrée qui est un dispositif de pointage et pour lequel la précision est limitée.
+
fine
+
Il existe au moins un mécanisme d'entrée qui est un dispositif de pointage et pour lequel la précision est fine.
+
+ +
+

Note : Plusieurs valeurs peuvent correspondre si l'appareil dispose de dispositifs de pointage différents. Toutefois, la valeur none ne sera utilisée que lorsqu'aucun dispositif de pointage ne sera détecté.

+
+ +

Exemples

+ +

Dans cet exemple, on crée une petite case à cocher pour les utilisateurs qui disposent d'un pointage précis et une case à cocher plus grande lorsque le mécanisme de pointage est moins précis.

+ +

HTML

+ +
<input id="test" type="checkbox" />
+<label for="test">Coucou !</label>
+ +

CSS

+ +
input[type="checkbox"]:checked {
+  background: gray;
+}
+
+@media (any-pointer: fine) {
+  input[type="checkbox"] {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    width: 15px;
+    height: 15px;
+    border: 1px solid blue;
+  }
+}
+
+@media (any-pointer: coarse) {
+  input[type="checkbox"] {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    width: 30px;
+    height: 30px;
+    border: 2px solid red;
+  }
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#descdef-media-any-pointer', 'any-pointer')}}{{Spec2('CSS4 Media Queries')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.media.any-pointer")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/aspect-ratio/index.html b/files/fr/web/css/@media/aspect-ratio/index.html new file mode 100644 index 0000000000..085c611aa0 --- /dev/null +++ b/files/fr/web/css/@media/aspect-ratio/index.html @@ -0,0 +1,111 @@ +--- +title: aspect-ratio +slug: Web/CSS/@media/aspect-ratio +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/aspect-ratio +--- +
{{CSSRef}}
+ +

aspect-ratio est une caractéristique média CSS dont la valeur correspond au ratio ({{cssxref("<ratio>")}}) entre la largeur et la hauteur de la zone d'affichage (viewport).

+ +

Syntaxe

+ +

La caractéristique aspect-ratio est définie avec un ratio (type CSS {{cssxref("<ratio>")}}) qui représente le ratio entre la largeur et la hauteur de la zone d'affichage . C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées min-aspect-ratio et max-aspect-ratio afin de cibler des règles CSS en fonction d'une valeur minimale ou maximale.

+ +

Exemples

+ +
+

Note : L'exemple suivant est contenu dans un élément {{HTMLElement("iframe")}} et crée donc sa propre zone d'affichage (viewport), vous pouvez redimensionner l'iframe afin d'observer l'effet d'aspect-ratio.

+
+ +

HTML

+ +
<label id="wf" for="w">width:165</label>
+<input id="w" name="w" type="range" min="100" max="250" step="5" value="165">
+<label id="hf" for="w">height:165</label>
+<input id="h" name="h" type="range" min="100" max="250" step="5" value="165">
+
+<iframe id="outer" src="data:text/html,
+  <style>
+    @media (min-aspect-ratio: 8/5) {
+      div {
+        background: %239af;
+      }
+    }
+    @media (max-aspect-ratio: 3/2) {
+      div {
+        background: %239ff;
+      }
+    }
+    @media (aspect-ratio: 1/1) {
+      div {
+        background: %23f9a;
+      }
+    }
+  </style>
+  <div id='inner'>
+    Vous pouvez redimensionner le viewport en largeur
+    et en hauteur pour voir l'effet.
+  </div>
+">
+
+</iframe>
+
+ +

CSS

+ +
iframe{
+  display:block;
+}
+ +

JavaScript

+ +
outer.style.width=outer.style.height="165px"
+
+w.onchange=w.oninput=function(){
+  outer.style.width=w.value+"px"
+  wf.textContent="width:"+w.value
+}
+h.onchange=h.oninput=function(){
+  outer.style.height=h.value+"px"
+  hf.textContent="height:"+h.value
+}
+ +

Résultat

+ +
+

{{EmbedLiveSample('Exemples')}}

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#aspect-ratio', 'aspect-ratio')}}{{Spec2('CSS4 Media Queries')}}Aucune modification.
{{SpecName('CSS3 Media Queries', '#aspect-ratio', 'aspect-ratio')}}{{Spec2('CSS3 Media Queries')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.media.aspect-ratio")}}

diff --git a/files/fr/web/css/@media/aural/index.html b/files/fr/web/css/@media/aural/index.html new file mode 100644 index 0000000000..3de1642213 --- /dev/null +++ b/files/fr/web/css/@media/aural/index.html @@ -0,0 +1,42 @@ +--- +title: aural +slug: Web/CSS/@media/aural +tags: + - CSS + - Déprécié + - Obsolete + - Reference +translation_of: Web/CSS/@media/aural +--- +
{{CSSRef}}{{obsolete_header("6.0")}} {{deprecated_header}}
+ +

Un groupe de médias défini par les standards CSS.

+ +
+

Note : Ce groupe de médias n'a jamais été complètement implémenté dans Gecko et a été supprimé dans {{Gecko("6.0")}}. C'est le type de média speech qui le remplace.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
CSS Level 2DépréciationDéfinition initiale.
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/color-gamut/index.html b/files/fr/web/css/@media/color-gamut/index.html new file mode 100644 index 0000000000..1762310821 --- /dev/null +++ b/files/fr/web/css/@media/color-gamut/index.html @@ -0,0 +1,68 @@ +--- +title: color-gamut +slug: Web/CSS/@media/color-gamut +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/color-gamut +--- +
{{CSSRef}}
+ +

color-gamut est une caractéristique média dont la valeur décrit l'intervalle approximatif des couleurs qui sont prises en charge par l'agent utilisateur et l'appareil responsable de l'affichage.

+ +

Syntaxe

+ +

La caractéristique color-gamut est définie avec un mot-clé parmi ceux de la liste ci-après.

+ +
+
srgb
+
L'appareil d'affichage prend approximativement en charge l'espace de couleurs sRGB ou un espace plus grand. Cela correspond à la majorité des appareils d'affichage.
+
p3
+
L'appareil d'affichage prend approximativement en charge l'espace de couleurs spécifié par l'espace de couleur DCI P3 ou un espace plus grand; L'espace p3 est plus grand (et inclut) l'espace srgb.
+
rec2020
+
L'appareil d'affichage prend approximativement l'espace de couleurs spécifié par l'espace de couleurs ITU-R Recommendation BT.2020 ou un espace plus grand. L'espace rec2020 est plus grand (et inclut) l'espace p3.
+
+ +

Exemples

+ +

HTML

+ +
<p>Un test simple.</p>
+ +

CSS

+ +
@media (color-gamut: srgb) {
+  p {
+    background: #f4ae8a;
+  }
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#color-gamut', 'color-gamut')}}{{Spec2('CSS4 Media Queries')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.media.color-gamut")}}

diff --git a/files/fr/web/css/@media/color-index/index.html b/files/fr/web/css/@media/color-index/index.html new file mode 100644 index 0000000000..66d460206d --- /dev/null +++ b/files/fr/web/css/@media/color-index/index.html @@ -0,0 +1,84 @@ +--- +title: color-index +slug: Web/CSS/@media/color-index +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/color-index +--- +
{{CSSRef}}
+ +

color-index est une caractéristique média CSS (cf. {{cssxref("@media")}}) dont la valeur correspond au nombre d'entrées que comporte la palette de couleurs du périphérique de sortie, ou zéro si ce dernier n'en utilise pas.

+ +

Syntaxe

+ +

La caractéristique color-index est définie sous la forme d'un entier (type {{cssxref("<integer>")}}) et représente le nombre d'entrées de la palette de couleurs de l'appareil d'affichage (ou zéro si l'appareil n'utilise pas une telle palette). C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées min-color-index et max-color-index afin cibler des règles en fonction d'un minimum ou d'un maximum.

+ +

Exemples

+ +

Exemple simple

+ +

HTML

+ +
<p>Un test simple.</p>
+
+ +

CSS

+ +
p {
+  color: black;
+}
+
+@media (color-index) {
+  p {
+    color: red;
+  }
+}
+
+@media (min-color-index: 15000) {
+  p {
+    color: #1475ef;
+  }
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple_simple")}}

+ +

Feuille de style personnalisée

+ +

Ce fragment HTML permet d'appliquer une feuille de style spécifique pour les appareils qui disposent d'au moins 256 couleurs.

+ +
<link rel="stylesheet" href="http://toto.truc.com/base.css" />
+<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://toto.truc.com/feuille_style_couleurs.css" />
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationEtatCommentaires
{{SpecName('CSS4 Media Queries', '#color-index', 'color-index')}}{{Spec2('CSS4 Media Queries')}}La valeur peut désormais être négative (ce qui correspond à un booléen faux).
{{SpecName('CSS3 Media Queries', '#color-index', 'color-index')}}{{Spec2('CSS3 Media Queries')}}Définition initiale, la valeur ne peut pas être négative.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.media.color-index")}}

diff --git a/files/fr/web/css/@media/color/index.html b/files/fr/web/css/@media/color/index.html new file mode 100644 index 0000000000..76d79bf25c --- /dev/null +++ b/files/fr/web/css/@media/color/index.html @@ -0,0 +1,94 @@ +--- +title: color +slug: Web/CSS/@media/color +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/color +--- +
{{CSSRef}}
+ +

color est une caractéristique média CSS (cf. {{cssxref("@media")}}) dont la valeur est le nombre de bits par composante de couleur du périphérique de sortie, ou zéro si ce dernier ne gère pas les couleurs.

+ +

Syntaxe

+ +

La caractéristique color est définie avec un entier (type CSS {{cssxref("<integer>")}}) et représente le nombre de bits utiisé par l'appareil d'affichage pour représenter chaque composante de couleur. Si l'appareil ne gère pas les couleurs, la valeur sera zéro. C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées min-color et max-color afin de cibler des règles en fonction d'un minimum ou d'un maximum.

+ +
+

Note : Si les différentes composantes sont représentées sur un nombre différent de bits, c'est le plus petit de ces nombres qui est utilisé. Par exemple, si un affichage utilise 5 bits pour le bleu et le rouge mais 6 bits pour le vert, on considèrera que l'appareil utilise 5 bits par couleur. Si l'appareil utilise des couleur indexées, c'est le nombre minimal de bits par composantes parmi les couleurs de l'index qui est utilisé.

+
+ +

Exemples

+ +

HTML

+ +
<p>
+   Ce texte sera noir pour les appareils qui ne prennent en charge
+   aucune couleur, rouge pour ceux qui prennent peu de couleurs en
+   charge et vert sinon.
+</p>
+
+ +

CSS

+ +
p {
+  color: black;
+}
+
+/* Tout appareil qui gère des couleurs */
+@media (color) {
+  p {
+    color: red;
+  }
+}
+
+/* Tout appareil qui gère des couleurs avec */
+/* au moins 8 bits par composante */
+@media (min-color: 8) {
+  p {
+    color: #24ba13;
+  }
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Media Queries', '#color', 'color')}}{{Spec2('CSS3 Media Queries')}}Définition initiale, la valeur ne peut pas être négative.
{{SpecName('CSS4 Media Queries', '#color', 'color')}}{{Spec2('CSS4 Media Queries')}}La valeur peut désormais être négative (ce qui correspond alors à un booléen faux).
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.media.color")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/device-aspect-ratio/index.html b/files/fr/web/css/@media/device-aspect-ratio/index.html new file mode 100644 index 0000000000..a0356e163d --- /dev/null +++ b/files/fr/web/css/@media/device-aspect-ratio/index.html @@ -0,0 +1,59 @@ +--- +title: device-aspect-ratio +slug: Web/CSS/@media/device-aspect-ratio +tags: + - CSS + - Caractéristique média + - Déprécié + - Reference +translation_of: Web/CSS/@media/device-aspect-ratio +--- +
{{CSSRef}}{{deprecated_header}}
+ +

device-aspect-ratio est une caractéristique média (cf. {{cssxref("@media")}}) dont la valeur correspond au ratio entre la largeur et la hauteur de l'appareil d'affichage.

+ +

Syntaxe

+ +

La caractéristique device-aspect-ratio est définie sous la forme d'un ratio (type CSS {{cssxref("<ratio>")}}). C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées min-device-aspect-ratio et max-device-aspect-ratio afin de cibler des règles en fonction de minimum ou maximum.

+ +

Exemples

+ +
article {
+  padding: 1rem;
+}
+
+@media screen and (min-device-aspect-ratio: 16/9) {
+  article {
+    padding: 1rem 5vw;
+  }
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#device-aspect-ratio', 'device-aspect-ratio')}}{{Spec2('CSS4 Media Queries')}}Dépréciation dans la spécification de niveau 4 pour les requêtes média.
{{SpecName('CSS3 Media Queries', '#device-aspect-ratio', 'device-aspect-ratio')}}{{Spec2('CSS3 Media Queries')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.media.device-aspect-ratio")}}

diff --git a/files/fr/web/css/@media/device-height/index.html b/files/fr/web/css/@media/device-height/index.html new file mode 100644 index 0000000000..92272515aa --- /dev/null +++ b/files/fr/web/css/@media/device-height/index.html @@ -0,0 +1,53 @@ +--- +title: device-height +slug: Web/CSS/@media/device-height +tags: + - CSS + - Caractéristique média + - Déprécié + - Reference +translation_of: Web/CSS/@media/device-height +--- +
{{CSSRef}}{{deprecated_header}}
+ +

device-height est une caractéristique média (cf. {{cssxref("@media")}}) dépréciée dont la valeur correspond à la hauteur de la surface de rendu pour l'appareil d'affichage.

+ +

Syntaxe

+ +

La caractéristique device-height est définie comme une longueur (type  {{cssxref("<length>")}}). C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées min-device-height et max-device-height afin d'utiliser des critères de minimum et maximum.

+ +

Exemples

+ +

Ce fragment HTML applique une feuille de style spécifique pour les appareils dont la hauteur est inférieure à 800 pixels.

+ +
<link rel="stylesheet" media="screen and (max-device-height: 799px)" href="http://toto.truc.com/short-styles.css" />
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#device-height', 'device-height')}}{{Spec2('CSS4 Media Queries')}}Dépréciation dans la spécification de niveau 4 pour les requêtes média.
{{SpecName('CSS3 Media Queries', '#device-height', 'device-height')}}{{Spec2('CSS3 Media Queries')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.media.device-height")}}

diff --git a/files/fr/web/css/@media/device-width/index.html b/files/fr/web/css/@media/device-width/index.html new file mode 100644 index 0000000000..16f87bc1d8 --- /dev/null +++ b/files/fr/web/css/@media/device-width/index.html @@ -0,0 +1,53 @@ +--- +title: device-width +slug: Web/CSS/@media/device-width +tags: + - CSS + - Caractéristique média + - Déprécié + - Reference +translation_of: Web/CSS/@media/device-width +--- +
{{CSSRef}}{{deprecated_header}}
+ +

device-width est une caractéristique média dépréciée dont la valeur représente la largeur de la surface de rendu de l'appareil d'affichage.

+ +

Syntaxe

+ +

device-width est définie comme une longueur (type {{cssxref("<length>")}}). C'est une caractéristique d'intervalle et les variantes préfixées min-device-width et max-device-width peuvent être utilisées pour manipuler un minimum ou un maximum.

+ +

Exemples

+ +

Ce code HTML applique une feuille de style pour pour les appareils plus étroits que 800 pixels.

+ +
<link rel="stylesheet" media="screen and (max-device-width: 799px)" href="http://toto.truc.com/narrow-styles.css" />
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#device-width', 'device-width')}}{{Spec2('CSS4 Media Queries')}}Dépréciation dans la spécification de niveau 4 pour les requêtes média.
{{SpecName('CSS3 Media Queries', '#device-width', 'device-width')}}{{Spec2('CSS3 Media Queries')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.media.device-width")}}

diff --git a/files/fr/web/css/@media/display-mode/index.html b/files/fr/web/css/@media/display-mode/index.html new file mode 100644 index 0000000000..0b64eafe8b --- /dev/null +++ b/files/fr/web/css/@media/display-mode/index.html @@ -0,0 +1,84 @@ +--- +title: display-mode +slug: Web/CSS/@media/display-mode +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/display-mode +--- +
{{CSSRef}}
+ +

display-mode est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui permet d'appliquer différentes règles CSS selon le mode d'affichage de l'application. On pourra utiliser cette caractéristique afin qu'un utilisateur ait une expérience similaire selon qu'il lance le site depuis une URL ou depuis une icône sur un bureau.

+ +

Cette caractéristique correspond à la propriété display du manifeste de l'application web. Les deux s'appliquent au contexte de navigation de plus haut niveau ainsi qu'aux contextes fils. Cette requête s'appliquera dans tous les cas (qu'un manifeste d'application soit présent ou non).

+ +

Syntaxe

+ +

La caractéristique display-mode est définie avec un mot-clé parmi ceux du tableau ci-après.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Valeur (mode d'affichage)DescriptionMode d'affichage utilisé en recours
fullscreenToute la zone d'affichage est utilisée et aucun autre élément d'interface utilisateur (chrome) n'est affiché.standalone
standaloneL'application se comportera comme une application indépendante avec une fenêtre différente, une icône distincte dans les barres d'application. Dans ce mode, l'agent utilisateur supprimera les éléments d'interface utilisateur liés au contrôle de la navigation mais pourra conserver les autres éléments tels que la barre d'état.minimal-ui
minimal-uiL'application se comportera comme une application indépendante mais son interface utilisateur sera restreinte aux contrôles de navigation. Les éléments affichés peuvent varier selon les navigateurs.browser
browserL'application ouvre un nouvel onglet dans le navigateur ou une nouvelle fenêtre selon le navigateur et la plateforme utilisés.Aucun
+ +

Exemples

+ +
@media all and (display-mode: fullscreen) {
+  body {
+    margin: 0;
+    border: 5px solid black;
+  }
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Manifest', '#the-display-mode-media-feature', 'display-mode')}}{{Spec2('Manifest')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.media.display-mode")}}

diff --git a/files/fr/web/css/@media/forced-colors/index.html b/files/fr/web/css/@media/forced-colors/index.html new file mode 100644 index 0000000000..d0cb254e89 --- /dev/null +++ b/files/fr/web/css/@media/forced-colors/index.html @@ -0,0 +1,86 @@ +--- +title: forced-colors +slug: Web/CSS/@media/forced-colors +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/forced-colors +--- +
{{CSSRef}}{{SeeCompatTable}}{{draft}}
+ +

La caractéristique média forced-colors est utilisée afin de détecter si l'utilisateur a choisi une palette de couleur restreinte via le navigateur ou l'agent utilisateur.

+ +
+

Note : Cette fonctionnalité n'est pas encore implémentée par aucun agent utilisateur

+
+ +

Valeurs

+ +
+
none
+
La palette de couleur n'est pas restreinte.
+
active
+
La palette de couleur est restreinte et c'est l'agent utilisateur qui fournira la palette utilisable via un système de mots-clés de couleurs CSS systèmes. La valeur de prefers-color-scheme sera également mise à jour afin que les auteurs puissent adapter la page.
+
+ +

Préférences utilisateur

+ +

À l'heure actuelle, aucun agent utilisateur n'implémente cette fonctionnalité bien que de nombreux systèmes d'exploitation prennent en charge ce type de paramètre.

+ +

Exemples

+ +

Dans cet exemple, les couleurs utilisées par défaut sont exotiques voire illisibles. On tire ici parti d'une requête média pour utiliser une palette restreinte de l'agent utilisateur.

+ +

HTML

+ +
<div class="colors">quelques couleurs étranges</div>
+
+ +

CSS

+ +
.colors {
+  background-color: red;
+  color: grey;
+}
+
+@media (forced-colors: active) {
+  .colors {
+    background-color: white;
+    color: black;
+  }
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS5 Media Queries', '#forced-colors', 'forced-colors')}}{{Spec2('CSS5 Media Queries')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Array.sort")}}

+ +

Voir aussi

+ +

{QuickLinksWithSubpages("/fr/docs/Web/CSS/@media/")}}

diff --git a/files/fr/web/css/@media/grid/index.html b/files/fr/web/css/@media/grid/index.html new file mode 100644 index 0000000000..331ef98683 --- /dev/null +++ b/files/fr/web/css/@media/grid/index.html @@ -0,0 +1,83 @@ +--- +title: grid +slug: Web/CSS/@media/grid +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/grid +--- +
{{CSSRef}}
+ +

grid est une caractéristique média CSS (cf {{cssxref("@media")}}) dont la valeur est un booléen qui indique si l'appareil d'affichage fonctionne grâce à une grille (ex. un terminal ou un appareil qui ne dispose que d'une police à chasse fixe) ou grâce à une matrice d'affichage (avec des pixels « classiques »).

+ +

La plupart des ordinateurs actuels possèdent des écrans matriciels. Parmi les appareils qui utilisent un affichage en grille, on trouve les appareils qui n'affichent que du texte dans un terminal ou des téléphones simples avec une seule police fixe.

+ +

Syntaxe

+ +

La caractéristique grid est une valeur booléenne (0 ou 1) (type {{cssxref("<mq-boolean>")}}) qui indique si l'appareil d'affichage fonctionne selon une grille.

+ +

Exemples

+ +

HTML

+ +
<p class="unknown">Impossible de savoir si l'affichage fonctionne sur une grille. :-(</p>
+<p class="bitmap">L'appareil dispose d'un affichage matriciel.</p>
+<p class="grid">L'appareil utilise une grille pour l'affichage !</p>
+ +

CSS

+ +
:not(.unknown) {
+  color: lightgray;
+}
+
+@media (grid: 0) {
+  .unknown {
+    color: lightgray;
+  }
+
+  .bitmap {
+    color: red;
+    text-transform: uppercase;
+  }
+}
+
+@media (grid: 1) {
+  .unknown {
+    color: lightgray;
+  }
+
+  .grid {
+    color: black;
+    text-transform: uppercase;
+  }
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Media Queries', '#grid', 'grid')}}{{Spec2('CSS3 Media Queries')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.media.grid")}}

diff --git a/files/fr/web/css/@media/height/index.html b/files/fr/web/css/@media/height/index.html new file mode 100644 index 0000000000..4e4ac12d6f --- /dev/null +++ b/files/fr/web/css/@media/height/index.html @@ -0,0 +1,83 @@ +--- +title: height +slug: Web/CSS/@media/height +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/height +--- +
{{CSSRef}}
+ +

height est une caractéristique média CSS (cf. {{cssxref("@media")}}) dont la valeur représente la hauteur de la zone d'affichage (viewport) (ou de la boîte de page pour les média paginés).

+ +

Syntaxe

+ +

La caractéristique height est définie comme une longueur (type {{cssxref("<length>")}}) et représente la hauteur de la zone d'affichage. C'est une caractéristique d'intervalle et on peut donc utiliser les variantes préfixées min-height et max-height afin de cibler des règles selon un minimum ou un maximum.

+ +

Exemples

+ +

HTML

+ +
<div>
+  Surveillez cet élément lors du
+  redimensionnement de la zone d'affichage.
+</div>
+ +

CSS

+ +
/* Hauteur exacte */
+@media (height: 360px) {
+  div {
+    color: red;
+  }
+}
+
+/* Hauteur minimale */
+@media (min-height: 25rem) {
+  div {
+    background: yellow;
+  }
+}
+
+/* Hauteur maximale */
+@media (max-height: 40rem) {
+  div {
+    border: 2px solid blue;
+  }
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples','90%')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#height', 'height')}}{{Spec2('CSS4 Media Queries')}}La valeur peut désormais être négative (ce qui correspond à un booléen faux).
{{SpecName('CSS3 Media Queries', '#height', 'height')}}{{Spec2('CSS3 Media Queries')}}Définition initiale. La valeur ne doit pas être négative.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.media.height")}}

diff --git a/files/fr/web/css/@media/hover/index.html b/files/fr/web/css/@media/hover/index.html new file mode 100644 index 0000000000..d0b19376b2 --- /dev/null +++ b/files/fr/web/css/@media/hover/index.html @@ -0,0 +1,72 @@ +--- +title: hover +slug: Web/CSS/@media/hover +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/hover +--- +
{{CSSRef}}
+ +

hover est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui permet de vérifier si le dispositif de saisie/d'entrée principal permet à l'utilisateur de survoler les éléments.

+ +

Syntaxe

+ +

La caractéristique hover est définie avec un mot-clé parmi ceux de la liste suivant :

+ +
+
none
+
Le mécanisme de saisie principal ne permet pas de survoler les éléments (ou ne le permet pas de façon simple ; par exemple sur les appareils mobiles qui émulent le survol avec un appui long) ou il n'existe pas de dispositif de pointage principal.
+
hover
+
Le mécanisme de saisie principal permet de survoler les éléments simplement.
+
+ +

Exemples

+ +

HTML

+ +
<a href="#">Essayez de me survoler !</a>
+ +

CSS

+ +
@media (hover: hover) {
+  a:hover {
+    background: yellow;
+  }
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#hover', 'hover')}}{{Spec2('CSS4 Media Queries')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.media.hover")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/index.html b/files/fr/web/css/@media/index.html new file mode 100644 index 0000000000..aced40e2b4 --- /dev/null +++ b/files/fr/web/css/@media/index.html @@ -0,0 +1,155 @@ +--- +title: '@media' +slug: Web/CSS/@media +tags: + - CSS + - Reference + - Règle @ +translation_of: Web/CSS/@media +--- +
{{CSSRef}}
+ +

La règle @ @media permet d'associer un ensemble d'instructions imbriquées (délimité par des accolades) avec une condition définie par une requête média. La règle @media peut être utilisé au niveau le plus haut de la feuille de style et également à l'intérieur d'un groupe de règles conditionnel.

+ +
@media (max-width: 600px) {
+  .sidebar {
+    display: none;
+  }
+}
+ +

Il est possible de manipuler la règle @ @media via le CSSOM (et JavaScript) notamment grâce à l'interface {{domxref("CSSMediaRule")}}.

+ +

Syntaxe

+ +

Une requête média (type <media-query>) est composée d'un type de média (optionnel) et/ou de différentes caractéristiques relatives au média. Une requête média peut être imbriquée dans une autre règle conditionnelle.

+ +
/* Au niveau le plus haut du code */
+@media screen and (min-width: 900px) {
+  article {
+    padding: 1rem 3rem;
+  }
+}
+
+/* Imbriquée dans une autre règle-@ conditionnelle */
+@supports (display: flex) {
+  @media screen and (min-width: 900px) {
+    article {
+      display: flex;
+    }
+  }
+}
+
+ +

Pour plus d'informations sur la syntaxe des requêtes média, voir Utiliser les requêtes média.

+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Les caractéristiques média

+ +

{{page("/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries","Caractéristiques_média_(media_features)")}}

+ +

Exemples

+ +
@media print {
+  body { font-size: 10pt }
+}
+@media screen {
+  body { font-size: 13px }
+}
+@media screen, print {
+  body { line-height: 1.2 }
+}
+
+@media only screen
+  and (min-width: 320px)
+  and (max-width: 480px)
+  and (-webkit-min-device-pixel-ratio: 2) {
+    body { line-height: 1.4 }
+}
+
+ +

Avec la mise à jour de la spécification pour les requêtes média, une nouvelle syntaxe, plus concise, peut être utilisée pour les tests d'intervalle :

+ +
@media (height > 600px) {
+  body { line-height: 1.4; }
+}
+
+@media (400px <= width <= 700px) {
+  body { line-height: 1.4; }
+}
+
+ +

Pour plus d'exemples, voir Utiliser les requêtes média.

+ +

Accessibilité

+ +

Pour une meilleure interaction, notamment avec les personnes qui zooment sur une page pour accroître la taille du texte ou qui définissent une taille de police par défaut pour l'ensemble du navigateur, on utilisera l'unité em comme valeur pour les requêtes média lorsqu'il faut utiliser une longueur ({{cssxref("<length>")}}).

+ +

Les unités em et px sont toutes les deux valides mais em s'adapte mieux quand la taille de la police du navigateur a été ajustée.

+ +

On privilégiera, autant que possible, les requêtes média de la spécification de niveau 4 afin d'améliorer l'ergonomie. On pourra, par exemple, se baser sur prefers-reduced-motion afin de détecter si l'utilisateur souhaite minimiser les animations ou les déplacements.

+ +

Sécurité

+ +

Les requêtes média fournissent des informations quant aux capacités de l'appareil avec lequel on navigue. L'ensemble de ces capacités peut être détourné afin de construire une empreinte qui identifie l'appareil ou le catégorise de façon indésirée.

+ +

Pour ces raisons, un navigateur peut choisir de mentir sur les valeurs renvoyées afin de contourner ce pistage. Ainsi, si la détection d'empreinte numérique est désactivée dans Firefox, la plupart des caractéristiques média renverront leurs valeurs par défaut afin d'éviter leur utilisation pour du pistage.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationCommentairesRetours
{{SpecName('CSS5 Media Queries', '#at-media5', '@media')}}Réintègre light-level, inverted-colors et les requêtes média personnalisées qui avaient été retirées la spécification de niveau 4.
+ Ajout des caractéristiques média prefers-reduced-motion, prefers-reduced-transparency, prefers-contrast et prefers-color-scheme.		Issues GitHub pour les brouillons du groupe de travail CSS (en anglais)
{{SpecName('CSS3 Conditional', '#at-media', '@media')}}Définition de la syntaxe de base pour la règle @media.Issues GitHub pour les brouillons du groupe de travail CSS (en anglais)
{{SpecName('CSS4 Media Queries', '#media', '@media')}} +

Ajout des caractéristiques média scripting, pointer, hover, update, overflow-block et overflow-inline.
+ Dépréciation de l'ensemble des types de média à l'exception de screen, print, speech et all.
+ La syntaxe est rendue plus flexible avec l'ajout (entre autres) du mot-clé or.

+ 		Issues GitHub pour les brouillons du groupe de travail CSS (en anglais)
{{SpecName('CSS3 Media Queries', '#media0', '@media')}}
{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.media")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/index/index.html b/files/fr/web/css/@media/index/index.html new file mode 100644 index 0000000000..e227a1aecb --- /dev/null +++ b/files/fr/web/css/@media/index/index.html @@ -0,0 +1,12 @@ +--- +title: Index +slug: Web/CSS/@media/Index +tags: + - '@media' + - CSS + - Index +translation_of: Web/CSS/@media/Index +--- +

{{CSSRef}}

+ +

{{Index("/fr/docs/Web/CSS/@media")}}

diff --git a/files/fr/web/css/@media/inverted-colors/index.html b/files/fr/web/css/@media/inverted-colors/index.html new file mode 100644 index 0000000000..6129831784 --- /dev/null +++ b/files/fr/web/css/@media/inverted-colors/index.html @@ -0,0 +1,92 @@ +--- +title: inverted-colors +slug: Web/CSS/@media/inverted-colors +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/inverted-colors +--- +
{{CSSRef}}
+ +

inverted-colors est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui indique si l'agent utilisateur ou si le système d'exploitation sous-jacent inverse les couleurs.

+ +

Syntaxe

+ +

Cette caractéristique est définie avec un des mots-clés parmi ceux qui suivent :

+ +
+
none
+
Les couleurs sont affichées normalement.
+
inverted
+
Les couleurs des pixels de la zone affichée ont été inversées.
+
+ +

Exemples

+ +

HTML

+ +
<p>
+  Si vous utilisez les couleurs inversées, ce texte devrait
+  être bleu sur blanc (l'inverse de jaune sur noir). Sinon,
+  il devrait être rouge sur gris clair.
+</p>
+<p>
+  Si le texte est gris, cela indique que votre navigateur
+  ne prend pas en charge la caractéristique média
+  `inverted-colors`.
+</p>
+ +

CSS

+ +
p {
+  color: gray;
+}
+
+@media (inverted-colors: inverted) {
+  p {
+    background: black;
+    color: yellow;
+  }
+}
+
+@media (inverted-colors: none) {
+  p {
+    background: #eee;
+    color: red;
+  }
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS5 Media Queries', '#inverted', 'inverted-colors')}}{{Spec2('CSS5 Media Queries')}}
{{SpecName('CSS4 Media Queries', '#inverted', 'inverted-colors')}}{{Spec2('CSS4 Media Queries')}}Repoussée à la spécification de niveau 5 pour les requêtes média.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.media.inverted-colors")}}

diff --git a/files/fr/web/css/@media/monochrome/index.html b/files/fr/web/css/@media/monochrome/index.html new file mode 100644 index 0000000000..0bb4799080 --- /dev/null +++ b/files/fr/web/css/@media/monochrome/index.html @@ -0,0 +1,85 @@ +--- +title: monochrome +slug: Web/CSS/@media/monochrome +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/monochrome +--- +
{{CSSRef}}
+ +

monochrome est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui peut être utilisée afin d'appliquer des styles en fonction du nombre de bits par pixel utilisés pour le tampon d'affichage monochrome de l'appareil.

+ +

Syntaxe

+ +

La caractéristique monochrome est un entier (type {{cssxref("<integer>")}})) dont la valeur correspond au nombre de bits par pixel utilisés pour le tampon d'affichage monochrome de l'appareil. Si l'appareil n'est pas monochrome, cela vaudra 0. Cette caractéristique est une caractéristique d'intervalle ce qui signifie qu'on peut également utiliser les variantes préfixées min-monochrome et max-monochrome afin de cibler les règles en fonction d'un minimum ou d'un maximum.

+ +

Exemples

+ +

HTML

+ +
<p class="mono">
+  Votre appareil prend en charge les
+  pixels monochrome !
+</p>
+<p class="no-mono">
+  Votre appareil ne prend pas en charge
+  les pixels monochromes.
+</p>
+ +

CSS

+ +
p {
+  display: none;
+}
+
+/* Any monochrome device */
+@media (monochrome) {
+  p.mono {
+    display: block;
+    color: #333;
+  }
+}
+
+/* Any non-monochrome device */
+@media (monochrome: 0) {
+  p.no-mono {
+    display: block;
+    color: #ee3636;
+  }
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#monochrome', 'monochrome')}}{{Spec2('CSS4 Media Queries')}}La valeur peut désormais être négative, auquel cas cela correspond à un booléen faux.
{{SpecName('CSS3 Media Queries', '#monochrome', 'monochrome')}}{{Spec2('CSS3 Media Queries')}}Définition initiale. La valeur ne doit pas être négative.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.media.monochrome")}}

diff --git a/files/fr/web/css/@media/orientation/index.html b/files/fr/web/css/@media/orientation/index.html new file mode 100644 index 0000000000..2eab162ff7 --- /dev/null +++ b/files/fr/web/css/@media/orientation/index.html @@ -0,0 +1,88 @@ +--- +title: orientation +slug: Web/CSS/@media/orientation +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/orientation +--- +
{{CSSRef}}
+ +

orientation est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui peut être utilisée pour vérifier l'orientation de la zone d'affichage (viewport) (ou la boîte de la page pour les média paginés).

+ +

Syntaxe

+ +

La caractéristique orientation se définit grâce à l'un des mots-clés suivants :

+ +
+
portrait
+
La zone d'affichage est en mode portrait (la hauteur est la plus grande dimension).
+
landscape
+
La zone d'affichage est en mode paysage (la largeur est la plus grande dimension).
+
+ +

Exemples

+ +

HTML

+ +
<div>Boîte 1</div>
+<div>Boîte 2</div>
+<div>Boîte 3</div>
+
+ +

CSS

+ +
body {
+  display: flex;
+}
+
+div {
+  background: yellow;
+}
+
+@media (orientation: landscape) {
+  body {
+    flex-direction: row;
+  }
+}
+
+@media (orientation: portrait) {
+  body {
+    flex-direction: column;
+  }
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#orientation', 'orientation')}}{{Spec2('CSS4 Media Queries')}}Aucune modification.
{{SpecName('CSS3 Media Queries', '#orientation', 'orientation')}}{{Spec2('CSS3 Media Queries')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.media.orientation")}}

diff --git a/files/fr/web/css/@media/overflow-block/index.html b/files/fr/web/css/@media/overflow-block/index.html new file mode 100644 index 0000000000..45a478c6d7 --- /dev/null +++ b/files/fr/web/css/@media/overflow-block/index.html @@ -0,0 +1,71 @@ +--- +title: overflow-block +slug: Web/CSS/@media/overflow-block +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/overflow-block +--- +
{{CSSRef}}
+ +

overflow-block est une caractéristique média CSS qui indique la façon dont l'appareil d'affichage gère le contenu qui dépasse de la zone d'affichage (viewport) dans l'axe logique de bloc (c'est-à-dire le sens perpendiculaire au sens de lecture).

+ +

Syntaxe

+ +

La caractéristique overflow-block est définie avec un mot-clé de la liste suivante :

+ +
+
none
+
Le contenu qui dépasse n'est pas affiché.
+
scroll
+
Une barre de défilement est ajoutée afin de pouvoir visualiser le contenu qui dépasse de la zone d'affichage.
+
optional-paged
+
Une barre de défilement est ajoutée pour que l'utilisateur puisse voir le contenu ou l'auteur peut utiliser des sauts de page afin que le contenu soit lisible sur une autre page (ex. diaporamas).
+
paged
+
Le contenu qui dépasse est entraîné sur la page suivante (ex. livres électroniques, impression).
+
+ +

Exemples

+ +

HTML

+ +
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac turpis eleifend, fringilla velit ac, aliquam tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc velit erat, tempus id rutrum sed, dapibus ut urna. Integer vehicula nibh a justo imperdiet rutrum. Nam faucibus pretium orci imperdiet sollicitudin. Nunc id facilisis dui. Proin elementum et massa et feugiat. Integer rutrum ullamcorper eleifend. Proin sit amet tincidunt risus. Sed nec augue congue eros accumsan tincidunt sed eget ex.</p>
+
+ +

CSS

+ +
@media (overflow-block: scroll) {
+  p {
+    color: red;
+  }
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#mf-overflow-block', 'overflow-block')}}{{Spec2('CSS4 Media Queries')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.media.overflow-block")}}

diff --git a/files/fr/web/css/@media/overflow-inline/index.html b/files/fr/web/css/@media/overflow-inline/index.html new file mode 100644 index 0000000000..681cc3e8d0 --- /dev/null +++ b/files/fr/web/css/@media/overflow-inline/index.html @@ -0,0 +1,78 @@ +--- +title: overflow-inline +slug: Web/CSS/@media/overflow-inline +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/overflow-inline +--- +
{{CSSRef}}
+ +

overflow-inline est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui indique la façon dont l'appareil d'affichage gère le contenu qui dépasse de la zone d'affichage (viewport) dans l'axe logique en ligne (c'est-à-dire le sens correspondant au sens de lecture).

+ +

Syntaxe

+ +

La caractéristique overflow-inline est définit avec un mot-clé parmi ceux de la liste suivante :

+ +
+
none
+
Le contenu qui dépasse n'est pas affiché.
+
scroll
+
Le contenu qui dépasse peut être visualisé en utilisant une barre de défilement.
+
+ +

Exemples

+ +

HTML

+ +
<p>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  Nullam ac turpis eleifend, fringilla velit ac, aliquam tellus.
+  Vestibulum ante ipsum primis in faucibus orci luctus et
+  ultrices posuere cubilia Curae; Nunc velit erat, tempus id
+  rutrum sed, dapibus ut urna. Integer vehicula nibh a justo
+  imperdiet rutrum. Nam faucibus pretium orci imperdiet
+  sollicitudin. Nunc id facilisis dui. Proin elementum et
+  massa et feugiat. Integer rutrum ullamcorper eleifend.
+  Proin sit amet tincidunt risus. Sed nec augue congue eros
+  accumsan tincidunt sed eget ex.
+</p>
+
+ +

CSS

+ +
@media (overflow-inline: scroll) {
+  p {
+    color: red;
+  }
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#mf-overflow-inline', 'overflow-inline')}}{{Spec2('CSS4 Media Queries')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.media.overflow-inline")}}

diff --git a/files/fr/web/css/@media/pointer/index.html b/files/fr/web/css/@media/pointer/index.html new file mode 100644 index 0000000000..4ea6c2dbf1 --- /dev/null +++ b/files/fr/web/css/@media/pointer/index.html @@ -0,0 +1,101 @@ +--- +title: pointer +slug: Web/CSS/@media/pointer +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/pointer +--- +
{{CSSRef}}
+ +

pointer est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui permet de vérifier si le dispositif de saisie/d'entrée principal est un dispositif de pointage et, le cas échéant, de connaître sa précision.

+ +
+

Note : Si on souhaite tester la précision de n'importe quel dispositif de pointage, on utilisera plutôt la caractéristique any-pointer.

+
+ +

Syntaxe

+ +

Cette caractéristique est définie avec un mot-clé parmi les suivants :

+ +
+
none
+
Le mécanisme de saisie principal n'inclut pas de dispositif de pointage.
+
coarse
+
Le mécanisme de saisie principal inclut un dispositif de pointage dont la précision est limitée.
+
fine
+
Le mécanisme de saisie principal inclut un dispositif de pointage précis.
+
+ +

Exemples

+ +

Dans cet exemple, on crée une petite case à cocher pour les utilisateurs qui disposent d'un pointage précis et une case à cocher plus grande lorsque le mécanisme de pointage est moins précis.

+ +

HTML

+ +
<input id="test" type="checkbox" />
+<label for="test">Coucou !</label>
+ +

CSS

+ +
input[type="checkbox"]:checked {
+  background: gray;
+}
+
+@media (pointer: fine) {
+  input[type="checkbox"] {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    width: 15px;
+    height: 15px;
+    border: 1px solid blue;
+  }
+}
+
+@media (pointer: coarse) {
+  input[type="checkbox"] {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    width: 30px;
+    height: 30px;
+    border: 2px solid red;
+  }
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#pointer', 'pointer')}}{{Spec2('CSS4 Media Queries')}}Ajout dans la spécification de niveau 4 pour les requêtes média.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.media.pointer")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/prefers-color-scheme/index.html b/files/fr/web/css/@media/prefers-color-scheme/index.html new file mode 100644 index 0000000000..89d78710c6 --- /dev/null +++ b/files/fr/web/css/@media/prefers-color-scheme/index.html @@ -0,0 +1,103 @@ +--- +title: prefers-color-scheme +slug: Web/CSS/@media/prefers-color-scheme +tags: + - '@media' + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/prefers-color-scheme +--- +
{{CSSRef}}
+ +
+

Si vous avez modifié privacy.resistFingerprinting à vrai, le paramètre {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} sera redéfini à light.
+ Sinon, vous pouvez créer le paramètre numérique ui.systemUsesDarkTheme pour redéfinier le comportement par défaut et retourner light (valeur : 0), dark (valeur : 1), or no-preference (valeur : 2). (Firefox retourneralight si une autre valeur est utilisée.)

+
+ +

La caractéristique média prefers-color-scheme permet de détecter les préférences exprimées par l'utilisateur quant au thème à utiliser (sombre ou clair).

+ +

Syntaxe

+ +
+
light
+
Cette valeur indique que l'utilisateur a exprimé le choix d'utiliser une interface avec une dominante claire, ou qu'il n'a pas exprimé son choix.
+
dark
+
Cette valeur indique que l'utilisateur a exprimé le choix d'utiliser une interface avec une dominante sombre.
+
+ +

Exemples

+ +

CSS

+ +
.day   { background: #eee; color: black; }
+.night { background: #333; color: white; }
+
+@media (prefers-color-scheme: dark) {
+  .day.dark-scheme   { background:  #333; color: white; }
+  .night.dark-scheme { background: black; color:  #ddd; }
+}
+
+@media (prefers-color-scheme: light) {
+  .day.light-scheme   { background: white; color:  #555; }
+  .night.light-scheme { background:  #eee; color: black; }
+}
+
+.day, .night {
+  display: inline-block;
+  padding: 1em;
+  width: 7em;
+  height: 2em;
+  vertical-align: middle;
+}
+
+ +

HTML

+ +
<div class="day">Jour (initial)</div>
+<div class="day light-scheme">Jour (modifié si utilisation d'un thème clair)</div>
+<div class="day dark-scheme">Jour (modifié si utilisation d'un thème sombre)</div> <br>
+
+<div class="night">Nuit (initial)</div>
+<div class="night light-scheme">Nuit (modifié si utilisation d'un thème clair)</div>
+<div class="night dark-scheme">Nuit (modifié si utilisation d'un thème sombre)</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-color-scheme', 'prefers-color-scheme')}}{{Spec2('CSS5 Media Queries')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.media.prefers-color-scheme")}}

+ +

Voir aussi

+ + + +
{{QuickLinksWithSubpages("/fr/docs/Web/CSS/@media/")}}
diff --git a/files/fr/web/css/@media/prefers-contrast/index.html b/files/fr/web/css/@media/prefers-contrast/index.html new file mode 100644 index 0000000000..70120f5b2e --- /dev/null +++ b/files/fr/web/css/@media/prefers-contrast/index.html @@ -0,0 +1,86 @@ +--- +title: prefers-contrast +slug: Web/CSS/@media/prefers-contrast +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/prefers-contrast +--- +
{{CSSRef}}{{SeeCompatTable}}{{draft}}
+ +

La caractéristique média prefers-contrast permet de détecter si l'utilisateur a configuré son système pour utiliser un contraste élevé.

+ +

Syntaxe

+ +
+
no-preference
+
Cette valeur indique que l'utilisateur n'a exprimé aucune préférence particulière. La valeur de ce mot-clé est évaluée à false dans un contexte booléen.
+
high
+
Cette valeur indique que l'utilisateur a configuré son système pour avoir un contraste plus élevé.
+
low
+
Cette valeur indique que l'utilisateur a configuré son système afin d'avoir un niveau de contraste plus faible.
+
+ +

Préférences utilisateur

+ +

À l'heure actuelle, aucun agent utilisateur n'implémente cette fonctionnalité bien que différents systèmes d'exploitation prennent en charge ce type de paramètre.

+ +

Exemples

+ +

Par défaut, cet exemple présente un contraste trop faible pour la lisibilité.

+ +

HTML

+ +
<div class="contrast">Une boîte avec un contraste faible.</div>
+
+ +

CSS

+ +
.contrast {
+  color: grey;
+}
+
+@media (prefers-contrast: high) {
+  .contrast {
+    color: black;
+  }
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpecificationÉtatCommentaires
{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-contrast', 'prefers-contrast')}}{{Spec2('CSS5 Media Queries')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.media.prefers-contrast")}}

+ +

Voir aussi

+ + + +

{{QuickLinksWithSubpages("/fr/docs/Web/CSS/@media/")}}

diff --git a/files/fr/web/css/@media/prefers-reduced-motion/index.html b/files/fr/web/css/@media/prefers-reduced-motion/index.html new file mode 100644 index 0000000000..32e0c2bcd8 --- /dev/null +++ b/files/fr/web/css/@media/prefers-reduced-motion/index.html @@ -0,0 +1,135 @@ +--- +title: prefers-reduced-motion +slug: Web/CSS/@media/prefers-reduced-motion +tags: + - '@media' + - Accessibilité + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/prefers-reduced-motion +--- +
{{CSSRef}}
+ +

La caractéristique média prefers-reduced-motion détecte si l'utilisateur a demandé au système de minimiser la quantité d'animation ou de mouvement.

+ +

Syntaxe

+ +
+
no-preference
+
Cette valeur indique que l'utilisateur n'a rien indiqué au système.
+
reduce
+
Cette valeur indique que l'utilisateur souhaite utiliser une interface qui minimise la quantité d'animation, au point où tout mouvement qui n'est pas essentiel a été retiré.
+
+ +

Gestion des préférences

+ +

Dans Firefox, la valeur reduce est utilisée par le moteur selon des conditions provenant du système d'exploitation/environnement de bureau :

+ + + +

Exemples

+ +

Cet exemple possède une animation désagréable qui sera exécutée à moins d'activer la réduction de mouvement dans les préférences relatives à l'accessibilité.

+ +

HTML

+ +
<div class="animation">boîte animée</div>
+
+ +

CSS

+ +
.animation {
+  animation: vibrate 0.3s linear infinite both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animation {
+  animation: none;
+  }
+}
+
+ + + +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-reduced-motion', 'prefers-reduced-motion')}}{{Spec2('CSS5 Media Queries')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.media.prefers-reduced-motion")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/@media/prefers-reduced-transparency/index.html b/files/fr/web/css/@media/prefers-reduced-transparency/index.html new file mode 100644 index 0000000000..a2eddd14bd --- /dev/null +++ b/files/fr/web/css/@media/prefers-reduced-transparency/index.html @@ -0,0 +1,84 @@ +--- +title: prefers-reduced-transparency +slug: Web/CSS/@media/prefers-reduced-transparency +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/prefers-reduced-transparency +--- +

{{CSSRef}}{{SeeCompatTable}}{{draft}}

+ +

La caractéristique média prefers-reduced-transparency permet de détecter si un utilisateur préfère (via un paramètre du système d'exploitation ou du navigateur) minimiser l'utilisation des effets de transparence.

+ +

Syntaxe

+ +
+
no-preference
+
Cette valeur indique que l'utilisateur n'a exprimé aucune préférence quant à l'utilisation des effets de transparence. Ce mot-clé correspond à false lorsqu'il est utilisé dans un contexte booléen.
+
reduce
+
Cette valeur indique que l'utilisateur a configuré le système afin de minimiser la quantité d'effets de transparence.
+
+ +

Préférences utilisateur

+ +

À l'heure actuelle, aucun navigateur ou agent utilisateur n'implémente cette préférence malgré la présence de réglages correspondants dans les systèmes d'exploitation.

+ +

Exemples

+ +

Par défaut, cet exemple utilise un effet de transparence qui diminue la lisibilité du contenu.

+ +

HTML

+ +
<div class="transparency">Boîte transparente</div>
+
+ +

CSS

+ +
.transparency {
+  opacity: 0.5;
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .transparency {
+    opacity: 1;
+  }
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-reduced-transparency', 'prefers-reduced-transparency')}}{{Spec2('CSS5 Media Queries')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.media.prefers-reduced-transparency")}}

+ +

Voir aussi

+ + + +

{{QuickLinksWithSubpages("/fr/docs/Web/CSS/@media/")}}

diff --git a/files/fr/web/css/@media/resolution/index.html b/files/fr/web/css/@media/resolution/index.html new file mode 100644 index 0000000000..32f97ce982 --- /dev/null +++ b/files/fr/web/css/@media/resolution/index.html @@ -0,0 +1,75 @@ +--- +title: resolution +slug: Web/CSS/@media/resolution +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/resolution +--- +
{{CSSRef}}
+ +

resolution est une caractéristique média CSS dont la valeur représente la densité de pixels de l'appareil d'affichage.

+ +

Syntaxe

+ +

La caractéristique resolution est une valeur de type {{cssxref("<resolution>")}} qui représente la densité de pixels de l'appareil d'affichage. C'est une caractéristique d'intervalle, cela signifie qu'on peut utiliser les variantes préfixées min-resolution et max-resolution afin d'établir des règles selon un minimum ou un maximum.

+ +

Exemples

+ +

HTML

+ +
<p>Un test pour la densité de pixels de votre appareil.</p>
+
+ +

CSS

+ +
/* Résolution exacte  */
+@media (resolution: 150dpi) {
+  p {
+    color: red;
+  }
+}
+
+/* Résolution minimale */
+@media (min-resolution: 72dpi) {
+  p {
+    text-decoration: underline;
+  }
+}
+
+/* Résolution maximale */
+@media (max-resolution: 300dpi) {
+  p {
+    background: yellow;
+  }
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Media Queries', '#resolution', 'resolution')}}{{Spec2('CSS3 Media Queries')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.media.resolution")}}

diff --git a/files/fr/web/css/@media/scan/index.html b/files/fr/web/css/@media/scan/index.html new file mode 100644 index 0000000000..be71b32a45 --- /dev/null +++ b/files/fr/web/css/@media/scan/index.html @@ -0,0 +1,85 @@ +--- +title: scan +slug: Web/CSS/@media/scan +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/scan +--- +
{{CSSRef}}
+ +

scan est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui peut être utilisée afin de déterminer le processus utilisé pour composer l'image sur l'appareil d'affichage.

+ +

Syntaxe

+ +

La caractéristique scan est définie avec un mot-clé parmi ceux qui suivent :

+ +
+
interlace
+
L'image est composée avec un entrelacement grâce à des lignes intercalées (en deux passes).
+
progressive
+
L'image est composée ligne par ligne avec un balayage progressif.
+
+ +

Exemples

+ +

HTML

+ +
<p>Si votre écran utilise une composition avec entrelacement, ce texte devrait
+   être écrit avec une police sans serif/empattement. S'il utilise une composition
+   avec un balayage progressif, vous devriez voir une police avec serif/empattement.
+</p>
+
+ +

CSS

+ +
p {
+  font-family: cursive;
+}
+
+@media (scan: interlace) {
+  p {
+    font-family: sans-serif;
+  }
+}
+
+@media (scan: progressive) {
+  p {
+    font-family: serif;
+  }
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#scan', 'scan')}}{{Spec2('CSS4 Media Queries')}}Aucune modification.
{{SpecName('CSS3 Media Queries', '#scan', 'scan')}}{{Spec2('CSS3 Media Queries')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.media.scan")}}

diff --git a/files/fr/web/css/@media/scripting/index.html b/files/fr/web/css/@media/scripting/index.html new file mode 100644 index 0000000000..85af2d8c69 --- /dev/null +++ b/files/fr/web/css/@media/scripting/index.html @@ -0,0 +1,87 @@ +--- +title: scripting +slug: Web/CSS/@media/scripting +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/scripting +--- +
{{CSSRef}}
+ +

scripting est une caractéristique média CSS qui permet de savoir si les outils de script (ex. JavaScript) sont disponibles.

+ +

Syntaxe

+ +

La caractéristique scripting est définie avec un mot-clé parmi les suivants :

+ +
+
none
+
Les outils de script sont indisponibles pour le document courant.
+
initial-only
+
Les outils de script sont disponibles pendant le chargement de la page mais pas ensuite.
+
enabled
+
Les outils de script sont pris en charge et actifs pour le document courant.
+
+ +

Exemples

+ +

HTML

+ +
<p class="script-none">Les outils de script ne sont pas disponibles. :-(</p>
+<p class="script-initial-only">Les outils de script sont uniquement disponibles au chargement initial.</p>
+<p class="script-enabled">Les outils de script sont activés ! :-)</p>
+
+ +

CSS

+ +
p {
+  color: lightgray;
+}
+
+@media (scripting: none) {
+  .script-none {
+     color: red;
+  }
+}
+
+@media (scripting: initial-only) {
+  .script-initial-only {
+    color: red;
+  }
+}
+
+@media (scripting: enabled) {
+  .script-enabled {
+    color: red;
+  }
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#scripting', 'scripting')}}{{Spec2('CSS4 Media Queries')}}Reporté à la spécification Media Queries Level 5.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.media.scripting")}}

diff --git a/files/fr/web/css/@media/shape/index.html b/files/fr/web/css/@media/shape/index.html new file mode 100644 index 0000000000..ffbbd65e74 --- /dev/null +++ b/files/fr/web/css/@media/shape/index.html @@ -0,0 +1,97 @@ +--- +title: shape +slug: Web/CSS/@media/shape +tags: + - '@media' + - CSS + - Caractéristique média + - Reference + - Règle @ +translation_of: Web/CSS/@media/shape +--- +
{{CSSRef}} {{Non-standard_header}}
+ +

La caractéristique média shape peut être utilisée afin de tester la forme d'un appareil pour distinguer les affichages rectangulaires des affichages ronds.

+ +

Syntaxe

+ +

La caractéristique shape peut prendre une valeur parmi deux valeurs définies : rect qui représente un écran rectangulaire ou round qui représente un écran circulaire, ovale ou elliptique.

+ +
+
rect
+
La forme est un rectangle, un carré ou une forme similaire (ex. un rectangle arrondi) qui permet d'utiliser un affichage traditionnel.
+
round
+
La forme est arrondie telle un cercle, un ovale ou une ellipse et les dispositions arrondies seront plus appropriées sur ces écrans.
+
+ +

Exemples

+ +
+

Note : Aucun navigateur n'implémente actuellement cette fonctionnalité.

+
+ +

Exemple simple

+ +

HTML

+ +
<h1>Coucou le monde !</h1>
+
+ +

CSS

+ +
h1 {
+  text-align: left;
+}
+
+@media (shape: rect) {
+  h1 {
+    text-align: left;
+  }
+}
+
+@media (shape: round) {
+  h1 {
+    text-align: center;
+  }
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple_simple")}}

+ +

Feuille de style spécifique

+ +

Ce fragment de code HTML permettra d'appliquer une feuille de style particulière pour les appareils qui ont des écrans arrondis.

+ +
<head>
+    <link rel="stylesheet" href="default.css" />
+    <link media="screen and (shape: rect)" rel="stylesheet" href="rectangle.css" />
+    <link media="screen and (shape: round)" rel="stylesheet" href="round.css" />
+</head>
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
CSS Round Display Level 1BrouillonDéfinition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.media.shape")}}

diff --git a/files/fr/web/css/@media/update-frequency/index.html b/files/fr/web/css/@media/update-frequency/index.html new file mode 100644 index 0000000000..1bdabdfd63 --- /dev/null +++ b/files/fr/web/css/@media/update-frequency/index.html @@ -0,0 +1,82 @@ +--- +title: update +slug: Web/CSS/@media/update-frequency +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/update-frequency +--- +
{{CSSRef}}
+ +

update est une caractéristique média (cf. {{cssxref("@media")}}) qui permet de vérifier la vitesse à laquelle l'appareil d'affichage peut modifier l'apparence du contenu.

+ +

Syntaxe

+ +

La caractéristique update est définie avec un mot-clé parmi ceux de la liste ci-après.

+ +
+
none
+
Une fois le document affiché, son apparence ne peut plus être modifiée (ex. le document est imprimé sur du papier).
+
slow
+
Une fois le document affiché, son apparence peut évoluer mais lentement (ex. des livres électroniques utilisant une encre électronique ou des appareils de lecture avec un niveau d'énergie faible).
+
fast
+
Une fois le document affiché, son apparence peut évoluer rapidement (ex. un ordinateur qui serait capable de gérer les transitions CSS).
+
+ +

Exemples

+ +

HTML

+ +
<p>
+  Si ce texte est animé, cela signifie que vous utilisez
+  un appareil avec un affichage qui évolue rapidement.
+</p>
+
+ +

CSS

+ +
@keyframes jiggle {
+  from {
+    transform: translateY(0);
+  }
+
+  to {
+    transform: translateY(25px);
+  }
+}
+
+@media (update: fast) {
+  p {
+    animation: 1s jiggle linear alternate infinite;
+  }
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#update', 'update')}}{{Spec2('CSS4 Media Queries')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.media.update")}}

diff --git a/files/fr/web/css/@media/width/index.html b/files/fr/web/css/@media/width/index.html new file mode 100644 index 0000000000..bc1f77eb35 --- /dev/null +++ b/files/fr/web/css/@media/width/index.html @@ -0,0 +1,90 @@ +--- +title: width +slug: Web/CSS/@media/width +tags: + - CSS + - Caractéristique média + - Reference +translation_of: Web/CSS/@media/width +--- +
{{CSSRef}}
+ +

width est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui permet d'appliquer des styles différents en fonction de la largeur de la zone d'affichage (viewport) ou de la largeur de la page (pour les média paginés). La largeur est exprimée comme une longueur CSS (type {{cssxref("<length>")}}.

+ +

Syntaxe

+ +

width est une valeur décrivant la largeur d'affichage, les versions préfixées min-width et max-width peuvent également être utilisées afin de décrire la largeur minimale (resp. la largeur maximale).

+ +
/* Largeur exacte */
+@media (width: 300px) {}
+
+/* Un viewport avec une largeur minimale */
+@media (min-width: 50em) {}
+
+/* Un viewport avec une largeur maximale */
+@media (max-width: 1000px) {}
+
+ +

Exemples

+ +

HTML

+ +
<div>Observez cet élément lorsque vous redimensionnez la largeur du viewport.</div>
+ +

CSS

+ +
/* Largeur exacte */
+@media (width: 360px) {
+  div {
+    color: red;
+  }
+}
+
+/* Largeur minimale */
+@media (min-width: 35rem) {
+  div {
+    background: yellow;
+  }
+}
+
+/* Largeur maximale */
+@media (max-width: 50rem) {
+  div {
+    border: 2px solid blue;
+  }
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples','90%')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Media Queries', '#width', 'width')}}{{Spec2('CSS4 Media Queries')}}La valeur peut désormais être négative (ce qui correspond à un booléen faux).
{{SpecName('CSS3 Media Queries', '#width', 'width')}}{{Spec2('CSS3 Media Queries')}}Définition initiale. La valeur ne peut pas être négative.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.media.width")}}

-- cgit v1.2.3-54-g00ecf