break-before

La propriété break-before décrit la façon dont la page, la colonne ou la région se fragmente avant 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.

/* Valeurs de rupture génériques */
break-before: auto;
break-before: avoid;
break-before: always;
break-before: all;

/* Valeurs de rupture pour les pages */
break-before: avoid-page;
break-before: page:
break-before: left;
break-before: right;
break-before: recto;
break-before: verso;

/* Valeurs de rupture pour les colonnes */
break-before: avoid-column;
break-before: column;

/* Valeurs de rupture pour les régions */
break-before: avoid-region;
break-before: region;

/* Valeurs globales */
break-before: inherit;
break-before: initial;
break-before: unset;

Chaque point de rupture éventuel (c'est-à-dire chaque frontière d'élément) est influencé par trois propriétés : la valeur de break-after de l'élément précédent, la valeur de 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, break-before l'emporte sur break-after qui l'emporte sur 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

La propriété break-before se paramètre avec un des mots-clés définis ci-après.

Valeurs

Valeurs de rupture génériques

auto
Valeur initiale qui ne force ni n'interdit de rupture (de page, de colonne ou de région) avant la boîte.
all
Force la rupture juste avant la boîte principale. La rupture a lieu pour l'ensemble des contextes de fragmentation. Ainsi si l'élément concerné est dans un conteneur multi-colonnes dans un média paginé, il y aura une rupture de colonne et une rupture de page.
always
Force la rupture juste avant la boîte principale. Le type de rupture dépend du contexte de fragmentation englobant l'élément. Si l'élément est situé dans un conteneur multi-colonne, une rupture de colonne sera ajoutée. Si l'élément est situé dans un média paginé (mais pas dans un conteneur multi-colonnes), la rupture introduite sera une rupture de page.
avoid
Empêche toute rupture (de page, de colonne ou de région) avant la boîte.

Valeurs de rupture liées aux médias paginés

avoid-page
Empêche toute saut de page avant la boîte de l'élément.
page
Force un saut de page avant la boîte de l'élément
left
Force un ou deux saut de page avant la boîte de l'élément afin que la prochaine page soit une page gauche.
recto
Force un ou deux sauts de page avant 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).
right
Force un ou deux saut de page avant la boîte de l'élément afin que la prochaine page soit une page droite.
verso
Force un ou deux sauts de page avant 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).

Valeurs de ruptures relatives aux dispositions en colonnes

avoid-column
Empêche toute rupture de colonne avant la boîte de l'élément.
column
Force une rupture de colonne de page avant la boîte de l'élément.

Valeurs de ruptures relatives aux régions

region
Force une rupture de région avant la boîte de l'élément.
avoid-region
Empêche toute rupture de région avant la boîte de l'élément.

Syntaxe formelle

auto | avoid | always | all | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region

Alias/synonymes pour les ruptures de page

Pour des raisons de compatibilité, la propriété historique page-break-before devrait être considérée par les navigateurs comme un synonyme de break-before. Cela permet aux sites utilisant page-break-before de continuer à fonctionner comme précédemment. Voici un sous-ensemble des valeurs avec leurs alias :

page-break-before break-before
auto auto
left left
right right
avoid avoid
always page

Note : La valeur always pour page-break-before a été implémentée par les navigateurs comme une rupture de page et non comme une rupture de colonne. C'est pourquoi l'alias ici utilisé est page et non always.

Exemples

CSS

.exemple {
  -webkit-column-count: 4;
  -moz-column-count: 4;
  column-count: 4;
}

p {
  break-before: avoid-column;
  /* Pour Firefox : */
  page-break-before: avoid;
  /* Pour WebKit : */
  -webkit-column-break-before: avoid;
}

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>

Résultat

Spécifications

Spécification État Commentaires
CSS Fragmentation Module Level 3
La définition de 'break-before' dans cette spécification.
Candidat au statut de recommandation 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.
CSS Regions Module Level 1
La définition de 'break-before' dans cette spécification.
Version de travail 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.
CSS Multi-column Layout Module
La définition de 'break-before' dans cette spécification.
Version de travail Définition initiale. La spécification étend la propriété page-break-before de  CSS 2.1 afin de gérer les sauts de page ou de colonne.
Valeur initialeauto
Applicabilitééléments de type bloc
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Prise en charge pour une disposition multi-colonnes

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Supported in Multi-column LayoutChrome Support complet 50Edge Support complet 12Firefox Support complet 65IE Support complet 10Opera Support complet 37
Support complet 37
Aucun support 11.1 — 12.1
Safari Aucun support NonWebView Android Support complet 50Chrome Android Support complet 50Firefox Android Support complet 65Opera Android Support complet 37
Support complet 37
Aucun support 11.1 — 12.1
Safari iOS Aucun support NonSamsung Internet Android Support complet 5.0
always
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
avoid-columnChrome Aucun support NonEdge Support complet 12Firefox Aucun support NonIE Support complet 10Opera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
columnChrome Support complet 51Edge Support complet 12Firefox Aucun support NonIE Support complet 10Opera Support complet 38Safari Aucun support NonWebView Android Support complet 51Chrome Android Support complet 51Firefox Android Aucun support NonOpera Android Support complet 41Safari iOS Aucun support NonSamsung Internet Android Support complet 5.0

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.

Prise en charge pour les média paginés

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Supported in Paged MediaChrome Support complet 50Edge Support complet 12Firefox Support complet 65IE Support complet 10Opera Support complet 37
Support complet 37
Aucun support 11.1 — 12.1
Safari Support complet 10WebView Android Support complet 50Chrome Android Support complet 50Firefox Android Support complet 65Opera Android Support complet 37
Support complet 37
Aucun support 11.1 — 12.1
Safari iOS Support complet 10Samsung Internet Android Support complet 5.0
alwaysChrome Aucun support NonEdge Support complet 12Firefox Support complet 65IE Support complet 10Opera Aucun support 11.1 — 12.1Safari Aucun support NonWebView Android Support complet 50Chrome Android Aucun support NonFirefox Android Support complet 65Opera Android ? Safari iOS Aucun support NonSamsung Internet Android ?
page and avoid-pageChrome Support complet 50Edge Support complet 12Firefox Support complet 65IE Support complet 10Opera Aucun support 11.1 — 12.1Safari Support complet 10WebView Android Support complet 50Chrome Android Support complet 50Firefox Android Support complet 65Opera Android ? Safari iOS Support complet 10Samsung Internet Android ?
recto and verso
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.