diff options
Diffstat (limited to 'files/fr/archive/web/css/display-inside')
-rw-r--r-- | files/fr/archive/web/css/display-inside/index.html | 139 |
1 files changed, 139 insertions, 0 deletions
diff --git a/files/fr/archive/web/css/display-inside/index.html b/files/fr/archive/web/css/display-inside/index.html new file mode 100644 index 0000000000..7db4682eb8 --- /dev/null +++ b/files/fr/archive/web/css/display-inside/index.html @@ -0,0 +1,139 @@ +--- +title: display-inside +slug: Archive/Web/CSS/display-inside +tags: + - CSS + - Experimental + - NeedsLiveSample + - Reference + - Web +translation_of: Archive/Web/CSS/display-inside +--- +<div><section class="Quick_links" id="Quick_Links"><ol><li><strong><a href="/fr/docs/Web/CSS">CSS</a></strong></li><li><strong><a href="/fr/docs/Web/CSS/Reference">Référence CSS</a></strong></li></ol></section><div class="notice overheadIndicator experimental"> + <p><span title="This is an experimental API that should not be used in production code."><i class="icon-beaker"> </i></span> <strong>Cette fonction est expérimentale</strong><br>Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le <a href="#Browser_compatibility">tableau de compatibilité</a> pour les préfixes à utiliser selon les navigateurs.<br>Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.</p> +</div></div> + +<p>La propriété <strong><code>display-inside</code></strong> indique le type d'affichage (<em>display type</em>) intérieur généré par un élément, celui-ci indique la façon dont son contenu est organisé à l'intérieur de la boîte de l'élément.</p> + +<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ +display-inside: auto; +display-inside: block; +display-inside: table; +display-inside: flex; +display-inside: grid; +display-inside: ruby; + +/* Valeurs globales */ +display-inside: inherit; +display-inside: initial; +display-inside: unset; +</pre> + +<p><span style="color: red;">Valeur introuvable dans la base de données</span></p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<p>Cette propriété est définie avec un des mots-clés définis ci-après.</p> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>Si la valeur calculée de <a href="/fr/docs/Web/CSS/display-outside" title="La propriété display-outside définit le type d'affichage (display type) à l'extérieur de la boîte générée par un élément et indique la façon dont l'élément s'inscrit dans le contexte de formatage de l'élément parent."><code>display-outside</code></a> pour l'élément vaut <code>inline-level</code>, l'élément sera un élément en ligne (<em>inline</em>) et organisera son contenu comme du contenu en ligne (<em>inline</em>). Si la valeur calculée de <a href="/fr/docs/Web/CSS/display-outside" title="La propriété display-outside définit le type d'affichage (display type) à l'extérieur de la boîte générée par un élément et indique la façon dont l'élément s'inscrit dans le contexte de formatage de l'élément parent."><code>display-outside</code></a> pour l'élément est un type de disposition spécifique interne, l'élément agit normalement selon la valeur donnée par <a href="/fr/docs/Web/CSS/display-outside" title="La propriété display-outside définit le type d'affichage (display type) à l'extérieur de la boîte générée par un élément et indique la façon dont l'élément s'inscrit dans le contexte de formatage de l'élément parent."><code>display-outside</code></a>. Sinon, la valeur calculée est <code>block</code>.</dd> + <dt><code>block</code></dt> + <dd>L'élément organise son contenu avec une disposition en bloc.</dd> + <dt><code>table</code></dt> + <dd>L'élément organise son contenu avec une disposition en tableau.</dd> + <dt><code>flex</code></dt> + <dd>L'élément organise son contenu avec une disposition flexible.</dd> + <dt><code>grid</code></dt> + <dd>L'élément organise son contenu avec une disposition en grille.</dd> + <dt><code>ruby</code></dt> + <dd>L'élément organise son contenu avec une disposition ruby.</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">La syntaxe n'a pas été trouvée !</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><a class="external" href="https://drafts.csswg.org/css-display/#the-display-inside" hreflang="en" lang="en">CSS Display Module Level 3<br><small lang="fr">La définition de 'display-inside' dans cette spécification.</small></a></td> + <td><span class="spec-WD">Version de travail</span></td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p></p><p class="warning"><strong><a href="https://github.com/mdn/browser-compat-data">Nous convertissons les données de compatibilité dans un format JSON</a></strong>. + Ce tableau de compatibilité utilise encore l'ancien format + car nous n'avons pas encore converti les données qu'il contient. + <strong><a href="/fr/docs/MDN/Contribute/Structures/Compatibility_tables">Vous pouvez nous aider en contribuant !</a></strong></p> + +<div class="htab"> + <a id="AutoCompatibilityTable" name="AutoCompatibilityTable"></a> + <ul> + <li class="selected"><a>Ordinateur</a></li> + <li><a>Mobile</a></li> + </ul> +</div><p></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><span style="color: #f00;">Pas de support</span></td> + <td><span style="color: #f00;">Pas de support</span></td> + <td><span style="color: #f00;">Pas de support</span></td> + <td><span style="color: #f00;">Pas de support</span></td> + <td><span style="color: #f00;">Pas de support</span></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 Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Support simple</td> + <td><span style="color: #f00;">Pas de support</span></td> + <td><span style="color: #f00;">Pas de support</span></td> + <td><span style="color: #f00;">Pas de support</span></td> + <td><span style="color: #f00;">Pas de support</span></td> + <td><span style="color: #f00;">Pas de support</span></td> + </tr> + </tbody> +</table> +</div> + +<p> </p> |