diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/fr/web/css/@media | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/fr/web/css/@media')
54 files changed, 3634 insertions, 0 deletions
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 +--- +<div>{{cssref}} {{Non-standard_header}} {{Deprecated_header}}{{h3_gecko_minversion("-moz-device-pixel-ratio", "2.0")}} {{deprecated_inline("16")}}</div> + +<p>La <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média">caractéristique média</a> <strong><code>-moz-device-pixel-ratio</code></strong>, associée à <a href="/fr/docs/Web/CSS/@media" title="The @media CSS at-rule lets you specify declarations that depend on the condition of a media query. The rule may be placed at the top level of your code or nested inside any other conditional group at-rule."><code>@media</code></a>, 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.</p> + +<div class="warning"> +<p><strong>Ne pas utiliser cette fonctionnalité ! </strong>La caractéristique <code><a href="/fr/docs/Web/CSS/@media/resolution">resolution</a></code> et l'unité <code>dppx</code> permettent d'obtenir le même mécanisme.<br> + <br> + <code>-moz-device-pixel-ratio</code> peut être utilisée si besoin d'être compatible avec des versions de Firefox antérieures à la version 16 et <code>-webkit-device-pixel-ratio</code> peut être utilisée avec les navigateurs WebKit qui ne prennent pas en charge <code>dppx</code>. Par exemple :</p> + +<pre class="brush: css">@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 */ </pre> + +<p>Voir <a href="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/">cet article du CSSWG</a> pour les bonnes pratiques quant à la compatibilité de <code>resolution</code> et <code>dppx</code>.</p> +</div> + +<div class="note"><strong>Note</strong> : Cette caractéristique est également implémentée par Webkit et <a href="https://msdn.microsoft.com/en-us/library/ie/dn760733(v=vs.85).aspx">IE 11 pour Windows Phone 8.1</a> sous le nom <code>-webkit-device-pixel-ratio</code>. Les versions préfixées pour les seuils minimal / maximal sont intitulées <code>min--moz-device-pixel-ratio</code> et <code>max--moz-device-pixel-ratio</code> sous Gecko, tandis que sous Webkit, elles sont intitulées <code>-webkit-min-device-pixel-ratio</code> et <code>-webkit-max-device-pixel-ratio</code>.</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<dl> + <dt>{{cssxref("<number>")}}</dt> + <dd>Le nombre de pixels physiques pour un pixel CSS.</dd> +</dl> + +<p><br> + <strong>Média :</strong> {{cssxref("Media/Visual")}}<br> + <strong>Gestion des préfixes min/max :</strong> Oui</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("css.at-rules.media.-moz-device-pixel-ratio")}}</p> 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 +--- +<div>{{cssref}} {{Non-standard_header}}</div> + +<div class="note"> +<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, 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.</p> +</div> + +<p>La <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média">caractéristique média</a> <strong><code>-moz-mac-graphite-theme</code></strong>, rattachée à la règle @ <a href="/fr/docs/Web/CSS/@media" title="The @media CSS at-rule lets you specify declarations that depend on the condition of a media query. The rule may be placed at the top level of your code or nested inside any other conditional group at-rule."><code>@media</code></a>, est spécifique à Gecko et peut être utilisée afin d'appliquer des styles si, sur macOS, l'utilisateur utilise le thème "Graphite".</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<dl> + <dt>{{cssxref("<integer>")}}</dt> + <dd>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.</dd> +</dl> + +<p><br> + <strong>Média :</strong> {{cssxref("Media/Visual")}}<br> + <strong>Gestion des préfixes min/max :</strong> Non</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Cette caractéristiquee correspond à la pseudo-classe {{CSSxRef(":-moz-system-metric/mac-graphite-theme", ":-moz-system-metric(mac-graphite-theme)")}}.</li> +</ul> 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 +--- +<div>{{CSSRef}}{{Non-standard_Header}}{{Gecko_MinVersion_Header("1.9.2")}}</div> + +<p>La <a href="fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média">caractérique média</a> <strong><code>-moz-maemo-classic</code></strong>, rattachée à la règle @ <a href="/fr/docs/Web/CSS/@media" title="The @media CSS at-rule lets you specify declarations that depend on the condition of a media query. The rule may be placed at the top level of your code or nested inside any other conditional group at-rule."><code>@media</code></a>, est spécifique à Gecko et permet d'appliquer des styles si l'agent utilisateur utilise le thème Maemo original.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<dl> + <dt>{{cssxref("<integer>")}}</dt> + <dd>Si l'agent utilisateur utilise Maemo avec le thème original, cette caractéristique vaut 1. Sinon, elle vaut 0.</dd> +</dl> + +<p><br> + <strong>Média :</strong> {{cssxref("Media/Visual")}}<br> + <strong>Gestion des préfixes min/max :</strong> Non.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Cette caractéristique correspond à la pseudo-classe {{CSSxRef(":-moz-system-metric/maemo-classic", ":-moz-system-metric(maemo-classic)")}}.</li> +</ul> 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 +--- +<div>{{cssref}}{{Non-standard_header}}</div> + +<div class="note"> +<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, 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.</p> +</div> + +<p>La <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média">caractéristique média</a> <strong><code>-moz-os-version</code></strong>, rattachée à la règle @ <a href="/fr/docs/Web/CSS/@media" title="The @media CSS at-rule lets you specify declarations that depend on the condition of a media query. The rule may be placed at the top level of your code or nested inside any other conditional group at-rule."><code>@media</code></a>, 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.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code>windows-win7</code></dt> + <dd>Le système d'exploitation est Windows 7.</dd> + <dt><code>windows-win8</code></dt> + <dd>Le système d'exploitation est Windows 8.</dd> + <dt><code>windows-win10</code></dt> + <dd>Le système d'exploitation est Windows 10.</dd> +</dl> + +<p><br> + <strong>Média :</strong> {{cssxref("Media/Visual")}}<br> + <strong>Gestion des préfixes min/max :</strong> Non</p> 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 +--- +<div>{{cssref}}{{Non-standard_header}}</div> + +<div class="note"> +<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, 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.</p> +</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<dl> + <dt>{{cssxref("<integer>")}}</dt> + <dd>Si l'interface de l'appareil affiche une flèche à la fin des ascensceurs (<em>scrollbars</em>), cette caractéristique vaut 1 et sinon 0.</dd> +</dl> + +<p><br> + <strong>Média :</strong> {{cssxref("Media/Visual")}}<br> + <strong>Gestion des préfixes min/max :</strong> Non</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>La pseudo-classe correspondante {{CSSxRef(":-moz-system-metric/scrollbar-end-backward", ":-moz-system-metric(scrollbar-end-backward)")}}.</li> +</ul> 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 +--- +<div>{{cssref}} {{Non-standard_header}}</div> + +<div class="note"> +<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, 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.</p> +</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<dl> + <dt>{{cssxref("<integer>")}}</dt> + <dd>Si l'interface de l'appareil affiche un bouton avec une flèche à la fin des ascenseurs (<em>scrollbars</em>), cette caractéristique vaut 1, sinon elle vaut 0.</dd> +</dl> + +<p><br> + <strong>Média :</strong> {{cssxref("Media/Visual")}}<br> + <strong>Gestion des préfixes min/max :</strong> Non</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>La pseudo-classe correspondante {{CSSxRef(":-moz-system-metric/scrollbar-end-forward", ":-moz-system-metric(scrollbar-end-forward)")}}</li> +</ul> 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 +--- +<div>{{cssref}} {{Non-standard_header}}</div> + +<div class="note"> +<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, 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.</p> +</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<dl> + <dt>{{cssxref("<integer>")}}</dt> + <dd>Si l'interface de l'appareil affiche un bouton avec une flèche vers l'arrière à la fin des ascenseurs (<em>scrollbars</em>), cette caractéristique vaut 1 et sinon 0.</dd> +</dl> + +<p><br> + <strong>Média :</strong> {{cssxref("Media/Visual")}}<br> + <strong>Gestion des préfixes min/max :</strong> non</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>La pseudo-classe correspondante {{cssxref(":-moz-system-metric(scrollbar-start-backward)")}}</li> +</ul> 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 +--- +<div>{{cssref}} {{Non-standard_header}}</div> + +<div class="note"> +<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, 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.</p> +</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<dl> + <dt>{{cssxref("<integer>")}}</dt> + <dd>Si l'interface de l'appareil affiche une flèche vers l'avant au début des ascenseurs (<em>scrollbars</em>), cette caractéristique vaut 1 et sinon 0.</dd> +</dl> + +<p><br> + <strong>Média :</strong> {{cssxref("Media/Visual")}}<br> + <strong>Gestion des préfixes min/max :</strong> Non.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>La pseudo-classe correspondante {{CSSxRef(":-moz-system-metric/scrollbar-start-forward", ":-moz-system-metric(scrollbar-start-forward)")}}.</li> +</ul> 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 +--- +<div>{{cssref}} {{Non-standard_header}}</div> + +<div class="note"> +<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, 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.</p> +</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<dl> + <dt>{{cssxref("<integer>")}}</dt> + <dd>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.</dd> +</dl> + +<p><br> + <strong>Média :</strong> {{cssxref("Media/Visual")}}<br> + <strong>Gestion des préfixes min/max :</strong> Non</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>La pseudo-classe correspondante {{CSSxRef(":-moz-system-metric/scrollbar-thumb-proportional", ":-moz-system-metric(scrollbar-thumb-proportional)")}}.</li> +</ul> 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 +--- +<p>{{CSSRef}}{{Non-standard_Header}}{{Gecko_MinVersion_Header("1.9.2")}}</p> + +<div class="blockIndicator note"> +<p><strong>Note :</strong> Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, 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.</p> +</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<dl> + <dt>{{cssxref("<integer>")}}</dt> + <dd>Cette caractéristique vaut 1 si l'appareil prend en charge les évènements tactiles et 0 sinon.</dd> +</dl> + +<p><br> + <strong>Média :</strong> {{cssxref("Media/Visual")}}<br> + <strong>Gestion des préfixes min/max :</strong> Non</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Cette caractéristique peut être utilisée pour afficher des boutons plus gros si l'utilisateur emploie un appareil tactile.</p> + +<pre class="brush: css">button { + padding: .5em; +} + +@media (-moz-touch-enabled) { + button { + padding: 1em; + } +}</pre> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Cette fonctionnalité correspond à la pseudo-classe {{CSSxRef(":-moz-system-metric/touch-enabled", ":-moz-system-metric(touch-enabled)")}}.</li> +</ul> 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 +--- +<div>{{cssref}} {{Non-standard_header}}</div> + +<div class="note"> +<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, 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.</p> +</div> + +<p>La <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média">caractéristique média</a> <code><strong>-moz-windows-accent-color-in-titlebar</strong></code>, spécifique à Gecko et rattachée à la règle @ <a href="/fr/docs/Web/CSS/@media" title="The @media CSS at-rule lets you specify declarations that depend on the condition of a media query. The rule may be placed at the top level of your code or nested inside any other conditional group at-rule."><code>@media</code></a>, 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.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<dl> + <dt>{{cssxref("<integer>")}}</dt> + <dd>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.</dd> +</dl> + +<p><br> + <strong>Média :</strong> {{cssxref("Media/Visual")}}<br> + <strong>Gestion des préfixes min/max :</strong> non</p> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: css">@media (-moz-windows-accent-color-in-titlebar: 1) { + h1 { + color: -moz-win-accentcolortext; + } + + body { + background-color: -moz-win-accentcolor; + } +}</pre> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Cette caractéristique est liée aux valeurs {{cssxref("<color>")}} <code>-moz-win-accentcolor</code> et <code>-moz-win-accentcolortext</code> qui permettent d'accéder aux couleurs d'accentuation de Windows depuis CSS.</li> +</ul> 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 +--- +<div>{{cssref}} {{Non-standard_header}}</div> + +<div class="note"> +<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, 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.</p> +</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<dl> + <dt>{{cssxref("<integer>")}}</dt> + <dd>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.</dd> +</dl> + +<p><br> + <strong>Média :</strong> {{cssxref("Media/Visual")}}<br> + <strong>Gestion des prefixes min/max :</strong> non</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Cette caractéristique correspond à la pseudo-classe {{CSSxRef(":-moz-system-metric/windows-classic", ":-moz-system-metric(windows-classic)")}}</li> + <li>{{CSSxRef("@media/-moz-windows-default-theme", "-moz-windows-default-theme")}}</li> + <li>{{CSSxRef("@media/-moz-windows-theme", "-moz-windows-theme")}}</li> +</ul> 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' +--- +<div>{{cssref}} {{Non-standard_header}}</div> + +<div class="note"> +<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, 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.</p> +</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<dl> + <dt>{{cssxref("<integer>")}}</dt> + <dd>Cette caractéristique vaut 1 si l'utilisateur utilise Windows avec le compositeur DWM. Sinon, elle vaut 0.</dd> +</dl> + +<p><br> + <strong>Média :</strong> {{cssxref("Media/Visual")}}<br> + <strong>Gestion des préfixes min/max :</strong> non</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>La pseudo-classe correspondante {{CSSxRef(":-moz-system-metric/windows-compositor", ":-moz-system-metric(windows-compositor)")}}</li> +</ul> 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 +--- +<div>{{cssref}} {{Non-standard_header}}</div> + +<div class="note"> +<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, 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.</p> +</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<dl> + <dt>{{cssxref("<integer>")}}</dt> + <dd>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.</dd> +</dl> + +<p><br> + <strong>Média :</strong> {{cssxref("Media/Visual")}}<br> + <strong>Gestion des préfixes min/max :</strong> non</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>La pseudo-classe correspondante {{CSSxRef(":-moz-system-metric(windows-default-theme)")}}</li> + <li>{{CSSxRef("@media/-moz-windows-classic", "-moz-windows-classic")}}</li> + <li>{{CSSxRef("@media/-moz-windows-theme", "-moz-windows-theme")}}</li> +</ul> 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 +--- +<div>{{cssref}} {{Non-standard_header}}</div> + +<div class="note"> +<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, 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.</p> +</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<dl> + <dt>{{cssxref("<integer>")}}</dt> + <dd>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.</dd> +</dl> + +<p><strong>Média :</strong> {{cssxref("Media/Visual")}}<br> + <strong>Gestion des préfixes min/max :</strong> non</p> 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 +--- +<div>{{cssref}} {{Non-standard_header}}</div> + +<div class="note"> +<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, 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.</p> +</div> + +<p>La <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média">caractéristique média</a> <strong><code>-moz-windows-theme</code></strong>, spécifique à Gecko et rattachée à la règle @ <a href="/fr/docs/Web/CSS/@media" title="The @media CSS at-rule lets you specify declarations that depend on the condition of a media query. The rule may be placed at the top level of your code or nested inside any other conditional group at-rule."><code>@media</code></a>, 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.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<p>La caractéristique <code>-moz-windows-theme</code> est un mot-clé indiquant le thème Windows actuellement utilisé.</p> + +<h3 id="Valeurs">Valeurs</h3> + +<ul> + <li><code>aero</code></li> + <li><code>luna-blue</code></li> + <li><code>luna-olive</code></li> + <li><code>luna-silver</code></li> + <li><code>royale</code></li> + <li><code>generic</code></li> + <li><code>zune</code></li> +</ul> + +<p><strong>Média :</strong> {{cssxref("Media/Visual")}}<br> + <strong>Gestion des préfixes min/max :</strong> non</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{CSSxRef("@media/-moz-windows-classic", "-moz-windows-classic")}}</li> + <li>{{CSSxRef("@media/-moz-windows-default-theme", "-moz-windows-default-theme")}}</li> +</ul> 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 +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<p><strong><code>-webkit-animation</code></strong> est une <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média">caractéristique média</a> 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")}}.</p> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: css">@media (-webkit-animation) { + /* CSS à utiliser si les animations sont prises en charge */ +} </pre> + +<h2 id="Spécifications">Spécifications</h2> + +<p>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 <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3">référence CSS Apple pour Safari (en anglais)</a>.</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("css.at-rules.media.-webkit-animation")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{cssxref("-webkit-transform-3d")}}</li> + <li>{{cssxref("-webkit-transform-2d")}}</li> + <li>{{cssxref("-webkit-transition")}}</li> + <li><a href="http://www.quirksmode.org/css/tests/mediaqueries/animation.html">Page de test sur quirksmode.org</a></li> +</ul> 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 +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<p><strong><code>-webkit-device-pixel-ratio</code></strong> est une caractéristique média non-standard, alternative à la caractéristique média standard {{cssxref("@media/resolution","resolution")}}.</p> + +<p>Sa valeur correspond au nombre de pixels physiques utilisés par l'appareil pour représenter <a href="/fr/docs/Web/CSS/length#Unités_de_longueur_absolues">un pixel CSS (<code>px</code>)</a>. Bien que la valeur soit de type {{cssxref("<number>")}}, sans unité donc, l'unité implicite est <a href="/fr/docs/Web/CSS/resolution#Unités"><code>dppx</code></a>.</p> + +<div class="warning"> +<p><strong>Attention !</strong> Cette caractéristique est spécifique à WebKit. Tant que possible, on utilisera {{cssxref("@media/resolution","resolution")}}.</p> +</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<p><strong><code>-webkit-device-pixel-ratio</code></strong> est une valleur décrivant un intervalle. On peut également utiliser <strong><code>-webkit-min-device-pixel-ratio</code></strong> et <strong><code>-webkit-max-device-pixel-ratio</code></strong> pour fixer un seuil minimum/maximum.</p> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt>{{cssxref("<number>")}}</dt> + <dd>Le nombre de pixels physiques pour chaque pixel (<code><a href="/fr/docs/Web/CSS/length#Unités_de_longueur_absolues">px</a></code>) CSS. Bien que la valeur soit un nombre et ne permette pas d'utiliser des unités, l'unité implicite est <code><a href="/fr/docs/Web/CSS/resolution#dppx">dppx</a></code>.</dd> +</dl> + +<h2 id="Implémentation">Implémentation</h2> + +<pre class="brush: css">/* 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) { ... } +</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: 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; + } +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>Voici un test pour la densité de pixel de votre appareil.</p> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples")}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Compat', '#css-media-queries-webkit-device-pixel-ratio', '-webkit-device-pixel-ratio')}}</td> + <td>{{Spec2('Compat')}}</td> + <td>Définition initiale dans un standard.</td> + </tr> + <tr> + <td><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3" hreflang="en" lang="en">Safari CSS Reference<br> + <small lang="en-US">'media query extensions' in that document.</small></a></td> + <td>Documentation non-officielle, non-standard.</td> + <td>Documentation initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("css.at-rules.media.-webkit-device-pixel-ratio")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{cssxref("@media/resolution","resolution")}}</li> + <li>{{cssxref("-webkit-transition")}}</li> + <li>{{cssxref("-webkit-transform-3d")}}</li> + <li>{{cssxref("-webkit-transform-2d")}}</li> + <li>{{cssxref("-webkit-animation")}}</li> + <li><a href="https://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/">Article du W3C pour éviter le préfixe</a></li> +</ul> 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 +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<p><strong><code>-webkit-transform-2d</code></strong> est une <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média">caractéristique média</a> 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.</p> + +<div class="note"> +<p><strong>Note :</strong> 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.</p> +</div> + +<h2 id="Spécifications">Spécifications</h2> + +<p>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 <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3">référence CSS Apple pour Safari (en anglais)</a> .</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("css.at-rules.media.-webkit-transform-2d")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{cssxref("-webkit-transition")}}</li> + <li>{{cssxref("-webkit-transform-3d")}}</li> + <li>{{cssxref("-webkit-animation")}}</li> + <li><a href="http://www.quirksmode.org/css/tests/mediaqueries/animation.html">Page de test sur quirksmode.org</a></li> +</ul> 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 +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<p><strong><code>-webkit-transform-3d</code></strong> est une <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média">caractéristique média</a> 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.</p> + +<div class="note"> +<p><strong>Note :</strong> Cette caractéristique est uniquement prise en charge par WebKit et Blink. Une méthode alternative standard consiste à utiliser {{cssxref("@supports")}} à la place.</p> +</div> + +<h2 id="Exmple">Exmple</h2> + +<pre class="brush: css">@media (-webkit-transform-3d) { + .toto { + transform-style: preserve-3d; + } +} + +@media (-webkit-transform-3d: 1) { + .toto { + transform-style: preserve-3d; + } +}</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Compat', '#css-media-queries-webkit-transform-3d', '-webkit-transform-3d')}}</td> + <td>{{Spec2('Compat')}}</td> + <td>Définition initiale dans un standard.</td> + </tr> + <tr> + <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3" hreflang="en" lang="en">Safari CSS Reference<br> + <small lang="en-US">'media query extensions' in that document.</small></a></td> + <td>Documentation non-officielle, non-standard.</td> + <td>Documentation initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("css.at-rules.media.-webkit-transform-3d")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{cssxref("@media/-webkit-transform-2d", "-webkit-transform-2d")}}</li> + <li>{{cssxref("@media/-webkit-transition", "-webkit-transition")}}</li> + <li>{{cssxref("@media/-webkit-animation", "-webkit-animation")}}</li> + <li><a href="http://www.quirksmode.org/css/tests/mediaqueries/animation.html">Page de test sur quirksmode.org</a></li> +</ul> 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 +--- +<div>{{CSSRef}}{{Non-standard_header}}{{obsolete_header}}</div> + +<p><strong><code>-webkit-transition</code></strong> est une <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média">caractéristique média</a> booléenne non-standard qui permet d'indiquer si les transitions CSS ({{cssxref("transition")}}) sont prises en charge dans leurs versions préfixées.</p> + +<div class="note"> +<p><strong>Note :</strong> Cette caractéristique est uniquement prise en charge par les navigateurs basés sur WebKit. L'alternative standard correspondante consiste à utiliser {{cssxref("@supports")}}.</p> +</div> + +<h2 id="Privilégier_supports">Privilégier <code>@supports</code></h2> + +<p>S'il vous faut déterminer si les transitions CSS sont prises en charges, évitez d'utiliser <code>-webkit-transition</code>. En lieu et place, on utilisera la règle @ {{cssxref("@supports")}} :</p> + +<pre class="brush: css">@supports(transition: initial) { + /* Les règles CSS à utiliser si */ + /* les transitions sont prises en */ + /* charge. */ +}</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<p>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 <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3">référence CSS Apple pour Safari (en anglais)</a>.</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("css.at-rules.media.-webkit-transition")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries">Utiliser les media queries</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS">Utiliser les transitions CSS</a></li> + <li>{{cssxref("@supports")}}</li> + <li>{{cssxref("transition")}}</li> + <li>{{cssxref("-webkit-transform-3d")}}</li> + <li>{{cssxref("-webkit-transform-2d")}}</li> + <li>{{cssxref("-webkit-animation")}}</li> + <li><a href="http://www.quirksmode.org/css/tests/mediaqueries/animation.html">Page de test sur quirksmode.org</a></li> +</ul> 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 +--- +<div>{{CSSRef}}</div> + +<p><strong><code>any-hover</code></strong> 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.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<p>La caractéristique <code>any-hover</code> est définie avec un mot-clé parmi ceux de la liste ci-après.</p> + +<dl> + <dt><code>none</code></dt> + <dd>Parmi les mécanismes de saisi, aucun ne permet de survoler les éléments (ou il n'existe aucun dispositif de pointage).</dd> + <dt><code>hover</code></dt> + <dd>Un ou plusieurs mécanismes de saisie permettent de survoler le contenu simplement.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><a href="#">Essayez de me survoler !</a></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">@media (any-hover: hover) { + a:hover { + background: yellow; + } +}</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples")}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Media Queries', '#descdef-media-any-hover', 'any-hover')}}</td> + <td>{{Spec2('CSS4 Media Queries')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("css.at-rules.media.any-hover")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/CSS/@media/hover">La caractéristique média <code>hover</code></a></li> +</ul> 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 +--- +<div>{{CSSRef}}</div> + +<p><strong><code>any-pointer</code></strong> 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.</p> + +<div class="note"> +<p><strong>Note :</strong> Si on souhaite tester la précision du mécanisme de pointage <em>principal</em>, on pourra utiliser la caractéristique <code><a href="/fr/docs/Web/CSS/@media/pointer">pointer</a></code> à la place.</p> +</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<p>La caractéristique <code>any-pointer</code> est définie comme un mot-clé parmi ceux de la liste ci-après.</p> + +<dl> + <dt><code>none</code></dt> + <dd>L'appareil ne dispose d'aucun dispositif de pointage.</dd> + <dt><code>coarse</code></dt> + <dd>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.</dd> + <dt><code>fine</code></dt> + <dd>Il existe au moins un mécanisme d'entrée qui est un dispositif de pointage et pour lequel la précision est fine.</dd> +</dl> + +<div class="note"> +<p><strong>Note :</strong> Plusieurs valeurs peuvent correspondre si l'appareil dispose de dispositifs de pointage différents. Toutefois, la valeur <code>none</code> ne sera utilisée que lorsqu'aucun dispositif de pointage ne sera détecté.</p> +</div> + +<h2 id="Exemples">Exemples</h2> + +<p>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.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><input id="test" type="checkbox" /> +<label for="test">Coucou !</label></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: 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; + } +}</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples")}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Media Queries', '#descdef-media-any-pointer', 'any-pointer')}}</td> + <td>{{Spec2('CSS4 Media Queries')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("css.at-rules.media.any-pointer")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/CSS/@media/pointer">La caractéristique média <code>pointer</code></a></li> +</ul> 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 +--- +<div>{{CSSRef}}</div> + +<p><strong><code>aspect-ratio</code></strong> 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 (<em>viewport</em>).</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<p>La caractéristique <code>aspect-ratio</code> 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 <strong><code>min-aspect-ratio</code></strong> et <code><strong>max-aspect-ratio</strong></code> afin de cibler des règles CSS en fonction d'une valeur minimale ou maximale.</p> + +<h2 id="Exemples">Exemples</h2> + +<div class="note"> +<p><strong>Note :</strong> L'exemple suivant est contenu dans un élément {{HTMLElement("iframe")}} et crée donc sa propre zone d'affichage (<em>viewport</em>), vous pouvez redimensionner l'<code>iframe</code> afin d'observer l'effet d'<code>aspect-ratio</code>.</p> +</div> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: 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> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">iframe{ + display:block; +}</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">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 +}</pre> + +<h3 id="Résultat">Résultat</h3> + +<div style="overflow: auto;"> +<p>{{EmbedLiveSample('Exemples')}}</p> +</div> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Media Queries', '#aspect-ratio', 'aspect-ratio')}}</td> + <td>{{Spec2('CSS4 Media Queries')}}</td> + <td>Aucune modification.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Media Queries', '#aspect-ratio', 'aspect-ratio')}}</td> + <td>{{Spec2('CSS3 Media Queries')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("css.at-rules.media.aspect-ratio")}}</p> 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 +--- +<div>{{CSSRef}}{{obsolete_header("6.0")}} {{deprecated_header}}</div> + +<p>Un <a href="/fr/docs/Web/CSS/@media#Groupes_de_médias">groupe de médias</a> défini par les standards <a href="/fr/docs/Web/CSS">CSS</a>.</p> + +<div class="note"> +<p><strong>Note :</strong> 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 <a href="/fr/docs/Web/CSS/@media#speech">speech</a> qui le remplace.</p> +</div> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="https://www.w3.org/TR/CSS2/aural.html#q19.0">CSS Level 2</a></td> + <td>Dépréciation</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/CSS/@media">@media</a></li> +</ul> 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 +--- +<div>{{CSSRef}}</div> + +<p><strong><code>color-gamut</code></strong> 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.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<p>La caractéristique <code>color-gamut</code> est définie avec un mot-clé parmi ceux de la liste ci-après.</p> + +<dl> + <dt><code>srgb</code></dt> + <dd>L'appareil d'affichage prend approximativement en charge l'espace de couleurs <a href="https://en.wikipedia.org/wiki/SRGB">sRGB</a> ou un espace plus grand. Cela correspond à la majorité des appareils d'affichage.</dd> + <dt><code>p3</code></dt> + <dd>L'appareil d'affichage prend approximativement en charge l'espace de couleurs spécifié par <a href="https://en.wikipedia.org/wiki/DCI-P3">l'espace de couleur DCI P3</a> ou un espace plus grand; L'espace p3 est plus grand (et inclut) l'espace srgb.</dd> + <dt><code>rec2020</code></dt> + <dd>L'appareil d'affichage prend approximativement l'espace de couleurs spécifié par <a href="https://en.wikipedia.org/wiki/Rec._2020">l'espace de couleurs ITU-R Recommendation BT.2020</a> ou un espace plus grand. L'espace rec2020 est plus grand (et inclut) l'espace p3.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>Un test simple.</p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">@media (color-gamut: srgb) { + p { + background: #f4ae8a; + } +}</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples")}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Media Queries', '#color-gamut', 'color-gamut')}}</td> + <td>{{Spec2('CSS4 Media Queries')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("css.at-rules.media.color-gamut")}}</p> 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 +--- +<div>{{CSSRef}}</div> + +<p><strong><code>color-index</code></strong> 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.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<p>La caractéristique <code>color-index</code> 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 <strong><code>min-color-index</code></strong> et <code><strong>max-color-index</strong></code> afin cibler des règles en fonction d'un minimum ou d'un maximum.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Exemple_simple">Exemple simple</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p>Un test simple.</p> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">p { + color: black; +} + +@media (color-index) { + p { + color: red; + } +} + +@media (min-color-index: 15000) { + p { + color: #1475ef; + } +}</pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample("Exemple_simple")}}</p> + +<h3 id="Feuille_de_style_personnalisée">Feuille de style personnalisée</h3> + +<p>Ce fragment HTML permet d'appliquer une feuille de style spécifique pour les appareils qui disposent d'au moins 256 couleurs.</p> + +<pre class="brush: html"><code><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" /></code></pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Etat</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Media Queries', '#color-index', 'color-index')}}</td> + <td>{{Spec2('CSS4 Media Queries')}}</td> + <td>La valeur peut désormais être négative (ce qui correspond à un booléen faux).</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Media Queries', '#color-index', 'color-index')}}</td> + <td>{{Spec2('CSS3 Media Queries')}}</td> + <td>Définition initiale, la valeur ne peut pas être négative.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("css.at-rules.media.color-index")}}</p> 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 +--- +<div>{{CSSRef}}</div> + +<p><strong><code>color</code></strong> 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.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<p>La caractéristique <code>color</code> 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 <strong><code>min-color</code></strong> et <code><strong>max-color</strong></code> afin de cibler des règles en fonction d'un minimum ou d'un maximum.</p> + +<div class="note"> +<p><strong>Note :</strong> 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é.</p> +</div> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: 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> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: 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; + } +}</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples")}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Media Queries', '#color', 'color')}}</td> + <td>{{Spec2('CSS3 Media Queries')}}</td> + <td>Définition initiale, la valeur ne peut pas être négative.</td> + </tr> + <tr> + <td>{{SpecName('CSS4 Media Queries', '#color', 'color')}}</td> + <td>{{Spec2('CSS4 Media Queries')}}</td> + <td>La valeur peut désormais être négative (ce qui correspond alors à un booléen faux).</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("css.at-rules.media.color")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs HTML à CSS</a></li> + <li>La propriété CSS {{cssxref("color")}}</li> + <li>Le type de donnée CSS {{cssxref("<color>")}}</li> +</ul> 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 +--- +<div>{{CSSRef}}{{deprecated_header}}</div> + +<p><strong><code>device-aspect-ratio</code></strong> 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.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<p>La caractéristique <code>device-aspect-ratio</code> 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 <strong><code>min-device-aspect-ratio</code></strong> et <code><strong>max-device-aspect-ratio</strong></code> afin de cibler des règles en fonction de minimum ou maximum.</p> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: css">article { + padding: 1rem; +} + +@media screen and (min-device-aspect-ratio: 16/9) { + article { + padding: 1rem 5vw; + } +}</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Media Queries', '#device-aspect-ratio', 'device-aspect-ratio')}}</td> + <td>{{Spec2('CSS4 Media Queries')}}</td> + <td>Dépréciation dans la spécification de niveau 4 pour les requêtes média.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Media Queries', '#device-aspect-ratio', 'device-aspect-ratio')}}</td> + <td>{{Spec2('CSS3 Media Queries')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("css.at-rules.media.device-aspect-ratio")}}</p> 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 +--- +<div>{{CSSRef}}{{deprecated_header}}</div> + +<p><strong><code>device-height</code></strong> 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.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<p>La caractéristique <code>device-height</code> 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 <strong><code>min-device-height</code></strong> et <code><strong>max-device-height</strong></code> afin d'utiliser des critères de minimum et maximum.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Ce fragment HTML applique une feuille de style spécifique pour les appareils dont la hauteur est inférieure à 800 pixels.</p> + +<pre class="brush: html"><link rel="stylesheet" media="screen and (max-device-height: 799px)" href="http://toto.truc.com/short-styles.css" /></pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Media Queries', '#device-height', 'device-height')}}</td> + <td>{{Spec2('CSS4 Media Queries')}}</td> + <td>Dépréciation dans la spécification de niveau 4 pour les requêtes média.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Media Queries', '#device-height', 'device-height')}}</td> + <td>{{Spec2('CSS3 Media Queries')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("css.at-rules.media.device-height")}}</p> 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 +--- +<div>{{CSSRef}}{{deprecated_header}}</div> + +<p><strong><code>device-width</code></strong> 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.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<p><code>device-width</code> est définie comme une longueur (type {{cssxref("<length>")}}). C'est une caractéristique d'intervalle et les variantes préfixées <strong><code>min-device-width</code></strong> et <code><strong>max-device-width</strong></code> peuvent être utilisées pour manipuler un minimum ou un maximum.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Ce code HTML applique une feuille de style pour pour les appareils plus étroits que 800 pixels.</p> + +<pre class="brush: html"><link rel="stylesheet" media="screen and (max-device-width: 799px)" href="http://toto.truc.com/narrow-styles.css" /></pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Media Queries', '#device-width', 'device-width')}}</td> + <td>{{Spec2('CSS4 Media Queries')}}</td> + <td>Dépréciation dans la spécification de niveau 4 pour les requêtes média.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Media Queries', '#device-width', 'device-width')}}</td> + <td>{{Spec2('CSS3 Media Queries')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("css.at-rules.media.device-width")}}</p> 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 +--- +<div>{{CSSRef}}</div> + +<p><strong><code>display-mode</code></strong> 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.</p> + +<p>Cette caractéristique correspond à la propriété <a href="/fr/docs/Web/Manifest#display"><code>display</code> </a>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).</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<p>La caractéristique <code>display-mode</code> est définie avec un mot-clé parmi ceux du tableau ci-après.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Valeur (mode d'affichage)</th> + <th scope="col">Description</th> + <th scope="col">Mode d'affichage utilisé en recours</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>fullscreen</code></td> + <td>Toute la zone d'affichage est utilisée et aucun autre élément d'interface utilisateur (<em>chrome</em>) n'est affiché.</td> + <td><code>standalone</code></td> + </tr> + <tr> + <td><code>standalone</code></td> + <td>L'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.</td> + <td><code>minimal-ui</code></td> + </tr> + <tr> + <td><code>minimal-ui</code></td> + <td>L'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.</td> + <td><code>browser</code></td> + </tr> + <tr> + <td><code>browser</code></td> + <td>L'application ouvre un nouvel onglet dans le navigateur ou une nouvelle fenêtre selon le navigateur et la plateforme utilisés.</td> + <td>Aucun</td> + </tr> + </tbody> +</table> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: css">@media all and (display-mode: fullscreen) { + body { + margin: 0; + border: 5px solid black; + } +}</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Manifest', '#the-display-mode-media-feature', 'display-mode')}}</td> + <td>{{Spec2('Manifest')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("css.at-rules.media.display-mode")}}</p> 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 +--- +<div>{{CSSRef}}{{SeeCompatTable}}{{draft}}</div> + +<p>La <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Caractéristiques_média_(media_features)">caractéristique média</a> <strong><code>forced-colors</code></strong> est utilisée afin de détecter si l'utilisateur a choisi une palette de couleur restreinte via le navigateur ou l'agent utilisateur.</p> + +<div class="blockIndicator note"> +<p><strong>Note :</strong> Cette fonctionnalité n'est pas encore implémentée par aucun agent utilisateur</p> +</div> + +<h2 id="Valeurs">Valeurs</h2> + +<dl> + <dt><code><dfn>none</dfn></code></dt> + <dd>La palette de couleur n'est pas restreinte.</dd> + <dt><code>active</code></dt> + <dd>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 <code>prefers-color-scheme</code> sera également mise à jour afin que les auteurs puissent adapter la page.</dd> +</dl> + +<h2 id="Préférences_utilisateur">Préférences utilisateur</h2> + +<p>À 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.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>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.</p> + +<h3 id="HTML">HTML</h3> + +<pre><div class="colors">quelques couleurs étranges</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre>.colors { + background-color: red; + color: grey; +} + +@media (forced-colors: active) { + .colors { + background-color: white; + color: black; + } +} +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples")}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS5 Media Queries', '#forced-colors', 'forced-colors')}}</td> + <td>{{Spec2('CSS5 Media Queries')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Array.sort")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<p>{QuickLinksWithSubpages("/fr/docs/Web/CSS/@media/")}}</p> 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 +--- +<div>{{CSSRef}}</div> + +<p><strong><code>grid</code></strong> 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 »).</p> + +<p>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.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<p>La caractéristique <code>grid</code> est une valeur booléenne (<code>0</code> ou <code>1</code>) (type {{cssxref("<mq-boolean>")}}) qui indique si l'appareil d'affichage fonctionne selon une grille.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: 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></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: 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; + } +}</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples")}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Media Queries', '#grid', 'grid')}}</td> + <td>{{Spec2('CSS3 Media Queries')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("css.at-rules.media.grid")}}</p> 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 +--- +<div>{{CSSRef}}</div> + +<p><strong><code>height</code></strong> est une caractéristique média CSS (cf. {{cssxref("@media")}}) dont la valeur représente la hauteur de la zone d'affichage (<em>viewport</em>) (ou de la boîte de page pour les média paginés).</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<p>La caractéristique <code>height</code> 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 <strong><code>min-height</code></strong> et <strong><code>max-height</code></strong> afin de cibler des règles selon un minimum ou un maximum.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div> + Surveillez cet élément lors du + redimensionnement de la zone d'affichage. +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: 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; + } +} +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample('Exemples','90%')}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Media Queries', '#height', 'height')}}</td> + <td>{{Spec2('CSS4 Media Queries')}}</td> + <td>La valeur peut désormais être négative (ce qui correspond à un booléen faux).</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Media Queries', '#height', 'height')}}</td> + <td>{{Spec2('CSS3 Media Queries')}}</td> + <td>Définition initiale. La valeur ne doit pas être négative.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("css.at-rules.media.height")}}</p> 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 +--- +<div>{{CSSRef}}</div> + +<p><code><strong>hover</strong></code> 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.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<p>La caractéristique <code>hover</code> est définie avec un mot-clé parmi ceux de la liste suivant :</p> + +<dl> + <dt><code>none</code></dt> + <dd>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.</dd> + <dt><code>hover</code></dt> + <dd>Le mécanisme de saisie principal permet de survoler les éléments simplement.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><a href="#">Essayez de me survoler !</a></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">@media (hover: hover) { + a:hover { + background: yellow; + } +}</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples")}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Media Queries', '#hover', 'hover')}}</td> + <td>{{Spec2('CSS4 Media Queries')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("css.at-rules.media.hover")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/CSS/@media/any-hover">La caractéristique média <code>any-hover</code></a></li> +</ul> 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 +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/fr/docs/Web/CSS/R%C3%A8gles_@">règle @</a> <strong><code>@media</code></strong> permet d'associer un ensemble d'instructions imbriquées (délimité par des accolades) avec une condition définie par une <a href="/fr/docs/Web/CSS/Media_queries">requête média</a>. La règle <code>@media</code> peut être utilisé au niveau le plus haut de la feuille de style et également <a href="/fr/docs/Web/CSS/Règles_@#Les_règles_de_groupe_conditionnelles">à l'intérieur d'un groupe de règles conditionnel</a>.</p> + +<pre class="brush: css no-line-numbers">@media (max-width: 600px) { + .sidebar { + display: none; + } +}</pre> + +<p>Il est possible de manipuler la règle @ <code>@media</code> via le CSSOM (et JavaScript) notamment grâce à l'interface {{domxref("CSSMediaRule")}}.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<p>Une requête média (type <code><media-query></code>) 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 <a href="/fr/docs/Web/CSS/Règles_@#Les_règles_de_groupe_conditionnelles">règle conditionnelle</a>.</p> + +<pre class="brush: css no-line-numbers">/* 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; + } + } +} +</pre> + +<p>Pour plus d'informations sur la syntaxe des requêtes média, voir <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries">Utiliser les requêtes média</a>.</p> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Les_caractéristiques_média">Les caractéristiques média</h2> + +<p>{{page("/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries","Caractéristiques_média_(media_features)")}}</p> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: css">@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 } +} +</pre> + +<p>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 :</p> + +<pre class="brush: css">@media (height > 600px) { + body { line-height: 1.4; } +} + +@media (400px <= width <= 700px) { + body { line-height: 1.4; } +} +</pre> + +<p>Pour plus d'exemples, voir <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries">Utiliser les requêtes média</a>.</p> + +<h2 id="Accessibilité">Accessibilité</h2> + +<p>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é <code><a href="/fr/docs/Web/CSS/length#em">em</a></code> comme valeur pour <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries">les requêtes média</a> lorsqu'il faut utiliser une longueur ({{cssxref("<length>")}}).</p> + +<p>Les unités <code><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Values_and_units#Longueur_et_taille">em</a></code> et <code><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Values_and_units#Longueur_et_taille">px</a></code> sont toutes les deux valides mais <code><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Values_and_units#Longueur_et_taille">em</a></code> s'adapte mieux quand la taille de la police du navigateur a été ajustée.</p> + +<p>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 <a href="/fr/docs/Web/CSS/@media/prefers-reduced-motion"><code>prefers-reduced-motion</code> afin de détecter si l'utilisateur souhaite minimiser les animations ou les déplacements</a>.</p> + +<h2 id="Sécurité">Sécurité</h2> + +<p>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.</p> + +<p>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.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Commentaires</th> + <th scope="col">Retours</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS5 Media Queries', '#at-media5', '@media')}}</td> + <td>Réintègre <code>light-level</code>, <code>inverted-colors</code> et les requêtes média personnalisées qui avaient été retirées la spécification de niveau 4.<br> + Ajout des caractéristiques média <code>prefers-reduced-motion</code>, <code>prefers-reduced-transparency</code>, <code>prefers-contrast</code> et <code>prefers-color-scheme</code>.</td> + <td><a href="https://github.com/w3c/csswg-drafts/issues"><em>Issues</em> GitHub pour les brouillons du groupe de travail CSS (en anglais)</a></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Conditional', '#at-media', '@media')}}</td> + <td>Définition de la syntaxe de base pour la règle <code>@media</code>.</td> + <td><a href="https://github.com/w3c/csswg-drafts/issues"><em>Issues</em> GitHub pour les brouillons du groupe de travail CSS (en anglais)</a></td> + </tr> + <tr> + <td>{{SpecName('CSS4 Media Queries', '#media', '@media')}}</td> + <td> + <p>Ajout des caractéristiques média <code>scripting</code>, <code>pointer</code>, <code>hover</code>, <code>update</code>, <code>overflow-block</code> et <code>overflow-inline</code>.<br> + Dépréciation de l'ensemble des types de média à l'exception de <code>screen</code>, <code>print</code>, <code>speech</code> et <code>all</code>.<br> + La syntaxe est rendue plus flexible avec l'ajout (entre autres) du mot-clé <code>or</code>.</p> + </td> + <td><a href="https://github.com/w3c/csswg-drafts/issues"><em>Issues</em> GitHub pour les brouillons du groupe de travail CSS (en anglais)</a></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Media Queries', '#media0', '@media')}}</td> + <td></td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}}</td> + <td>Définition initiale.</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("css.at-rules.media")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/CSS/Media_queries">Les requêtes média</a></li> + <li>L'interface CSSOM {{domxref("CSSMediaRule")}} qui est associée avec cette règle @.</li> +</ul> 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 +--- +<p>{{CSSRef}}</p> + +<p>{{Index("/fr/docs/Web/CSS/@media")}}</p> 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 +--- +<div>{{CSSRef}}</div> + +<p><strong><code>inverted-colors</code></strong> 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.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<p>Cette caractéristique est définie avec un des mots-clés parmi ceux qui suivent :</p> + +<dl> + <dt><code>none</code></dt> + <dd>Les couleurs sont affichées normalement.</dd> + <dt><code>inverted</code></dt> + <dd>Les couleurs des pixels de la zone affichée ont été inversées.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: 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></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">p { + color: gray; +} + +@media (inverted-colors: inverted) { + p { + background: black; + color: yellow; + } +} + +@media (inverted-colors: none) { + p { + background: #eee; + color: red; + } +}</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples")}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS5 Media Queries', '#inverted', 'inverted-colors')}}</td> + <td>{{Spec2('CSS5 Media Queries')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS4 Media Queries', '#inverted', 'inverted-colors')}}</td> + <td>{{Spec2('CSS4 Media Queries')}}</td> + <td>Repoussée à la spécification de niveau 5 pour les requêtes média.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("css.at-rules.media.inverted-colors")}}</p> 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 +--- +<div>{{CSSRef}}</div> + +<p><strong><code>monochrome</code></strong> 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.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<p>La caractéristique <code>monochrome</code> 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 <strong><code>min-monochrome</code></strong> et <strong><code>max-monochrome</code></strong> afin de cibler les règles en fonction d'un minimum ou d'un maximum.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: 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></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: 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; + } +}</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples")}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Media Queries', '#monochrome', 'monochrome')}}</td> + <td>{{Spec2('CSS4 Media Queries')}}</td> + <td>La valeur peut désormais être négative, auquel cas cela correspond à un booléen faux.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Media Queries', '#monochrome', 'monochrome')}}</td> + <td>{{Spec2('CSS3 Media Queries')}}</td> + <td>Définition initiale. La valeur ne doit pas être négative.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("css.at-rules.media.monochrome")}}</p> 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 +--- +<div>{{CSSRef}}</div> + +<p><strong><code>orientation</code></strong> 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 (<em>viewport</em>) (ou la boîte de la page pour les média paginés).</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<p>La caractéristique <code>orientation</code> se définit grâce à l'un des mots-clés suivants :</p> + +<dl> + <dt><code>portrait</code></dt> + <dd>La zone d'affichage est en mode portrait (la hauteur est la plus grande dimension).</dd> + <dt><code>landscape</code></dt> + <dd>La zone d'affichage est en mode paysage (la largeur est la plus grande dimension).</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div>Boîte 1</div> +<div>Boîte 2</div> +<div>Boîte 3</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">body { + display: flex; +} + +div { + background: yellow; +} + +@media (orientation: landscape) { + body { + flex-direction: row; + } +} + +@media (orientation: portrait) { + body { + flex-direction: column; + } +}</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples")}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Media Queries', '#orientation', 'orientation')}}</td> + <td>{{Spec2('CSS4 Media Queries')}}</td> + <td>Aucune modification.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Media Queries', '#orientation', 'orientation')}}</td> + <td>{{Spec2('CSS3 Media Queries')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("css.at-rules.media.orientation")}}</p> 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 +--- +<div>{{CSSRef}}</div> + +<p><strong><code>overflow-block</code></strong> 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 (<em>viewport</em>) dans l'axe logique de bloc (c'est-à-dire le sens perpendiculaire au sens de lecture).</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<p>La caractéristique <code>overflow-block</code> est définie avec un mot-clé de la liste suivante :</p> + +<dl> + <dt><code>none</code></dt> + <dd>Le contenu qui dépasse n'est pas affiché.</dd> + <dt><code>scroll</code></dt> + <dd>Une barre de défilement est ajoutée afin de pouvoir visualiser le contenu qui dépasse de la zone d'affichage.</dd> + <dt><code>optional-paged</code></dt> + <dd>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).</dd> + <dt><code>paged</code></dt> + <dd>Le contenu qui dépasse est entraîné sur la page suivante (ex. livres électroniques, impression).</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: 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> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">@media (overflow-block: scroll) { + p { + color: red; + } +}</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples")}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Media Queries', '#mf-overflow-block', 'overflow-block')}}</td> + <td>{{Spec2('CSS4 Media Queries')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("css.at-rules.media.overflow-block")}}</p> 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 +--- +<div>{{CSSRef}}</div> + +<p><strong><code>overflow-inline</code></strong> 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 (<em>viewport</em>) dans l'axe logique en ligne (c'est-à-dire le sens correspondant au sens de lecture).</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<p>La caractéristique <code>overflow-inline</code> est définit avec un mot-clé parmi ceux de la liste suivante :</p> + +<dl> + <dt><code>none</code></dt> + <dd>Le contenu qui dépasse n'est pas affiché.</dd> + <dt><code>scroll</code></dt> + <dd>Le contenu qui dépasse peut être visualisé en utilisant une barre de défilement.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: 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> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">@media (overflow-inline: scroll) { + p { + color: red; + } +}</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples")}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Media Queries', '#mf-overflow-inline', 'overflow-inline')}}</td> + <td>{{Spec2('CSS4 Media Queries')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("css.at-rules.media.overflow-inline")}}</p> 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 +--- +<div>{{CSSRef}}</div> + +<p><strong><code>pointer</code></strong> 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.</p> + +<div class="note"> +<p><strong>Note :</strong> Si on souhaite tester la précision de n'importe quel dispositif de pointage, on utilisera plutôt la caractéristique <code><a href="/fr/docs/Web/CSS/@media/any-pointer">any-pointer</a></code>.</p> +</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<p>Cette caractéristique est définie avec un mot-clé parmi les suivants :</p> + +<dl> + <dt><code>none</code></dt> + <dd>Le mécanisme de saisie principal n'inclut pas de dispositif de pointage.</dd> + <dt><code>coarse</code></dt> + <dd>Le mécanisme de saisie principal inclut un dispositif de pointage dont la précision est limitée.</dd> + <dt><code>fine</code></dt> + <dd>Le mécanisme de saisie principal inclut un dispositif de pointage précis.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<p>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.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><input id="test" type="checkbox" /> +<label for="test">Coucou !</label></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: 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; + } +}</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples")}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Media Queries', '#pointer', 'pointer')}}</td> + <td>{{Spec2('CSS4 Media Queries')}}</td> + <td>Ajout dans la spécification de niveau 4 pour les requêtes média.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("css.at-rules.media.pointer")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/CSS/@media/any-pointer">La caractéristique média <code>any-pointer</code></a></li> +</ul> 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 +--- +<div>{{CSSRef}}</div> + +<div class="blockIndicator note"> +<p>Si vous avez modifié <code>privacy.resistFingerprinting</code> à <strong>vrai</strong>, le paramètre {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} sera redéfini à <code>light</code>.<br> + Sinon, vous pouvez créer le paramètre numérique <code>ui.systemUsesDarkTheme</code> pour redéfinier le comportement par défaut et retourner <code>light</code> (valeur : 0), <code>dark</code> (valeur : 1), or <code>no-preference</code> (valeur : 2). (Firefox retournera<code>light</code> si une autre valeur est utilisée.)</p> +</div> + +<p>La caractéristique média <strong><code>prefers-color-scheme</code></strong> permet de détecter les préférences exprimées par l'utilisateur quant au thème à utiliser (sombre ou clair).</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<dl> + <dt><code><dfn>light</dfn></code></dt> + <dd>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.</dd> + <dt><code>dark</code></dt> + <dd>Cette valeur indique que l'utilisateur a exprimé le choix d'utiliser une interface avec une dominante sombre.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">.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; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><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> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples")}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-color-scheme', 'prefers-color-scheme')}}</td> + <td>{{Spec2('CSS5 Media Queries')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("css.at-rules.media.prefers-color-scheme")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="https://www.youtube.com/watch?v=jmepqJ5UbuM">Tutoriel vidéo (en anglais) : « Coding a Dark Mode for your Website », Coder un thème sombre pour votre site web</a></li> + <li><a href="https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode">Revoir la conception d'un produit ou d'un site pour le mode sombre </a></li> + <li>Modifier le thème du system sur <a href="https://blogs.windows.com/windowsexperience/2019/04/01/windows-10-tip-dark-theme-in-file-explorer/">Windows</a>, <a href="https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/dark-mode/">macOS</a> et <a href="https://www.phonandroid.com/android-10-comment-activer-le-theme-fonce.html">Android</a>.</li> +</ul> + +<div>{{QuickLinksWithSubpages("/fr/docs/Web/CSS/@media/")}}</div> 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 +--- +<div>{{CSSRef}}{{SeeCompatTable}}{{draft}}</div> + +<p>La <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Caractéristiques_média_(media_features)">caractéristique média</a> <strong><code>prefers-contrast</code></strong> permet de détecter si l'utilisateur a configuré son système pour utiliser un contraste élevé.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<dl> + <dt><code><dfn>no-preference</dfn></code></dt> + <dd>Cette valeur indique que l'utilisateur n'a exprimé aucune préférence particulière. La valeur de ce mot-clé est évaluée à <code>false</code> dans un contexte booléen.</dd> + <dt><code>high</code></dt> + <dd>Cette valeur indique que l'utilisateur a configuré son système pour avoir un contraste plus élevé.</dd> + <dt><code><dfn>low</dfn></code></dt> + <dd>Cette valeur indique que l'utilisateur a configuré son système afin d'avoir un niveau de contraste plus faible.</dd> +</dl> + +<h2 id="Préférences_utilisateur">Préférences utilisateur</h2> + +<p>À 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.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Par défaut, cet exemple présente un contraste trop faible pour la lisibilité.</p> + +<h3 id="HTML">HTML</h3> + +<pre><div class="contrast">Une boîte avec un contraste faible.</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre>.contrast { + color: grey; +} + +@media (prefers-contrast: high) { + .contrast { + color: black; + } +} +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples")}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-contrast', 'prefers-contrast')}}</td> + <td>{{Spec2('CSS5 Media Queries')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("css.at-rules.media.prefers-contrast")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>La caractéristique média spécifique à Microsoft <code><a href="https://msdn.microsoft.com/library/Hh771830">-ms-high-contrast</a></code></li> +</ul> + +<p>{{QuickLinksWithSubpages("/fr/docs/Web/CSS/@media/")}}</p> 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 +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média">caractéristique média</a> <strong><code>prefers-reduced-motion</code></strong> détecte si l'utilisateur a demandé au système de minimiser la quantité d'animation ou de mouvement.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<dl> + <dt><code><dfn>no-preference</dfn></code></dt> + <dd>Cette valeur indique que l'utilisateur n'a rien indiqué au système.</dd> + <dt><code><dfn>reduce</dfn></code></dt> + <dd>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é.</dd> +</dl> + +<h2 id="Gestion_des_préférences">Gestion des préférences</h2> + +<p>Dans Firefox, la valeur <code>reduce</code> est utilisée par le moteur selon des conditions provenant du système d'exploitation/environnement de bureau :</p> + +<ul> + <li>Pour GTK/Gnome, si <code>gtk-enable-animation</code> vaut <code>false</code>. Cela peut être configuré par le menu « Ajustements » de Gnome.</li> + <li>Pour Windows 10 : Paramètres > Options d'ergonomie > Vision > Afficher > Afficher les animations dans windows</li> + <li>Pour macOS (NDT : libellés à vérifier) : Préférences système > Accessibilité > Affichage > Réduction de mouvement.</li> +</ul> + +<h2 id="Exemples">Exemples</h2> + +<p>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é.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="animation">boîte animée</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.animation { + animation: vibrate 0.3s linear infinite both; +} + +@media (prefers-reduced-motion: reduce) { + .animation { + animation: none; + } +} +</pre> + +<div class="hidden"> +<pre class="brush: css">.animation { + background-color: rebeccapurple; + color: #fff; + font: 1.2em Helvetica, arial, sans-serif; + width: 200px; + padding: 1em; + border-radius: 1em; + text-align: center; +} + +/* ---------------------------------------------- + * Generated by Animista on 2018-9-2 13:47:0 + * w: http://animista.net, t: @cssanimista + * ---------------------------------------------- */ + +/** + * ---------------------------------------- + * animation vibrate-1 + * ---------------------------------------- + */ + +@keyframes vibrate { + 0% { + transform: translate(0); + } + 20% { + transform: translate(-2px, 2px); + } + 40% { + transform: translate(-2px, -2px); + } + 60% { + transform: translate(2px, 2px); + } + 80% { + transform: translate(2px, -2px); + } + 100% { + transform: translate(0); + } +} +</pre> +</div> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples")}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-reduced-motion', 'prefers-reduced-motion')}}</td> + <td>{{Spec2('CSS5 Media Queries')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("css.at-rules.media.prefers-reduced-motion")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="https://css-tricks.com/introduction-reduced-motion-media-query/">Une introduction aux requêtes média pour la réduction de mouvement</a></li> +</ul> 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 +--- +<p>{{CSSRef}}{{SeeCompatTable}}{{draft}}</p> + +<p>La <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Caractéristiques_média_(media_features)">caractéristique média</a> <strong><code>prefers-reduced-transparency</code></strong> 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.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<dl> + <dt><code><dfn>no-preference</dfn></code></dt> + <dd>Cette valeur indique que l'utilisateur n'a exprimé aucune préférence quant à l'utilisation des effets de transparence. Ce mot-clé correspond à <code>false</code> lorsqu'il est utilisé dans un contexte booléen.</dd> + <dt><code><dfn>reduce</dfn></code></dt> + <dd>Cette valeur indique que l'utilisateur a configuré le système afin de minimiser la quantité d'effets de transparence.</dd> +</dl> + +<h2 id="Préférences_utilisateur">Préférences utilisateur</h2> + +<p>À 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.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Par défaut, cet exemple utilise un effet de transparence qui diminue la lisibilité du contenu.</p> + +<h3 id="HTML">HTML</h3> + +<pre><div class="transparency">Boîte transparente</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre>.transparency { + opacity: 0.5; +} + +@media (prefers-reduced-transparency: reduce) { + .transparency { + opacity: 1; + } +} +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples")}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-reduced-transparency', 'prefers-reduced-transparency')}}</td> + <td>{{Spec2('CSS5 Media Queries')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("css.at-rules.media.prefers-reduced-transparency")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="https://bugs.webkit.org/show_bug.cgi?id=175497">Le bug WebKit 175497</a></li> +</ul> + +<p>{{QuickLinksWithSubpages("/fr/docs/Web/CSS/@media/")}}</p> 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 +--- +<div>{{CSSRef}}</div> + +<p><strong><code>resolution</code></strong> est une caractéristique média CSS dont la valeur représente la densité de pixels de l'appareil d'affichage.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<p>La caractéristique <code>resolution</code> 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 <code><strong>min-resolution</strong></code> et <strong><code>max-resolution</code></strong> afin d'établir des règles selon un minimum ou un maximum.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>Un test pour la densité de pixels de votre appareil.</p> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: 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; + } +}</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples")}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Media Queries', '#resolution', 'resolution')}}</td> + <td>{{Spec2('CSS3 Media Queries')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("css.at-rules.media.resolution")}}</p> 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 +--- +<div>{{CSSRef}}</div> + +<p><strong><code>scan</code></strong> 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.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<p>La caractéristique <code>scan</code> est définie avec un mot-clé parmi ceux qui suivent :</p> + +<dl> + <dt><code>interlace</code></dt> + <dd>L'image est composée avec <a href="https://fr.wikipedia.org/wiki/Entrelacement_(vid%C3%A9o)">un entrelacement</a> grâce à des lignes intercalées (en deux passes).</dd> + <dt><code>progressive</code></dt> + <dd>L'image est composée ligne par ligne avec <a href="https://fr.wikipedia.org/wiki/Balayage_progressif">un balayage progressif</a>.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: 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> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">p { + font-family: cursive; +} + +@media (scan: interlace) { + p { + font-family: sans-serif; + } +} + +@media (scan: progressive) { + p { + font-family: serif; + } +}</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples")}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Media Queries', '#scan', 'scan')}}</td> + <td>{{Spec2('CSS4 Media Queries')}}</td> + <td>Aucune modification.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Media Queries', '#scan', 'scan')}}</td> + <td>{{Spec2('CSS3 Media Queries')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("css.at-rules.media.scan")}}</p> 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 +--- +<div>{{CSSRef}}</div> + +<p><strong><code>scripting</code></strong> est une caractéristique média CSS qui permet de savoir si les outils de script (ex. JavaScript) sont disponibles.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<p>La caractéristique <code>scripting</code> est définie avec un mot-clé parmi les suivants :</p> + +<dl> + <dt><code>none</code></dt> + <dd>Les outils de script sont indisponibles pour le document courant.</dd> + <dt><code>initial-only</code></dt> + <dd>Les outils de script sont disponibles pendant le chargement de la page mais pas ensuite.</dd> + <dt><code>enabled</code></dt> + <dd>Les outils de script sont pris en charge et actifs pour le document courant.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: 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> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: 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; + } +}</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples")}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Media Queries', '#scripting', 'scripting')}}</td> + <td>{{Spec2('CSS4 Media Queries')}}</td> + <td>Reporté à la spécification Media Queries Level 5.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("css.at-rules.media.scripting")}}</p> 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 +--- +<div>{{CSSRef}} {{Non-standard_header}}</div> + +<p>La caractéristique média <strong><code>shape</code></strong> peut être utilisée afin de tester la forme d'un appareil pour distinguer les affichages rectangulaires des affichages ronds.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<p>La caractéristique <code>shape</code> peut prendre une valeur parmi deux valeurs définies : <code>rect</code> qui représente un écran rectangulaire ou <code>round</code> qui représente un écran circulaire, ovale ou elliptique.</p> + +<dl> + <dt><code><dfn>rect</dfn></code></dt> + <dd>La forme est un rectangle, un carré ou une forme similaire (ex. un rectangle arrondi) qui permet d'utiliser un affichage traditionnel.</dd> + <dt><code><dfn>round</dfn></code></dt> + <dd>La forme est arrondie telle un cercle, un ovale ou une ellipse et les dispositions arrondies seront plus appropriées sur ces écrans.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<div class="blockIndicator note"> +<p><strong>Note :</strong> Aucun navigateur n'implémente actuellement cette fonctionnalité.</p> +</div> + +<h3 id="Exemple_simple">Exemple simple</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><h1>Coucou le monde !</h1> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">h1 { + text-align: left; +} + +@media (shape: rect) { + h1 { + text-align: left; + } +} + +@media (shape: round) { + h1 { + text-align: center; + } +} +</pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample("Exemple_simple")}}</p> + +<h3 id="Feuille_de_style_spécifique">Feuille de style spécifique</h3> + +<p>Ce fragment de code HTML permettra d'appliquer une feuille de style particulière pour les appareils qui ont des écrans arrondis.</p> + +<pre class="brush: html"><code><head> + <link rel="stylesheet" href="default.css" /></code> +<code> <link media="screen and (shape: rect)" rel="stylesheet" href="rectangle.css" /> + <link media="screen and (shape: round)" rel="stylesheet" href="round.css" /> +</head> +</code></pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td><em><a href="https://drafts.csswg.org/css-round-display/">CSS Round Display Level 1</a></em></td> + <td>Brouillon</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("css.at-rules.media.shape")}}</p> 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 +--- +<div>{{CSSRef}}</div> + +<p><strong><code>update</code></strong> 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.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<p>La caractéristique <code>update</code> est définie avec un mot-clé parmi ceux de la liste ci-après.</p> + +<dl> + <dt><code>none</code></dt> + <dd>Une fois le document affiché, son apparence ne peut plus être modifiée (ex. le document est imprimé sur du papier).</dd> + <dt><code>slow</code></dt> + <dd>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).</dd> + <dt><code>fast</code></dt> + <dd>Une fois le document affiché, son apparence peut évoluer rapidement (ex. un ordinateur qui serait capable de gérer les transitions CSS).</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p> + Si ce texte est animé, cela signifie que vous utilisez + un appareil avec un affichage qui évolue rapidement. +</p> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">@keyframes jiggle { + from { + transform: translateY(0); + } + + to { + transform: translateY(25px); + } +} + +@media (update: fast) { + p { + animation: 1s jiggle linear alternate infinite; + } +}</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples")}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Media Queries', '#update', 'update')}}</td> + <td>{{Spec2('CSS4 Media Queries')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("css.at-rules.media.update")}}</p> 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 +--- +<div>{{CSSRef}}</div> + +<p><strong><code>width</code></strong> 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 (<em>viewport</em>) ou de la largeur de la page (pour <a href="/fr/docs/Web/CSS/M%C3%A9dia_pagin%C3%A9s">les média paginés</a>). La largeur est exprimée comme une longueur CSS (type {{cssxref("<length>")}}.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<p><strong><code>width</code></strong> est une valeur décrivant la largeur d'affichage, les versions préfixées <strong><code>min-width</code></strong> et <code><strong>max-width</strong></code> peuvent également être utilisées afin de décrire la largeur minimale (resp. la largeur maximale).</p> + +<pre class="brush: css">/* 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) {} +</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div>Observez cet élément lorsque vous redimensionnez la largeur du viewport.</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: 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; + } +} +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample('Exemples','90%')}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Media Queries', '#width', 'width')}}</td> + <td>{{Spec2('CSS4 Media Queries')}}</td> + <td>La valeur peut désormais être négative (ce qui correspond à un booléen faux).</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Media Queries', '#width', 'width')}}</td> + <td>{{Spec2('CSS3 Media Queries')}}</td> + <td>Définition initiale. La valeur ne peut pas être négative.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("css.at-rules.media.width")}}</p> |