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

break-before
break-after

Résumé des caractéristiques de la propriété break-before

Description rapide
Interdit ou impose des sauts (de page, de colonne...) avant l'élément.
Statut
Standard
Utilisable sur
HTML
Valeurs prédéfinies
auto | avoid | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-reegion | region
Pourcentages
Ne s'appliquent pas.
Valeur initiale
auto
Héritée par défaut
Non.
Type d'animation
Discrète : lors d'une animation, la propriété break-before passe d'une valeur à l'autre sans transition. (1)
Module W3C
Module CSS - Fragmentation
Références (W3C)
 🡇  
 🡅  
Statut du document: CR (document candidat à la recommandation)
Statut du document: CR (document candidat à la recommandation)

(1) Dans la pratique les navigateurs ne gèrent pas l'animation.

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.

break-before and break-after - Syntax Diagram (general context)Syntax diagram of the break-before and break-after CSS properties (general context). See stylescss.free.fr for details. auto auto avoid avoidbreak-before:;break-before:;




Schéma syntaxique de la propriété break-after
Contexte général
break-before and break-after - Syntax Diagram (Columns context)Syntax diagram of the break-before and break-after CSS properties in a conlumns context. See stylescss.free.fr for details. auto auto avoid avoid column column avoid-column avoid-columnbreak-before:;break-before:;
Schéma syntaxique de la propriété break-after
Contexte d'une mise en page en colonnes
break-before and break-after - Syntax Diagram (pages context)Syntax diagram of the break-before and break-after CSS properties (page context). See stylescss.free.fr for details. auto auto avoid avoid page page avoid-page avoid-page left left right right recto recto verso versobreak-before:;break-before:;
Schéma syntaxique de la propriété break-after
Contexte d'une impression
break-before and break-after - Syntax DiagramSyntax diagram of the break-before and break-after CSS properties (regions context). See stylescss.free.fr for details. auto auto avoid avoid region region avoid-region avoid-regionbreak-before:;break-before:;




Schéma syntaxique de la propriété break-after
Contexte d'une mise en page par régions (flux nommés)

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.
Élément parent
Élément 1
É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: 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.

Valeurs communes à toutes les propriétés :

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 fonctionner sur aucun navigateur. Quoiqu'il en soit, cela ne présenterait 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écessiteraient un traitement très lourd car il serait 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 section section de cette page, et à chacun des paragraphes à l'intérieur du cadre de démonstration ci-dessous. Vous pouvez redimensionner ce dernier pour observer comment se comportent les sauts de colonnes.

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 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.

break-before :
break-after :
Ac ne quis a nobis hoc ita dici forte miretur, quod alia quaedam in hoc facultas sit ingeni, neque haec dicendi ratio aut disciplina, ne nos quidem huic uni studio penitus umquam dediti fuimus. Etenim omnes artes, quae ad humanitatem pertinent, habent quoddam commune vinculum, et quasi cognatione quadam inter se continentur.
Ac ne quis a nobis hoc ita dici forte miretur, quod alia quaedam in hoc facultas sit ingeni, neque haec dicendi ratio aut disciplina, ne nos quidem huic uni studio penitus umquam dediti fuimus. Etenim omnes artes, quae ad humanitatem pertinent, habent quoddam commune vinculum, et quasi cognatione quadam inter se continentur.
Et est admodum mirum videre plebem innumeram mentibus ardore quodam infuso cum dimicationum curulium eventu pendentem. haec similiaque memorabile nihil vel serium agi Romae permittunt. ergo redeundum ad textum.

Prise en charge par les navigateurs (compatibilité).

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 (2022). En particulier, les valeurs recto et verso ne sont pas reconnues.

Colonne 1
Support de la syntaxe générale des propriétés break-before et break-after dans le contexte des pages imprimées.
Colonne 2
Prise en compte de la valeur page dans la syntaxe de ces propriétés (forcer un saut de page).
Colonne 3
Prise en compte de la valeur always dans la syntaxe des propriétés break-before et break-after.
Colonne 4
Prise en compte de la valeur avoid-page dans la syntaxe des propriétés break-after et break-before.
Colonne 5
Prise en compte des valeurs recto et verso dans la syntaxe des propriétés break-before et 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.

Colonne 1
Support des propriétés break-after et break-before dans le contexte d'une mise en page multi colonnes.
Colonne 2
Valeur avoid pour les propriétés break-after ou break-before dans un contexte multi-colonne.
Colonne 3
Valeur always pour les propriétés break-after et break-before dans un contexte multi 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.

Historique 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
    WD
    23 Juin 1999
    Document de travail.
    CR
    17 Décembre 2009
    Candidat à la recommandation.
    PR
    REC

  • 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.
    WD
    28 Février 2012
    Document de travail.
    CR
    14 Janvier 2016
    Candidat à la recommandation.
    PR
    REC

  • Module CSS - Fragmentation - Niveau 4

    Ajout des valeurs all et always pour les propriétés break-before et break-after.
    WD
    18 Décembre 2018
    Document de travail.
    CR
    PR
    REC

Voir aussi, dans le module CSS - Fragmentation.

Propriétés :

box-decoration-break
Gestion de la présentation des éléments fragmentés sur plusieurs lignes.
break-before
Interdit ou impose des sauts (de page, de colonne...) avant l'élément.
break-inside
Définit si les sauts de colonne, de page, etc. sont permis dans l'élément.
orphans
Définit le nombre de lignes qui doivent rester en base de page ou de colonne, dans chaque paragraphe.
widows
Définit le nombre de lignes qui doivent rester en haut des pages ou des colonnes.