diff options
Diffstat (limited to 'files/fr/web/css/break-inside/index.html')
| -rw-r--r-- | files/fr/web/css/break-inside/index.html | 163 |
1 files changed, 163 insertions, 0 deletions
diff --git a/files/fr/web/css/break-inside/index.html b/files/fr/web/css/break-inside/index.html new file mode 100644 index 0000000000..89fd65ae74 --- /dev/null +++ b/files/fr/web/css/break-inside/index.html @@ -0,0 +1,163 @@ +--- +title: break-inside +slug: Web/CSS/break-inside +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/break-inside +--- +<div>{{CSSRef}}</div> + +<p>La propriété CSS <strong><code>break-inside</code></strong> définit comment la page, la colonne ou la région se fragmente au sein de la boîte générée. S'il n'y a aucune boîte générée, la propriété est ignorée.</p> + +<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ +break-inside: auto; +break-inside: avoid; +break-inside: avoid-page; +break-inside: avoid-column; +break-inside: avoid-region; + +/* Valeurs globales */ +break-inside: inherit; +break-inside: initial; +break-inside: unset; +</pre> + +<p>Chaque point de rupture éventuel (c'est-à-dire chaque frontière d'élément) est influencé par trois propriétés : la valeur de {{cssxref("break-after")}} de l'élément précédent, la valeur de {{cssxref("break-before")}} de l'élément suivant et la valeur de <code>break-inside</code> de l'élément englobant.</p> + +<p>Pour déterminer si on a une rupture, on applique les règles suivantes :</p> + +<ol> + <li>Si l'une des trois valeurs correspond à une rupture forcée (<code>always</code>, <code>left</code>, <code>right</code>, <code>page</code>, <code>column</code> ou <code>region</code>), cette valeur l'emporte. Si plusieurs valeurs décrivent une rupture forcée, c'est celle de l'élément qui apparaît le plus tard dans le flux qui est prise en compte (autrement dit, {{cssxref("break-before")}} l'emporte sur {{cssxref("break-after")}} qui l'emporte sur <code>break-inside</code>).</li> + <li>Si l'une des trois valeurs correspond à une valeur visant à éviter une rupture (<code>avoid</code>, <code>avoid-page</code>, <code>avoid-region</code> ou <code>avoid-column</code>), aucune rupture ne sera appliquée à cet endroit.</li> +</ol> + +<p>Une fois que les ruptures forcées ont été appliquées, le moteur peut ajouter des ruptures « douces » sauf aux endroits où les propriétés empêchent les ruptures.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<p>La propriété <code>break-inside</code> se définit avec un mot-clé parmi ceux de la liste ci-après.</p> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>Cette valeur n'interdit ni ne force une rupture (pour une page, une colonne ou une région).</dd> + <dt><code>avoid</code></dt> + <dd>Cette valeur interdit toute rupture (de page, de colonne ou de région) dans la boîte principale.</dd> + <dt><code>avoid-page</code></dt> + <dd>Cette valeur interdit toute rupture de page au sein de la boîte.</dd> + <dt><code>avoid-column</code></dt> + <dd>Cette valeur interdit toute rupture de colonne au sein de la boîte.</dd> + <dt><code>avoid-region</code> {{experimental_inline}}</dt> + <dd>Cette valeur interdit toute rupture de région au sein de la boîte.</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Synonymes_pour_page-break-inside">Synonymes pour <code>page-break-inside</code></h2> + +<p>Pour des raisons de compatibilité, la propriété historique {{cssxref("page-break-inside")}} devrait être traitée par les navigateurs comme <code>break-inside</code>. De cette façon, cela permet aux sites qui utilisaient <code>page-break-inside</code> de continuer à fonctionner. Voici un sous-ensemble de valeurs avec leurs alias :</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"><code>page-break-inside</code></th> + <th scope="col"><code>break-inside</code></th> + </tr> + </thead> + <tbody> + <tr> + <td><code>auto</code></td> + <td><code>auto</code></td> + </tr> + <tr> + <td><code>avoid</code></td> + <td><code>avoid</code></td> + </tr> + </tbody> +</table> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.exemple { + -webkit-column-count: 4; + -moz-column-count: 4; + column-count: 4; +} + +p { + break-inside: avoid-column; + /* Pour Firefox : */ + page-break-inside: avoid; + /* Pour WebKit : */ + -webkit-column-break-inside: avoid; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="exemple"> + <p>« Mais alors, » pensa Alice, « ne serai-je donc + jamais plus vieille que je ne le suis maintenant ? + D’un côté cela aura ses avantages, ne jamais être + une vieille femme. Mais alors avoir toujours des + leçons à apprendre ! Oh, je n’aimerais pas cela du + tout. »</p> + <p>« Oh ! Alice, petite folle, » se répondit-elle. + « Comment pourriez-vous apprendre des leçons ici ? + Il y a à peine de la place pour vous, et il n’y en + a pas du tout pour vos livres de leçons. »</p> +</div></pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","400","300")}}</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 Fragmentation', '#break-within', 'break-inside')}}</td> + <td>{{Spec2('CSS3 Fragmentation')}}</td> + <td>Aucune modification.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Regions', '#region-flow-break', 'break-inside')}}</td> + <td>{{Spec2('CSS3 Regions')}}</td> + <td>Ajout de la gestion des ruptures de région.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Multicol', '#break-before-break-after-break-inside', 'break-inside')}}</td> + <td>{{Spec2('CSS3 Multicol')}}</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.break-inside", 4)}}</p> + +<h3 id="Notes_relatives_à_la_compatibilité">Notes relatives à la compatibilité</h3> + +<p>Avant Firefox 65, l'ancienne propriété {{cssxref("page-break-inside")}} fonctionnait dans Firefox en empêchant les ruptures de colonnes et de pages. On utilisera les deux propriétés afin d'obtenir une rétrocompatibilité avec ces versions.</p> + +<p>Pour les anciens navigateurs basés sur WebKit, on peut utiliser la propriété préfixée <code>-webkit-column-break-inside</code> afin de contrôler les ruptures de colonne.</p> |