TocTable of Contents

Css baseline 2019

Jurgen One minute to read

Overview of 2019 baseline css features

All the features are Widely available because they all passed 30 months since being newly available.

Page breaks

Page break properties control where the browser or printer is allowed or required to break a document when paginating — during printing or when using paged media. The modern properties are break-before, break-after, and break-inside, which work across paged media, multi-column layouts, and CSS regions.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

h1, h2 {
  break-after: avoid; /* Don't break immediately after a heading */
}

.chapter {
  break-before: page; /* Always start on a new page */
}

.figure {
  break-inside: avoid; /* Keep figure and caption together */
}

table {
  break-inside: avoid; /* Don't split the table across pages */
}

break-before and break-after control breaks at the edges of an element. Values include auto (default), avoid, avoid-page, page, left, right, column, and avoid-column. break-inside applies to breaks within the element, accepting auto or avoid.

widows and orphans provide complementary control at the line level — specifying the minimum number of lines that must appear before or after a page break within a paragraph.

The legacy page-break-before, page-break-after, and page-break-inside properties are aliases for the modern equivalents and remain supported for backwards compatibility, but the break-* properties are preferred as they also work in multi-column contexts.

Sticky positioning

Sticky positioning is a hybrid between relative and fixed positioning. A sticky element behaves like a relatively positioned element — it scrolls with the page — until it reaches a specified threshold, at which point it “sticks” and behaves like a fixed element within its scrolling container, until its parent scrolls out of view.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

.sticky-header {
  position: sticky;
  top: 0; /* Sticks when the top of the element hits the top of the viewport */
  z-index: 10;
}

.sticky-sidebar {
  position: sticky;
  top: 2rem; /* Sticks 2rem from the top */
  align-self: start; /* Essential in flex/grid to prevent stretching */
}

.sticky-section-label {
  position: sticky;
  top: 60px; /* Sticks below a 60px fixed nav */
}

The top, right, bottom, or left value specifies the offset at which the element sticks. At least one must be set — without it, the element behaves like position: relative with no sticking.

A sticky element’s sticky behaviour is contained within its scroll container and is bounded by its parent. Once the parent scrolls completely out of view, the sticky element scrolls away with it. This makes sticky positioning naturally scoped — a section label sticks while its section is visible, then exits with the section.

Common gotchas include: a parent with overflow: hidden or overflow: auto breaks stickiness by making the parent the scroll container; a flex or grid container may need align-self: start on the sticky child to prevent it from stretching to the container height; and scroll-margin-top on :target elements should account for sticky header height.