diff options
Diffstat (limited to 'files/fr/web/css/break-after/index.md')
| -rw-r--r-- | files/fr/web/css/break-after/index.md | 246 |
1 files changed, 100 insertions, 146 deletions
diff --git a/files/fr/web/css/break-after/index.md b/files/fr/web/css/break-after/index.md index 4ed535eaf6..8b7437aaf6 100644 --- a/files/fr/web/css/break-after/index.md +++ b/files/fr/web/css/break-after/index.md @@ -7,11 +7,12 @@ tags: - Reference translation_of: Web/CSS/break-after --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p>La propriété CSS <strong><code>break-after</code></strong> définit la façon dont la page, la colonne ou la région se fragmente après 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> +La propriété CSS **`break-after`** définit la façon dont la page, la colonne ou la région se fragmente après 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. -<pre class="brush:css no-line-numbers">/* Valeurs génériques */ +```css +/* Valeurs génériques */ break-after: auto; break-after: avoid; break-after: always; @@ -38,102 +39,74 @@ break-after: region; break-after: inherit; break-after: initial; break-after: 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 {{cssxref("break-inside")}}).</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>, <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> - -<h3 id="Valeurs">Valeurs</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>Valeur initiale qui ne force ni n'interdit de rupture (de page, de colonne ou de région) après la boîte.</dd> - <dt><code>always</code>{{experimental_inline}}</dt> - <dd>Force la rupture après la boîte principale. Le type de rupture dépend du contexte de fragmentation. Si on est dans un conteneur multi-colonne, il y aura une rupture de colonne et si on est à l'intérieur d'un média paginé, il y aura une rupture de page.</dd> - <dt><code>all</code>{{experimental_inline}}</dt> - <dd>Force la rupture de page après la boîte principale. La rupture a lieu quel que soit le contexte de fragmentation. Ainsi, si on a un élément dans un conteneur multi-colonne lui-même situé dans un média paginé, il y aura une rupture de colonne et une rupture de page.</dd> - <dt><code>avoid</code></dt> - <dd>Empêche toute rupture (de page, de colonne ou de région) après la boîte.</dd> - <dt><code>left</code></dt> - <dd>Force un ou deux saut de page après la boîte de l'élément afin que la prochaine page soit une page gauche.</dd> - <dt><code>right</code></dt> - <dd>Force un ou deux saut de page après la boîte de l'élément afin que la prochaine page soit une page droite.</dd> - <dt><code>page</code></dt> - <dd>Force un saut de page après la boîte de l'élément.</dd> - <dt><code>column</code></dt> - <dd>Force une rupture de colonne de page après la boîte de l'élément.</dd> - <dt><code>region</code> {{experimental_inline}}</dt> - <dd>Force une rupture de région après la boîte de l'élément.</dd> - <dt><code>recto</code> {{experimental_inline}}</dt> - <dd>Force un ou deux sauts de page après la boîte de l'élément afin que la prochaine page soit une page recto (une page droite pour le sens de lecture gauche à droite et une page gauche pour le sens de lecture droite à gauche).</dd> - <dt><code>verso</code> {{experimental_inline}}</dt> - <dd>Force un ou deux sauts de page après la boîte de l'élément afin que la prochaine page soit une page verso (une page gauche pour le sens de lecture gauche à droite et une page droite pour le sens de lecture droite à gauche).</dd> - <dt><code>avoid-page</code></dt> - <dd>Empêche toute saut de page après la boîte de l'élément.</dd> - <dt><code>avoid-column</code></dt> - <dd>Empêche toute rupture de colonne après la boîte de l'élément.</dd> - <dt><code>avoid-region </code>{{experimental_inline}}</dt> - <dd>Empêche toute rupture de région après boîte de l'élément.</dd> -</dl> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> +``` + +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 `break-inside` de l'élément englobant. + +Pour déterminer si on a une rupture, on applique les règles suivantes : + +1. Si l'une des trois valeurs correspond à une rupture forcée (`always`, `left`, `right`, `page`, `column` ou `region`), 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 {{cssxref("break-inside")}}). +2. Si l'une des trois valeurs correspond à une valeur visant à éviter une rupture (`avoid`, `avoid-page`, `avoid-region`, `avoid-column`), aucune rupture ne sera appliquée à cet endroit. + +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. + +## Syntaxe + +### Valeurs + +- `auto` + - : Valeur initiale qui ne force ni n'interdit de rupture (de page, de colonne ou de région) après la boîte. +- `always`{{experimental_inline}} + - : Force la rupture après la boîte principale. Le type de rupture dépend du contexte de fragmentation. Si on est dans un conteneur multi-colonne, il y aura une rupture de colonne et si on est à l'intérieur d'un média paginé, il y aura une rupture de page. +- `all`{{experimental_inline}} + - : Force la rupture de page après la boîte principale. La rupture a lieu quel que soit le contexte de fragmentation. Ainsi, si on a un élément dans un conteneur multi-colonne lui-même situé dans un média paginé, il y aura une rupture de colonne et une rupture de page. +- `avoid` + - : Empêche toute rupture (de page, de colonne ou de région) après la boîte. +- `left` + - : Force un ou deux saut de page après la boîte de l'élément afin que la prochaine page soit une page gauche. +- `right` + - : Force un ou deux saut de page après la boîte de l'élément afin que la prochaine page soit une page droite. +- `page` + - : Force un saut de page après la boîte de l'élément. +- `column` + - : Force une rupture de colonne de page après la boîte de l'élément. +- `region` {{experimental_inline}} + - : Force une rupture de région après la boîte de l'élément. +- `recto` {{experimental_inline}} + - : Force un ou deux sauts de page après la boîte de l'élément afin que la prochaine page soit une page recto (une page droite pour le sens de lecture gauche à droite et une page gauche pour le sens de lecture droite à gauche). +- `verso` {{experimental_inline}} + - : Force un ou deux sauts de page après la boîte de l'élément afin que la prochaine page soit une page verso (une page gauche pour le sens de lecture gauche à droite et une page droite pour le sens de lecture droite à gauche). +- `avoid-page` + - : Empêche toute saut de page après la boîte de l'élément. +- `avoid-column` + - : Empêche toute rupture de colonne après la boîte de l'élément. +- `avoid-region `{{experimental_inline}} + - : Empêche toute rupture de région après boîte de l'élément. + +### Syntaxe formelle {{csssyntax}} -<h2 id="Synonymes_pour_page-break-after">Synonymes pour <code>page-break-after</code></h2> - -<p>Pour des raisons de compatibilité, la propriété historique {{cssxref("page-break-after")}} devrait être traitée par les navigateurs comme un alias de <code>break-after</code>. Cela permet de s'assurer que les sites qui utilisaient <code>page-break-after</code> continuent de fonctionner. Voici un sous-ensemble des valeurs avec leurs alias :</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col"><code>page-break-after</code></th> - <th scope="col"><code>break-after</code></th> - </tr> - </thead> - <tbody> - <tr> - <td><code>auto</code></td> - <td><code>auto</code></td> - </tr> - <tr> - <td><code>left</code></td> - <td><code>left</code></td> - </tr> - <tr> - <td><code>right</code></td> - <td><code>right</code></td> - </tr> - <tr> - <td><code>avoid</code></td> - <td><code>avoid</code></td> - </tr> - <tr> - <td><code>always</code></td> - <td><code>page</code></td> - </tr> - </tbody> -</table> - -<div class="note"> -<p><strong>Note :</strong> La valeur <code>always</code> de <code>page-break-*</code> a été implémenté par les navigateurs comme une rupture de page et pas comme une rupture de colonne. C'est pourquoi l'alias correspondant à cette valeur est <code>page</code> et pas <code>always</code>.</p> -</div> +## Synonymes pour `page-break-after` + +Pour des raisons de compatibilité, la propriété historique {{cssxref("page-break-after")}} devrait être traitée par les navigateurs comme un alias de `break-after`. Cela permet de s'assurer que les sites qui utilisaient `page-break-after` continuent de fonctionner. Voici un sous-ensemble des valeurs avec leurs alias : + +| `page-break-after` | `break-after` | +| ------------------ | ------------- | +| `auto` | `auto` | +| `left` | `left` | +| `right` | `right` | +| `avoid` | `avoid` | +| `always` | `page` | + +> **Note :** La valeur `always` de `page-break-*` a été implémenté par les navigateurs comme une rupture de page et pas comme une rupture de colonne. C'est pourquoi l'alias correspondant à cette valeur est `page` et pas `always`. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css">.exemple { +```css +.exemple { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; @@ -146,64 +119,45 @@ p { /* Pour WebKit : */ -webkit-column-break-after: avoid; } -</pre> +``` -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><div class="exemple"> - <p>« Mais alors, » pensa Alice, « ne serai-je donc +```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. + 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-after', 'break-after')}}</td> - <td>{{Spec2('CSS3 Fragmentation')}}</td> - <td>Ajouts des mots-clés <code>recto</code> et <code>verso</code>. Le type de média pour cette propriété est passé de <code>paged</code> à <code>visual</code>. L'algorithme de rupture est précisé afin de gérer les différents types de rupture.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Regions', '#region-flow-break', 'break-after')}}</td> - <td>{{Spec2('CSS3 Regions')}}</td> - <td>La spécification étend la propriété pour gérer les sauts de région. Les mots-clés <code>avoid-region</code> et <code>region</code> sont ajoutés.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Multicol', '#break-after', 'break-after')}}</td> - <td>{{Spec2('CSS3 Multicol')}}</td> - <td>Définition initiale. La spécification étend la propriété {{cssxref("page-break-after")}} de CSS 2.1 afin de gérer les sauts de page ou de colonne.</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<h3 id="Prise_en_charge_pour_une_disposition_multi-colonnes">Prise en charge pour une disposition multi-colonnes</h3> - -<p>{{Compat("css.properties.break-after.multicol_context")}}</p> - -<h3 id="Prise_en_charge_pour_les_média_paginés">Prise en charge pour les média paginés</h3> - -<p>{{Compat("css.properties.break-after.paged_context")}}</p> + a pas du tout pour vos livres de leçons. »</p> +</div> +``` + +### Résultat + +{{EmbedLiveSample("Exemples","400","300")}} + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| {{SpecName('CSS3 Fragmentation', '#break-after', 'break-after')}} | {{Spec2('CSS3 Fragmentation')}} | Ajouts des mots-clés `recto` et `verso`. Le type de média pour cette propriété est passé de `paged` à `visual`. L'algorithme de rupture est précisé afin de gérer les différents types de rupture. | +| {{SpecName('CSS3 Regions', '#region-flow-break', 'break-after')}} | {{Spec2('CSS3 Regions')}} | La spécification étend la propriété pour gérer les sauts de région. Les mots-clés `avoid-region` et `region` sont ajoutés. | +| {{SpecName('CSS3 Multicol', '#break-after', 'break-after')}} | {{Spec2('CSS3 Multicol')}} | Définition initiale. La spécification étend la propriété {{cssxref("page-break-after")}} de CSS 2.1 afin de gérer les sauts de page ou de colonne. | + +{{cssinfo}} + +## Compatibilité des navigateurs + +### Prise en charge pour une disposition multi-colonnes + +{{Compat("css.properties.break-after.multicol_context")}} + +### Prise en charge pour les média paginés + +{{Compat("css.properties.break-after.paged_context")}} |