Casser des boîtes avec une fragmentation CSS

Dans cet article, je vais vous présenter la spécification CSS Fragmentation. Vous n’avez peut-être jamais entendu parler de cela, cependant, si vous avez déjà créé une feuille de style d’impression et que vous souhaitiez contrôler les ruptures de contenu entre les pages, ou la mise en page à colonnes multiples et que vous vouliez arrêter une séparation entre les colonnes, vous l’avez rencontrée. 19659005] Je constate que très souvent, les problèmes signalés par Multicol sont réellement liés à la prise en charge de la fragmentation par les navigateurs. Après un bref aperçu des propriétés contenues dans cette spécification, je vous expliquerai l'état actuel de la prise en charge du navigateur et certaines des choses que vous pouvez faire pour le faire fonctionner aussi bien que possible dans vos projets multicol et print.

Qu'est-ce que la fragmentation?

La ​​fragmentation en CSS décrit le processus selon lequel le contenu est divisé en différentes zones. À l'heure actuelle, nous sommes peut-être confrontés à la fragmentation sur le Web à deux endroits: lorsque nous imprimons un document et si nous utilisons une mise en page à plusieurs colonnes. Ces deux choses sont essentiellement les mêmes. Lorsque vous imprimez (ou enregistrez au format PDF) une page Web, le contenu est fragmenté en autant de pages que nécessaire pour imprimer votre contenu.

Lorsque vous utilisez multicol, le contenu est fragmenté en colonnes. Chaque zone de colonne est comme une page dans le contexte paginé. Si vous pensez qu'un ensemble de colonnes ressemble beaucoup à un ensemble de pages, cela peut être un moyen utile de penser à multicol et au fonctionnement de la fragmentation dans celui-ci.

Si vous jetez un coup d'œil à la spécification de fragmentation CSS vous verrez un troisième contexte fragmenté mentionné – ce contexte est des régions. Comme il n’existe actuellement aucune implémentation utilisable de Regions, nous ne traiterons pas de cela dans cet article, mais plutôt de regarder les deux contextes que vous pourriez rencontrer dans votre travail.

Block And Inline Boxes

Dans cet article, je vais beaucoup parler de boîtes à blocs. . Chaque élément de votre page a une boîte. Certaines de ces cases sont disposées en blocs: paragraphes, éléments de liste, en-têtes. Celles-ci participeraient à un contexte de formatage de bloc. D'autres sont en ligne, tels que les mots d'un paragraphe, des étendues et des éléments d'ancrage. Ceux-ci participent à un contexte de formatage en ligne. En termes simples, lorsque je me réfère à une boîte de bloc, je parle de boîtes entourant des choses comme des paragraphes. Lorsqu’il s’agit de fragmentation, il est important de connaître le type de boîte à traiter.

Pour plus d’informations sur la disposition en bloc et en ligne, voir l’article de MDN « La disposition en bloc et en ligne en flux normal ». . C’est l’une de ces choses que nous comprenons probablement toutes à un certain niveau, mais que nous n’avions peut-être pas encore rencontrée auparavant.

Contrôle des coupures

Que vous soyez en train de créer une feuille de style, en utilisant un agent d’utilisateur spécifique pour créer un fichier PDF Si vous utilisez multicol, vous rencontrerez parfois des problèmes ressemblant à ceci.

Dans l'exemple ci-dessous de multicol, j'ai un contenu que je présente en trois colonnes. Au milieu du contenu se trouve une zone encadrée, divisée en deux colonnes. Je ne veux pas de ce comportement – j'aimerais que la boîte reste ensemble.

Pour résoudre ce problème, j'ajoute la propriété effraction: évitez dans la boîte. Les contrôles de propriété break-inside se brisent à l'intérieur d'éléments lorsque ceux-ci se trouvent dans un contexte fragmenté. Dans un navigateur qui prend en charge cette propriété, la boîte reste maintenant dans l'une des colonnes. Les colonnes paraîtront moins bien équilibrées, cependant, c'est généralement une meilleure chose que de vous retrouver avec la casquette divisée en colonnes.

La propriété break-inside est l'une des propriétés détaillées dans les spécifications de fragmentation. . Voici la liste complète des propriétés:

• break-before
• break-after
• break-inside
• orphelins
• veuves
• box-decoration-break

Jetons un coup d'oeil à comment ils sont censés fonctionner avant que nous passions à ce qui se passe réellement dans les navigateurs.

Le le break-before et le le break-after La propriété

Il y a deux propriétés qui contrôlent les séparations entre les blocs: les séparations et les séparations . Si vous avez un h2 suivi de deux paragraphes

vous avez trois blocs de bloc et vous utiliserez ces propriétés pour contrôler les ruptures entre le titre et le premier paragraphe, ou entre les deux paragraphes.

les propriétés sont utilisées sur les sélecteurs qui ciblent l'élément que vous souhaitez séparer avant ou après.

Par exemple, vous pouvez souhaiter que votre feuille de style d'impression apparaisse sur une nouvelle page chaque fois qu'il existe un en-tête de niveau 2. Dans ce cas, vous utiliseriez break-before: page sur l'élément h2 . Ceci contrôle la fragmentation et garantit qu'il y a toujours une pause avant la boîte de l'élément h2 .

 h2 {.
    rupture avant: page;
}

Une autre exigence courante consiste à éviter que les en-têtes ne constituent le dernier élément d'une page ou d'une colonne. Dans ce cas, vous pouvez utiliser un après-coup avec une valeur de à éviter . Cela devrait empêcher une coupure directement après la case de l'élément:

 h1, h2, h3, h4 {
    break-after: éviter;
}

Fragments Within Fragments

Il est possible qu'un élément fragmenté soit imbriqué dans un autre. Par exemple, avoir un multicol dans quelque chose qui est paginé. Dans ce cas, vous voudrez peut-être contrôler les sauts pour les pages mais pas pour les colonnes, ou l'inverse. C'est pourquoi nous avons des valeurs telles que page qui imposeraient toujours une rupture avant ou après l'élément, mais uniquement lorsque le fragment est une page. Ou Avoid-page qui éviterait une pause avant ou après l'élément uniquement pour les contextes paginés.

Il en va de même pour les colonnes. Si vous utilisez la valeur colonne cela forcerait toujours une pause avant ou après cet élément, mais uniquement pour les contextes multicol. La valeur eviter-colonne empêcherait une rupture dans les contextes multicol.

Il existe une valeur always dans la spécification de niveau 4 qui indique que vous souhaitez tout casser – page ou colonne. Cependant, comme ajout récent aux spécifications, il ne nous est pas utile actuellement.

Valeurs supplémentaires pour les supports paginés

Si vous créez un livre ou un magazine, vous avez des pages de gauche et de droite. Vous voudrez peut-être contrôler les ruptures pour forcer quelque chose sur la page gauche ou droite d'une propagation. Par conséquent, utilisez ce qui suit pour insérer un ou deux sauts de page avant le h2 afin de vous assurer qu'il est formaté comme une page de droite.

 h2 {
    rupture d'avant: à droite;
}

Il existe également des valeurs recto et verso qui se rapportent à la progression de page car les livres écrits dans une langue verticale ou de droite à gauche ont une progression de page différente de celle des livres écrits en anglais. Je ne vais pas aborder ces valeurs plus loin dans cet article car je m'intéresse principalement à ce qui est possible depuis le navigateur.

break-inside

Nous avons déjà vu un exemple de la propriété de cambriolage . Cette propriété contrôle la rupture à l'intérieur de blocs de bloc, par exemple. à l'intérieur d'un paragraphe, d'un titre ou d'un div.

Les choses que vous ne souhaitez peut-être pas interrompre peuvent inclure une boîte de dialogue comme décrit ci-dessus: figures où vous ne voulez pas que la légende soit séparée de l'image, des tableaux, des listes, etc. Ajoutez intrusion: évitez dans tout conteneur que vous ne souhaitez pas interrompre dans un contexte de fragmentation. Si vous souhaitez uniquement éviter les coupures entre colonnes, utilisez break-inside: Avoid-Colonne et entre pages Break-inside: Avoid-Page .

Les orphelins ] Et veuves Propriétés

Les propriétés orphelines et veuves traitent du nombre de lignes devant rester avant ou après une pause (provoquées par une colonne ou une nouvelle page). Par exemple, si je veux éviter de laisser une seule ligne à la fin d'une colonne, j'utiliserais la propriété orphans comme dans la typographie, un orphelin est la première ligne d'un paragraphe qui apparaît seul à le bas d'une page avec le reste du paragraphe brisé sur une autre page. La propriété doit être ajoutée au même élément qui fragmente (dans notre cas, le conteneur multicol).

 .container {
    nombre de colonnes: 3;
    orphelins: 2;
}

Pour contrôler le nombre de lignes devant figurer en haut d'une colonne ou d'une page après une pause, utilisez veuves :

 .container {
    nombre de colonnes: 3;
    veuves: 2;
}

Ces propriétés traitent des ruptures entre les zones en ligne, telles que les lignes de mots à l'intérieur d'un paragraphe. Par conséquent, ils ne sont d'aucune utilité dans les cas où un en-tête ou un autre élément de bloc est isolé au bas d'une colonne ou d'une page, vous avez besoin des propriétés de rupture décrites plus haut pour cela.

Box Decoration

La propriété box-decoration-break est peut-être intéressante. Cela contrôle la situation dans laquelle vous avez une boîte avec une bordure divisée en deux zones de colonne ou pages. Voulez-vous que la frontière soit essentiellement coupée en deux? Ou voulez-vous que chacune des deux moitiés de la boîte soit entièrement enveloppée dans une bordure?

Le premier scénario est le scénario par défaut, comme si vous définissiez la propriété box-decoration-break à tranche sur la boîte.

 .box {
    boîte-décoration-pause: tranche;
}

Pour obtenir le deuxième comportement, définissez box-decoration-break sur clone.

 .box {
    boîte-décoration-pause: clone;
}

Prise en charge de la fragmentation par le navigateur

Nous en venons maintenant à la raison pour laquelle je n’ai pas beaucoup d’exemples CodePen ci-dessus pour vous montrer tout cela, et la raison principale pour laquelle j’ai écrit cet article. La prise en charge de ces propriétés par le navigateur n’est pas excellente.

Si vous travaillez dans un support paginé avec un agent utilisateur spécifique tel que Prince, vous pouvez bénéficier d’une prise en charge très efficace de la fragmentation, qui vous sera probablement très utile. Si vous travaillez avec un navigateur Web, en multicol, en créant des feuilles de style d'impression ou en utilisant quelque chose comme Headless Chrome pour générer des fichiers PDF, la prise en charge est quelque peu inégale. Vous constaterez que le navigateur avec le meilleur support est Edge – jusqu'à ce qu'il passe au chrome de toute façon!

Puis-je utiliser n'est pas très utile pour expliquer le support en raison du mélange des propriétés de fragmentation avec multicol , ayant alors des données séparées pour les propriétés héritées . Ainsi, dans le cadre du travail que j'ai effectué pour MDN afin de documenter les propriétés et leur prise en charge, j'ai commencé à tester la prise en charge réelle du navigateur. Vous trouverez ci-dessous quelques conseils basés sur ces tests.

Propriétés héritées et préfixées par le vendeur

Je ne peux pas aller beaucoup plus loin sans une leçon d’histoire. Si vous avez réellement besoin de la prise en charge de la fragmentation, il est possible que vous trouviez un certain soulagement dans les propriétés héritées qui faisaient à l'origine partie de CSS2 (ou dans certaines propriétés préfixées existantes).

Dans CSS2, certaines propriétés permettaient de contrôler le saut de page. Multicol n’existait pas à ce stade, le seul contexte fragmenté était donc un contexte paginé. Cela signifie que trois propriétés de saut de page spécifiques ont été introduites:

• page-break-before
• page-break-after
• page-inside-inside

Elles fonctionnent de la même manière que les propriétés plus génériques sans le page- préfixe, contrôlant les pauses avant, après et à l'intérieur des cases. Pour les feuilles de style d'impression, vous constaterez que certains navigateurs plus anciens qui ne prennent pas en charge les nouvelles propriétés break- prennent en charge ces propriétés préfixées par page. Les propriétés sont traitées comme des alias pour les nouvelles propriétés.

Dans un document de travail 2005 de la spécification multicol vous trouverez des détails sur les propriétés de rupture pour multicol – en utilisant les propriétés précédées de column- . (c.-à-d. rupture de colonne avant rupture de colonne après et rupture de colonne à l'intérieur ). Celles-ci avaient disparu en 2009 et un brouillon faisait partie de la spécification multicol pour les propriétés de rupture non préfixées qui ont finalement été intégrées à la spécification CSS Fragmentation.

Cependant, certaines propriétés spécifiques aux colonnes à préfixe vendeur ont été implémentées en fonction de ces propriétés. Ce sont:

• -webkit-colonne-break-before
• -webkit-colonne-break-after
• -webkit-colonne-break-inside

Prise en charge de la fragmentation dans Multicol

Ce qui suit est basé sur le test de ces fonctionnalités dans des contextes multicol. J'ai essayé d'expliquer ce qui était possible, mais jetez un coup d'œil aux CodePens dans les navigateurs disponibles.

Multicol And intrusion

La prise en charge de multicol est préférable pour les [ propriété de cambriolage . Les versions les plus récentes de Chrome, Firefox, Edge et Safari prennent en charge l’introduction : évitez . Vous devriez donc trouver que vous pouvez empêcher la casse entre les colonnes en utilisant multicol.

Plusieurs navigateurs, à l'exception de Firefox, prennent en charge la propriété -webkit-column-break-inside ce qui peut être utilisé avec une valeur de éviter et peut empêcher les ruptures de boîtes entre colonnes qui ne prennent pas en charge le effraction .

Firefox prend en charge le saut de page: à éviter en multicol. Par conséquent, utiliser cette propriété empêchera les ruptures dans les cases des navigateurs Firefox antérieurs à Firefox 65.

Cela signifie que si vous voulez empêcher les coupures entre les cases dans multicol, l’utilisation du CSS suivant couvrira le plus grand nombre de navigateurs possible, en tant que autant que possible.

 .box {
    -webkit-column-break-inside: evitez;
    saut de page à l'intérieur: à éviter;
    effraction à l'intérieur: éviter;
}

En ce qui concerne la valeur de colonne indiquant explicitement que vous souhaitez uniquement éviter les ruptures entre les colonnes, et non les pages, fonctionne dans tous les navigateurs sauf Firefox.

Le code ci-dessous arrondit certains de ces tests. en multicol pour que vous puissiez les essayer vous-même.

Multicol Et break-before

Pour éviter les ruptures devant un élément, vous devriez pouvoir utiliser le break-before: evitez ou break-before: evit-column . La propriété Avoid n'est pas prise en charge par le navigateur.

Edge prend en charge break-before: column pour toujours forcer la rupture avant la boîte de l'élément.

Safari, Chrome et Edge prennent également en charge - webkit-column-column-before: toujours ce qui forcera une pause avant la boîte de l'élément. Par conséquent, si vous souhaitez forcer une rupture avant la boîte d'un élément, vous devez utiliser:

 .box {
    -webkit-column-break-before: toujours;
    rupture avant: colonne;
}

Empêcher une pause avant la boîte est actuellement une tâche impossible. Vous pouvez jouer avec quelques exemples de ces propriétés ci-dessous:

Multicol Et break-after

Pour éviter les ruptures après un élément, pour éviter qu'il ne devienne la dernière chose au bas d'une colonne, vous devriez pouvoir utiliser le break-after: evit et le break-after: evit-column . Edge est le seul navigateur qui les supporte.

Edge prend également en charge le fractionnement après un élément à l'aide de break-after: colonne Chrome prend en charge [Break-after]: column et de plus. -webkit-colonne-break-after: toujours .

Firefox ne prend pas en charge break-after ni aucune des propriétés préfixées pour forcer ou autoriser les ruptures après une boîte. [19659005] Par conséquent, à part Edge, vous ne pouvez pas vraiment éviter les pauses après une boîte. Si vous voulez les forcer, vous obtiendrez des résultats dans certains navigateurs en utilisant le code CSS suivant:

 .box {
    -webkit-break-after: toujours;
    break-after: colonne;
}

Assistance lors de l’impression à partir du navigateur

Que vous imprimiez directement à partir du navigateur de votre ordinateur de bureau ou que vous générez des fichiers PDF à l’aide de Chrome sans tête ou de toute autre solution reposant sur la technologie du navigateur ne fait aucune différence. Vous dépendez de la prise en charge des propriétés de fragmentation par le navigateur.

Si vous créez une feuille de style d'impression, le support des propriétés de rupture est similaire à celui de Multicol. Toutefois, pour prendre en charge les navigateurs plus anciens, vous devez doubler les propriétés pour utiliser le paramètre page- propriétés préfixées.

Les feuilles de style d'impression et l'entrée par effraction

Dans les navigateurs modernes, la propriété par effraction peut être utilisée pour éviter les ruptures à l'intérieur Ajoutez la propriété page-break-inside pour prendre en charge les navigateurs plus anciens.

 .box {
    saut de page à l'intérieur: à éviter;
    effraction à l'intérieur: éviter;
}

Feuilles de style d'impression et break-before

Pour forcer les pauses avant une boîte, utilisez break-before: page avec page-break-before: toujours .

 .box {
    saut de page avant: toujours;
    rupture avant: page;
}

Pour éviter les coupures avant une boîte, utilisez le break-before: Avoid-page avec Le saut de page avant: Avoid .

 .box {
    saut de page avant: éviter;
    break-before: eviter-page;
}

Il existe un meilleur support pour les valeurs de page et Avoid-page que pour les valeurs équivalentes à plusieurs multicol. La plupart des navigateurs modernes ont un support.

Feuilles de style d'impression et break-before

Pour forcer les ruptures après une boîte, utilisez break-after: page avec . saut de page après: toujours .

 .box {
    saut de page après: toujours;
    break-after: page;
}

Pour éviter les coupures après une boîte, utilisez point mort: Avoid-page avec Point après-coupure: Evitez .

 .box {
    saut de page après: éviter;
    break-after: Avoid-page;
}

Veuves et orphelins

Les propriétés des veuves et orphans bénéficient d'un bon support pour tous les navigateurs – le seul navigateur sans implémentation étant Firefox. Je suggérerais de les utiliser lors de la création d'une mise en page multicol ou d'une feuille de style d'impression. S'ils ne travaillent pas pour une raison quelconque, vous aurez des veuves et des orphelins, ce qui n'est pas idéal, mais ce n'est pas non plus un désastre. S'ils fonctionnent, votre typographie sera encore plus belle.

box-decoration-break

La propriété finale de box-decoration-break prend en charge multicol et l'impression sous Firefox. Safari, Chrome et d'autres navigateurs à base de chrome prennent en charge -webkit-box-decoration-break mais uniquement sur des éléments en ligne. Ainsi, vous pouvez cloner des frontières autour des lignes d'une phrase par exemple;

Dans le CodePen ci-dessous, vous pouvez voir que les tests pour -webkit-box-decoration-break: clone avec Feature Queries sont vrais, mais , la propriété n’a aucun effet sur la bordure de la boîte dans le contexte multicol.

Utilisation de la fragmentation

Comme vous pouvez le constater, l’état actuel de la fragmentation dans les navigateurs est quelque peu fragmenté! Cela dit, vous pouvez obtenir un montant raisonnable et, en cas d'échec, le résultat a tendance à être sous-optimal mais pas catastrophique. Ce qui signifie que cela vaut la peine d'essayer.

Il est à noter que le fait d'être trop lourd avec ces propriétés pourrait donner lieu à autre chose que ce que vous espériez. Si vous travaillez sur le Web plutôt que d'imprimer et de forcer les sauts de colonne après chaque paragraphe, finissez avec plus de paragraphes que d'espace pour les colonnes, multicol finira par déborder dans la direction en ligne. Il manquera de colonnes pour placer vos paragraphes supplémentaires. Par conséquent, même là où il existe un support, vous devez toujours tester avec soin, et souvenez-vous que moins vaut plus dans beaucoup de cas.

Ressources supplémentaires

Pour en savoir plus sur les propriétés, rendez-vous sur MDN, récemment mis à jour les pages là-bas et essaie également de garder les données du navigateur compat à jour. La page principale de CSS Fragmentation renvoie aux pages de propriétés individuelles qui contiennent des exemples supplémentaires, des données de compatibilité de navigateur et d'autres informations sur l'utilisation de ces propriétés.

(il)