{"id":60712,"date":"2019-02-28T04:18:56","date_gmt":"2019-02-28T11:18:56","guid":{"rendered":"http:\/\/www.taterboy.com\/blog\/2019\/02\/breaking-boxes-with-css-fragmentation\/"},"modified":"2019-02-28T04:18:56","modified_gmt":"2019-02-28T11:18:56","slug":"breaking-boxes-with-css-fragmentation","status":"publish","type":"post","link":"https:\/\/www.taterboy.com\/blog\/2019\/02\/breaking-boxes-with-css-fragmentation\/","title":{"rendered":"Breaking Boxes With CSS Fragmentation"},"content":{"rendered":"Breaking Boxes With CSS Fragmentation<\/title><\/p>\n<article>\n<header>\n<h1>Breaking Boxes With CSS Fragmentation<\/h1>\n<address>Rachel Andrew<\/address>\n<p> <time datetime=\"2019-02-27T14:00:00+01:00\">2019-02-27T14:00:00+01:00<\/time><time datetime=\"2019-02-28T09:28:09+00:00\">2019-02-28T09:28:09+00:00<\/time><\/header>\n<p>In this article, I\u2019m going to introduce you to the CSS Fragmentation specification. You might never have heard of it, however, if you have ever created a print stylesheet and wanted to control where the content breaks between pages, or multi-column layout and wanted to stop a figure breaking between columns, you have encountered it.<\/p>\n<p>I find that quite often problems people report with multicol are really problems with browser support of fragmentation. After a quick rundown of the properties contained in this specification, I\u2019ll be explaining the current state of browser support and some of the things you can do to get it working as well as it can in your multicol and print projects.<\/p>\n<h3>What Is Fragmentation?<\/h3>\n<p>Fragmentation in CSS describes the process by which content becomes broken up into different boxes. Currently, we have two places in which we might run into fragmentation on the web: when we print a document, and if we use multi-column layout. These two things are essentially the same. When you print (or save to PDF) a webpage, the content is fragmented into as many pages as are required to print your content.<\/p>\n<p>When you use multicol, the content is fragmented into columns. Each column box is like a page in the paged context. If you think of a set of columns as being much like a set of pages it can be a helpful way to think about multicol and how fragmentation works in it.<\/p>\n<p>If you take a look at the <a href=\"https:\/\/drafts.csswg.org\/css-break-3\/\">CSS Fragmentation Specification<\/a> you will see a third fragmented context mentioned \u2014 that context is Regions. As there are no current usable implementations of Regions, we won\u2019t be dealing with that in this article, but instead looking at the two contexts that you might come across in your work.<\/p>\n<aside data-audience=\"non-subscriber\">\n<div>\n<div>\n<p><em>Up, up to the stars<\/em>! For our second <a href=\"https:\/\/smashingconf.com\/toronto-2019\/\">SmashingConf Toronto<\/a> ??, we\u2019ll explore the <strong>bright and dark sides<\/strong> of front-end and UX \u2014 CSS Grid, service workers, cross-cultural design, performance and CSS\/JavaScript techniques. Instead of showing slides, presenters will show how they actually work, from <strong>live debugging<\/strong> to <strong>live redesign<\/strong>. June 25\u201326.<\/p>\n<p> <a href=\"https:\/\/smashingconf.com\/toronto-2019\"><br \/>\n All speakers & topics\u00a0?<br \/>\n <\/a>\n <\/div>\n<div>\n <a href=\"https:\/\/smashingconf.com\/toronto-2019\"><\/p>\n<div>\n <img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/02\/scott-jehl-toronto.png?resize=310%2C400\" alt=\"A photo of Scott Jehl, embedded into a red circle Smashing Cat, and an illustrated moon and a space rocket besides it.\" width=\"310\" height=\"400\"><\/div>\n<p> <\/a>\n <\/div>\n<\/p><\/div>\n<\/aside>\n<h3>Block And Inline Boxes<\/h3>\n<p>I am going to mention block boxes a lot in this article. Every element of your page has a box. Some of those boxes are laid out as blocks: paragraphs, list items, headings. These are said to be participating in a block formatting context. Others are inline such as the words in a paragraph, spans and anchor elements. These participate in an inline formatting context. Put simply, when I refer to a block box, I\u2019m talking about boxes around things like paragraphs. When dealing with fragmentation, it is important to know which kind of box you are dealing with.<\/p>\n<p>For more information on block and inline layout, see the MDN article \u201c<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Flow_Layout\/Block_and_Inline_Layout_in_Normal_Flow\">Block And Inline Layout In Normal Flow<\/a>\u201d. It is one of those things that we probably all understand on some level but might not have encountered the terminology of before.<\/p>\n<h3>Controlling Breaks<\/h3>\n<p>Whether you are creating a print stylesheet, using a specific print user agent to make a PDF,or using multicol, you will sometimes run into problems that look like this.<\/p>\n<p>In the below multicol example, I have some content which I am displaying as three columns. In the middle of the content is a boxed out area, which is being broken across two columns. I don\u2019t want this behavior \u2014 I would like the box to stay together.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/844809d2-71b6-4482-8d8a-23d82440be41\/smashing-break-inside-simple.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/02\/smashing-break-inside-simple.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/844809d2-71b6-4482-8d8a-23d82440be41\/smashing-break-inside-simple.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/844809d2-71b6-4482-8d8a-23d82440be41\/smashing-break-inside-simple.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/844809d2-71b6-4482-8d8a-23d82440be41\/smashing-break-inside-simple.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/844809d2-71b6-4482-8d8a-23d82440be41\/smashing-break-inside-simple.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/02\/smashing-break-inside-simple.png?w=900\" sizes=\"100vw\" alt=\"Three columns with a boxed out area broken across two of them\"><\/a><figcaption>\n\t\t\tThe box breaks across two columns (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/844809d2-71b6-4482-8d8a-23d82440be41\/smashing-break-inside-simple.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>To fix this, I add the property <code>break-inside: avoid<\/code> to the box. The <code>break-inside<\/code> property controls breaks inside elements when they are in a fragmented context. In a browser which supports this property, the box will now stay in one of the columns. The columns will look less well balanced, however, that is generally a better thing than ending up with the boxout split across columns.<\/p>\n<div>\n<p data-height=\"500\" data-theme-id=\"light\" data-slug-hash=\"pYvyBe\" data-user=\"rachelandrew\" data-default-tab=\"result\">See the Pen <a href=\"https:\/\/codepen.io\/rachelandrew\/pen\/pYvyBe\">Simple break-inside example<\/a> by (<a href=\"https:\/\/codepen.io\/rachelandrew\">Rachel Andrew<\/a>.<\/p>\n<\/div>\n<p>The <code>break-inside<\/code> property is one of the properties detailed in the fragmentation spec. The full list of properties is as follows:<\/p>\n<ul>\n<li><code>break-before<\/code><\/li>\n<li><code>break-after<\/code><\/li>\n<li><code>break-inside<\/code><\/li>\n<li><code>orphans<\/code><\/li>\n<li><code>widows<\/code><\/li>\n<li><code>box-decoration-break<\/code><\/li>\n<\/ul>\n<p>Let\u2019s have a look at how these are supposed to work before we move onto what actually happens in browsers.<\/p>\n<h4>The <code>break-before<\/code> And <code>break-after<\/code> Properties<\/h4>\n<p>There are two properties that control breaks between block-level boxes: <code>break-before<\/code> and <code>break-after<\/code>. If you have an <code>h2<\/code> followed by two paragraphs <code><\/p>\n<p><\/code> you have three block boxes and you would use these properties to control the breaks between the heading and first paragraph, or between the two paragraphs.<\/p>\n<p>The properties are used on selectors which target the element you want to break before or after.<\/p>\n<p>For example, you might want your print stylesheet to break onto a new page every time there is a level 2 heading. In this case, you would use <code>break-before: page<\/code> on the <code>h2<\/code> element. This controls the fragmentation and ensures there is always a break before the box of the <code>h2<\/code> element.<\/p>\n<pre><code>h2 {\n break-before: page;\n}\n<\/code><\/pre>\n<p>Another common requirement is to prevent headings ending up as the last thing on a page or column. In this case, you might use <code>break-after<\/code> with a value of <code>avoid<\/code>. This should prevent a break directly after the box of the element:<\/p>\n<pre><code>h1, h2, h3, h4 {\n break-after: avoid;\n}\n<\/code><\/pre>\n<div><\/div>\n<h5>Fragments Within Fragments<\/h5>\n<p>It is possible that you might have an element that is fragmented nested inside another. For example, having a multicol inside something which is paged. In that case, you might want to control breaks for pages but not for columns, or the other way around. This is why we have values such as <code>page<\/code> which would always force a break before or after the element but only when the fragment is a page. Or <code>avoid-page<\/code> which would avoid a break before or after the element only for paged contexts.<\/p>\n<p>The same applies to columns. If you use the value <code>column<\/code>, this would always force a break before or after that element, but only for multicol contexts. The value <code>avoid-column<\/code> would prevent a break in multicol contexts.<\/p>\n<p>There is an <code>always<\/code> value in the Level 4 specification which indicates that you want to break through everything – page or column. However, as a recent addition to the spec it is not currently useful to us.<\/p>\n<h4>Additional Values For Paged Media<\/h4>\n<p>If you are creating a book or magazine, you have left and right pages. You might want to control breaking in order to force something onto the left or right page of a spread. Therefore, using the following would insert one or two-page breaks before the <code>h2<\/code> to ensure it was formatted as a right page.<\/p>\n<pre><code>h2 {\n break-before: right;\n}\n<\/code><\/pre>\n<p>There are also recto and verso values which relate to <em>page progression<\/em> as books written in a vertical or right to left language have a different page progression than books written in English. I\u2019m not going to cover these values further in this article as I\u2019m primarily concerned with what is possible from the browser this time.<\/p>\n<h4><code>break-inside<\/code><\/h4>\n<p>We have already seen an example of the <code>break-inside<\/code> property. This property controls breaking <em>inside<\/em> block boxes, e.g. inside a paragraph, heading or a div.<\/p>\n<p>Things that you may not want to break can include a boxout as described above: figures where you do not want the caption detached from the image, tables, lists and so on. Add <code>break-inside: avoid<\/code> to any container you don\u2019t wish to break in any fragmentation context. If you only wish to avoid breaks between columns use <code>break-inside: avoid-column<\/code> and between pages <code>break-inside: avoid-page<\/code>.<\/p>\n<h4>The <code>orphans<\/code> And <code>widows<\/code> Properties<\/h4>\n<p>The <code>orphans<\/code> and <code>widows<\/code> properties deal with how many lines should be left before or after a break (either caused by a column or a new page). For example, if I want to avoid a single line being left at the end of a column, I would use the <code>orphans<\/code> property, as in typography, an orphan is the first line of a paragraph that appears alone at the bottom of a page with the rest of the paragraph broken onto another page. The property should be added to the same element which is fragmenting (in our case, the multicol container).<\/p>\n<pre><code>.container {\n column-count: 3;\n orphans: 2;\n}\n<\/code><\/pre>\n<p>To control how many lines should be at the top of a column or page after a break, use <code>widows<\/code>:<\/p>\n<pre><code>.container {\n column-count: 3;\n widows: 2;\n}\n<\/code><\/pre>\n<p>These properties deal with breaks between inline boxes such as the lines of words inside a paragraph. Therefore, they don\u2019t help in the situation where a heading or other block element is alone at the bottom of a column or page, you need the break properties discussed above for that.<\/p>\n<div><\/div>\n<h4>Box Decoration<\/h4>\n<p>A final property that may be of interest is the <code>box-decoration-break<\/code> property. This controls the situation where you have a box with a border broken between two column boxes or pages. Do you want the border to essentially be sliced in half? Or do you want each of the two halves of the box to be wrapped fully in a border?<\/p>\n<p>The first scenario is the default, and is as if you set the <code>box-decoration-break<\/code> property to <code>slice<\/code> on the box.<\/p>\n<pre><code>.box {\n box-decoration-break: slice;\n}\n<\/code><\/pre>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/51c0040c-099d-47ae-8f0d-b296888b1a97\/smashing-box-decoration-slice.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/02\/smashing-box-decoration-slice.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/51c0040c-099d-47ae-8f0d-b296888b1a97\/smashing-box-decoration-slice.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/51c0040c-099d-47ae-8f0d-b296888b1a97\/smashing-box-decoration-slice.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/51c0040c-099d-47ae-8f0d-b296888b1a97\/smashing-box-decoration-slice.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/51c0040c-099d-47ae-8f0d-b296888b1a97\/smashing-box-decoration-slice.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/02\/smashing-box-decoration-slice.png?w=900\" sizes=\"100vw\" alt=\"A box with a border which is broken between columns\"><\/a><figcaption>\n\t\t\tA value of slice means the border is effectively sliced in half (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/51c0040c-099d-47ae-8f0d-b296888b1a97\/smashing-box-decoration-slice.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>To get the second behavior, set <code>box-decoration-break<\/code> to clone.<\/p>\n<pre><code>.box {\n box-decoration-break: clone;\n}\n<\/code><\/pre>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/47fbad78-72c0-41cf-a419-966cef102845\/smashing-box-decoration-clone.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/02\/smashing-box-decoration-clone.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/47fbad78-72c0-41cf-a419-966cef102845\/smashing-box-decoration-clone.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/47fbad78-72c0-41cf-a419-966cef102845\/smashing-box-decoration-clone.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/47fbad78-72c0-41cf-a419-966cef102845\/smashing-box-decoration-clone.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/47fbad78-72c0-41cf-a419-966cef102845\/smashing-box-decoration-clone.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/02\/smashing-box-decoration-clone.png?w=900\" sizes=\"100vw\" alt=\"Boxes are completely wrapped in borders\"><\/a><figcaption>\n\t\t\tA value of clone means the border is wrapped fully round each fragment of the box (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/47fbad78-72c0-41cf-a419-966cef102845\/smashing-box-decoration-clone.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<h3>Browser Support For Fragmentation<\/h3>\n<p>Now we come to the reason I don\u2019t have a bunch of CodePen examples above to demo all of this to you, and the main reason for my writing this article. Browser support for these properties is not great.<\/p>\n<p>If you are working in Paged Media with a specific user agent such as Prince, then you can enjoy really good support for fragmentation, and will probably find these properties very useful. If you are working with a web browser, either in multicol, creating print stylesheets, or using something like Headless Chrome to generate PDFs, support is somewhat patchy. You\u2019ll find that the browser with the best support is Edge \u2014 until it moves to Chromium anyway!<\/p>\n<p>Can I Use isn\u2019t overly helpful with explaining support due to <a href=\"https:\/\/caniuse.com\/#feat=multicolumn\">mixing the fragmentation properties in with multicol<\/a>, then having some separate data for <a href=\"https:\/\/caniuse.com\/#feat=css-page-break\">legacy properties<\/a>. So, as part of the work I\u2019ve been doing for MDN to document the properties and their support, I began testing the actual browser support. What follows is some advice based on that testing.<\/p>\n<h4>Legacy And Vendor Prefixed Properties<\/h4>\n<p>I can\u2019t go much further without a history lesson. If you find you really need support for fragmentation then you may find some relief in the legacy properties which were originally part of CSS2 (or in some prefixed properties that exist).<\/p>\n<p>In CSS2, there were properties to control page breaking. Multicol didn\u2019t exist at that point, so the only fragmented context was a paged one. This meant that three specific page breaking properties were introduced:<\/p>\n<ul>\n<li><code>page-break-before<\/code><\/li>\n<li><code>page-break-after<\/code><\/li>\n<li><code>page-break-inside<\/code><\/li>\n<\/ul>\n<p>These work in a similar way to the more generic properties without the <code>page-<\/code> prefix, controlling breaks before, after and inside boxes. For print stylesheets, you will find that some older browsers which do not support the new <code>break-<\/code> properties, do support these page prefixed properties. The properties are being treated as aliases for the new properties.<\/p>\n<p>In a <a href=\"https:\/\/www.w3.org\/TR\/2005\/WD-css3-multicol-20051215\/#column1\">2005 Working Draft of the multicol specification<\/a> are details of breaking properties for multicol \u2014 using properties prefixed with <code>column-<\/code> (i.e. <code>column-break-before<\/code>, <code>column-break-after<\/code>, and <code>column-break-inside<\/code>). By 2009, these had gone, and a draft was in the multicol specification for unprefixed break properties which eventually made their way into the CSS Fragmentation specification.<\/p>\n<p>However, some vendor prefixed column-specific properties were implemented based on these properties. These are:<\/p>\n<ul>\n<li><code>-webkit-column-break-before<\/code><\/li>\n<li><code>-webkit-column-break-after<\/code><\/li>\n<li><code>-webkit-column-break-inside<\/code><\/li>\n<\/ul>\n<h4>Support For Fragmentation In Multicol<\/h4>\n<p>The following is based on testing these features in multicol contexts. I\u2019ve tried to explain what is possible, but do take a look at the CodePens in whichever browsers you have available.<\/p>\n<h5>Multicol And <code>break-inside<\/code><\/h5>\n<p>Support in multicol is best for the <code>break-inside<\/code> property. Up to date versions of Chrome, Firefox, Edge, and Safari all support <code>break-inside: avoid<\/code>. So you should find that you can prevent boxes from breaking between columns when using multicol.<\/p>\n<p>Several browsers, with the exception of Firefox, support the <code>-webkit-column-break-inside<\/code> property, this can be used with a value of <code>avoid<\/code> and may prevent boxes breaking between columns which do not have support for <code>break-inside<\/code>.<\/p>\n<p>Firefox supports <code>page-break-inside: avoid<\/code> in multicol. Therefore, using this property will prevent breaks inside boxes in Firefox browsers prior to Firefox 65.<\/p>\n<p>This means that if you want to prevent breaks between boxes in multicol, using the following CSS will cover as many browsers as possible, going back as far as possible.<\/p>\n<pre><code>.box {\n -webkit-column-break-inside: avoid;\n page-break-inside: avoid;\n break-inside: avoid;\n}\n<\/code><\/pre>\n<p>As for the <code>column<\/code> value, explicitly stating that you only want to avoid breaks between columns, and not pages, works in all browsers except Firefox.<\/p>\n<p>The below CodePen rounds up some of these tests in multicol so you can try them for yourself.<\/p>\n<div>\n<p data-height=\"500\" data-theme-id=\"light\" data-slug-hash=\"BvXQzM\" data-user=\"rachelandrew\" data-default-tab=\"result\">See the Pen <a href=\"https:\/\/codepen.io\/rachelandrew\/pen\/BvXQzM\">Multicol Fragmentation Test: break-inside<\/a> by <a href=\"https:\/\/codepen.io\/rachelandrew\">Rachel Andrew<\/a>.<\/p>\n<\/div>\n<h5>Multicol And <code>break-before<\/code><\/h5>\n<p>In order to prevent breaks before an element, you should be able to use <code>break-before: avoid<\/code> or <code>break-before: avoid-column<\/code>. The avoid property has no browser support.<\/p>\n<p>Edge supports <code>break-before: column<\/code> to always force a break before the box of the element.<\/p>\n<p>Safari, Chrome and Edge also support <code>-webkit-column-break-before: always<\/code> which will force a break before the box of the element. Therefore, if you want to force a break before the box of an element, you should use:<\/p>\n<pre><code>.box {\n -webkit-column-break-before: always;\n break-before: column;\n}\n<\/code><\/pre>\n<p>Preventing a break before the box is currently an impossible task. You can play around with some examples of these properties below:<\/p>\n<div>\n<p data-height=\"500\" data-theme-id=\"light\" data-slug-hash=\"QzoprE\" data-user=\"rachelandrew\" data-default-tab=\"result\">See the Pen <a href=\"https:\/\/codepen.io\/rachelandrew\/pen\/QzoprE\">Multicol Fragmentation Test: break-before<\/a> by <a href=\"https:\/\/codepen.io\/rachelandrew\">Rachel Andrew<\/a>).<\/p>\n<\/div>\n<h5>Multicol And <code>break-after<\/code><\/h5>\n<p>To prevent breaks after an element, to avoid it becoming the last thing at the bottom of a column, you should be able to use <code>break-after: avoid<\/code> and <code>break-after: avoid-column<\/code>. The only browser with support for these is Edge.<\/p>\n<p>Edge also supports forcing breaks after an element by using <code>break-after: column<\/code>, Chrome supports <code>break-after: column<\/code> and also <code>-webkit-column-break-after: always<\/code>.<\/p>\n<p>Firefox does not support <code>break-after<\/code> or any of the prefixed properties to force or allow breaks after a box.<\/p>\n<p>Therefore, other than Edge, you cannot really avoid breaks after a box. If you want to force them, you will get results in some browsers by using the following CSS:<\/p>\n<pre><code>.box {\n -webkit-break-after: always;\n break-after: column;\n}\n<\/code><\/pre>\n<div>\n<p data-height=\"500\" data-theme-id=\"light\" data-slug-hash=\"QzzoLo\" data-user=\"rachelandrew\" data-default-tab=\"result\">See the Pen <a href=\"https:\/\/codepen.io\/rachelandrew\/pen\/QzzoLo\">Multicol Fragmentation Test: break-after<\/a> by <a href=\"https:\/\/codepen.io\/rachelandrew\">Rachel Andrew<\/a>).<\/p>\n<\/div>\n<h4>Support When Printing From The Browser<\/h4>\n<p>Whether you print directly from your desktop browser or generate PDF files using headless Chrome or some other solution reliant on browser technology doesn\u2019t make any difference. You are reliant on the browser support for the fragmentation properties.<\/p>\n<p>If you create a print stylesheet you will find similar support for the break properties as for multicol, however, to support older browsers you should double up the properties to use the <code>page-<\/code> prefixed properties.<\/p>\n<h5>Print Stylesheets And <code>break-inside<\/code><\/h5>\n<p>In modern browsers ,the <code>break-inside<\/code> property can be used to prevent breaks inside boxes, add the <code>page-break-inside<\/code> property to add support for older browsers.<\/p>\n<pre><code>.box {\n page-break-inside: avoid;\n break-inside: avoid;\n}\n<\/code><\/pre>\n<h5>Print Stylesheets And <code>break-before<\/code><\/h5>\n<p>To force breaks before a box use <code>break-before:page<\/code> along with <code>page-break-before: always<\/code>.<\/p>\n<pre><code>.box {\n page-break-before: always;\n break-before: page;\n}\n<\/code><\/pre>\n<p>To avoid breaks before a box use <code>break-before: avoid-page<\/code> along with <code>page-break-before: avoid<\/code>.<\/p>\n<pre><code>.box {\n page-break-before: avoid;\n break-before: avoid-page;\n}\n<\/code><\/pre>\n<p>There is better support for the <code>page<\/code> and <code>avoid-page<\/code> values than we see for the equivalent multicol values. The majority of modern browsers have support.<\/p>\n<h5>Print Stylesheets And <code>break-before<\/code><\/h5>\n<p>To force breaks after a box, use <code>break-after: page<\/code> along with <code>page-break-after: always<\/code>.<\/p>\n<pre><code>.box {\n page-break-after: always;\n break-after: page;\n}\n<\/code><\/pre>\n<p>To prevent breaks after a box use <code>break-after: avoid-page<\/code> along with <code>page-break-after: avoid<\/code>.<\/p>\n<pre><code>.box {\n page-break-after: avoid;\n break-after: avoid-page;\n}\n<\/code><\/pre>\n<h4>Widows And Orphans<\/h4>\n<p>The <code>widows<\/code> and <code>orphans<\/code> properties enjoy good cross-browser support \u2014 the only browser without an implementation being Firefox. I would suggest using these when creating a multicol layout or print stylesheet. If they don\u2019t work for some reason, you will get widows and orphans, which isn\u2019t ideal but also isn\u2019t a disaster. If they do work your typography will look all the better for it.<\/p>\n<h4>box-decoration-break<\/h4>\n<p>The final property of <code>box-decoration-break<\/code> has support for multicol and print in Firefox. Safari, Chrome and other Chromium-based browsers support <code>-webkit-box-decoration-break<\/code>, but only on inline elements. So you can clone borders round lines of a sentence for example; they do not have support in the context we are looking at.<\/p>\n<p>In the CodePen below, you can see that testing for <code>-webkit-box-decoration-break: clone<\/code> with Feature Queries returns true, however, the property has no effect on the border of the box in the multicol context.<\/p>\n<div>\n<p data-height=\"500\" data-theme-id=\"light\" data-slug-hash=\"pYodrV\" data-user=\"rachelandrew\" data-default-tab=\"result\">See the Pen <a href=\"https:\/\/codepen.io\/rachelandrew\/pen\/pYodrV\">Multicol: box-decoration-break<\/a> by <a href=\"https:\/\/codepen.io\/rachelandrew\">Rachel Andrew<\/a>.<\/p>\n<\/div>\n<h3>Using Fragmentation<\/h3>\n<p>As you can see, the current state of fragmentation in browsers is somewhat fragmented! That said, there is a reasonable amount you can achieve and where it fails, the result tends to be suboptimal but not a disaster. Which means it is worth trying.<\/p>\n<p>It is worth noting that being too heavy handed with these properties could result in something other than what you hoped for. If you are working on the web rather than print and force column breaks after every paragraph, then end up with more paragraphs than space for columns, multicol will end up overflowing in the inline direction. It will run out of columns to place your additional paragraphs. Therefore, even where there is support, you still need to test carefully, and remember that less is more in a lot of cases.<\/p>\n<h3>More Resources<\/h3>\n<p>To read more about the properties head over to MDN, I\u2019ve recently updated the pages there and am also trying to keep the browser compat data up to date. The main page for <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Fragmentation\">CSS Fragmentation<\/a> links to the individual property pages which have further examples, browser compat data and other information about using these properties.<\/p>\n<div>\n <img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/02\/logo-red-18.png?w=900\" alt=\"Smashing Editorial\"><span>(il)<\/span>\n<\/div>\n<\/article>\n<p class=\"wpematico_credit\"><small>Powered by <a href=\"http:\/\/www.wpematico.com\" target=\"_blank\">WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Breaking Boxes With CSS Fragmentation Breaking Boxes With CSS Fragmentation Rachel Andrew 2019-02-27T14:00:00+01:002019-02-28T09:28:09+00:00 In this article, I\u2019m going to introduce you to the CSS Fragmentation specification. You might never have heard of it, however, if you have ever created a print stylesheet and wanted to control where the content breaks between pages, or multi-column layout…<a class=\"moretag\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/02\/breaking-boxes-with-css-fragmentation\/\"> Read the full article…<\/a><\/p>\n","protected":false},"author":4,"featured_media":60713,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[371],"tags":[],"class_list":["post-60712","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-user-experience"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.0.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"Breaking Boxes With CSS FragmentationBreaking Boxes With CSS Fragmentation Rachel Andrew 2019-02-27T14:00:00+01:002019-02-28T09:28:09+00:00In this article, I\u2019m going to introduce you to the CSS Fragmentation specification. You might never have heard of it, however, if you have ever created a print stylesheet and wanted to control where the content breaks between pages, or multi-column layout and wanted\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Guest Contribution\"\/>\n\t<meta name=\"keywords\" content=\"user experience\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/02\/breaking-boxes-with-css-fragmentation\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.0.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Breaking Boxes With CSS Fragmentation | Design for Immersive Technologies\" \/>\n\t\t<meta property=\"og:description\" content=\"Breaking Boxes With CSS FragmentationBreaking Boxes With CSS Fragmentation Rachel Andrew 2019-02-27T14:00:00+01:002019-02-28T09:28:09+00:00In this article, I\u2019m going to introduce you to the CSS Fragmentation specification. You might never have heard of it, however, if you have ever created a print stylesheet and wanted to control where the content breaks between pages, or multi-column layout and wanted\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.taterboy.com\/blog\/2019\/02\/breaking-boxes-with-css-fragmentation\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2019-02-28T11:18:56+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2019-02-28T11:18:56+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Breaking Boxes With CSS Fragmentation | Design for Immersive Technologies\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Breaking Boxes With CSS FragmentationBreaking Boxes With CSS Fragmentation Rachel Andrew 2019-02-27T14:00:00+01:002019-02-28T09:28:09+00:00In this article, I\u2019m going to introduce you to the CSS Fragmentation specification. You might never have heard of it, however, if you have ever created a print stylesheet and wanted to control where the content breaks between pages, or multi-column layout and wanted\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/02\\\/breaking-boxes-with-css-fragmentation\\\/#article\",\"name\":\"Breaking Boxes With CSS Fragmentation | Design for Immersive Technologies\",\"headline\":\"Breaking Boxes With CSS Fragmentation\",\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/02\\\/scott-jehl-toronto.png?fit=311%2C401&ssl=1\",\"width\":311,\"height\":401},\"datePublished\":\"2019-02-28T04:18:56-07:00\",\"dateModified\":\"2019-02-28T04:18:56-07:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/02\\\/breaking-boxes-with-css-fragmentation\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/02\\\/breaking-boxes-with-css-fragmentation\\\/#webpage\"},\"articleSection\":\"User Experience\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/02\\\/breaking-boxes-with-css-fragmentation\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"position\":2,\"name\":\"User Experience\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/02\\\/breaking-boxes-with-css-fragmentation\\\/#listItem\",\"name\":\"Breaking Boxes With CSS Fragmentation\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/02\\\/breaking-boxes-with-css-fragmentation\\\/#listItem\",\"position\":3,\"name\":\"Breaking Boxes With CSS Fragmentation\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/\",\"name\":\"Guest Contribution\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/02\\\/breaking-boxes-with-css-fragmentation\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Guest Contribution\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/02\\\/breaking-boxes-with-css-fragmentation\\\/#webpage\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/02\\\/breaking-boxes-with-css-fragmentation\\\/\",\"name\":\"Breaking Boxes With CSS Fragmentation | Design for Immersive Technologies\",\"description\":\"Breaking Boxes With CSS FragmentationBreaking Boxes With CSS Fragmentation Rachel Andrew 2019-02-27T14:00:00+01:002019-02-28T09:28:09+00:00In this article, I\\u2019m going to introduce you to the CSS Fragmentation specification. You might never have heard of it, however, if you have ever created a print stylesheet and wanted to control where the content breaks between pages, or multi-column layout and wanted\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/02\\\/breaking-boxes-with-css-fragmentation\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/02\\\/scott-jehl-toronto.png?fit=311%2C401&ssl=1\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/02\\\/breaking-boxes-with-css-fragmentation\\\/#mainImage\",\"width\":311,\"height\":401},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/02\\\/breaking-boxes-with-css-fragmentation\\\/#mainImage\"},\"datePublished\":\"2019-02-28T04:18:56-07:00\",\"dateModified\":\"2019-02-28T04:18:56-07:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Breaking Boxes With CSS Fragmentation | Design for Immersive Technologies","description":"Breaking Boxes With CSS FragmentationBreaking Boxes With CSS Fragmentation Rachel Andrew 2019-02-27T14:00:00+01:002019-02-28T09:28:09+00:00In this article, I\u2019m going to introduce you to the CSS Fragmentation specification. You might never have heard of it, however, if you have ever created a print stylesheet and wanted to control where the content breaks between pages, or multi-column layout and wanted","canonical_url":"https:\/\/www.taterboy.com\/blog\/2019\/02\/breaking-boxes-with-css-fragmentation\/","robots":"max-image-preview:large","keywords":"user experience","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.taterboy.com\/blog\/2019\/02\/breaking-boxes-with-css-fragmentation\/#article","name":"Breaking Boxes With CSS Fragmentation | Design for Immersive Technologies","headline":"Breaking Boxes With CSS Fragmentation","author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/02\/scott-jehl-toronto.png?fit=311%2C401&ssl=1","width":311,"height":401},"datePublished":"2019-02-28T04:18:56-07:00","dateModified":"2019-02-28T04:18:56-07:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/02\/breaking-boxes-with-css-fragmentation\/#webpage"},"isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/02\/breaking-boxes-with-css-fragmentation\/#webpage"},"articleSection":"User Experience"},{"@type":"BreadcrumbList","@id":"https:\/\/www.taterboy.com\/blog\/2019\/02\/breaking-boxes-with-css-fragmentation\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","position":1,"name":"Home","item":"https:\/\/www.taterboy.com\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","position":2,"name":"User Experience","item":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/02\/breaking-boxes-with-css-fragmentation\/#listItem","name":"Breaking Boxes With CSS Fragmentation"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/02\/breaking-boxes-with-css-fragmentation\/#listItem","position":3,"name":"Breaking Boxes With CSS Fragmentation","previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}}]},{"@type":"Organization","@id":"https:\/\/www.taterboy.com\/blog\/#organization","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","url":"https:\/\/www.taterboy.com\/blog\/"},{"@type":"Person","@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author","url":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/","name":"Guest Contribution","image":{"@type":"ImageObject","@id":"https:\/\/www.taterboy.com\/blog\/2019\/02\/breaking-boxes-with-css-fragmentation\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g","width":96,"height":96,"caption":"Guest Contribution"}},{"@type":"WebPage","@id":"https:\/\/www.taterboy.com\/blog\/2019\/02\/breaking-boxes-with-css-fragmentation\/#webpage","url":"https:\/\/www.taterboy.com\/blog\/2019\/02\/breaking-boxes-with-css-fragmentation\/","name":"Breaking Boxes With CSS Fragmentation | Design for Immersive Technologies","description":"Breaking Boxes With CSS FragmentationBreaking Boxes With CSS Fragmentation Rachel Andrew 2019-02-27T14:00:00+01:002019-02-28T09:28:09+00:00In this article, I\u2019m going to introduce you to the CSS Fragmentation specification. You might never have heard of it, however, if you have ever created a print stylesheet and wanted to control where the content breaks between pages, or multi-column layout and wanted","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/02\/breaking-boxes-with-css-fragmentation\/#breadcrumblist"},"author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"creator":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/02\/scott-jehl-toronto.png?fit=311%2C401&ssl=1","@id":"https:\/\/www.taterboy.com\/blog\/2019\/02\/breaking-boxes-with-css-fragmentation\/#mainImage","width":311,"height":401},"primaryImageOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/02\/breaking-boxes-with-css-fragmentation\/#mainImage"},"datePublished":"2019-02-28T04:18:56-07:00","dateModified":"2019-02-28T04:18:56-07:00"},{"@type":"WebSite","@id":"https:\/\/www.taterboy.com\/blog\/#website","url":"https:\/\/www.taterboy.com\/blog\/","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"}}]},"og:locale":"en_US","og:site_name":"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","og:type":"article","og:title":"Breaking Boxes With CSS Fragmentation | Design for Immersive Technologies","og:description":"Breaking Boxes With CSS FragmentationBreaking Boxes With CSS Fragmentation Rachel Andrew 2019-02-27T14:00:00+01:002019-02-28T09:28:09+00:00In this article, I\u2019m going to introduce you to the CSS Fragmentation specification. You might never have heard of it, however, if you have ever created a print stylesheet and wanted to control where the content breaks between pages, or multi-column layout and wanted","og:url":"https:\/\/www.taterboy.com\/blog\/2019\/02\/breaking-boxes-with-css-fragmentation\/","article:published_time":"2019-02-28T11:18:56+00:00","article:modified_time":"2019-02-28T11:18:56+00:00","twitter:card":"summary","twitter:title":"Breaking Boxes With CSS Fragmentation | Design for Immersive Technologies","twitter:description":"Breaking Boxes With CSS FragmentationBreaking Boxes With CSS Fragmentation Rachel Andrew 2019-02-27T14:00:00+01:002019-02-28T09:28:09+00:00In this article, I\u2019m going to introduce you to the CSS Fragmentation specification. You might never have heard of it, however, if you have ever created a print stylesheet and wanted to control where the content breaks between pages, or multi-column layout and wanted"},"aioseo_meta_data":{"post_id":"60712","title":null,"description":null,"keywords":null,"keyphrases":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_custom_url":null,"og_image_custom_fields":null,"og_custom_image_width":null,"og_custom_image_height":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"location":null,"local_seo":null,"created":"2021-02-07 22:18:34","updated":"2026-09-01 05:20:04","focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"primary_term":null,"og_image_url":null,"og_image_width":null,"og_image_height":null,"twitter_image_url":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"limit_modified_date":false,"ai":null,"breadcrumb_settings":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">»<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/\" title=\"User Experience\">User Experience<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">»<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tBreaking Boxes With CSS Fragmentation\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.taterboy.com\/blog"},{"label":"User Experience","link":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/"},{"label":"Breaking Boxes With CSS Fragmentation","link":"https:\/\/www.taterboy.com\/blog\/2019\/02\/breaking-boxes-with-css-fragmentation\/"}],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8wzr5-fNe","jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/02\/scott-jehl-toronto.png?fit=311%2C401&ssl=1","_links":{"self":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/60712","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/comments?post=60712"}],"version-history":[{"count":0,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/60712\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media\/60713"}],"wp:attachment":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media?parent=60712"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/categories?post=60712"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/tags?post=60712"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}