{"id":2829,"date":"2019-08-10T14:51:26","date_gmt":"2019-08-10T14:51:26","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=2829"},"modified":"2023-02-12T03:08:44","modified_gmt":"2023-02-12T03:08:44","slug":"css-tutorial-break-before","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/css-tutorial-break-before\/","title":{"rendered":"CSS Tutorial &#8211; break-before"},"content":{"rendered":"<p>The CSS\u00a0<code>break-before<\/code>\u00a0property is neat in that it allows, forces, or prevents breaks in paged media, multi-column layouts, and regions. When applying the property to an element, what we\u2019re doing is providing an instruction for whether to break or prevent breaks between pages, columns, and regions.<\/p>\n<h2 id=\"syntax\">Syntax<\/h2>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">break-before: auto | avoid | always | all | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region<\/pre>\n<ul class=\"is-style-almanac-list\">\n<li><strong>Initial:<\/strong>\u00a0<code>auto<\/code><\/li>\n<li><strong>Applies to:<\/strong>\u00a0block-level boxes, grid items, flex items, table row groups, table rows<\/li>\n<li><strong>Inherited:<\/strong>\u00a0no<\/li>\n<li><strong>Computed value:<\/strong>\u00a0as specified<\/li>\n<li><strong>Animation type:<\/strong>\u00a0discrete<\/li>\n<\/ul>\n<h3 id=\"values\"><a id=\"aa-values\" class=\"aal_anchor\" href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/break-before\/#aa-values\" aria-hidden=\"true\"><\/a>Values<\/h3>\n<p>At the time of this writing, the following values are defined in the\u00a0<a href=\"https:\/\/drafts.csswg.org\/css-break-4\/#break-between\" rel=\"noopener\">CSS Fragmentation Module Level 4 specification<\/a>, which is in Editor Draft status. So, some of the following values are experimental and could change at some point. In fact, the generic\u00a0<code>all<\/code>\u00a0and\u00a0<code>always<\/code>\u00a0values below were not included in the\u00a0<a href=\"https:\/\/drafts.csswg.org\/css-break-3\/#propdef-break-before\" rel=\"noopener\">Level 3 specifications<\/a>.<\/p>\n<p>The big thing to know about\u00a0<code>break-before<\/code>\u00a0is that it is designed to work with paged media, multi-column layouts, and regions. That means we have three sets of possible values that can be used depending on the context.<\/p>\n<h3 id=\"generic-break-values\"><a id=\"aa-generic-break-values\" class=\"aal_anchor\" href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/break-before\/#aa-generic-break-values\" aria-hidden=\"true\"><\/a>Generic break values<\/h3>\n<p>These values are generic in the sense that they can be used in all three contexts:<\/p>\n<ul>\n<li><strong><code>auto<\/code>:<\/strong>\u00a0Neither forces nor forbids a break (page, column, or region) before the element.<\/li>\n<li><strong><code>avoid<\/code>:<\/strong>\u00a0Avoids a break (page, column, or region) before the element.<\/li>\n<li><strong><code>all<\/code>:<\/strong>\u00a0(Experimental) Forces a page break after the element, breaking all possible fragmentation contexts. So, a break inside a multi-column container that\u2019s inside a page container would force both a column and page break.<\/li>\n<li><strong><code>always<\/code>:<\/strong>\u00a0(Experimental) Forces a break after the element. This value is in the context of the immediately-containing fragmentation. For example, if we are inside a multi-column container \u2014 like using the\u00a0<code>column<\/code>\u00a0property on the parent container \u2014 then it would force a column break; inside paged media, it would force a page break.<\/li>\n<\/ul>\n<h4 id=\"paged-media-values\"><a id=\"aa-paged-media-values\" class=\"aal_anchor\" href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/break-before\/#aa-paged-media-values\" aria-hidden=\"true\"><\/a>Paged Media values<\/h4>\n<ul>\n<li><strong><code>avoid-page<\/code>:<\/strong>\u00a0Avoids any page break before the element.<\/li>\n<li><strong><code>page<\/code>:<\/strong>\u00a0Forces a page break before the element.<\/li>\n<li><strong><code>left<\/code>:<\/strong>\u00a0Forces one or two page breaks before the element, so anything that makes it to the next page will be formatted to the left; that is, it starts from the left page.<\/li>\n<li><strong><code>right<\/code>:<\/strong>\u00a0Forces one or two page breaks before the element, so anything that makes it to the next page will be formatted to the right, that is it starts from the right page.<\/li>\n<li><strong><code>recto<\/code>:<\/strong>\u00a0(Experimental) Forces one or two page breaks before the element, so that the next page is formatted as a recto page (i.e. a right page moving from left-to-right or a left page moving right-to-left).<\/li>\n<li><strong><code>verso<\/code>:<\/strong>\u00a0(Experimental) Forces one or two page breaks before the element so that the next page is formatted as a verso page (i.e a left page moving from left-to-right or a right page moving from right-to-left)<\/li>\n<\/ul>\n<h4 id=\"multicolumn-layout-values\"><a id=\"aa-multi-column-layout-values\" class=\"aal_anchor\" href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/break-before\/#aa-multi-column-layout-values\" aria-hidden=\"true\"><\/a>Multi-column Layout values<\/h4>\n<ul>\n<li><strong><code>avoid-column<\/code>:<\/strong>\u00a0(Experimental) Avoid a column break before the element.<\/li>\n<li><strong><code>column<\/code>:<\/strong>\u00a0(Experimental) Always forces a column break before the element.<\/li>\n<\/ul>\n<h4 id=\"regions-values\"><a id=\"aa-regions-values\" class=\"aal_anchor\" href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/break-before\/#aa-regions-values\" aria-hidden=\"true\"><\/a>Regions values<\/h4>\n<ul>\n<li><strong><code>avoid-region<\/code>:<\/strong>\u00a0Avoids a region break before the element.<\/li>\n<li><strong><code>region<\/code>:<\/strong>\u00a0Always forces a region break before the element.<\/li>\n<\/ul>\n<h3 id=\"breakbefore-replaces-pagebreakbefore\"><a id=\"aa-break-before-replaces-page-break-before\" class=\"aal_anchor\" href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/break-before\/#aa-break-before-replaces-page-break-before\" aria-hidden=\"true\"><\/a><code>break-before<\/code>\u00a0replaces\u00a0<code>page-break-before<\/code><\/h3>\n<p>If\u00a0<code>break-before<\/code>\u00a0looks somewhat familiar, that\u2019s because it takes the place of\u00a0<code>page-break-before<\/code>, one of three\u00a0page-break-related properties.<\/p>\n<p>What\u2019s the difference? Well,\u00a0<code>page-break-before<\/code>\u00a0was only for paged media.\u00a0<code>break-before<\/code>\u00a0is a lot more robust as far as where and how it can be used since, in addition to serving as an alias for\u00a0<code>page-break-before<\/code>, it is also contained in the CSS\u00a0<a href=\"https:\/\/drafts.csswg.org\/css-break\/#break-between\" rel=\"noopener\">Fragmentation<\/a>,\u00a0<a href=\"https:\/\/drafts.csswg.org\/css-multicol\/#break-before-break-after-break-inside\" rel=\"noopener\">Multi-column Layout<\/a>\u00a0and\u00a0<a href=\"https:\/\/drafts.csswg.org\/css-regions\/#region-flow-break\" rel=\"noopener\">Regions<\/a>\u00a0specifications.<\/p>\n<p>Here\u2019s a table of the\u00a0<code>break-before<\/code>\u00a0values that correspond with the legacy\u00a0<code>page-break-before<\/code>\u00a0property values if you\u2019re using it as an alias:<\/p>\n<figure class=\"wp-block-table\">\n<table class=\"has-fixed-layout\">\n<thead>\n<tr>\n<th><strong>break-before<\/strong><\/th>\n<th><strong>page-break-before<\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>auto<\/code><\/td>\n<td><code>auto<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>avoid<\/code><\/td>\n<td><code>avoid<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>right<\/code><\/td>\n<td><code>right<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>left<\/code><\/td>\n<td><code>left<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>page<\/code><\/td>\n<td><code>always<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n<p>Even though\u00a0<code>break-before<\/code>\u00a0replaces\u00a0<code>page-break-before<\/code>, it\u2019s still a good idea to set\u00a0<code>page-break-before<\/code>\u00a0as a fallback for browsers that might lack support for\u00a0<code>break-before<\/code>:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.element {\r\n  page-break-before: always; \/* fallback *\/\r\n  break-before: page;\r\n}<\/pre>\n<p>But as far as going on and changing\u00a0<code>page-break-before<\/code>\u00a0to\u00a0<code>break-before<\/code>\u00a0throughout your code, no worries.\u00a0<code>page-break-before<\/code>\u00a0is now listed as a legacy shorthand for\u00a0<code>break-before<\/code>\u00a0and will conform to the table values above.<\/p>\n<h2 id=\"demos\"><a id=\"aa-demos\" class=\"aal_anchor\" href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/break-before\/#aa-demos\" aria-hidden=\"true\"><\/a>Demos<\/h2>\n<p>Let\u2019s take a look at a couple of demos to better understand how\u00a0<code>break-before<\/code>\u00a0works.<\/p>\n<h3 id=\"paged-media-alias\">Paged Media alias<\/h3>\n<p>In this example, the\u00a0<code>avoid<\/code>\u00a0value is used to prevent any page, column, or region breaks in the layout so that when printing the page \u2014 yes, with a real printer that uses paper \u2014 there are no breaks between the columns. Instead, what we get is a nice single-column layout that\u2019s better suited for printing:<br \/>\n<iframe style=\"width: 100%;\" title=\"CSS Tutorial - break-before\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/gOejBXX?default-tab=result&amp;theme-id=dark\" height=\"600\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/gOejBXX\"><br \/>\nCSS Tutorial &#8211; break-before<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<h3><strong>HTML<\/strong><\/h3>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;main&gt;\r\n  &lt;article&gt;\r\n    &lt;h2&gt;Heading&lt;\/h2&gt;\r\n    &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit.Aliquid a corporis nostrum velit repudiandae fuga commodi aut delectus numquam. Debitis quod repellendus reprehenderit obcaecati asperiores&lt;\/p&gt;\r\n  &lt;\/article&gt;\r\n\r\n  &lt;article&gt;\r\n    &lt;h2&gt;Heading&lt;\/h2&gt;\r\n    &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit.Aliquid a corporis nostrum velit repudiandae fuga commodi aut delectus numquam. Debitis quod repellendus reprehenderit obcaecati asperiores&lt;\/p&gt;\r\n  &lt;\/article&gt;\r\n\r\n  &lt;article&gt;\r\n    &lt;h2&gt;Heading&lt;\/h2&gt;\r\n    &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit.Aliquid a corporis nostrum velit repudiandae fuga commodi aut delectus numquam. Debitis quod repellendus reprehenderit obcaecati asperiores&lt;\/p&gt;\r\n  &lt;\/article&gt;\r\n\r\n  &lt;article&gt;\r\n    &lt;h2&gt;Heading&lt;\/h2&gt;\r\n    &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit.Aliquid a corporis nostrum velit repudiandae fuga commodi aut delectus numquam. Debitis quod repellendus reprehenderit obcaecati asperiores&lt;\/p&gt;\r\n  &lt;\/article&gt;\r\n\r\n  &lt;article&gt;\r\n    &lt;h2&gt;Heading&lt;\/h2&gt;\r\n    &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit.Aliquid a corporis nostrum velit repudiandae fuga commodi aut delectus numquam. Debitis quod repellendus reprehenderit obcaecati asperiores&lt;\/p&gt;\r\n  &lt;\/article&gt;\r\n\r\n  &lt;article&gt;\r\n    &lt;h2&gt;Heading&lt;\/h2&gt;\r\n    &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit.Aliquid a corporis nostrum velit repudiandae fuga commodi aut delectus numquam. Debitis quod repellendus reprehenderit obcaecati asperiores&lt;\/p&gt;\r\n  &lt;\/article&gt;\r\n\r\n  &lt;article&gt;\r\n    &lt;h2&gt;Heading&lt;\/h2&gt;\r\n    &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit.Aliquid a corporis nostrum velit repudiandae fuga commodi aut delectus numquam. Debitis quod repellendus reprehenderit obcaecati asperiores&lt;\/p&gt;\r\n  &lt;\/article&gt;\r\n\r\n&lt;\/main&gt;<\/pre>\n<h3><strong>CSS<\/strong><\/h3>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">main {\r\n  column-width: 200px;\r\n  column-gap: 50px;\r\n  padding: 1.5rem;\r\n}\r\n\r\narticle {\r\n  border: 3px dotted #ff7a18;\r\n  break-before: avoid;\r\n  margin-block-end: 50px;\r\n  padding: 1rem;\r\n}<\/pre>\n<h3><strong>JS<\/strong><\/h3>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">const printPage = () =&gt; {\r\n  window.print();\r\n}<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The CSS\u00a0break-before\u00a0property is neat in that it allows, forces, or prevents breaks <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/css-tutorial-break-before\/\" title=\"CSS Tutorial &#8211; break-before\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3249,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,2],"tags":[208,207,200,197,209],"newstopic":[],"class_list":{"0":"post-2829","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html-css","8":"category-web-design","9":"tag-break-before","10":"tag-css-calender","11":"tag-css-code","12":"tag-css-tutorial","13":"tag-page-break-before"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/2829","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=2829"}],"version-history":[{"count":1,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/2829\/revisions"}],"predecessor-version":[{"id":2830,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/2829\/revisions\/2830"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3249"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=2829"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=2829"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=2829"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=2829"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}