Css baseline 2016

@font-face

The @font-face at-rule loads a custom font from a file or URL and makes it available to use in the stylesheet via a font-family name. It is how web fonts — whether self-hosted or served from a font service — are registered with the browser.

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

@font-face {
  font-family: 'MyFont';
  src:
    url('myfont.woff2') format('woff2'),
    url('myfont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'MyFont';
  src: url('myfont-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

Multiple @font-face blocks with the same font-family name but different font-weight or font-style values build up a font family with distinct faces. The browser selects the correct face automatically based on the element’s applied weight and style.

The src descriptor lists font files in order of preference — the browser uses the first format it supports. WOFF2 is the most compressed modern format and should be listed first; WOFF is a fallback for older browsers.

font-display controls how the browser handles the period before the font loads. swap shows a fallback font immediately and swaps to the custom font when it arrives, minimising invisible text. optional only uses the custom font if it loads within a very short window, avoiding layout shifts on slow connections.

Variable fonts are declared with a single @font-face block covering a range of weights or styles: font-weight: 100 900.

@supports (compatibility prefix)

The @supports at-rule allows CSS to be applied conditionally based on whether the browser supports a given property and value. During the period when @supports itself was new, some browsers required a -webkit- prefixed form to use it — though this was short-lived and never widely needed.

More relevant in practice is using @supports to test for prefixed properties alongside their standard equivalents, providing a compatibility layer during the transition period when a feature was only available with a vendor prefix.

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

/* Test for standard property support */
@supports (display: grid) {
  .layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Test for a prefixed property */
@supports (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px)) {
  .glass {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

/* Negation — apply when a property is NOT supported */
@supports not (display: grid) {
  .layout {
    display: flex;
    flex-wrap: wrap;
  }
}

@supports queries can be combined with and, or, and not operators. The selector() function extends this to test whether a given selector syntax is supported:

1
2
3
4
5

@supports selector(:has(+ *)) {
  .parent:has(+ .sibling) {
    margin-bottom: 0;
  }
}

@supports is the recommended approach for progressive enhancement — applying modern CSS only where it is supported, with simpler fallbacks for browsers that do not yet understand the feature.

background-repeat

The background-repeat property controls whether and how a background image tiles to fill the element’s background area. It accepts keyword values for the horizontal and vertical axes independently, or shorthand keywords that apply to both.

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

.tiled {
  background-image: url('tile.png');
  background-repeat: repeat; /* Default: tiles in both directions */
}

.horizontal-stripe {
  background-repeat: repeat-x; /* Tiles horizontally only */
}

.vertical-stripe {
  background-repeat: repeat-y; /* Tiles vertically only */
}

.no-repeat {
  background-repeat: no-repeat; /* Single instance, no tiling */
}

.spaced {
  background-repeat: space; /* Tiles without clipping, spaced evenly */
}

.rounded {
  background-repeat: round; /* Tiles without clipping, scaled to fit whole number */
}

repeat is the default and tiles the image in both directions, clipping the image at the edges if it doesn’t divide evenly. no-repeat places the image once at the position specified by background-position.

space distributes tiles evenly across the background area without clipping — the first and last tiles touch the edges, and any remaining space is distributed between tiles. round scales the image up or down to ensure a whole number of tiles fit without clipping or gaps.

Two-value syntax sets horizontal and vertical behaviour independently: background-repeat: repeat no-repeat tiles only horizontally. When multiple background layers are used, comma-separated values configure each layer separately.

unset

The unset keyword resets a property to its natural behaviour: if the property is naturally inherited, it acts like inherit; if it is not naturally inherited, it acts like initial. It is one of the CSS-wide keywords available on every property.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

.reset-color {
  color: unset; /* Inherits from parent (color is inherited) */
}

.reset-display {
  display: unset; /* Resets to initial (display is not inherited) */
}

.reset-all {
  all: unset; /* Reset every property to its natural behaviour */
}

unset is useful when you want a property to behave as if no author styles had been applied — naturally inherited properties will pick up their value from the cascade, while non-inherited properties will use their specification default.

The distinction from the other CSS-wide keywords is important: initial always resets to the spec-defined initial value regardless of inheritance; inherit always forces inheritance regardless of whether the property naturally inherits; unset respects the property’s natural inheritance behaviour. revert is similar to unset but rolls back to the browser default stylesheet value rather than the spec initial value, which is often more useful in practice.

all: unset is a common pattern for creating isolated components that should not be affected by surrounding styles, though all: revert is typically more practical as it preserves sensible browser defaults.