Css baseline 2018

::selection

The ::selection pseudo-element applies styles to the portion of a document that has been highlighted by the user — typically by clicking and dragging with a mouse or selecting text with a keyboard. It allows the default browser selection highlight to be replaced with custom colors.

1
2
3
4
5
6
7
8
9

::selection {
  background-color: oklch(70% 0.2 250);
  color: white;
}

.code-block::selection {
  background-color: oklch(80% 0.15 130);
  color: #1a1a1a;
}

Only a limited set of properties are supported on ::selection: color, background-color, text-decoration and its longhands, text-shadow, and stroke-color. The background shorthand is not supported — use background-color explicitly.

Custom selection colors are a subtle but effective branding touch, particularly on editorial or portfolio sites. It is important to maintain sufficient contrast between the selection background and text color to keep selected text readable — the same accessibility considerations that apply to normal text apply here.

::selection matches the active selection. Inactive selections (when the window loses focus) are not separately targetable in CSS and typically revert to a greyed-out system default.

font-variation-settings

The font-variation-settings property provides low-level access to variable font axes using four-character axis tags and numeric values. Variable fonts contain multiple design variations along one or more axes — weight, width, slant, optical size, and custom axes — all within a single font file.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

.variable-heading {
  font-variation-settings: 'wght' 650, 'wdth' 85, 'ital' 1;
}

.optical-size {
  font-variation-settings: 'opsz' 48; /* Optimised for 48px display size */
}

.custom-axis {
  font-variation-settings: 'BNCE' 50; /* Custom "bounce" axis */
}

Standard registered axes have four-character lowercase tags: wght (weight), wdth (width), ital (italic), slnt (slant), and opsz (optical size). Custom axes defined by the type designer use uppercase tags.

Where high-level CSS properties exist for standard axes — font-weight for wght, font-width/font-stretch for wdth, font-style for ital and slnt, font-optical-sizing for opsz — those should be preferred. font-variation-settings is most useful for custom axes that have no CSS property equivalent, or for animating axes with @keyframes:

1
2
3
4

@keyframes weight-pulse {
  from { font-variation-settings: 'wght' 300; }
  to   { font-variation-settings: 'wght' 800; }
}

Note that font-variation-settings is not inherited as individual axis values — it replaces the whole value, so setting a partial list will reset any axes not included to their defaults.

Interaction media queries

Interaction media features query the nature of the user’s input mechanism — specifically whether a pointer device is available and how precise it is, and whether the device supports hovering. They allow styles to adapt to touch-first versus mouse-first interfaces independently of screen size.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

/* Coarse pointer: touch screens, game controllers */
@media (pointer: coarse) {
  .button {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.25rem;
  }
}

/* Fine pointer: mouse, trackpad, stylus */
@media (pointer: fine) {
  .button {
    padding: 0.5rem 1rem;
  }
}

/* No pointer device at all */
@media (pointer: none) {
  .hover-menu {
    display: none;
  }
}

The hover media feature checks whether the primary input can hover:

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

@media (hover: hover) {
  .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.15);
  }
}

@media (hover: none) {
  /* Touch devices: don't rely on hover for revealing content */
  .dropdown-trigger + .dropdown {
    display: block;
  }
}

any-pointer and any-hover work the same way but check any available input device, not just the primary one — useful on devices that support both touch and a mouse simultaneously. Interaction media queries are more reliable than screen-width breakpoints for distinguishing touch from mouse interfaces, since a large touchscreen and a small laptop may both have similar widths but very different interaction models.

Numeric factory functions

CSS numeric factory functions are static methods on the CSS JavaScript interface that create CSSUnitValue objects — typed numeric values with units — for use with the CSS Typed Object Model (Typed OM). They provide a type-safe, object-based alternative to string manipulation when working with CSS values in JavaScript.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// Instead of: element.style.width = '100px'
element.attributeStyleMap.set('width', CSS.px(100));

// Factory functions for common units
CSS.px(16)           // 16px
CSS.em(1.5)          // 1.5em
CSS.rem(2)           // 2rem
CSS.percent(50)      // 50%
CSS.vw(100)          // 100vw
CSS.vh(100)          // 100vh
CSS.deg(45)          // 45deg
CSS.rad(Math.PI)     // ~3.14rad
CSS.ms(300)          // 300ms
CSS.s(1.5)           // 1.5s
CSS.fr(1)            // 1fr
CSS.number(0.5)      // 0.5 (unitless)

// Values can be used directly
const width = CSS.px(200);
console.log(width.value); // 200
console.log(width.unit);  // 'px'

// Arithmetic on typed values
const margin = CSS.px(16).add(CSS.rem(1));

Factory functions are part of the CSS Houdini Typed OM — a lower-level, more performant API for reading and writing CSS values compared to string-based element.style manipulation. They avoid parsing errors from string concatenation and enable arithmetic between typed values.

The Typed OM is available in modern browsers but is primarily useful in performance-critical animation and layout code, or in Worklets (Paint, Layout, Animation) where the Typed OM is the only available API.

overflow-wrap

The overflow-wrap property controls whether the browser may break a word mid-character to prevent it from overflowing its container. It applies when a single word or unbroken string is too long to fit on a line and would otherwise overflow.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

.user-content {
  overflow-wrap: break-word;
}

.strict {
  overflow-wrap: anywhere;
}

.default {
  overflow-wrap: normal;
}

normal (the default) only breaks at allowed break points — spaces, hyphens, and other natural word boundaries. Long URLs or strings without spaces will overflow. break-word allows the browser to break within a word, but only as a last resort when the word would otherwise overflow — natural break points are still preferred. anywhere is similar but also allows breaks to influence min-content sizing, making it more aggressive in constrained layouts.

The difference between break-word and anywhere is most visible in min-content calculations: break-word does not affect how the browser calculates the minimum width of an element, while anywhere does, potentially resulting in narrower minimum widths.

overflow-wrap was historically also known as word-wrap — a non-standard property introduced by Microsoft. Both names are still supported by browsers, but overflow-wrap is the standardised name and should be preferred for new code.

overflow: overlay

overflow: overlay displays scrollbars that float over the content rather than occupying layout space, preserving the element’s full width. It is now an alias for overflow: auto in most modern browsers.

1
2
3

.scrollable {
  overflow: overlay;
}

On systems with overlay scrollbars (macOS, iOS, some Linux), this produces scrollbars that appear on hover without shifting the layout.

overflow: overlay was a non-standard value introduced by WebKit. It has since been standardised as an alias for overflow: auto in the CSS spec — browsers that show overlay scrollbars will do so automatically with auto.

On macOS and mobile devices, overflow: auto already shows overlay scrollbars. For Windows-style persistent scrollbars, use the scrollbar-gutter property instead:

1
2
3
4

.scrollable {
  overflow: auto;
  scrollbar-gutter: stable; /* reserve space for scrollbar even when not scrolling */
}

overflow: overlay is deprecated. New projects should use overflow: auto and scrollbar-gutter for reliable cross-platform behaviour.

resolution media query (compatibility prefixes)

The resolution media feature targets displays based on their pixel density, typically used to serve higher-resolution assets to retina and high-DPI screens. The standard syntax uses dppx (dots per pixel) or dpi (dots per inch) units with the modern range syntax.

1
2
3
4
5
6

@media (resolution >= 2dppx) {
  .logo {
    background-image: url('logo@2x.png');
    background-size: contain;
  }
}

Historically, browser support for resolution was inconsistent, and two vendor-prefixed alternatives were widely used to fill the gaps:

1
2
3
4
5
6
7
8

/* Standard */
@media (resolution >= 2dppx) { }

/* WebKit/Blink prefix (older Safari, Chrome) */
@media (-webkit-min-device-pixel-ratio: 2) { }

/* Legacy Firefox */
@media (min--moz-device-pixel-ratio: 2) { }

For broad compatibility during the period when prefixed forms were necessary, stylesheets often combined all three in a single query using a comma-separated list:

1
2
3
4
5
6
7
8

@media
  (-webkit-min-device-pixel-ratio: 2),
  (min--moz-device-pixel-ratio: 2),
  (resolution >= 2dppx) {
    .logo {
      background-image: url('logo@2x.png');
    }
}

Modern browsers all support the unprefixed resolution feature, so the prefixed forms are no longer required for new projects. However, they remain relevant when maintaining legacy stylesheets or supporting older browser versions. The -webkit-min-device-pixel-ratio form in particular persisted in Safari longer than other prefixes, making it the one most likely to still be found in production codebases.