diff options
| author | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:36:08 +0100 |
|---|---|---|
| committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:36:08 +0100 |
| commit | 39f2114f9797eb51994966c6bb8ff1814c9a4da8 (patch) | |
| tree | 66dbd9c921f56e440f8816ed29ac23682a1ac4ef /files/fr/conflicting/web/css | |
| parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
| download | translated-content-39f2114f9797eb51994966c6bb8ff1814c9a4da8.tar.gz translated-content-39f2114f9797eb51994966c6bb8ff1814c9a4da8.tar.bz2 translated-content-39f2114f9797eb51994966c6bb8ff1814c9a4da8.zip | |
unslug fr: move
Diffstat (limited to 'files/fr/conflicting/web/css')
37 files changed, 3404 insertions, 0 deletions
diff --git a/files/fr/conflicting/web/css/@viewport/index.html b/files/fr/conflicting/web/css/@viewport/index.html new file mode 100644 index 0000000000..bd7b0871c9 --- /dev/null +++ b/files/fr/conflicting/web/css/@viewport/index.html @@ -0,0 +1,77 @@ +--- +title: height +slug: Web/CSS/@viewport/height +tags: + - '@viewport' + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/height +--- +<div>{{CSSRef}}</div> + +<p>Le descripteur <code><strong>height</strong></code>, rattaché à la règle @ {{cssxref("@viewport")}} est un raccourci permettant de définir les deux descripteurs {{cssxref("@viewport/min-height", "min-height")}} et {{cssxref("@viewport/max-height", "max-height")}}.</p> + +<p>Si on fournit une seule valeur, c'est cette valeur qui sera utilisée pour la hauteur minimale et maximale de la zone d'affichage (<em>viewport</em>). Si on fournit deux valeurs, la première correspondra à la hauteur minimale de la zone d'affichage et la deuxième à la hauteur maximale.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush: css">/* Une valeur de longueur */ +/* Type <length> ou <percentage> */ +height: auto; +height: 320px; +height: 15em; + +/* Deux valeurs de longueur */ +height: 320px 200px; +</pre> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>La <a href="/fr/docs/Web/CSS/Valeur_utilis%C3%A9e">valeur utilisée</a> sera calculée à partir des valeurs des autres descripteurs.</dd> + <dt><code><length></code></dt> + <dd>Une longueur relative ou absolue qui doit être positive.</dd> + <dt><code><percentage></code></dt> + <dd>Une valeur exprimée en pourcentages qui est relative à la hauteur de la zone d'affichage (<em>viewport</em>) lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: css">@viewport { + height: 500px; +}</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('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</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.viewport.height")}}</p> diff --git a/files/fr/conflicting/web/css/@viewport_3ecbd2877baedebcfaffc13eaa7d61ce/index.html b/files/fr/conflicting/web/css/@viewport_3ecbd2877baedebcfaffc13eaa7d61ce/index.html new file mode 100644 index 0000000000..45f9b90ef5 --- /dev/null +++ b/files/fr/conflicting/web/css/@viewport_3ecbd2877baedebcfaffc13eaa7d61ce/index.html @@ -0,0 +1,69 @@ +--- +title: user-zoom +slug: Web/CSS/@viewport/user-zoom +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/user-zoom +--- +<div>{{CSSRef}}</div> + +<p>Le descripteur <strong><code>user-zoom</code></strong>, utilisé dans la règle @ {{cssxref("@viewport")}}, définit si l'utilisateur doit pouvoir modifier le niveau de zoom d'un document dans la zone d'affichage (<em>viewport</em>).</p> + +<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ +user-zoom: zoom; +user-zoom: fixed; +</pre> + +<h2 id="Syntaxe">Syntaxe</h2> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code>zoom</code></dt> + <dd>L'utilisateur peut zoomer/dézoomer.</dd> + <dt><code>fixed</code></dt> + <dd>L'utilisateur ne peut ni zoomer ni dézoomer.</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Specifications" name="Specifications">Accessibilité</h2> + +<p>Supprimer la possibilité de zoomer empêche les personnes ayant une vision faible de lire et de comprendre le contenu de la page.</p> + +<ul> + <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Explications des recommendations WCAG 1.4</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">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 Device', '#the-lsquouser-zoomrsquo-descriptor', '"user-zoom" descriptor')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</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.viewport.user-zoom")}}</p> diff --git a/files/fr/conflicting/web/css/@viewport_516ab4b0283b5b2231fb657505e22440/index.html b/files/fr/conflicting/web/css/@viewport_516ab4b0283b5b2231fb657505e22440/index.html new file mode 100644 index 0000000000..fd3499f24c --- /dev/null +++ b/files/fr/conflicting/web/css/@viewport_516ab4b0283b5b2231fb657505e22440/index.html @@ -0,0 +1,77 @@ +--- +title: max-height +slug: Web/CSS/@viewport/max-height +tags: + - '@viewport' + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/max-height +--- +<div>{{CSSRef}}</div> + +<p>Le descripteur <code><strong>max-height</strong></code>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir la hauteur maximale de la zone d'affichage (<em>viewport</em>) d'un document.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush: css">/* Avec un mot-clé */ +max-height: auto; + +/* Valeur de longueur */ +/* Type <length> */ +max-height: 400px; +max-height: 50em; +max-height: 20cm; + +/* Valeur proportionnelle */ +/* Type <percentage> */ +max-height: 75%;</pre> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code>auto</code></dt> + <dd><a href="/fr/docs/Web/CSS/Valeur_utilisée">La valeur utilisée</a> est alors calculée selon les valeurs des autres descripteurs.</dd> + <dt><code><length></code></dt> + <dd>Une valeur absolue ou relative représentant une longueur. Cette valeur doit être positive.</dd> + <dt><code><percentage></code></dt> + <dd>Une valeur de pourcentage relative à la hauteur initiale de la zone d'affichage lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: css">@viewport { + max-height: 600px; +}</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('CSS3 Device', '#descdef-viewport-max-height', '"max-height" descriptor')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</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.viewport.max-height")}}</p> diff --git a/files/fr/conflicting/web/css/@viewport_6e9c91ec34cdb0393d301240d0d50d84/index.html b/files/fr/conflicting/web/css/@viewport_6e9c91ec34cdb0393d301240d0d50d84/index.html new file mode 100644 index 0000000000..295e87ce7a --- /dev/null +++ b/files/fr/conflicting/web/css/@viewport_6e9c91ec34cdb0393d301240d0d50d84/index.html @@ -0,0 +1,70 @@ +--- +title: min-zoom +slug: Web/CSS/@viewport/min-zoom +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/min-zoom +--- +<div>{{CSSRef}}</div> + +<p>Le descripteur <strong><code>min-zoom</code></strong>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir le niveau de zoom minimal en-dessous duquel le navigateur ne réduira pas le niveau de zoom (que ce soit une action automatique ou une action de l'utilisateur).</p> + +<p>Un facteur de zoom égal à <code>1.0</code> ou à <code>100%</code> correspond à l'absence de zoom. Si on utilise des valeurs supérieures, cela correspondra à un niveau de zoom plus élevé. À l'inverse des valeurs inférieures traduiront un « dézoom ».</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush:css">/* Valeur avec un mot-clé */ +min-zoom: auto; + +/* Nombres : type <number> */ +min-zoom: 0.8; +min-zoom: 2.0; + +/* Valeurs proportionnelles : type <percentage> */ +min-zoom: 150%; +</pre> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>L'agent utilisateur détermine la limite du niveau de zoom applicable pour le document.</dd> + <dt><code><number></code></dt> + <dd>Un nombre positif qui correspond à la limite basse du niveau de zoom (cf. {{cssxref("<number>")}}).</dd> + <dt><code><percentage></code></dt> + <dd>Un pourcentage positif qui correspond à la limite basse du niveau de zoom (cf. {{cssxref("<percentage>")}}).</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</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('CSS3 Device', '#min-zoom-desc', '"min-zoom" descriptor')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</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.viewport.min-zoom")}}</p> diff --git a/files/fr/conflicting/web/css/@viewport_7861ca3461a359b150d44f2c8d74e53a/index.html b/files/fr/conflicting/web/css/@viewport_7861ca3461a359b150d44f2c8d74e53a/index.html new file mode 100644 index 0000000000..42e89f24e5 --- /dev/null +++ b/files/fr/conflicting/web/css/@viewport_7861ca3461a359b150d44f2c8d74e53a/index.html @@ -0,0 +1,65 @@ +--- +title: orientation +slug: Web/CSS/@viewport/orientation +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/orientation +--- +<div>{{CSSRef}}</div> + +<p>Le descripteur <strong><code>orientation</code></strong>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir l'orientation d'un document.</p> + +<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ +orientation: auto; +orientation: portrait; +orientation: landscape; +</pre> + +<p>Pour les agents utilisateurs et/ou les appareils pour lesquels l'orientation est modifiée en orientant l'appareil, l'auteur pourra utiliser ce descripteur afin d'inhiber le changement d'orientation lié à la stimulation physique.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>L'agent utilisateur déterminera l'orientation du document automatiquement. Généralement, il utilisera l'accéléromètre de l'appareil (si ce dernier en possède un) si le résultat de cette mesure n'est pas modifié par un réglage utilisateur (« bloquer la rotation de l'écran »).</dd> + <dt><code>portrait</code></dt> + <dd>Le document devrait être verrouillé en mode portrait.</dd> + <dt><code>landscape</code></dt> + <dd>Le document devrait être verrouillé en mode paysage.</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</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('CSS3 Device', '#the-lsquoorientationrsquo-descriptor', '"orientation" descriptor')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</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.viewport.orientation")}}</p> diff --git a/files/fr/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html b/files/fr/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html new file mode 100644 index 0000000000..5532ed2191 --- /dev/null +++ b/files/fr/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html @@ -0,0 +1,75 @@ +--- +title: viewport-fit +slug: Web/CSS/@viewport/viewport-fit +tags: + - '@viewport' + - CSS + - Descripteur + - Experimental + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/viewport-fit +--- +<div>{{CSSRef}}{{Draft}}{{SeeCompatTable}}</div> + +<p>Le descripteur <strong><code>viewport-fit</code></strong>, associé à la règle @ {{CSSxRef("@viewport")}} contrôle la façon dont la zone d'affichage (<em>viewport</em>) d'un document recouvre l'écran.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush: css; no-line-numbers">/* Valeurs avec un mot-clé */ +viewport-fit: auto; +viewport-fit: contain; +viewport-fit: cover; +</pre> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>Cette valeur n'a aucun impact sur la disposition initiale de la zone d'affichage et l'ensemble de la page web est visible.</dd> + <dt><code>contain</code></dt> + <dd>La zone d'affichage est redimensionnée afin de s'inscrire dans le plus grand rectangle qu'il est possible de faire tenir sur l'écran.</dd> + <dt><code>cover</code></dt> + <dd>La zone d'affichage est redimensionnée afin de couvrir l'écran de l'appareil. Il est fortement recommandé d'utiliser <a href="/en-US/docs/Web/CSS/env">des variables pour le placement en zone sûre</a> afin de s'assurer qu'aucun contenu important ne se retrouve en dehors de l'écran.</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">auto | contain | cover</pre> + +<h2 id="Accessibilité">Accessibilité</h2> + +<p>When using the <code>viewport-fit</code> descriptor, one must keep in mind that not all device displays are rectangular, and should therefore make use of the <a href="/en-US/docs/Web/CSS/env">safe area inset variables</a>.</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("CSS Round Display", "#viewport-fit-descriptor", '"viewport-fit" descriptor')}}</td> + <td>{{Spec2("CSS Round Display")}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</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.viewport.viewport-fit")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{CSSxRef("env", "env()")}}</li> +</ul> diff --git a/files/fr/conflicting/web/css/@viewport_a47f799d4189f98a73bc55899628d6d7/index.html b/files/fr/conflicting/web/css/@viewport_a47f799d4189f98a73bc55899628d6d7/index.html new file mode 100644 index 0000000000..83a55c3c66 --- /dev/null +++ b/files/fr/conflicting/web/css/@viewport_a47f799d4189f98a73bc55899628d6d7/index.html @@ -0,0 +1,77 @@ +--- +title: min-height +slug: Web/CSS/@viewport/min-height +tags: + - '@viewport' + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/min-height +--- +<div>{{CSSRef}}</div> + +<p>Le descripteur <code><strong>min-height</strong></code>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir la hauteur minimale de la zone d'affichage (<em>viewport</em>) d'un document.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush: css">/* Avec un mot-clé */ +min-height: auto; + +/* Valeur de longueur */ +/* Type <length> */ +min-height: 400px; +min-height: 50em; +min-height: 20cm; + +/* Valeur proportionnelle */ +/* Type <percentage> */ +min-height: 75%;</pre> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code>auto</code></dt> + <dd><a href="/fr/docs/Web/CSS/Valeur_utilisée">La valeur utilisée</a> est alors calculée selon les valeurs des autres descripteurs.</dd> + <dt><code><length></code></dt> + <dd>Une valeur absolue ou relative représentant une longueur. Cette valeur doit être positive.</dd> + <dt><code><percentage></code></dt> + <dd>Une valeur de pourcentage relative à la hauteur initiale de la zone d'affichage lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: css">@viewport { + min-height: 600px; +}</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('CSS3 Device', '#descdef-viewport-min-height', '"min-height" descriptor')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</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.viewport.min-height")}}</p> diff --git a/files/fr/conflicting/web/css/@viewport_c5f2dc316e069e8c32ab24f9117600a7/index.html b/files/fr/conflicting/web/css/@viewport_c5f2dc316e069e8c32ab24f9117600a7/index.html new file mode 100644 index 0000000000..aa345f6c1e --- /dev/null +++ b/files/fr/conflicting/web/css/@viewport_c5f2dc316e069e8c32ab24f9117600a7/index.html @@ -0,0 +1,76 @@ +--- +title: min-width +slug: Web/CSS/@viewport/min-width +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/min-width +--- +<div>{{CSSRef}}</div> + +<p>Le descripteur <code><strong>min-width</strong></code>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir la largeur minimale de la zone d'affichage (<em>viewport</em>) d'un document.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush: css">/* Avec un mot-clé */ +min-width: auto; + +/* Valeur de longueur */ +/* Type <length> */ +min-width: 400px; +min-width: 50em; +min-width: 20cm; + +/* Valeur proportionnelle */ +/* Type <percentage> */ +min-width: 75%;</pre> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code>auto</code></dt> + <dd><a href="/fr/docs/Web/CSS/Valeur_utilisée">La valeur utilisée</a> est alors calculée selon les valeurs des autres descripteurs.</dd> + <dt><code><length></code></dt> + <dd>Une valeur absolue ou relative représentant une longueur. Cette valeur doit être positive.</dd> + <dt><code><percentage></code></dt> + <dd>Une valeur de pourcentage relative à la largeur initiale de la zone d'affichage lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: css">@viewport { + min-width: 600px; +}</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('CSS3 Device', '#descdef-viewport-min-width', '"min-width" descriptor')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<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.viewport.min-width")}}</p> diff --git a/files/fr/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html b/files/fr/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html new file mode 100644 index 0000000000..26e657d76a --- /dev/null +++ b/files/fr/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html @@ -0,0 +1,76 @@ +--- +title: width +slug: Web/CSS/@viewport/width +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/width +--- +<div>{{CSSRef}}</div> + +<p>Le descripteur <code><strong>width</strong></code>, rattaché à la règle @ {{cssxref("@viewport")}} est un raccourci permettant de définir les deux descripteurs {{cssxref("@viewport/min-width", "min-width")}} et {{cssxref("@viewport/max-width", "max-width")}}.</p> + +<p>Si on fournit une seule valeur, c'est cette valeur qui sera utilisée pour la largeur minimale et maximale de la zone d'affichage (<em>viewport</em>). Si on fournit deux valeurs, la première correspondra à la largeur minimale de la zone d'affichage et la deuxième à la largeur maximale.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush: css">/* Une valeur de longueur */ +/* Type <length> ou <percentage> */ +width: auto; +width: 320px; +width: 15em; + +/* Deux valeurs de longueur */ +width: 320px 200px; +</pre> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>La <a href="/fr/docs/Web/CSS/Valeur_utilis%C3%A9e">valeur utilisée</a> sera calculée à partir des valeurs des autres descripteurs.</dd> + <dt><code><length></code></dt> + <dd>Une longueur relative ou absolue qui doit être positive.</dd> + <dt><code><percentage></code></dt> + <dd>Une valeur exprimée en pourcentages qui est relative à la largeur de la zone d'affichage (<em>viewport</em>) lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: css">@viewport { + width: 500px; +}</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('CSS3 Device', '#descdef-viewport-width', '"width" descriptor')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<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.viewport.width")}}</p> diff --git a/files/fr/conflicting/web/css/@viewport_d03ebc763769680c55d1a4258592d3ed/index.html b/files/fr/conflicting/web/css/@viewport_d03ebc763769680c55d1a4258592d3ed/index.html new file mode 100644 index 0000000000..a5021d48f3 --- /dev/null +++ b/files/fr/conflicting/web/css/@viewport_d03ebc763769680c55d1a4258592d3ed/index.html @@ -0,0 +1,70 @@ +--- +title: max-zoom +slug: Web/CSS/@viewport/max-zoom +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/max-zoom +--- +<div>{{CSSRef}}</div> + +<p>Le descripteur <strong><code>max-zoom</code></strong>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir le niveau de zoom maximal au-delà duquel le navigateur n'augmentera pas le niveau de zoom (que ce soit une action automatique ou une action de l'utilisateur).</p> + +<p>Un facteur de zoom égal à <code>1.0</code> ou à <code>100%</code> correspond à l'absence de zoom. Si on utilise des valeurs supérieures, cela correspondra à un niveau de zoom plus élevé. À l'inverse des valeurs inférieures traduiront un « dézoom ».</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush:css">/* Valeur avec un mot-clé */ +max-zoom: auto; + +/* Nombres : type <number> */ +max-zoom: 0.8; +max-zoom: 2.0; + +/* Valeurs proportionnelles : type <percentage> */ +max-zoom: 150%; +</pre> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>L'agent utilisateur détermine la limite du niveau de zoom applicable pour le document.</dd> + <dt><code><number></code></dt> + <dd>Un nombre positif qui correspond à la limite haute du niveau de zoom (cf. {{cssxref("<number>")}}).</dd> + <dt><code><percentage></code></dt> + <dd>Un pourcentage positif qui correspond à la limite haute du niveau de zoom (cf. {{cssxref("<percentage>")}}).</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</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('CSS3 Device', '#max-zoom-desc', '"max-zoom" descriptor')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</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.viewport.max-zoom")}}</p> diff --git a/files/fr/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html b/files/fr/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html new file mode 100644 index 0000000000..c995febbea --- /dev/null +++ b/files/fr/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html @@ -0,0 +1,72 @@ +--- +title: zoom +slug: Web/CSS/@viewport/zoom +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/zoom +--- +<div>{{CSSRef}}</div> + +<p>Le descripteur <strong><code>zoom</code></strong>, utilisé au sein de la règle @ {{cssxref("@viewport")}}, permet de définir le niveau de zoom initial d'un document.</p> + +<p>Un niveau de zoom égal à <code>1.0</code> ou <code>100%</code> n'appliquera aucun zoom. Les valeurs supérieures zoomeront plus et les valeurs inférieures dézoomeront.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush:css">/* Valeur avec un mot-clé */ +zoom: auto; + +/* Valeurs numériques */ +/* Type <number> */ +zoom: 0.8; +zoom: 2.0; + +/* Valeurs proportionnelles */ +/* Type <percentage> */ +zoom: 150%; +</pre> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>C'est l'agent utilisateur qui déterminera le niveau de zoom initial. L'agent utilisateur pourra utiliser la taille de la grille de la zone d'affichage afin de déterminer ce niveau.</dd> + <dt><code><number></code></dt> + <dd>Un nombre positif qui correspond au niveau de zoom appliqué. Pour plus d'informations, voir le type de donnée {{cssxref("<number>")}}.</dd> + <dt><code><percentage></code></dt> + <dd>Un pourcentage positif qui correspond au niveau de zoom appliqué (100% : aucun zoom ; les valeurs supérieures traduiront un zoom plus importants ; les valeurs inférieures auront un effet de « dézoom »). Pour plus d'informations, voir le type de donnée {{cssxref("<percentage>")}}.</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</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('CSS3 Device', '#zoom-desc', '"zoom" descriptor')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</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.viewport.zoom")}}</p> diff --git a/files/fr/conflicting/web/css/@viewport_ff9d4f4f351256d9fdb3d21397eb3880/index.html b/files/fr/conflicting/web/css/@viewport_ff9d4f4f351256d9fdb3d21397eb3880/index.html new file mode 100644 index 0000000000..f131a09f7d --- /dev/null +++ b/files/fr/conflicting/web/css/@viewport_ff9d4f4f351256d9fdb3d21397eb3880/index.html @@ -0,0 +1,76 @@ +--- +title: max-width +slug: Web/CSS/@viewport/max-width +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/max-width +--- +<div>{{CSSRef}}</div> + +<p>Le descripteur <code><strong>max-width</strong></code>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir la largeur maximale de la zone d'affichage (<em>viewport</em>) d'un document. Par défaut, la largeur maximale de la zone d'affichage correspond à celle du <em>viewport</em> initial.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush: css">/* Avec un mot-clé */ +max-width: auto; + +/* Valeur de longueur */ +/* Type <length> */ +max-width: 400px; +max-width: 50em; +max-width: 20cm; + +/* Valeur proportionnelle */ +/* Type <percentage> */ +max-width: 75%;</pre> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code>auto</code></dt> + <dd><a href="/fr/docs/Web/CSS/Valeur_utilisée">La valeur utilisée</a> est alors calculée selon les valeurs des autres descripteurs.</dd> + <dt><code><length></code></dt> + <dd>Une valeur absolue ou relative représentant une longueur. Cette valeur doit être positive.</dd> + <dt><code><percentage></code></dt> + <dd>Une valeur de pourcentage relative à la largeur initiale de la zone d'affichage lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: css">@viewport { + max-width: 600px; +}</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('CSS3 Device', '#descdef-viewport-max-width', '"max-width" descriptor')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<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.viewport.max-width")}}</p> diff --git a/files/fr/conflicting/web/css/_colon_is/index.html b/files/fr/conflicting/web/css/_colon_is/index.html new file mode 100644 index 0000000000..f3036e1ee9 --- /dev/null +++ b/files/fr/conflicting/web/css/_colon_is/index.html @@ -0,0 +1,175 @@ +--- +title: ':any()' +slug: 'Web/CSS/:any' +tags: + - CSS + - Experimental + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:is' +translation_of_original: 'Web/CSS/:any' +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:any()</code></strong> vous permet de construire des ensembles de sélecteurs similaires en créant des groupes à partir desquels l'un des éléments sera activé. C'est une méthode alternative qui permet d'éviter de réécrire un sélecteur entier alors que seule une petite partie varie.</p> + +<pre class="brush: css no-line-numbers">/* sélectionne tous les h2 d'une section, d'un article */ +/* d'un aside ou d'un nav */ +/* actuellement pris en charge avec les préfixes */ +/* -moz- et -webkit- */ +:-moz-any(section, article, aside, nav) h2 { + font-size: 4.5rem; +} + +:-webkit-any(section, article, aside, nav) h2 { + font-size: 4.5rem; +} +</pre> + +<div class="note"><strong>Note : </strong>Cette pseudo-classe est en voie d'être standardisée dans la spécification <a class="external" href="http://dev.w3.org/csswg/selectors4/#matches"><em>CSS Selectors Level 4</em></a> sous le nom de <code>:matches()</code>. Il est probable que la syntaxe et le nom de <code>:-<em>préfixe</em>-any()</code> soit amené à changer pour l'adopter dans un avenir proche.</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code>selector</code></dt> + <dd>Un sélecteur, simple ou multiple, composé d'un <a class="external" href="http://www.w3.org/TR/css3-selectors/#simple-selectors">sélecteur CSS simple</a>.</dd> +</dl> + +<div class="note"><strong>Note :</strong> Le sélecteur <strong>ne peut pas</strong> contenir de combinateur ou de pseudo-éléments.</div> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Simplifier_la_sélection_de_listes">Simplifier la sélection de listes</h3> + +<p>Par exemple, le code CSS suivant :</p> + +<pre class="brush: css">/* Les listes non-ordonnes utilisent un carré */ + dans certains cas */ +ol ol ul, ol ul ul, ol menu ul, ol dir ul, +ol ol menu, ol ul menu, ol menu menu, ol dir menu, +ol ol dir, ol ul dir, ol menu dir, ol dir dir, +ul ol ul, ul ul ul, ul menu ul, ul dir ul, +ul ol menu, ul ul menu, ul menu menu, ul dir menu, +ul ol dir, ul ul dir, ul menu dir, ul dir dir, +menu ol ul, menu ul ul, menu menu ul, menu dir ul, +menu ol menu, menu ul menu, menu menu menu, menu dir menu, +menu ol dir, menu ul dir, menu menu dir, menu dir dir, +dir ol ul, dir ul ul, dir menu ul, dir dir ul, +dir ol menu, dir ul menu, dir menu menu, dir dir menu, +dir ol dir, dir ul dir, dir menu dir, dir dir dir { + list-style-type: square; +} +</pre> + +<p>Pourra être remplacé par :</p> + +<pre class="brush: css">/* Les listes non-ordonnes utilisent un carré */ + dans certains cas */ +:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul, +:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) menu, +:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) dir { + list-style-type: square; +}</pre> + +<p>Cependant, on évitera d'utiliser le code suivant (cf. <a href="#Performances">la section sur les performances</a> plus bas) :</p> + +<pre class="brush: css">:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) { + list-style-type: square; +}</pre> + +<h3 id="Simplifier_la_sélection_de_section">Simplifier la sélection de section</h3> + +<p>Ceci est particulièrement utile lorsqu'on manipule <a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">des sections et des titres</a> HTML. Les éléments {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}} et {{HTMLElement("nav")}} peuvent être imbriqués, sans <code>:any()</code>, leur appliquer un style peut être beaucoup plus complexe.</p> + +<p>Par exemple, sans <code>:any()</code>, appliquer un style à tous les éléments {{HTMLElement("h1")}} situés à différents niveaux peut être vraiment compliqué :</p> + +<pre class="brush: css">/* Niveau 0 */ +h1 { + font-size: 30px; +} +/* Niveau 1 */ +section h1, article h1, aside h1, nav h1 { + font-size: 25px; +} +/* Niveau 2 */ +section section h1, section article h1, section aside h1, section nav h1, +article section h1, article article h1, article aside h1, article nav h1, +aside section h1, aside article h1, aside aside h1, aside nav h1, +nav section h1, nav article h1, nav aside h1, nav nav h1, { + font-size: 20px; +} +/* Niveau 3 */ +/* ... même pas la peine d'y penser */ +</pre> + +<p>En utilisant : <code>-any()</code>, cela devient plus simple :</p> + +<pre class="brush: css">/* Niveau 0 */ +h1 { + font-size: 30px; +} +/* Niveau 1 */ +:-moz-any(section, article, aside, nav) h1 { + font-size: 25px; +} +:-webkit-any(section, article, aside, nav) h1 { + font-size: 25px; +} + +/* Niveau 2 */ +:-moz-any(section, article, aside, nav) +:-moz-any(section, article, aside, nav) h1 { + font-size: 20px; +} + +:-webkit-any(section, article, aside, nav) +:-webkit-any(section, article, aside, nav) h1 { + font-size: 20px; +} + +/* Niveau 3 */ +:-moz-any(section, article, aside, nav) +:-moz-any(section, article, aside, nav) +:-moz-any(section, article, aside, nav) h1 { + font-size: 15px; +} + +:-webkit-any(section, article, aside, nav) +:-webkit-any(section, article, aside, nav) +:-webkit-any(section, article, aside, nav) h1 { + font-size: 15px; +}</pre> + +<h2 id="Notes">Notes</h2> + +<h3 id="Problèmes_avec_les_performances_et_la_spécificité"><a id="Performances">Problèmes avec les performances et la spécificité</a></h3> + +<p>Le bug {{bug("561154")}} illustre un problème où la spécificité de <code>:-moz-any()</code> est incorrecte. L'implémentation actuelle considère <code>:-moz-any()</code> comme une règle universelle. Ainsi, lorsqu'il est utilisé pour le sélecteur le plus à droite d'un expression ce sera plus lent que d'utiliser un identifiant, une classe ou une balise.</p> + +<p>Par exemple :</p> + +<pre class="brush: css">.a > :-moz-any(.b, .c) +</pre> + +<p>est moins rapide que :</p> + +<pre class="brush: css">.a > .b, .a > .c +</pre> + +<p>et celui-ci est rapide :</p> + +<pre class="brush: css">:-moz-any(.a, .d) > .b, :-moz-any(.a, .d) > .c +</pre> + +<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.selectors.any")}}</p> diff --git a/files/fr/conflicting/web/css/_colon_placeholder-shown/index.html b/files/fr/conflicting/web/css/_colon_placeholder-shown/index.html new file mode 100644 index 0000000000..8b1111134c --- /dev/null +++ b/files/fr/conflicting/web/css/_colon_placeholder-shown/index.html @@ -0,0 +1,117 @@ +--- +title: ':-ms-input-placeholder' +slug: 'Web/CSS/:-ms-input-placeholder' +tags: + - CSS + - Non-standard + - Pseudo-classe + - Référence(2) +translation_of: 'Web/CSS/:placeholder-shown' +translation_of_original: 'Web/CSS/:-ms-input-placeholder' +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<p>La pseudo-classe <strong><code>:-ms-input-placeholder</code></strong> représente le texte de substitution d'un élément de formulaire. Elle permet aux auteurs et aux développeurs web d'adapter l'apparence des textes de substitution. Cette pseudo-classe est propriétaire et est uniquement prise en charge par Internet Explorer et Edge.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Dans l'exemple suivant, le champ « Identifiant » a un style particulier. Le texte de substitution est affiché de cette façon jusqu'à ce que le focus passe sur le champ (ce qui correspond à une saisie).</p> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">input { + background-color:#E8E8E8; + color:black; +} +/* Style pour le texte de substitution */ +input.studentid:-ms-input-placeholder { + font-style:italic; + color: red; + background-color: yellow; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><form id="test"> + <p><label>Saisir le nom : <input id="nom" placeholder="Nom de l'étudiant"/></label></p> + <p><label>Saisir le domaine : <input id="domaine" placeholder="Domaine d'étude" /></label></p> + <p><label>Saisir l'identifiant : <input type="num" pattern="[0-9]{8}" title="8 digit ID" id="sid" class="studentid" placeholder="Identifiant à 8 chiffres" /></label></p> + <input type="submit" /> +</form></pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","300","300")}}</p> + +<h3 id="Capture_d'écran">Capture d'écran</h3> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12684/bandicam%202016-03-08%2001-48-59-851.jpg" style="border-style: solid; border-width: 1px; height: 160px; margin: 0px; width: 650px;"></p> + +<h2 id="Spécifications">Spécifications</h2> + +<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Trident/Microsoft et ne fait partie d'aucune spécification. <a href="https://msdn.microsoft.com/en-us/library/hh772745(v=vs.85).aspx">MSDN documente cette pseudo-classe</a>.</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Edge</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Support simple</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Support simple</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{cssxref("::placeholder")}}</li> + <li>{{cssxref("::-webkit-input-placeholder")}}</li> + <li>{{cssxref("::-moz-placeholder")}}</li> + <li><a href="/fr/docs/Web/Guide/HTML/Forms_in_HTML">Les formulaires en HTML</a></li> + <li>{{HTMLElement("input")}}</li> + <li>{{HTMLElement("textarea")}}</li> +</ul> diff --git a/files/fr/conflicting/web/css/_doublecolon_placeholder/index.html b/files/fr/conflicting/web/css/_doublecolon_placeholder/index.html new file mode 100644 index 0000000000..4be89a52e0 --- /dev/null +++ b/files/fr/conflicting/web/css/_doublecolon_placeholder/index.html @@ -0,0 +1,97 @@ +--- +title: '::-webkit-input-placeholder' +slug: 'Web/CSS/::-webkit-input-placeholder' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::placeholder' +translation_of_original: 'Web/CSS/::-webkit-input-placeholder' +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<p>Le pseudo-élément <strong><code>::-webkit-input-placeholder</code></strong> représente <a href="/fr/docs/Web/Guide/HTML/Forms_in_HTML#The_placeholder_attribute">le texte de substitution</a> d'un formulaire. Il permet aux auteurs et aux développeurs d'adapter la mise en forme de ce texte de substitution. Ce pseudo-élément est uniquement pris en charge par WebKit et Blink.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><input placeholder="Veuillez saisir ici..."></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">input::-webkit-input-placeholder { + color: green; +}</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples")}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Support simple</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Support simple</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{cssxref("::placeholder")}}</li> + <li>{{cssxref("::-moz-placeholder")}}</li> + <li>{{cssxref(":-ms-input-placeholder")}}</li> + <li><a href="/fr/docs/Web/Guide/HTML/Forms_in_HTML">Les formulaires en HTML</a></li> + <li>{{HTMLElement("input")}}</li> + <li>{{HTMLElement("textarea")}}</li> +</ul> diff --git a/files/fr/conflicting/web/css/border-collapse/index.html b/files/fr/conflicting/web/css/border-collapse/index.html new file mode 100644 index 0000000000..3a1430f65e --- /dev/null +++ b/files/fr/conflicting/web/css/border-collapse/index.html @@ -0,0 +1,201 @@ +--- +title: Tableaux +slug: Astuces_CSS/Tableaux +tags: + - CSS +translation_of: Web/CSS/border-collapse +translation_of_original: Useful_CSS_tips/Tables +--- +<h3 id="Centrage" name="Centrage">Centrage</h3> +<p>Si vous voulez centrer un tableau, il n'est pas correct d'utiliser</p> +<dl> + <dd> + <code>text-align: center</code></dd> +</dl> +<p>dans l'élément parent. La méthode correcte est d'appliquer le style</p> +<dl> + <dd> + <code>margin: 0px auto 0px auto</code></dd> +</dl> +<p>à la table elle-même.</p> +<table style="border-collapse: collapse; margin: 0px auto 0px auto;"> + <tbody> + <tr> + <td colspan="3" style="border: 1px solid black;">Table avec margin: 0px auto 0px auto;</td> + </tr> + <tr> + <td style="border: 1px solid black;">Contenu cellule</td> + <td style="border: 1px solid black;">Contenu cellule</td> + <td style="border: 1px solid black;">Contenu cellule</td> + </tr> + <tr> + <td style="border: 1px solid black;">Contenu cellule</td> + <td style="border: 1px solid black;">Contenu cellule</td> + <td style="border: 1px solid black;">Contenu cellule</td> + </tr> + <tr> + <td style="border: 1px solid black;">Contenu cellule</td> + <td style="border: 1px solid black;">Contenu cellule</td> + <td style="border: 1px solid black;">Contenu cellule</td> + </tr> + </tbody> +</table> +<h3 id="Bordures" name="Bordures">Bordures</h3> +<p>Voici un tableau standard avec <code>cellspacing</code> non nul et une bordure de cellule de 1px :</p> +<table> + <tbody> + <tr> + <td colspan="3" style="border: 1px solid black;">Table avec <code>cellspacing="4"</code></td> + </tr> + <tr> + <td style="border: 1px solid black;">Contenu cellule</td> + <td style="border: 1px solid black;">Contenu cellule</td> + <td style="border: 1px solid black;">Contenu cellule</td> + </tr> + <tr> + <td style="border: 1px solid black;">Contenu cellule</td> + <td style="border: 1px solid black;">Contenu cellule</td> + <td style="border: 1px solid black;">Contenu cellule</td> + </tr> + <tr> + <td style="border: 1px solid black;">Contenu cellule</td> + <td style="border: 1px solid black;">Contenu cellule</td> + <td style="border: 1px solid black;">Contenu cellule</td> + </tr> + </tbody> +</table> +<p>Si vous voulez transformer le tableau en grille, définissez l'espacement de cellule à 0 et le tableau devient comme ceci :</p> +<table> + <tbody> + <tr> + <td colspan="3" style="border: 1px solid black;">Table avec <code>cellspacing="0"</code></td> + </tr> + <tr> + <td style="border: 1px solid black;">Contenu cellule</td> + <td style="border: 1px solid black;">Contenu cellule</td> + <td style="border: 1px solid black;">Contenu cellule</td> + </tr> + <tr> + <td style="border: 1px solid black;">Contenu cellule</td> + <td style="border: 1px solid black;">Contenu cellule</td> + <td style="border: 1px solid black;">Contenu cellule</td> + </tr> + <tr> + <td style="border: 1px solid black;">Contenu cellule</td> + <td style="border: 1px solid black;">Contenu cellule</td> + <td style="border: 1px solid black;">Contenu cellule</td> + </tr> + </tbody> +</table> +<p>Le résultat n'est pas celui attendu et la raison en est que le modèle de bordure par défaut est défini comme <b>séparé</b>. Avec ce modèle, chaque cellule à sa propre bordure, même si l'espacement de cellule est 0. Afin d'avoir un rendu comme une grille, le modèle <code>collapse</code> doit être utilisé.</p> +<table style="border-collapse: collapse;"> + <tbody> + <tr> + <td colspan="3" style="border: 1px solid black;">Table avec <code>cellspacing="0"</code><br> + et <code>border-collapse:collapse;</code></td> + </tr> + <tr> + <td style="border: 1px solid black;">Contenu cellule</td> + <td style="border: 1px solid black;">Contenu cellule</td> + <td style="border: 1px solid black;">Contenu cellule</td> + </tr> + <tr> + <td style="border: 1px solid black;">Contenu cellule</td> + <td style="border: 1px solid black;">Contenu cellule</td> + <td style="border: 1px solid black;">Contenu cellule</td> + </tr> + <tr> + <td style="border: 1px solid black;">Contenu cellule</td> + <td style="border: 1px solid black;">Contenu cellule</td> + <td style="border: 1px solid black;">Contenu cellule</td> + </tr> + </tbody> +</table> +<h3 id="Style_de_colonne" name="Style_de_colonne">Style de colonne</h3> +<p>Si vous voulez définir un style particulier à certaines colonnes du tableau, la solution usuelle est de créer une classe de style et d'assigner explicitement toutes les cellules appartenant à ces colonnes à cette classe.</p> +<pre> <style type="text/css"> + td { background-color: #eeeeee; } + td.CoulNoire { background-color: #cccccc; } + </style> + +<table> + <tr><td class="darkcol">Cell</td> + <td>Cell</td><td>Cell</td><td>Cell</td><td class="CoulNoire ">Cellule</td></tr> + <tr><td class="darkcol">Cell</td> + <td>Cell</td><td>Cell</td><td>Cell</td><td class="CoulNoire ">Cellule</td></tr> + <tr><td class="darkcol">Cell</td> + <td>Cell</td><td>Cell</td><td>Cell</td><td class="CoulNoire ">Cellule</td></tr> + <tr><td class="darkcol">Cell</td> + <td>Cell</td><td>Cell</td><td>Cell</td><td class="CoulNoire ">Cellule</td></tr> + <tr><td class="darkcol">Cell</td> + <td>Cell</td><td>Cell</td><td>Cell</td><td class="CoulNoire ">Cellule</td></tr> + </table> +</pre> +<p>Cette solution a l'avantage d'être compatible multi-navigateur, mais nécessite aussi de modifier le code HTML, pour explicitement sélectionner les cellules du tableau à <i>styler</i>.</p> +<p>Pour les navigateurs supportant les <i>sélecteurs adjacents</i>, il existe une solution alternative en pure CSS</p> +<pre><style type="text/css"> + /* Style pour toutes les lignes */ + tr { font: bold 16px Arial; } + /* Style pour les lignes avec une ligne avant: 2e, 3e, 4e, ... */ + tr + tr { font: 12px Arial; } + + /* Style pour toutes les colonnes */ + td { background-color: #cccccc; } + /* Style pour les colonnes avec une colonne avant: 2e, 3e, 4e, 5e */ + td + td { background-color: #eeeeee; } + /* Style pour les colonnes avec 4 colonnes avant: 5e */ + td + td + td + td + td { background-color: #cccccc; } +</style> + +<table> + <tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr> + <tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr> + <tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr> + <tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr> + <tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr> +</table> +</pre> +<h3 id="En-t.C3.AAte_fixe" name="En-t.C3.AAte_fixe">En-tête fixe</h3> +<p>Si un tableau contient de nombreuses lignes, quand l'utilisateur fait défiler la page vers le bas pour voir toutes les données, l'en-tête défile en haut et devient invisible. Vous pouvez avoir un tableau avec un en-tête fixe et un défilement vertical, en utilisant le code ci-après.</p> +<div class="note"> + Ce code ne fait pas partie de la page originale et a été rajouté par le traducteur</div> +<pre><style type="text/css"> +table { + width: 20em; /* esthétique */ + border-collapse: separate; /* par défaut */ +/* border-collapse: collapse; /* Boggué depuis 2002 avec overflow-y: auto sur tbody */ + border-spacing: 0; /* contournement du bug */ +} +tbody { + height: 10em; /* définit une hauteur */ + overflow-x: hidden; /* esthétique */ + overflow-y: auto; /* permet de scroller les cellules */ +} +td { + border-left: 1px solid blue; /* contournement du bug */ + border-bottom: 1px solid blue; /* contournement du bug */ +} +</style> + +<table> + <thead><tr><th>Entête</th><th>Entête</th><th>Entête</th></tr></thead> + <tfoot><tr><th>Pied</th><th>Pied</th><th>Pied</th></tr></tfoot> + <tbody> + <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr> + <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr> + <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr> + <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr> + <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr> + <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr> + <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr> + <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr> + <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr> + <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr> + <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr> + <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr> + <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr> + </tbody> +</table> +</pre> +<p>Actuellement, il y a un problème avec le moteur de rendu de Firefox (voir sur bugzilla {{ Bug(135236) }})), qui ne style pas corectement des tableaux avec le modèle <i>collapse border</i> et TBODY avec le style <i>overflow: auto</i>.</p> +<p>{{ languages( { "en": "en/Useful_CSS_tips/Tables" } ) }}</p> diff --git a/files/fr/conflicting/web/css/box-ordinal-group/index.html b/files/fr/conflicting/web/css/box-ordinal-group/index.html new file mode 100644 index 0000000000..4215966858 --- /dev/null +++ b/files/fr/conflicting/web/css/box-ordinal-group/index.html @@ -0,0 +1,74 @@ +--- +title: '-moz-box-ordinal-group' +slug: Web/CSS/-moz-box-ordinal-group +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/box-ordinal-group +translation_of_original: Web/CSS/-moz-box-ordinal-group +--- +<div>{{CSSRef}}</div> + +<div class="warning"> +<p><strong>Attention ! </strong>Cette propriété a été implémentée pour les premiers brouillons de la spécification pour le module de boîtes flexibles. Elle a été remplacée par des propriétés standards depuis, pour plus d'informations sur ce qui doit être utilisé à la place, consultez l'article sur <a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS/Utilisation_des_flexbox_en_CSS" title="/en/CSS/Flexible_boxes">les boîtes flexibles</a>.</p> +</div> + +<p>La propriété <code><strong>-moz-box-ordinal-group</strong></code> indique le groupe ordinal auquel appartient l'élément. Les éléments dont le groupe ordinal est inférieur seront affichés avant ceux dont le groupe ordinal est plus élevé.</p> + +<h2 id="Valeurs">Valeurs</h2> + +<p>Cette propriété accepte des valeurs entières strictement positives. La valeur initiale de cette propriété est 1.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">#Flexbox { + display: -ms-box; + display: -moz-box; + display: -webkit-box; +} + +#text1 { + background: red; + -ms-box-ordinal-group: 4; + -moz-box-ordinal-group: 4; + -webkit-box-ordinal-group: 4; +} + +#text2 { + background: green; + -ms-box-ordinal-group: 3; + -moz-box-ordinal-group: 3; + -webkit-box-ordinal-group: 3; +} + +#text3 { + background: blue; + -ms-box-ordinal-group: 2; + -moz-box-ordinal-group: 2; + -webkit-box-ordinal-group: 2; +} + +#text4 { + background: orange; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div id="Flexbox"> + <div id="text1">text 1</div> + <div id="text2">text 2</div> + <div id="text3">text 3</div> + <div id="text4">text 4</div> +</div></pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","300","300")}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<p>Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.</p> diff --git a/files/fr/conflicting/web/css/color_value/index.html b/files/fr/conflicting/web/css/color_value/index.html new file mode 100644 index 0000000000..3880593692 --- /dev/null +++ b/files/fr/conflicting/web/css/color_value/index.html @@ -0,0 +1,139 @@ +--- +title: Couleurs et fonds +slug: Astuces_CSS/Couleurs_et_fonds +tags: + - CSS +translation_of: Web/CSS/color_value +translation_of_original: Useful_CSS_tips/Color_and_Background +--- +<p> +</p> +<h3 id="Fond_translucide"> Fond translucide </h3> +<p>Même si <i>opacity</i> (translucidité) est une propriété de style définie dans la spécification CSS3, <a class="external" href="http://www.w3.org/TR/css3-color/#transparency">module CSS3 Color, chapitre 3.2</a>, des navigateurs la gèrent déjà. D'après la spécification, <i>l'opacité peut être considérée conceptuellement comme une opération de post-traitement</i>, par conséquent le niveau de transparence choisi est appliqué à tout le contenu. +</p><p>Cela signifie que si vous avez un DIV contenant du texte, il est impossible d'avoir <b>du texte opaque sur un fond translucide</b>, car si vous définissez la propriété <i>opacity</i> pour l'élément DIV, tout son contenu hérite de la transparence, et il est impossible de l'enlever… par des moyens normaux. +</p><p>Si vous essayez cet exemple de code, vous découvrirez que <b>texteopaque</b> n'est pas opaque, il a hérité de l'attribut <code>opacity</code> de son parent et les redéfinitions de style sont ignorées pour la raison donnée ci-dessus. +</p> +<pre><div id="conteneur"> + <div id="texteopaque"> + Ceci est un texte normal + sur un fond translucide + </div> +</div> +</pre> +<pre>#conteneur { + background-color: #ffffff; /* le fond */ + filter:alpha(opacity=50); /* Internet Explorer 6 */ + -moz-opacity:0.5; /* Mozilla 1.6 et infér. */ + opacity: 0.5; /* CSS3 et Mozilla récents */ +} +#texteopaque { + filter:alpha(opacity=100); /* ignoré */ + -moz-opacity:1.0; /* ignoré */ + opacity: 1.0; /* ignoré */ +} +</pre> +<p>En réalité, deux manières d'obtenir cet effet existent et fonctionnent dans plusieurs navigateurs (prennent en compte le comportement <i>exotique</i> d'Internet Explorer) : +</p> +<ul><li> <b>Une hiérarchie réarrangée</b> : comme le problème principal est que le texte à rendre opaque fait partie de la boîte translucide, mettez-le en dehors de la boîte. +</li></ul> +<ul><li> <b>Une image PNG avec canal alpha</b> : utilisez une image de fond translucide. +</li></ul> +<h4 id="Hi.C3.A9rarchie_r.C3.A9arrang.C3.A9e"> Hiérarchie réarrangée </h4> +<p>Comme suggéré précédemment, cette astuce est basée sur un autre arrangement de la hiérarchie des éléments DIV. Comme tous les descendants du DIV translucide héritent de l'opacité de leurs parents, le truc est d'utiliser deux DIV séparés pour le fond transparent et le texte opaque, placés au même niveau de la hiérarchie et non l'un dans l'autre. Les deux feront partie d'un DIV parent à positionner de manière absolue ou flottant. +</p> +<pre><div id="conteneur"> + + <div id="texteopaque"> + Ceci est un texte normal + sur un fond translucide + </div> + + <div id="fondtranslucide"> + + </div> + +</div> +</pre> +<p>Afin de placer la zone <b>texteopaque</b> par dessus <b>fondtranslucide</b>, il faut utiliser le positionnement absolu et l'attribut <i>z-index</i> pour le DIV contenant le texte. De plus, la hauteur et la largeur des deux DIV doivent être identiques, elles doivent donc être déclarées explicitement. +</p> +<pre>#conteneur { + position: absolute; + top: 100px; left: 400px; /* placez-le où vous voulez */ +} + +#fondtranslucide { + width: 250px; height: 100px; /* pour correspondre à la taille du DIV */ + background-color: #ffffff; /* la couleur de fond */ + filter:alpha(opacity=50); + -moz-opacity:0.5; + opacity: 0.5; +} + +#texteopaque { + width: 250px; height: 100px; /* pour correspondre à la taille du DIV */ + background-color: transparent; /* fond transparent */ + position: absolute; /* positionnement absolu */ + z-index: 2; /* placement sur l'autre DIV */ +} +</pre> +<p><br> +</p> +<h5 id="Comment_retirer_la_hauteur_fixe_pr.C3.A9d.C3.A9finie"> Comment retirer la hauteur fixe prédéfinie </h5> +<p>Il est parfois problématique d'avoir une hauteur prédéfinie, parce que la longueur du texte contenu (et des images) n'est pas connue. Il est toujours possible d'éviter de fixer la hauteur, avec quelques ajouts supplémentaires. Le plus simple est de laisser grandir le DIV <b>texteopaque</b> autant que nécessaire, puis d'utiliser JavaScript pour redimensionner <b>fondtranslucide</b> à la même hauteur. Mais ce n'est pas une solution en pur CSS. +</p><p>Si vous voulez n'utiliser que CSS, la solution est assez simple, vous n'avez qu'à répéter le contenu de <b>texteopaque</b> dans <b>fondtranslucide</b> également. Ce n'est pas élégant, mais très facile à implémenter, notamment dans les pages générées dynamiquement. +</p> +<pre><div id="conteneur"> + + <div id="texteopaque"> + Ceci est un texte normal + sur un fond translucide + </div> + + <div id="fondtranslucide"> + Ceci est un texte normal + sur un fond translucide + </div> + +</div> +</pre> +<h4 id="Image_PNG_avec_canal_alpha"> Image PNG avec canal alpha </h4> +<p>Cette solution utilise toujours la hiérarchie parent-enfant, mais est en fait une technique hybride, car elle met en œuvre le fond translucide avec des moyens totalement différents selon le navigateur utilisé. +</p> +<ul><li> <b>Mozilla</b> : la translucidité est implémentée à l'aide d'une image PNG avec un canal alpha comme image de fond de l'élément conteneur. +</li></ul> +<ul><li> <b>Internet Explorer</b> : comme IE6 (et les versions précédentes) ne supporte pas les images PNG avec un canal alpha, la translucidité est implémentée avec le filtre alpha de l'exemple précédent, et l'héritage des descendants est écrasé à l'aide d'un comportement non-standard d'IE. +</li></ul> +<p>Notes et inconvénients pour cette solution : +</p> +<ul><li> Un autre DIV conteneur doit être ajouté pour que l'effet fonctionne sous Internet Explorer. +</li><li> Le DIV parent est positionné de manière absolue, et le nouveau DIV conteneur avec un fond translucide doit être un DIV normal. Celui qui contient le texte doit être positionné de manière absolue pour briser l'héritage de la transparence. +</li><li> Quelques hacks CSS doivent être utilisés pour que des règles CSS différentes s'appliquent selon le navigateur. +</li><li> Une image PNG spécifique doit être générée, avec le niveau de transparence souhaité. +</li></ul> +<pre><div id="conteneur"> + <div id="fondtranslucide"> + <div id="texteopaque"> + Ceci est un texte normal + sur un fond translucide + </div> + </div> +</div> +</pre> +<pre>#conteneur { + position: absolute; + width: 250px; + top: 400px; left: 100px; + } + +#fondtranslucide { + width: 250px; + background-image: url(transparent.png) !important; /* Mozilla uniquement */ + background-color: transparent !important; /* Mozilla uniquement */ + background-image: none; /* IE uniquement */ + background-color: #ffffff; /* IE uniquement */ + filter:alpha(opacity=50); /* IE uniquement */ + } + +#texteopaque { position: relative; } +</pre> +{{ languages( { "en": "en/Useful_CSS_tips/Color_and_Background" } ) }} diff --git a/files/fr/conflicting/web/css/column-gap/index.html b/files/fr/conflicting/web/css/column-gap/index.html new file mode 100644 index 0000000000..05b3e559d2 --- /dev/null +++ b/files/fr/conflicting/web/css/column-gap/index.html @@ -0,0 +1,128 @@ +--- +title: grid-column-gap +slug: Web/CSS/grid-column-gap +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/column-gap +translation_of_original: Web/CSS/grid-column-gap +--- +<div>{{CSSRef}}{{Deprecated_Header}}</div> + +<div class="note"> +<p><strong>Note :</strong> La propriété <code>grid-column-gap</code> a été fusionnée avec la propriété {{cssxref("column-gap")}} afin d'être remplacée par cette dernière.</p> +</div> + +<p>La propriété <strong><code>grid-column-gap</code></strong> définit l'espacement entre les colonnes d'une grille.</p> + +<div>{{EmbedInteractiveExample("pages/css/grid-column-gap.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<p>En termes de dimensionnement, cet espace est traité comme une piste supplémentaire de la longueur indiquée. Les valeurs négatives ne sont pas autorisées.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush: css no-line-numbers">/* Valeurs de longueur */ +grid-column-gap: 20px; +grid-column-gap: 1em; +grid-column-gap: 3vmin; +grid-column-gap: 0.5cm; + +/* Valeurs relatives à la taille */ +/* de l'élément englobant */ +/* Type <percentage> */ +grid-column-gap: 10%; + +/* Valeurs globales */ +grid-column-gap: inherit; +grid-column-gap: initial; +grid-column-gap: unset; +</pre> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code><length-percentage></code></dt> + <dd>La largeur de la « gouttière » placée entre les colonnes de la grille. Pour les valeurs exprimées en pourcentages, elles sont relatives aux dimensions de l'élément englobant.</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css; highlight[6]">#grid { + display: grid; + height: 100px; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: 100px; + grid-column-gap: 20px; +} + +#grid > div { + background-color: lime; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div id="grid"> + <div></div> + <div></div> + <div></div> +</div></pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples", "100%", "100px")}}</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 Box Alignment", "#propdef-grid-column-gap", "grid-column-gap")}}</td> + <td>{{Spec2("CSS3 Box Alignment")}}</td> + <td>Dépréciée afin d'être remplacée par {{cssxref("column-gap")}}.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Grid", "#gutters", "grid-column-gap")}}</td> + <td>{{Spec2("CSS3 Grid")}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<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.properties.grid-column-gap")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Versions standards non-préfixées : + <ul> + <li>{{cssxref("row-gap")}},</li> + <li>{{cssxref("column-gap")}},</li> + <li>{{cssxref("gap")}}</li> + </ul> + </li> + <li>{{cssxref("grid-row-gap")}}</li> + <li>{{cssxref("grid-gap")}}</li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base#Les_gouttières">Guide : les concepts de bases : les gouttières</a></li> +</ul> diff --git a/files/fr/conflicting/web/css/css_backgrounds_and_borders/index.html b/files/fr/conflicting/web/css/css_backgrounds_and_borders/index.html new file mode 100644 index 0000000000..8873196702 --- /dev/null +++ b/files/fr/conflicting/web/css/css_backgrounds_and_borders/index.html @@ -0,0 +1,162 @@ +--- +title: Arrière-plans et bordures CSS +slug: Web/CSS/Arrière-plans_et_bordures_CSS +tags: + - CSS + - Référence(2) +translation_of: Web/CSS/CSS_Backgrounds_and_Borders +translation_of_original: Web/CSS/CSS_Background_and_Borders +--- +<div>{{CSSRef}}</div> + +<p><strong>Les arrière-plans et bordures CSS</strong> forment un module CSS qui définit la façon dont les arrière-plans et les bordures des éléments sont décrits. Les bordures peuvent ainsi être des lignes ou des images et les boîtes peuvent avoir un ou plusieurs arrière-plan, des coins arrondis, des ombres.</p> + +<h2 id="Référence">Référence</h2> + +<h3 id="Propriétés_CSS">Propriétés CSS</h3> + +<div class="index"> +<ul> + <li>{{cssxref("background")}}</li> + <li>{{cssxref("background-attachment")}}</li> + <li>{{cssxref("background-clip")}}</li> + <li>{{cssxref("background-color")}}</li> + <li>{{cssxref("background-image")}}</li> + <li>{{cssxref("background-origin")}}</li> + <li>{{cssxref("background-position")}}</li> + <li>{{cssxref("background-repeat")}}</li> + <li>{{cssxref("background-size")}}</li> + <li>{{cssxref("border")}}</li> + <li>{{cssxref("border-bottom")}}</li> + <li>{{cssxref("border-bottom-color")}}</li> + <li>{{cssxref("border-bottom-left-radius")}}</li> + <li>{{cssxref("border-bottom-right-radius")}}</li> + <li>{{cssxref("border-bottom-style")}}</li> + <li>{{cssxref("border-bottom-width")}}</li> + <li>{{cssxref("border-collapse")}}</li> + <li>{{cssxref("border-color")}}</li> + <li>{{cssxref("border-image")}}</li> + <li>{{cssxref("border-image-outset")}}</li> + <li>{{cssxref("border-image-repeat")}}</li> + <li>{{cssxref("border-image-slice")}}</li> + <li>{{cssxref("border-image-source")}}</li> + <li>{{cssxref("border-image-width")}}</li> + <li>{{cssxref("border-left")}}</li> + <li>{{cssxref("border-left-color")}}</li> + <li>{{cssxref("border-left-style")}}</li> + <li>{{cssxref("border-left-width")}}</li> + <li>{{cssxref("border-radius")}}</li> + <li>{{cssxref("border-right")}}</li> + <li>{{cssxref("border-right-color")}}</li> + <li>{{cssxref("border-right-style")}}</li> + <li>{{cssxref("border-right-width")}}</li> + <li>{{cssxref("border-style")}}</li> + <li>{{cssxref("border-top")}}</li> + <li>{{cssxref("border-top-color")}}</li> + <li>{{cssxref("border-top-left-radius")}}</li> + <li>{{cssxref("border-top-right-radius")}}</li> + <li>{{cssxref("border-top-style")}}</li> + <li>{{cssxref("border-top-width")}}</li> + <li>{{cssxref("border-width")}}</li> + <li>{{cssxref("box-shadow")}}</li> +</ul> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/fr/docs/Web/CSS/CSS_Background_and_Borders/Utiliser_des_fonds_multiples">Utiliser plusieurs arrière-plans CSS</a></dt> + <dd>Cet article explique comment définir plusieurs arrière-plans sur des éléments et la façon dont ceux-ci interagissent.</dd> + <dt><a href="/fr/docs/Web/CSS/CSS_Background_and_Borders/Scaling_background_images">Redimensionner des images d'arrière-plan</a></dt> + <dd>Cet article décrit comment modifier l'apparence des images d'arrière-plan en les étirant ou en les retirant afin de couvrir (ou non) tout un élément.</dd> +</dl> + +<h2 id="Outils">Outils</h2> + +<dl> + <dt><a href="/fr/docs/Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-image">Générateur de <code>border-image</code></a></dt> + <dd>Cet outil interactif permet de créer, de façon visuelle, des bordures avec images pour {{cssxref("border-image")}}.</dd> + <dt><a href="/fr/docs/Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-radius">Générateur de <code>border-radius</code></a></dt> + <dd>Cet outil interactif permet de créer des bordures arrondies pour {{cssxref("border-radius")}}.</dd> + <dt><a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Générateur_box-shadow">Générateur de <code>box-shadow</code></a></dt> + <dd>Cet outil interactif permet de créer des ombres portées derrière les éléments avec {{cssxref("box-shadow")}}.</dd> +</dl> + +<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 Backgrounds')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#border')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Support simple</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>4.0</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Support simple</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.9.2")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/fr/conflicting/web/css/css_color/index.html b/files/fr/conflicting/web/css/css_color/index.html new file mode 100644 index 0000000000..fb589fa689 --- /dev/null +++ b/files/fr/conflicting/web/css/css_color/index.html @@ -0,0 +1,133 @@ +--- +title: Couleurs CSS +slug: Web/CSS/Couleurs_CSS +tags: + - Aperçu + - CSS + - CSS Color + - Reference +translation_of: Web/CSS/CSS_Color +translation_of_original: Web/CSS/CSS_Colors +--- +<div>{{CSSRef}}</div> + +<p><strong>Les couleurs CSS</strong> (<em>CSS Color</em> en anglais) forment un module CSS qui décrit la manipulation des couleurs, les types de données liées aux couleurs et l'application de la transparence en CSS.</p> + +<h2 id="Référence">Référence</h2> + +<h3 id="Propriétés_CSS">Propriétés CSS</h3> + +<div class="index"> +<ul> + <li>{{cssxref("color")}}</li> + <li>{{cssxref("opacity")}}</li> +</ul> +</div> + +<h3 id="Types_de_donnée">Types de donnée</h3> + +<div class="index"> +<ul> + <li>{{cssxref("<color>")}}</li> +</ul> +</div> + +<h2 id="Guide">Guide</h2> + +<dl> + <dt><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs sur des éléments HTML grâce à CSS</a></dt> + <dd>Un guide qui illustre comment utiliser CSS afin d'appliquer des couleurs sur différents contenus.</dd> +</dl> + +<h2 id="Outils">Outils</h2> + +<dl> + <dt><a href="/fr/docs/Web/CSS/Couleurs_CSS/Sélecteur_de_couleurs">Un sélecteur de couleurs</a></dt> + <dd>Cet outil vous permet de créer, ajuster et manipuler des couleurs.</dd> +</dl> + +<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 Colors')}}</td> + <td>{{Spec2('CSS3 Colors')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'colors.html')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS1')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Support simple</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>3.0</td> + <td>3.5</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Support simple</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Attention, en CSS, les dégradés de couleurs ne sont pas des couleurs mais <a href="/fr/docs/Web/CSS/CSS_Images">des images</a>.</li> + <li>Les autres propriétés relatives aux couleurs et qui font partie d'autres modules de spécification : {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}.</li> +</ul> diff --git a/files/fr/conflicting/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html b/files/fr/conflicting/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html new file mode 100644 index 0000000000..b36e1eb0f4 --- /dev/null +++ b/files/fr/conflicting/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html @@ -0,0 +1,121 @@ +--- +title: Rétrocompatibilité de flexbox +slug: Web/CSS/CSS_Flexible_Box_Layout/Rétrocompatibilite_de_flexbox +tags: + - '@supports' + - Boîtes flexibles + - CSS + - Guide + - Intermediate + - flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox +--- +<div>{{CSSRef}}</div> + +<p class="summary">Les boîtes flexibles (<em>flexbox</em>) sont largement prises en charge parmi les navigateurs modernes. Toutefois, quelques problèmes peuvent survenir. Dans ce guide, nous verrons précisément quelle est la prise en charge des boîtes flexibles dans les navigateurs. Nous verrons les problèmes éventuels ainsi que les ressources et méthodes afin de créer des méthodes de contournement ou des alternatives.</p> + +<h2 id="Il_était_une_fois_flexbox…">Il était une fois <em>flexbox</em>…</h2> + +<p>Comme toute spécification CSS, la spécification Flexbox a vu de nombreuses modifications avant d'atteindre le statut de <em>Candidate Recommendation</em> dont elle dispose aujourd'hui. Dans cet état actuel, il ne devrait pas y avoir de modification majeur dans la spécification, mais cette stabilité n'a pas toujours existé par le passé.</p> + +<p>Les boîtes flexibles ont été implémentées de façon expérimentale dans plusieurs navigateurs. À cette époque, créer une implémentation expérimentale consistait à utiliser un préfixe spécifique. Ces préfixes devaient permettre aux implémentations de la spécification d'être testées et manipulées par les développeurs des navigateurs et par les développeurs web, sans qu'il y ait de conflit avec les autres implémentations. On ne devait pas utiliser d'implémentation expérimentale pour du code de production. Toutefois, les préfixes ont fini par être utilisés en production et les modifications apportées à la spécification expérimentale nécessitaient une réactivité des développeurs web pour maintenir leurs sites.</p> + +<p><a href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">En 2009</a>, la spécification était plutôt différente. Pour créer un conteneur flexible, il fallait utiliser <code>display: box</code> et on disposait ensuite de différentes propriétés <code>box-*</code> qui permettaient d'obtenir des résultats semblables à ceux qu'offrent les boîtes flexibles actuelles.</p> + +<p>Vint ensuite <a href="https://www.w3.org/TR/2012/WD-css3-flexbox-20120322/">une mise à jour de la spécification</a> pour mettre à jour la syntaxe : <code>display: flexbox</code> — là encore, ces valeurs étaient préfixées.</p> + +<p>Enfin, la spécification a été mise à jour pour définir <code>display: flex</code> comme façon de créer un conteneur flexible. La prise en charge des navigateurs sur la version à jour de la spécification est excellent à partir de ce moment.</p> + +<p>Quelques anciens articles font référence à d'anciennes versions de la spécification. Ceux-ci sont facilement identifiables en raison des modifications concernant la création d'un conteneur flexible. Si vous lisez des règles telles que <code>display: box</code> ou <code>display: flexbox</code>, vous pouvez en déduire qu'il s'agit d'informations obsolètes.</p> + +<h2 id="État_de_la_compatibilité_des_navigateurs">État de la compatibilité des navigateurs</h2> + +<p>La prise en charge des navigateurs pour les boîtes flexibles est excellente et la grande partie des navigateurs n'ont pas besoin de préfixe. Safari a été le dernier des principaux navigateurs à retirer les préfixes avec la sortie de Safari 9 en 2015. Les deux navigateurs pour lesquels il est nécessaire de faire attention à la compatibilité sont :</p> + +<ul> + <li>Internet Explorer 10 qui implémentait la version <code>display: flexbox</code> avec le préfixe <code>-ms-</code>.</li> + <li>UC Browser qui prend en charge la version de 2009 avec <code>display: box</code> et avec le préfixe <code>-webkit-</code>.</li> +</ul> + +<p>On notera qu'Internet Explorer 11 prend bien en charge la spécification actuelle avec <code>display: flex</code> mais que de nombreux bugs sont présents dans cette implémentation.</p> + +<h2 id="Problèmes_fréquents">Problèmes fréquents</h2> + +<p>La plupart des problèmes relatifs aux boîtes flexibles sont liés aux modifications de la spécification lors de son développement et au fait que de nombreux développeurs ont essayé d'utiliser des implémentations expérimentales en production. Si vous souhaitez garantir une rétrocompatibilité avec certaines anciennes versions de navigateurs et notamment IE10 et IE11, le site <a href="https://github.com/philipwalton/flexbugs">Flexbugs</a> représente une ressource précieuse. Vous pourrez voir que de nombreux bugs sont présents pour d'anciennes versions des navigateurs et sont désormais corrigés pour les versions actuelles. Chacun de ces bugs possède une méthode de contournement associée, ce qui peut faire gagner un temps précieux.</p> + +<p>Si vous souhaitez inclure de très anciens navigateurs prenant en charge les boîtes flexibles, il vous faudra inclure les préfixes éditeurs dans votre feuille CSS, en plus de la version non-préfixée. Cela devient de moins en moins nécessaire vue l'étendue de la compatibilité actuelle.</p> + +<pre class="brush: css">.wrapper { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +}</pre> + +<p><a href="https://autoprefixer.github.io/">Autoprefixer Online</a> est un outil utile pour déterminer quels préfixes sont recommandés selon les versions des navigateurs qu'on souhaite prendre en charge. Vous pouvez également consulter <a href="https://caniuse.com/#feat=flexbox">Can I Use</a> ou les tableaux de compatibilité en bas des pages de référence MDN pour savoir quand les préfixes ont été retirés des navigateurs.</p> + +<h2 id="Techniques_de_recours">Techniques de recours</h2> + +<p>La mise en place des boîtes flexibles dans un document est effectuée grâce à la propriété {{cssxref("display")}}. Lorsqu'on souhaite prendre en charge de très anciens navigateurs qui ne prennent pas du tout en charge les boîtes flexibles, des méthodes alternatives peuvent être construites en surchargeant une méthode de disposition par une autre. La spécification définit ce qui se produit si on utilise une autre méthode de disposition sur un élément qui devient ensuite un élément flexible.</p> + +<h3 id="Éléments_flottants">Éléments flottants</h3> + +<blockquote> +<p>“<code>float</code> et <code>clear</code> ne créent pas de flottement ou de dégagement pour les éléments flexibles et ne les retirent pas du flux.” - <a href="https://www.w3.org/TR/css-flexbox-1/#flex-containers">3. Conteneurs flexibles</a></p> +</blockquote> + +<p>Dans l'exemple qui suit, on a deux blocs flottants et on applique ensuite <code>display: flex</code> sur le conteneur. Les éléments sont alors des éléments flexibles ce qui signifie qu'ils sont étirés sur des hauteurs égales. Tout comportement associé au flottement n'aura pas lieu.</p> + +<p>Pour tester le comportement alternatif, vous pouvez retirer <code>display: flex</code> du conteneur englobant.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/float.html", '100%', 550)}}</p> + +<h3 id="display_inline-block"><code>display: inline-block</code></h3> + +<p>Lorsqu'un élément disposé avec <code>inline-block</code> devient un élément flexible, cet élément devient analogue à un bloc et le comportement de <code>display: inline-block</code> qui permet de conserver les espaces blancs entre les éléments ne s'applique plus.</p> + +<p>Vous pouvez retirer la règle avec <code>display: flex</code> dans l'exemple qui suit pour voir le comportement alternatif. Vous verrez de l'espace ajouté entre les éléments car c'est ce que préfère <code>display: inline-block</code>.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/inline-block.html", '100%', 550)}}</p> + +<h3 id="display_table-"><code>display: table-</code><em> </em></h3> + +<p>Les propriétés CSS relatives aux dispositions en tableaux s'avèrent potentiellement très utiles comme méthode de recours car elles permettent d'obtenir des organisations de contenu analogues avec des colonnes sur toute la hauteur, du centrage vertical et car elles fonctionnent jusqu'à Internet Explorer 8.</p> + +<p>Si vous utilisez <code>display: table-cell</code> sur un élément HTML, cet élément récupèrera la mise en forme d'une cellule de tableau HTML. Pour celles-ci, CSS crée des boîtes anonymes qui représentent ces éléments et il n'est pas nécessaire d'envelopper chaque élément dans un conteneur pour représenter une ligne puis dans un second qui représente le tableau. Il n'est pas possible de mettre en forme ces boîtes anonymes, celles-ci servent uniquement à corriger la structure.</p> + +<p>Si vous déclarez ensuite <code>display: flex</code> sur l'élément parent, ces boîtes anonymes ne sont pas créées et l'élément redevient un enfant direct qui peut devenir un élément flexible, perdant tout aspect relatif au tableau.</p> + +<blockquote> +<p>“Note : certaines valeurs de <code>display</code> déclenchent normalement la création de boîtes anonymes autour de la boîte originale. Si une telle boîte est un élément flexible, cet élément devient un bloc puis la création des boîtes anonymes n'a pas lieu. Ainsi, deux éléments flexibles adjacents avec <code>display: table-cell</code> deviendront deux éléments flexibles distincts avec <code>display: block</code> plutôt que d'être enveloppés au sein d'un même tableau anonyme.” - <a href="https://www.w3.org/TR/css-flexbox-1/#flex-items">4. Éléments flexibles</a></p> +</blockquote> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/table-cell.html", '100%', 550)}}</p> + +<h3 id="La_propriété_vertical-align">La propriété <code>vertical-align</code></h3> + +<p>L'exemple qui suit illustre l'utilisation de la propriété {{cssxref("vertical-align")}} associée au mode <code>display: inline-block</code>. Les deux modes <code>display: table-cell</code> et <code>display: inline-block</code> permettent d'utiliser cette propriété. La propriété <code>vertical-align</code> permet d'opérer un alignement vertical avant l'application des boîtes flexibles. Cette propriété est ignorée avec les boîtes flexibles et elle peut donc être utilisée avec <code>display: table-cell</code> ou <code>display: inline-block</code> comme méthode d'alignement alternative aux propriétés d'alignement des boîtes flexibles.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/vertical-align.html", '100%', 550)}}</p> + +<h2 id="Requêtes_de_fonctionnalités_et_flexbox">Requêtes de fonctionnalités et <em>flexbox</em></h2> + +<p>Il est possible d'utiliser <a href="/fr/docs/Web/CSS/%40supports">les requêtes de fonctionnalité (<em>feature queries</em>)</a> afin de détecter la prise en charge des boîtes flexibles :</p> + +<pre class="brush: css">@supports (display: flex) { + // code utilisé pour les navigateurs qui + // prennent en charge cette fonctionnalité +}</pre> + +<p>On notera qu'Internet Explorer 11 ne prend pas en charge les requêtes de fonctionnalité mais prend bien en charge les boîtes flexibles. Si vous choisissez de considérer l'implémentation d'IE11 comme étant trop erronée et que vous souhaitez que ce navigateur utilise votre code de recours, vous pouvez alors utiliser les requêtes de fonctionnalité pour ne servir le code <em>flexbox</em> qu'aux navigateurs qui disposent d'une prise en charge suffisante. Pour rappel, si on souhaite inclure les versions des navigateurs qui utilisaient des préfixes spécifiques, on devra inclure la version préfixée dans la requête de fonctionnalité. La requête suivant inclura par exemple UC Browser qui prend en charge les requêtes de fonctionnalités et une ancienne syntaxe, préfixée, pour les boîtes flexibles :</p> + +<pre class="brush: css">@supports (display: flex) or (display: -webkit-box) { + // code pour les navigateurs qui + // prennent en charge cette fonctionnalité +}</pre> + +<p>Pour plus d'informations sur les requêtes de fonctionnalités, vous pouvez lire <em><a href="https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/">Using Feature Queries in CSS</a></em><a href="https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/"> (en anglais)</a> sur le blog Hacks de Mozilla.</p> + +<h2 id="Conclusion">Conclusion</h2> + +<p>Bien que nous ayons vu ici certains problèmes potentiels et méthodes alternatives, les boîtes flexibles peuvent tout à fait être utilisées en production et de façon généralisée. Ce guide vous sera utile si vous rencontrez un problème particulier ou qu'il vous faut prendre en charge de plus vieux navigateurs.</p> diff --git a/files/fr/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html b/files/fr/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html new file mode 100644 index 0000000000..f91090e0dc --- /dev/null +++ b/files/fr/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html @@ -0,0 +1,188 @@ +--- +title: Utiliser les boîtes flexibles pour les applications web +slug: Web/CSS/CSS_Flexible_Box_Layout/Boîtes_flexibles_pour_applications_web +tags: + - Avancé + - CSS + - Guide +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox +translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications +--- +<div>{{CSSRef}}</div> + +<p>Les boîtes flexibles permettent de concevoir des dispositions qui s'appliquent mieux à des environnements mobiles et de bureau et qui peuvent servir aux applications web. Fini d'utiliser des éléments {{HTMLElement("div")}} flottants, <a href="/fr/docs/Web/CSS/position#Positionnement_absolu">le positionnement absolu</a> et des bidouilles JavaScript. Quelques lignes CSS permettent de construire des dispositions verticales et horizontales, flexibles. Voici quelques exemples de cas d'utilisation :</p> + +<ul> + <li>Centrer un élément au milieu d'une page</li> + <li>Définir des conteneurs qui s'organisent verticalement, l'un après l'autre</li> + <li>Créer une ligne de boutons ou d'autres éléments qui se condensent verticalement sur les écrans de petite taille.</li> +</ul> + +<p>Cet article ne couvre que l'utilisation des propriétés relatives aux boîtes flexibles non préfixées et standard. Pour plus d'informations sur les préfixes et les anciens navigateurs, se référer <a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS/Utilisation_des_flexbox_en_CSS">au guide plus générique sur la manipulation des boîtes flexibles en CSS</a>.</p> + +<h2 id="Les_bases">Les bases</h2> + +<p>Pour qu'un élément flotte dans une boîte flexible, on peut utiliser la propriété {{cssxref("display")}} avec la valeur <code>flex</code> puis définir {{cssxref("flex-flow")}} avec la valeur <code>row</code> (si on souhaite que les éléments s'organisent horizontalement) ou avec la valeur <code>column</code> (si on souhaite que les éléments s'empilent verticalement). Si on veut avoir une boîte flexible horizontale et que les éléments « passent à la ligne » verticalement, on pourra définir la propriété <code>wrap</code>.</p> + +<p>Ensuite, pour chaque élément qui s'inscrit dans le conteneur flexible, on pourra définir la propriété {{cssxref("flex")}}. Généralement, on utilisera les valeurs suivantes :</p> + +<ul> + <li>Si on veut qu'un élément n'occupe que la place qui lui est allouée (ex. un bouton), on pourra utiliser <code>flex: none</code> that expands to <code>0 0 auto</code>.</li> + <li>Si on veut définir la taille explicite d'un élément, on pourra utiliser <code>flex: 0 0 <em>taille</em></code>. Par exemple : <code>flex 0 0 60px</code>.</li> + <li>Si on veut qu'un élément occupe tout l'espace disponible de façon équitable avec ses voisins, on pourra utiliser <code>flex: auto</code>. It expands to <code>1 1 auto</code>.</li> +</ul> + +<p>Il existe bien entendu d'autres possibilités en dehors de cas d'usage simples. Voici quelques exemples d'application.</p> + +<h2 id="Centrer_un_élément">Centrer un élément</h2> + +<p>Pour ce cas, le plus simple consiste à créer deux boîtes flexibles, l'une dans l'autre. Chaque boîte flexible aura trois élément, deux autour de l'élément centré ainsi que l'élément en question.</p> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css;">.vertical-box { + display: flex; + height: 400px; + width: 400px; + flex-flow: column; +} +.horizontal-box { + display: flex; + flex-flow: row; +} +.spacer { + flex: auto; + background-color: black; +} +.centered-element { + flex: none; + background-color: white; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html;"><div class="vertical-box"> + <div class="spacer"></div> + <div class="centered-element horizontal-box"> + <div class="spacer"></div> + <div class="centered-element">Centered content</div> + <div class="spacer"></div> + </div> + <div class="spacer"></div> +</div> +</pre> + +<h3 id="Resultat">Resultat</h3> + +<p>{{EmbedLiveSample('Centrer_un_élément', 500, 500)}}</p> + +<h2 id="Répartir_des_conteneurs_verticalement">Répartir des conteneurs verticalement</h2> + +<p>Prenons une page qui se compose d'un en-tête, d'une zone de contenu et d'un pied de page. On souhaite que l'en-tête et le pied de page aient la même taille mais que le contenu s'adapte selon l'espace disponible. Pour cela, on peut utiliser la propriété {{cssxref("flex")}} avec la valeur <code>auto</code> pour le contenu et la valeur <code>none</code> pour l'en-tête et le pied de page.</p> + +<h3 id="CSS_2">CSS</h3> + +<pre class="brush: css;">.vertical-box { + display: flex; + height: 400px; + width: 400px; + flex-flow: column; +} +.fixed-size { + flex: none; + height: 30px; + background-color: black; + text-align: center; +} +.flexible-size { + flex: auto; + background-color: white; +} +</pre> + +<h3 id="HTML_2">HTML</h3> + +<pre class="brush: html;"><div id="document" class="vertical-box"> + <div class="fixed-size"><button id="increase-size">Augmenter la taille du conteneur</button></div> + <div id="flexible-content" class="flexible-size"></div> + <div class="fixed-size"><button id="decrease-size">Réduire la taille du conteneur</button></div> +</div> +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js;">var height = 400; +document.getElementById('increase-size').onclick=function() { + height += 10; + if (height > 500) height = 500; + document.getElementById('document').style.height = (height + "px"); +} + +document.getElementById('decrease-size').onclick=function() { + height -= 10; + if (height < 300) height = 300; + document.getElementById('document').style.height = (height + "px"); +}</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample('Répartir_des_conteneurs_verticalement', 500, 500)}}</p> + +<h2 id="Créer_un_conteneur_horizontal_qui_se_replie">Créer un conteneur horizontal qui se replie</h2> + +<p>Dans certains cas, on veut pouvoir afficher des informations horizontalement lorsque l'écran le permet et les replier en vertical lorsque la taille est trop réduire. On peut obtenir cet effet simplement avec les boîtes flexibles en utilisant la valeur <code>wrap</code> sur la propriété {{cssxref("flex-flow")}}.</p> + +<h3 id="CSS_3">CSS</h3> + +<pre class="brush: css;">.horizontal-container { + display: flex; + width: 300px; + flex-flow: row wrap; +} +.fixed-size { + flex: none; + width: 100px; + background-color: black; + color: white; + text-align: center; +} +</pre> + +<h3 id="HTML_3">HTML</h3> + +<pre class="brush: html;"><div id="container" class="horizontal-container"> + <div class="fixed-size">Élément 1</div> + <div class="fixed-size">Élément 2</div> + <div class="fixed-size">Élément 3</div> +</div> +<button id="increase-size">Augmenter la taille du conteneur</button> +<button id="decrease-size">Réduire la taille du conteneur</button> +</pre> + +<h3 id="JavaScript_2">JavaScript</h3> + +<pre class="brush: js;">var width = 300; + +document.getElementById('increase-size').onclick=function() { + width += 100; + if (width > 300) width = 300; + document.getElementById('container').style.width = (width + "px"); +} + +document.getElementById('decrease-size').onclick=function() { + width -= 100; + if (width < 100) width = 100; + document.getElementById('container').style.width = (width + "px"); +} +</pre> + +<h3 id="Résultat_2">Résultat</h3> + +<p>{{EmbedLiveSample('Créer_un_conteneur_horizontal_qui_se_replie', 500, 200)}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS/Utilisation_des_flexbox_en_CSS">Manipuler les boîtes flexibles</a></li> +</ul> diff --git a/files/fr/conflicting/web/css/cursor/index.html b/files/fr/conflicting/web/css/cursor/index.html new file mode 100644 index 0000000000..a7121bf02e --- /dev/null +++ b/files/fr/conflicting/web/css/cursor/index.html @@ -0,0 +1,16 @@ +--- +title: '-moz-cell' +slug: Web/CSS/-moz-cell +tags: + - CSS + - Obsolete + - Propriété + - Reference +translation_of: Web/CSS/cursor +translation_of_original: Web/CSS/-moz-cell +--- +<div class="boxed translate-rendered"> +<div>{{CSSRef}}{{deprecated_header}}</div> + +<p><em>Ne pas utiliser cette valeur ! </em>C'est la valeur <code>cursor</code> {{cssxref("cursor#cell","cell")}} qui doit être utilisée à la place.</p> +</div> diff --git a/files/fr/conflicting/web/css/filter_effects/index.html b/files/fr/conflicting/web/css/filter_effects/index.html new file mode 100644 index 0000000000..6976999a5f --- /dev/null +++ b/files/fr/conflicting/web/css/filter_effects/index.html @@ -0,0 +1,115 @@ +--- +title: Filters Effects +slug: Web/CSS/Filters_Effects +tags: + - CSS + - Reference +translation_of: Web/CSS/Filter_Effects +translation_of_original: Web/CSS/Filters_Effects +--- +<div>{{CSSRef}}</div> + +<p><em><strong>Filter Effects</strong></em> (ou module des effets de filtre) est un module CSS qui définit une manière de traiter le rendu des éléments avant qu'ils ne soient affichés dans le document.</p> + +<h2 id="Référence">Référence</h2> + +<h3 id="Propriétés_CSS">Propriétés CSS</h3> + +<div class="index"> +<ul> + <li>{{cssxref("filter")}}</li> +</ul> +</div> + +<h3 id="Fonctions_CSS">Fonctions CSS</h3> + +<div class="index"> +<ul> + <li>{{cssxref("filter", "blur()", "#blur()")}}</li> + <li>{{cssxref("filter", "brightness()", "#brightness()")}}</li> + <li>{{cssxref("filter", "contrast()", "#contrast()")}}</li> + <li>{{cssxref("filter", "drop-shadow()", "#drop-shadow()")}}</li> + <li>{{cssxref("filter", "grayscale()", "#grayscale()")}}</li> + <li>{{cssxref("filter", "hue-rotate()", "#hue-rotate()")}}</li> + <li>{{cssxref("filter", "invert()", "#invert()")}}</li> + <li>{{cssxref("filter", "opacity()", "#opacity()")}}</li> + <li>{{cssxref("filter", "saturate()", "#saturate()")}}</li> + <li>{{cssxref("filter", "sepia()", "#sepia()")}}</li> + <li>{{cssxref("filter", "url()", "#url()")}}</li> +</ul> +</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('Filters 1.0', '#FilterProperty', 'filter')}}</td> + <td>{{Spec2('Filters 1.0')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Edge</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Support simple</td> + <td>{{CompatChrome("18.0")}}{{property_prefix("-webkit")}}</td> + <td>{{CompatGeckoDesktop(35)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera("15.0")}}{{property_prefix("-webkit")}}</td> + <td>{{CompatSafari("6.0")}}{{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Edge</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Support simle</td> + <td>{{CompatAndroid("4.4")}}{{property_prefix("-webkit")}}</td> + <td>{{CompatGeckoDesktop(35)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>22.0 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> + <td> + <p>6.0 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}</p> + </td> + </tr> + </tbody> +</table> +</div> diff --git a/files/fr/conflicting/web/css/float/index.html b/files/fr/conflicting/web/css/float/index.html new file mode 100644 index 0000000000..471bfdc5af --- /dev/null +++ b/files/fr/conflicting/web/css/float/index.html @@ -0,0 +1,43 @@ +--- +title: none +slug: Web/CSS/none +tags: + - CSS + - Référence CSS +translation_of: Web/CSS/float +translation_of_original: Web/CSS/none +--- +<p>{{ CSSRef() }}</p> +<h2 id="Résumé">Résumé</h2> +<p><code>none</code> est une valeur commune pour la plupart des propriétés CSS et souvent c'est la valeur par défaut. On peut la comparer à la valeur {{ Cssxref("normal") }} qui peut être utilisée de manière similaire pour d'autres propriétés.</p> +<h2 id="Utilisation">Utilisation</h2> +<div class="warning"> + Cette liste n'est pas exhaustive et les propriétés qui ne sont pas encore supportées par les différents navigateurs ne sont pas incluses.</div> +<ul> + <li>{{ Cssxref("animation-name") }}</li> + <li>{{ Cssxref("background-image") }}</li> + <li>{{ Cssxref("border-style") }} ({{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-left-style") }}, {{ Cssxref("border-right-style") }} et {{ Cssxref("border-top-style") }}</li> + <li>{{ Cssxref("clear") }}</li> + <li>{{ Cssxref("content") }}</li> + <li>{{ Cssxref("display") }}</li> + <li>{{ Cssxref("float") }}</li> + <li>{{ Cssxref("font-size-adjust") }}</li> + <li>{{ Cssxref("list-style-image") }}</li> + <li>{{ Cssxref("list-style-type") }}</li> + <li>{{ Cssxref("max-height") }}</li> + <li>{{ Cssxref("max-width") }}</li> + <li>{{ Cssxref("outline-style") }}</li> + <li>{{ Cssxref("quotes") }}</li> + <li>{{ Cssxref("resize") }}</li> + <li>{{ Cssxref("text-decoration") }}</li> + <li>{{ Cssxref("text-transform") }}</li> +</ul> +<p><u><strong>Extensions Mozilla :</strong></u></p> +<ul> + <li>{{ Cssxref("-moz-transform") }}</li> + <li>{{ Cssxref("-moz-transition-property") }}</li> + <li>{{ Cssxref("-moz-text-blink") }}</li> + <li>{{ Cssxref("-moz-user-input") }}</li> + <li>{{ Cssxref("-moz-user-select") }}</li> + <li>{{ Cssxref("-moz-window-shadow") }}</li> +</ul> diff --git a/files/fr/conflicting/web/css/font-variant/index.html b/files/fr/conflicting/web/css/font-variant/index.html new file mode 100644 index 0000000000..5b611f0369 --- /dev/null +++ b/files/fr/conflicting/web/css/font-variant/index.html @@ -0,0 +1,36 @@ +--- +title: normal +slug: Web/CSS/normal +tags: + - CSS + - Référence CSS +translation_of: Web/CSS/font-variant +translation_of_original: Web/CSS/normal +--- +<p>{{ CSSRef() }}</p> +<h2 id="Résumé">Résumé</h2> +<p><code>normal</code> est une valeur commune pour certaines propriétés CSS et souvent c'est la valeur par défaut. On peut la comparer à la valeur {{ Cssxref("none") }} qui peut être utilisée de manière similaire pour d'autres propriétés.</p> +<h2 id="Utilisation">Utilisation</h2> +<div class="warning"> + Cette liste n'est pas exhaustive et les propriétés qui ne sont pas encore supportées par les différents navigateurs ne sont pas incluses.</div> +<ul> + <li>{{ Cssxref("animation-direction") }}</li> + <li>{{ Cssxref("content") }}</li> + <li>{{ Cssxref("counter-increment") }}</li> + <li>{{ Cssxref("counter-reset") }}</li> + <li>{{ Cssxref("font-style") }}</li> + <li>{{ Cssxref("font-variant") }}</li> + <li>{{ Cssxref("font-weight") }}</li> + <li>{{ Cssxref("letter-spacing") }}</li> + <li>{{ Cssxref("white-space") }}</li> + <li>{{ Cssxref("word-spacing") }}</li> + <li>{{ Cssxref("word-wrap") }}</li> +</ul> +<p><u><strong>Extensions Mozilla :</strong></u></p> +<ul> + <li>{{ Cssxref("-moz-appearance") }}</li> + <li>{{ Cssxref("-moz-box-direction") }}</li> + <li>{{ Cssxref("-moz-column-gap") }}</li> + <li>{{ Cssxref("-moz-column-rule-width") }}</li> +</ul> +<p>{{ languages( { "en": "en/CSS/normal", "es": "es/CSS/normal" } ) }}</p> diff --git a/files/fr/conflicting/web/css/index.html b/files/fr/conflicting/web/css/index.html new file mode 100644 index 0000000000..213bc187b5 --- /dev/null +++ b/files/fr/conflicting/web/css/index.html @@ -0,0 +1,25 @@ +--- +title: Astuces CSS +slug: Astuces_CSS +tags: + - CSS +translation_of: Web/CSS +translation_of_original: Useful_CSS_tips +--- +<p> +</p><p>Cette page présente quelques astuces concernant l'utilisation de CSS. Chaque astuce est prévue pour être aussi courte que possible et fournir les informations nécessaires sur les propriétés et caractéristiques les plus recherchées mais peu connues ou sujettes à des erreurs fréquentes. +</p> +<h4 id="Astuces_CSS:Couleurs_et_fonds"> <a href="fr/Astuces_CSS/Couleurs_et_fonds">Astuces CSS:Couleurs et fonds</a> </h4> +<dl><dd> <a href="fr/Astuces_CSS/Couleurs_et_fonds#Fond_translucide">Du texte opaque sur un fond translucide</a> +</dd></dl> +<h4 id="Astuces_CSS:Tableaux"> <a href="fr/Astuces_CSS/Tableaux">Astuces CSS:Tableaux</a> </h4> +<dl><dd> <a href="fr/Astuces_CSS/Tableaux#Centrage">Comment centrer un tableau</a> +</dd><dd> <a href="fr/Astuces_CSS/Tableaux#Bordures">La bonne bordure pour votre tableau</a> +</dd><dd> <a href="fr/Astuces_CSS/Tableaux#Style_des_colonnes">Donnez un style à vos colonnes avec une solution en pur CSS</a> +</dd><dd> <a href="fr/Astuces_CSS/Tableaux#En-t.C3.AAtes_fixes">Un tableau dont le contenu peut défiler mais les en-têtes restent fixes</a> +</dd></dl> +<h4 id="Astuces_CSS:Liens"> <a href="fr/Astuces_CSS/Liens">Astuces CSS:Liens</a> </h4> +<dl><dd> <a href="fr/Astuces_CSS/Liens#Pseudo-classes_d.27ancres">L'ordre correct pour les pseudo-classes d'ancres</a> +</dd><dd> <a href="fr/Astuces_CSS/Liens#Survol_sans_texte">Comportement de survol quand il n'y a pas de texte</a> +</dd></dl> +{{ languages( { "en": "en/Useful_CSS_tips" } ) }} diff --git a/files/fr/conflicting/web/css/mask-image/index.html b/files/fr/conflicting/web/css/mask-image/index.html new file mode 100644 index 0000000000..2303f48997 --- /dev/null +++ b/files/fr/conflicting/web/css/mask-image/index.html @@ -0,0 +1,175 @@ +--- +title: '-webkit-mask-image' +slug: Web/CSS/-webkit-mask-image +tags: + - CSS +translation_of: Web/CSS/mask-image +translation_of_original: Web/CSS/-webkit-mask-image +--- +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">{{ CSSRef() }}</p> + +<p>{{ Non-standard_header() }}</p> + +<h3 id="Résumé">Résumé</h3> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">La propriété CSS <code style="font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace; color: inherit; font-weight: inherit;">-webkit-mask-image </code>définit l'image de masque pour un élément. L'image de masque découpe la portion visible d'un élément conformément aux valeurs de transparence de cette image.</p> + +<ul style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 22px; list-style-type: disc;"> + <li>{{ Xref_cssinitial() }} : none</li> + <li>S'applique à : tous les éléments</li> + <li>{{ Xref_cssinherited() }} : non</li> + <li>Média : {{ Xref_cssvisual() }}</li> + <li>{{ Xref_csscomputed() }} : URI absolue ou none</li> +</ul> + +<h3 id="Syntaxe">Syntaxe</h3> + +<pre class="eval" style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(246, 246, 242); font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;">-webkit-mask-image: <mask-image>[, <mask-image>]* +</pre> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Valeurs :</p> + +<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> + <dt style="font-style: normal; font-weight: bold;"><mask-image></dt> + <dd style="margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; margin-left: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;"><code style="font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace; color: inherit; font-weight: inherit;">{{cssxref("<uri>")}} | <gradient> | none</code></dd> +</dl> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Values</p> + +<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> + <dt style="font-style: normal; font-weight: bold;"><uri></dt> + <dd style="margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; margin-left: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Chemin de la ressource image utilisée comme masque.</dd> + <dt style="font-style: normal; font-weight: bold;"> </dt> + <dt style="font-style: normal; font-weight: bold;"><gradient></dt> + <dd style="margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; margin-left: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;"><span style="font-family: courier new;">Fonction-webkit-gradient</span> utilisée comme masque.</dd> + <dt style="font-style: normal; font-weight: bold;">none</dt> + <dd style="margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; margin-left: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Signifie que l'élément n'a pas de masque image.</dd> +</dl> + +<h4 id="Exemples">Exemples</h4> + +<pre class="brush: css">body { + -webkit-mask-image: url('images/mymask.png'); +} + +div { + -webkit-mask-image: url('images/foo.png'), url('images/bar.png'); +} + +p { + -webkit-mask-image: none; +} +</pre> + +<h3 id="Notes">Notes</h3> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Si plusieurs images de masque sont spécifiées, la région visible résultat sera la combinaison des régions visibles de chaque image.</p> + +<h3 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h3> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table" style="border-bottom-style: dotted; border-bottom-width: 1px; border-collapse: collapse; border-left-style: dotted; border-left-width: 1px; border-right-style: dotted; border-right-width: 1px; border-top-style: dotted; border-top-width: 1px; font-size: 14px; margin-bottom: 1.286em;"> + <tbody> + <tr> + <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Fonctionnalité</th> + <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Firefox (Gecko)</th> + <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Chrome</th> + <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Internet Explorer</th> + <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Opera</th> + <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Safari</th> + </tr> + <tr> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">Support basique</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">1.0</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">4.0</td> + </tr> + <tr> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">Images de masque multiples</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">1.0</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">4.0</td> + </tr> + <tr> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">Dégradés</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">1.0{{ property_prefix("-webkit") }}</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">4.0{{ property_prefix("-webkit") }}</td> + </tr> + <tr> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">Masques SVG</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">8.0</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">4.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table" style="border-bottom-style: dotted; border-bottom-width: 1px; border-collapse: collapse; border-left-style: dotted; border-left-width: 1px; border-right-style: dotted; border-right-width: 1px; border-top-style: dotted; border-top-width: 1px; font-size: 14px; margin-bottom: 1.286em;"> + <tbody> + <tr> + <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;"><strong style="background-color: rgb(238, 238, 238); font-weight: bold; line-height: 14px;">Fonctionnalité</strong></th> + <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">iOS Safari</th> + <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Opera Mini</th> + <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Opera Mobile</th> + <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Android Browser</th> + </tr> + <tr> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">Support basique</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">3.2</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">2.1</td> + </tr> + <tr> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">Images de masque multiples</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">yes</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">yes</td> + </tr> + <tr> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">Dégradés</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">yes {{ property_prefix("-webkit") }}</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">yes{{ property_prefix("-webkit") }}</td> + </tr> + <tr> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;"> + <p>Masques SVG</p> + </td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;"> + <p>yes</p> + </td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;"> + <p>{{ CompatNo() }}<a id="fck_paste_padding" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;"></a></p> + </td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;"> + <p>{{ CompatNo() }}</p> + </td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;"> + <p>yes</p> + </td> + </tr> + </tbody> +</table> +</div> + +<div class="note"><strong>Note :</strong> Gecko supporte les <a href="/En/Applying_SVG_effects_to_HTML_content#Example:.C2.A0Masking" style="font-style: italic;" title="https://developer.mozilla.org/En/Applying_SVG_effects_to_HTML_content#Example:.C2.A0Masking">effets de filtre SVG </a>depuis sa version 1.9.1. Ils peuvent être utilisés pour masquer du contenu HTML.</div> + +<h3 id="Voir_également">Voir également</h3> + +<p>{{ cssxref("-webkit-mask") }}, {{ cssxref("-webkit-mask-origin") }}, {{ cssxref("-webkit-mask-attachment") }},{{ cssxref("-webkit-mask-image") }},{{ cssxref("-webkit-mask-composite") }},{{ cssxref("-webkit-mask-repeat") }}</p> diff --git a/files/fr/conflicting/web/css/mozilla_extensions/index.html b/files/fr/conflicting/web/css/mozilla_extensions/index.html new file mode 100644 index 0000000000..98f3c88b72 --- /dev/null +++ b/files/fr/conflicting/web/css/mozilla_extensions/index.html @@ -0,0 +1,47 @@ +--- +title: Implémentation des fonctionnalités CSS à l'état de brouillon +slug: Web/CSS/Implémentation_des_Brouillons_CSS +tags: + - CSS + - Draft + - NeedsContent +translation_of: Web/CSS/Mozilla_Extensions +translation_of_original: Web/CSS/Draft_Implementations_of_CSS_Features +--- +<div>{{CSSRef}}{{Draft}}</div> + +<div class="warning"> +<p><strong>Attention !</strong> Cette page est incomplète et n'est pas à jour. Se référer aux pages suivantes pour plus d'informations :</p> + +<ul> + <li><a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">Les extensions Microsoft à CSS</a></li> + <li><a href="/fr/docs/Web/CSS/Extensions_Mozilla">Les extensions Mozilla à CSS</a></li> + <li><a href="/fr/docs/Web/CSS/Reference/Extensions_WebKit">Les extensions WebKit à CSS</a></li> +</ul> +</div> + +<p>Mozilla gère un certain nombre d'extensions <a href="/fr/docs/Web/CSS" title="en/CSS">CSS</a> préfixées par<code> -moz-</code>. La liste suivante contient toutes les extensions Mozilla correspondant aux implémentations de fonctionnalités en cours de standardisation par le W3C. Les fonctionnalités propriétaires ne sont pas présentes dans cette liste.</p> + +<h3 id="Propriétés">Propriétés</h3> + +<p>...</p> + +<h3 id="Valeurs">Valeurs</h3> + +<p>...</p> + +<h3 id="Pseudo-éléments_et_pseudo-classes">Pseudo-éléments et pseudo-classes</h3> + +<p>...</p> + +<h3 id="Règles_At">Règles At</h3> + +<p>...</p> + +<h3 id="Requêtes_de_média">Requêtes de média</h3> + +<p>...</p> + +<h3 id="Autres">Autres</h3> + +<p>...</p> diff --git a/files/fr/conflicting/web/css/pseudo-classes/index.html b/files/fr/conflicting/web/css/pseudo-classes/index.html new file mode 100644 index 0000000000..c6c631c6c0 --- /dev/null +++ b/files/fr/conflicting/web/css/pseudo-classes/index.html @@ -0,0 +1,32 @@ +--- +title: Liens +slug: Astuces_CSS/Liens +tags: + - CSS +translation_of: Web/CSS/Pseudo-classes +translation_of_original: Useful_CSS_tips/Links +--- +<p> +</p> +<h3 id="Les_pseudo-classes_d.27ancre"> Les pseudo-classes d'ancre </h3> +<p>Les feuilles de style <a href="fr/CSS">CSS</a> permettent de styler les ancres grâce à 4 pseudo-classes : +</p> +<ul><li> {{ Cssxref(":link") }} pour les liens non visités +</li><li> {{ Cssxref(":visited") }} pour les liens visités +</li><li> {{ Cssxref(":hover") }} pour les liens survolés +</li><li> {{ Cssxref(":active") }} pour les liens actifs +</li></ul> +<p>À cause de la nature en <i>cascade</i> des styles CSS, il est important de déclarer les pseudo-classes dans l'ordre indiqué ci-dessus. Le style de <code>:hover</code> doit être placé après <code>:link</code> et <code>:visited</code>, sinon il serait écrasé par ces 2 derniers styles. De plus, comme <code>:active</code> est défini après <code>:hover</code>, quand un lien est aussi bien <i>survolé</i> que <i>actif</i>, le dernier style est appliqué. +</p> +<h3 id=":hover_quand_il_n.27y_a_pas_de_texte"> <code>:hover</code> quand il n'y a pas de texte </h3> +<p>Normalement, la pseudo-classe <code>:hover</code> est appliquée quand un dispositif de pointage survole le texte du lien. Parfois, quand un lien est placé dans une cellule de tableau ou une barre de menu, verticale ou horizontale, il est nécessaire d'appliquer le style <code>:hover</code> quand le pointeur survole la cellule, là où il n'y a pas de texte. +</p><p>Un contournement pour avoir ce comportement est de styler l'ancre comme un <code>block</code> avec une largeur fixe. +</p> +<pre class="eval"><a style="display: block; width: 150px;" href="#">Mon lien</a> +</pre> +<h3 id="Articles_connexes"> Articles connexes </h3> +<ul><li> <a href="fr/Probl%c3%a8mes_soulev%c3%a9s_par_le_pseudo_%c3%a9l%c3%a9ment_hover">Problèmes soulevés par le pseudo élément hover</a> <span>(ajout du traducteur)</span> +</li><li> Propriété CSS {{ Cssxref("display") }} +</li></ul> +<p><span>Interwiki Languages Links</span> +</p>{{ languages( { "en": "en/Useful_CSS_tips/Links" } ) }} diff --git a/files/fr/conflicting/web/css/scroll-snap-type/index.html b/files/fr/conflicting/web/css/scroll-snap-type/index.html new file mode 100644 index 0000000000..fff872ad27 --- /dev/null +++ b/files/fr/conflicting/web/css/scroll-snap-type/index.html @@ -0,0 +1,51 @@ +--- +title: '-ms-scroll-snap-type' +slug: Web/CSS/-ms-scroll-snap-type +tags: + - CSS + - Non-standard + - Reference +translation_of: Web/CSS/scroll-snap-type +translation_of_original: Web/CSS/-ms-scroll-snap-type +--- +<div>{{CSSRef}}{{non-standard_header}}</div> + +<p>La propriété <strong><code>-ms-scroll-snap-type</code></strong> est <a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">une propriété spécifique à Microsoft</a> qui indique le type de point d'accroche à utiliser pour l'élément courant.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<h3 id="Values" name="Values">Valeurs</h3> + +<dl> + <dt><code>none</code></dt> + <dd> + <p>Valeur initiale. Le déplacement et le défilement ne sont pas modifiés par les points d'accroche.</p> + </dd> + <dt><code>proximity</code></dt> + <dd> + <p>Lorsque l'inertie normale fait arriver à proximité d'un point d'accroche, la vitesse est ajustée afin que le mouvement se termine sur un point d'accroche. Il est toutefois possible que le mouvement se termine entre deux points d'accroche.</p> + </dd> + <dt><code>mandatory</code></dt> + <dd> + <p>L'inertie est ajustée afin que le mouvement se termine toujours sur un point d'accroche.</p> + </dd> +</dl> + +<h3 id="Formal_syntax" name="Formal_syntax">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Specifications" name="Specifications">Spécifications</h2> + +<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Remarks" name="Remarks">Notes</h2> + +<p> </p> + +<p>Cette propriété est disponible à partir de Windows 8. Elle n'a aucun effet pour les éléments qui ne permettent pas d'utiliser un ascenseur.</p> + +<p>À partir de Windows 8.1, cette propriété est également prise en charge pour les interactions à la souris, au clavier ou au pavé tactile.</p> diff --git a/files/fr/conflicting/web/css/shape-outside/index.html b/files/fr/conflicting/web/css/shape-outside/index.html new file mode 100644 index 0000000000..de7ad2607a --- /dev/null +++ b/files/fr/conflicting/web/css/shape-outside/index.html @@ -0,0 +1,169 @@ +--- +title: <shape-box> +slug: Web/CSS/shape-box +tags: + - CSS + - Reference + - Type +translation_of: Web/CSS/shape-outside +translation_of_original: Web/CSS/shape-box +--- +<div>{{CSSRef}}</div> + +<p>Le type de donnée CSS <strong><code><shape-box></code></strong> permet de définir des formes relatives aux boîtes de l'élément (voir <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">le modèle de boîtes</a>), notamment pour la propriété {{cssxref("shape-outside")}}.</p> + +<h2 id="Valeurs">Valeurs</h2> + +<dl> + <dt><code>margin-box</code></dt> + <dd>La forme correspond à la forme dessinée par le contour extérieur de la boîte de marge. Les rayons des coins de la forme sont définis grâce aux propriétés {{cssxref("border-radius")}} et {{cssxref("margin")}}. Si le ratio <code>border-radius</code> / <code>margin</code> est supérieur ou égal à 1, le rayon du coin de la boîte sera <code>border-radius</code> + <code>margin</code>. Si le ratio <code>border-radius / margin</code> est inférieur à 1, le rayon du coin de la boîte sera <code>border-radius + (margin * (1 + (ratio-1)^3))</code>.</dd> + <dt><code>border-box</code></dt> + <dd>La forme correspond à la forme dessinée par le contour extérieur de la boîte de bordure. Elle suit donc les règles normales de mise en forme de la bordure (notamment pour les coins arrondis).</dd> + <dt><code>padding-box</code></dt> + <dd>La forme correspond à la forme dessinée par le contour extérieur de la boîte de remplissage (<em>padding</em>). Elle suit les règles normales de mise en forme de la bordure (notamment pour les coins arrondis).</dd> + <dt><code>content-box</code></dt> + <dd>La forme correspond à la forme dessinée par le contour extérieur de la boîte de contenu. Le rayon de chaque coin correspondra à la valeur maximale entre <code>0</code> et <code>border-radius</code> - <code>border-width</code> - <code>padding</code>.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.main { + width: 500px; + height: 200px; +} + +.left { + -webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%); + float: left; + width: 40%; + height: 12ex; + background-color: lightgray; + -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%); +} + +.right { + -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%); + float: right; + width: 40%; + height: 12ex; + background-color: lightgray; + -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%); +} + +p { + text-align: center; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="main"> + <div class="left"></div> + <div class="right"></div> + <p> + Sometimes a web page's text content appears to be + funneling your attention towards a spot on the page + to drive you to follow a particular link. Sometimes + you don't notice. + </p> +</div></pre> + +<h3 id="Résultat">Résultat</h3> + +<h3 id="EmbedLiveSample('Exemples'100100)">{{EmbedLiveSample('Exemples',"100%","100%")}}</h3> + +<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('CSS Shapes', '#typedef-shape-box', '<shape-box>')}}</td> + <td>{{Spec2('CSS Shapes')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Support simple</td> + <td>{{compatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{compatVersionUnknown}}</td> + </tr> + <tr> + <td>\xx</td> + <td>{{compatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{compatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Chrome pour Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Support simple</td> + <td>{{compatVersionUnknown}}</td> + <td>{{compatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{compatVersionUnknown}}</td> + </tr> + <tr> + <td>\xx</td> + <td>{{compatVersionUnknown}}</td> + <td>{{compatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{compatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{cssxref("shape-outside")}}</li> + <li><a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">Le modèle de boîtes CSS</a></li> +</ul> diff --git a/files/fr/conflicting/web/css/url()/index.html b/files/fr/conflicting/web/css/url()/index.html new file mode 100644 index 0000000000..a31d8c3342 --- /dev/null +++ b/files/fr/conflicting/web/css/url()/index.html @@ -0,0 +1,34 @@ +--- +title: url() +slug: Web/CSS/filter-function/url +tags: + - CSS + - Junk + - Reference +translation_of: Web/CSS/url() +translation_of_original: Web/CSS/filter-function/url +--- +<div>{{CSSRef}}</div> + +<p>La fonction <strong><code>url()</code></strong> permet d'utiliser un <a href="/fr/docs/Web/SVG/Element/filter">filtre SVG</a> afin de modifier l'apparence d'une image.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">url(<em>emplacement</em>)</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>emplacement</code></dt> + <dd>L'URL ({{cssxref("<url>")}}) d'un fichier {{glossary("XML")}} qui définit un filtre SVG. On peut ajouter une ancre sur cette URL afin d'indiquer un filtre spécifique.</dd> +</dl> + +<h2 id="Exemple">Exemple</h2> + +<pre class="brush: css">url(ressources.svg#c1)</pre> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{cssxref("<filter-function>")}}</li> +</ul> diff --git a/files/fr/conflicting/web/css/url()_168028c4e5edd9e19c061adb4b604d4f/index.html b/files/fr/conflicting/web/css/url()_168028c4e5edd9e19c061adb4b604d4f/index.html new file mode 100644 index 0000000000..d68db30cfe --- /dev/null +++ b/files/fr/conflicting/web/css/url()_168028c4e5edd9e19c061adb4b604d4f/index.html @@ -0,0 +1,109 @@ +--- +title: <url> +slug: Web/CSS/url +tags: + - CSS + - Reference + - Type +translation_of: Web/CSS/url() +translation_of_original: Web/CSS/url +--- +<div>{{CSSRef}}</div> + +<p>Le type de donnée CSS <strong><code><url></code></strong> représente un pointeur vers une ressource (cela peut être une image, une police de caractères). Ce type de données ne possède pas de syntaxe propre et ne peut être utilisé qu'avec la notation fonctionnelle <code>url()</code>. Il est utilisé avec de nombreuses propriétés telles que {{cssxref("background-image")}}, {{cssxref("cursor")}}, {{cssxref("list-style")}}, etc.</p> + +<div class="note"><strong>Note : URI ou URL ?</strong><br> +<br> +Une <a href="https://fr.wikipedia.org/wiki/Uniform_Resource_Identifier">URI</a> est différente d'une <a href="https://fr.wikipedia.org/wiki/Uniform_Resource_Locator">URL</a>. Une URL décrit l'emplacement d'une ressource et l'URI décrit l'identifiant de la ressource. Une URI peut être un emplacement, une URL, un nom, une <a href="https://fr.wikipedia.org/wiki/Uniform_Resource_Name">URN</a> d'une ressource.<br> +<br> +Pour la spécification CSS de niveau 1, la notation fonctionnelle <code>url()</code> a été introduite afin de décrire des… URL, autrement dit des emplacements (un type de donnée <code><url></code> bien qu'il n'était pas défini explicitement).<br> +<br> +Pour la spécification CSS de niveau 2, la même notation fonctionnelle a été étendue afin de pouvoir décrire n'importe quelle URI, que ce soit une URL ou un URN. Cela a été une source d'ambiguïté car <code>url()</code> était utilisée pour créer une valeur de type <code><uri></code>. En plus d'être source de confusion, les URN était très marginalement utilisées dans la pratique.<br> +<br> +Afin de remédier à cela, la spécification CSS de niveau 3 est revenue à la définition initiale avec cette fois-ci une définition explicite. La notation fonctionnelle <code>url()</code> représente donc une valeur de type <code><url></code> et plus une valeur de type <code><uri></code>.<br> +<br> +Cela dit, ces détails de sémantique ont peu d'impact pour les auteurs web voire pour l'implémentation du type de donnée par le moteur.</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<p>L'URL peut être indiquée telle quelle comme argument de la fonction <code>url()</code>et encadrée, ou non, entre quotes ou doubles quotes. Il est possible d'utiliser des URL relatives. Celles-ci sont alors relatives à l'URL de la feuille de style (et non à l'URL de la page web).</p> + +<pre class="syntaxbox"> <propriété_css>: url("http://monsite.exemple.com/curseur.png") + <propriété_css>: url("http://monsite.exemple.com/curseur.png") + <propriété_css>: url(http://monsite.exemple.com/curseur.png) +</pre> + +<div class="note"> +<p><strong>Note :</strong> Les caractères de contrôle au-delà de 0x7e ne sont plus autorisés pour la forme sans quote à partir de Firefox 15. Voir {{bug(752230)}} pour plus d'informations.</p> +</div> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">ul { + list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif") +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ul> + <li>Élément 1</li> + <li>Élément 2</li> +</ul> +</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 Values', '#urls', '<url>')}}</td> + <td>{{Spec2('CSS4 Values')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Values', '#urls', '<url>')}}</td> + <td>{{Spec2('CSS3 Values')}}</td> + <td>Aucune modification significative.</td> + </tr> + <tr> + <td>{{Specname('CSS2.1', 'syndata.html#uri', '<uri>')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Aucune modification significative.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#url', '<url>')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Définition initiale.</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.types.url")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{cssxref("url()", "url()")}}</li> + <li>{{cssxref("<gradient>")}}</li> + <li>{{cssxref("element()")}}</li> + <li>{{cssxref("_image","image()")}}</li> + <li>{{cssxref("image-set","image-set()")}}</li> + <li>{{cssxref("cross-fade")}}</li> +</ul> diff --git a/files/fr/conflicting/web/css/user-select/index.html b/files/fr/conflicting/web/css/user-select/index.html new file mode 100644 index 0000000000..047c721acc --- /dev/null +++ b/files/fr/conflicting/web/css/user-select/index.html @@ -0,0 +1,108 @@ +--- +title: '-ms-user-select' +slug: Web/CSS/-ms-user-select +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/user-select +translation_of_original: Web/CSS/-ms-user-select +--- +<div>{{CSSRef}}{{non-standard_header}}</div> + +<p>La propriété CSS <strong><code>-ms-user-select</code></strong> est <a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">une propriété spécifique à Microsoft</a> qui indique sur quelle zone d'un élément l'utilisateur peut sélectionner le texte de l'élément.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<h3 id="Values" name="Values">Valeurs</h3> + +<dl> + <dt><code>none</code></dt> + <dd> + <p>Empêche la sélection de commencer sur l'élément. Cette valeur n'empêche pas une sélection déjà initiée de continuer sur l'élément.</p> + </dd> + <dt><code>element</code></dt> + <dd> + <p>Active la sélection au sein de l'élément. Toutefois, la sélection est limitée aux bords de l'élément.</p> + </dd> + <dt><code>text</code></dt> + <dd> + <p>Active la sélection au sein de l'élément et permet de poursuivre la sélection à l'extérieur de l'élément.</p> + </dd> +</dl> + +<h3 id="Formal_syntax" name="Formal_syntax">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Examples" name="Examples">Exemples</h2> + +<p>Dans l'exemple suivant, on utilise le scénario d'un blog avec un conteneur qui est un élément {{HTMLElement("div")}} avec un identifiant <code>blog</code>. Ce conteneur contient un autre élément <code><div></code> avec l'identifiant <code>blogPost</code> pour le billet de la page. La classe <code>comment</code> est appliquée aux éléments <code><div></code> qui sont des commentaires. Le billet de blog contient un élément {{HTMLElement("input")}} et un élément {{HTMLElement("textarea")}} pour ajouter un commentaire.</p> + +<p>La déclaration suivante désactive la sélection à l'exception du contenu éditable.</p> + +<pre class="brush: css">#blog { + -ms-user-select: none; + -webkit-user-select: none; + -moz-user-select: -moz-none; +} +</pre> + +<p>La déclaration suivante désactive la sélection pour le reste :</p> + +<pre class="brush: css">#blog, #blog input, #blog textarea, +#blog *[contenteditable=true] { + -ms-user-select: none; + -webkit-user-select: none; + -moz-user-select: -moz-none; +} +</pre> + +<p>La déclaration suivante permet aux utilisateurs de ne sélectionner que le contenu du billet.</p> + +<pre class="brush: css">#blogPost { + -ms-user-select: element; + -webkit-user-select: text; + -moz-user-select: text; +} + +#blog { + -ms-user-select: none; + -webkit-user-select: none; + -moz-user-select: -moz-none; +} +</pre> + +<p>La déclaration suivante permet aux utilisateurs de ne sélectionner que les commentaires.</p> + +<pre class="brush: css">.comment { + -ms-user-select: element; + -moz-user-select: text; + -webkit-user-select: text; +} + +#blog{ + -ms-user-select: none; + -moz-user-select: -moz-none; + -webkit-user-select: none; +} +</pre> + +<p>Le code suivan permet de commencer la sélection sur le billet ou sur l'un des commentaires et de poursuivre sur la suite.</p> + +<pre class="brush: css">#blogPost, .comment { + -ms-user-select: text; +} + +#blog { + -ms-user-select: none; +} +</pre> + +<h2 id="Specifications" name="Specifications">Spécifications</h2> + +<p>Cette propriété est une propriété non-standard qui ne fait partie d'aucune spécification.</p> + +<p>{{cssinfo}}</p> diff --git a/files/fr/conflicting/web/css/width/index.html b/files/fr/conflicting/web/css/width/index.html new file mode 100644 index 0000000000..92535f6d82 --- /dev/null +++ b/files/fr/conflicting/web/css/width/index.html @@ -0,0 +1,29 @@ +--- +title: auto +slug: Web/CSS/auto +tags: + - CSS + - Référence CSS +translation_of: Web/CSS/width +translation_of_original: Web/CSS/auto +--- +<p>{{ CSSRef() }}</p> +<h2 id="Résumé">Résumé</h2> +<p>Indique qu'une valeur est calculée de manière automatique par le navigateur. Les effets de <code>auto</code> sont différents suivant la propriété à laquelle la valeur est affectée.</p> +<h2 id="Utilisation">Utilisation</h2> +<ul> + <li>{{ Cssxref("overflow") }}</li> + <li>{{ Cssxref("overflow-x") }}</li> + <li>{{ Cssxref("overflow-y") }}</li> + <li>{{ Cssxref("cursor") }}</li> + <li>{{ Cssxref("width") }}</li> + <li>{{ Cssxref("height") }}</li> + <li>{{ Cssxref("marker-offset") }}</li> + <li>{{ Cssxref("margin") }}</li> + <li>margin-* (left|bottom|top|right|start|end)</li> + <li>{{ Cssxref("bottom") }}</li> + <li>{{ Cssxref("left") }}</li> + <li>{{ Cssxref("table-layout") }}</li> + <li>{{ Cssxref("z-index") }}</li> + <li>{{ Cssxref("column-width") }}</li> +</ul> |