Les propriétés CSS break-before et break-after

Schémas syntaxiques de break-before et break-after.

La syntaxe de break-after est exactement identique à celle de break-before.
Les liens présents sur les schémas donnent accès à une description plus détaillée.

Description.

Les propriétés break-before et break-after imposent ou interdisent les sauts de page, de colonne ou de région avant ou après l'élément.

Ces deux propriétés complètent la propriété break-inside. Ainsi, dans l'exemple ci-dessous, la présence ou non d'un saut entre les éléments 1 et 2 dépend de :

• La propriété break-inside de l'élément parent.
• La propriété break-after de l'élément 1.
• La propriété break-before de l'élément 2.

Certains types d'éléments ne sont jamais coupés : les images, les vidéos, par exemple. Par contre les blocs contenant du texte peuvent se retrouver avec une rupture au milieu.
D'autre part, les éléments positionnés en absolu (voir position) ne sont pas concernés par les ruptures.

Consultez également ces autres propriétés, qui ont elles aussi un effet sur les ruptures : break-inside, widows, orphans.

break-before et break-after remplacent les anciennes propriétés page-break-before et page-break-after qui ne devraient plus être utilisées.

Ces deux propriétés gèrent également la fragmentation du contenu entre régions. Reportez-vous à la page flow-into pour une explication détaillée de la mise en page par régions (ou par flux nommés).

Syntaxes pour break-before et break-after.

Valeurs utilisables quelque soit le contexte.

• break-before: auto; break-after: auto;

  Valeur par défaut. Les ruptures sont déterminées par le navigateur. Aucune contrainte particulière n'est spécifiée.

• break-before: avoid; break-after: avoid;

  Évite, dans le mesure du possible, les sauts de colonne, de page et de région, avant ou après l'élément.

Valeurs applicables à la pagination.

Ces valeurs, autres que auto et avoid, ne sont utiles que si la restitution du document est faite par un périphérique paginé (imprimante). Si ce n'est pas le cas, ces valeurs n'ont aucun effet.

• break-before: avoid-page; break-after: avoid-page;

  Évite les sauts de page avant ou après l'élément.

• break-before: page; break-after: page;

  Force un saut de page avant ou après l'élément.

• break-before: left; break-after: left;

  Force un ou deux sauts de page avant ou après l'élément, de manière à ce que la page suivante soit une page de gauche (numéro pair).

• break-before: right; break-after: right;

  Force un ou deux sauts de page avant ou après l'élément, de manière à ce que la page suivante soit une page de droite (numérotation impaire).

• break-before: recto; break-after: recto;

  Force un ou deux sauts de pages, de manière à ce que la page suivante soit une page recto. Pour les écritures européennes, de gauche à droite, cette valeur est identique à right. Pour les écritures de droite à gauche, elle est équivalente à left.

• break-before: verso; break-after: verso;

  Force un ou deux sauts de pages, de manière à ce que la page suivante soit une page verso. Pour les écritures européennes, de gauche à droite, cette valeur est identique à left. Pour les écritures de droite à gauche, elle est équivalente à right.

Valeurs applicables aux mises en page en colonnes.

Ces valeurs, autres que auto et avoid, sont utiles lorsque la mise en page est sur plusieurs colonnes (voir la propriété columns). Ces valeurs n'ont aucun effet si la mise en page est sur une seule colonne.

• break-before: avoid-column; break-after: avoid-column;

  Évite, dans la mesure du possible, les sauts de colonne avant ou après l'élément.

• break-before: column; break-after: column;

  Force un saut de colonne avant ou après l'élément.

Valeurs utilisables dans une mise en page par régions.

Ces valeurs, autres que auto et avoid, sont utilisables dans une mise en page par régions, encore appelée mise en page par flux nommés (voir la propriété flow-into) sinon ces valeurs n'ont aucun effet.

• break-before: avoid-region; break-after: avoid-region;

  Évite, dans la mesure du possible, les sauts de région avant ou après l'élément.

• break-before: region; break-after: region;

  Force un saut de région avant ou après l'élément.

• break-before: initial; (auto) break-before: inherit; break-before: revert; break-before: revertLayer; break-before: unset;

  break-after: initial; (auto) break-after: inherit; break-after: revert; break-after: revertLayer; break-after: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Animation des propriétés break-before et break-after.

La norme prévoit la possibilité d'animer ces deux propriétés, mais cela ne semble pas présenter d'intérêt majeur. Cela ne présente même aucun intérêt d'animer avec les valeurs spécifiques à l'impression, et l'animation avec les valeurs spécifiques aux mises en page en colonnes ou par régions nécessitent un traitement très lourd car il est alors nécessaire de recalculer toute la mise en page à chaque étape de l'animation.

Exemple interactif.

Les valeurs choisies pour les propriétés break-before et break-after sont appliquées à chacune des sections de cette page (avant les h2), pour les valeurs relatives aux sauts de page, et à chacun des paragraphes à l'intérieur du cadre de démonstration ci-dessous pour les valeurs relatives aux sauts de colonnes ( ⚠ pas sur Firefox  ).

Remarque : la propriété column-fill a été fixée à la valeur auto pour ne pas interférer avec le comportement de break-before.

Pour voir l'effet sur les sauts de page, vous devrez imprimer la page ou au moins l'afficher en aperçu avant impression.
En ce qui concerne les sauts entre régions, cette notion est encore très mal prise en charge par es navigateurs : il n'est pas possible de présenter un exemple opérationnel.

Compatibilité des navigateurs avec break-after.

Les propriétés break-before et break-after sont utilisables dans trois contextes différents : la pagination lors de l'impression, les mises en page multi-colonnes, et les mises en page par régions. Les compatibilités sont décrites ci-après pour chacun de ces contextes.

break-before et break-after lors de l'impression.

Il reste encore pas mal de problèmes de compatibilité avec pratiquement tous les navigateurs actuels (2025). En particulier, les valeurs recto et verso ne sont pas reconnues.
Pour améliorer la compatibilité, vous pouvez doubler les syntaxes avec les anciennes propriétés page-break-before et page-break-after.

1

Propriétés
break-after
break-before
(pages)

2

Valeur
page

(pages)

3

Valeur
always

(pages)

4

Valeur
avoid-page

(pages)

5

Valeurs
recto
verso
(pages)

Estimation de la prise en charge globale.

96%

96%

4%

94%

0%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Caniuse

Caniuse

Caniuse

break-before et break-after dans une mise en page en colonnes.

Remarques :

(1) Supporté uniquement à l'impression.

(2) Supporté uniquement pendant l'impression.

1

Propriétés
break-after
break-before
(colonnes)

2

Valeur
avoid

(colonnes)

3

Valeur
always

(colonnes)

Estimation de la prise en charge globale.

76%

75%

0%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

1

2

Samsung Internet

Chrome

Edge

Firefox

1

2

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Caniuse

break-before et break-after dans une mise en page par régions.

La mise en page par régions n'est pas encore prise en charge par les navigateurs (2023). Les propriétés break-before et break-after utilisées dans ce contexte (avec les valeurs region et avoid-region) sont donc inopérantes.

Histoire de la propriété break-after.

• Module CSS - Mise en page multi-colonnes - Niveau 1

  Définition des propriétés break-before et break-after dans le contexte d'une mise en page multi-colonnes
  

  23 Juin 1999

  Document de travail.

  

  17 Décembre 2009

  Candidat à la recommandation.

  

  

• Module CSS - Fragmentation - Niveau 3

  Introduction des propriétés break-before et break-after pour la gestion des sauts de colonne, de page, ou de région.
  

  28 Février 2012

  Document de travail.

  

  14 Janvier 2016

  Candidat à la recommandation.

  

  

• Module CSS - Fragmentation - Niveau 4

  Ajout des valeurs all et always pour les propriétés break-before et break-after.
  

  18 Décembre 2018

  Document de travail.

  

  

  

Voir aussi, dans le module CSS - Fragmentation.

Propriétés :