The future of CSS

Media Queries Level 4: Media Query Range Contexts

A media feature like width can take its value from a range. When used, we prefix these with min- or max- to express “minimum condition” or “maximum condition” constraints. @media (min-width: 300px) and (max-width: 750px) { … } In CSS Media Queries Level 4 these type of Media Features can now be written as a …

Continue reading “Media Queries Level 4: Media Query Range Contexts”

The Future of CSS: Cascade Layers (CSS `@layer`)

When authoring CSS we have to carefully think about how we write and structure our code. Cascade Layers (CSS @layer) aim to ease this task.

The Large, Small, and Dynamic Viewports

There are some changes being proposed regarding viewport units, finally solving that “100vh in Safari on iOS” issue …

Create a color theme with CSS Relative Color Syntax, CSS `color-mix()`, and CSS `color-contrast()`

Fabio Giolito explores three new CSS color features that landed in Safari Technology Preview: Relative color syntax, e.g. .bg-primary-100 { background-color: hsl(from var(–theme-primary) h s 90%); } .bg-primary-200 { background-color: hsl(from var(–theme-primary) h s 80%); } .bg-primary-300 { background-color: hsl(from var(–theme-primary) h s 70%); } … CSS color-contrast, e.g. .text-contrast-primary { color: color-contrast(var(–theme-primary) vs white, …

Continue reading “Create a color theme with CSS Relative Color Syntax, CSS color-mix(), and CSS color-contrast()“

The Future of CSS: Scroll-Linked Animations with `@scroll-timeline` (Part 2)

Let’s take a look at how we can create Scroll-Linked Animations that use Element-based Offsets using @scroll-timeline from the “Scroll-linked Animations“ CSS Specification.

The Future of CSS: Scroll-Linked Animations with `@scroll-timeline` (Part 1)

The “Scroll-linked Animations Specification” is an upcoming addition to CSS that defines a way for creating animations that are linked to a scroll offset of a scroll container. Let’s take a look at how it works and what results we can achieve with it.

Style Spelling and Grammar Errors with the `::spelling-error` and `::grammar-error` pseudo-elements

Part of the CSS Pseudo-Elements Level 4 Specification are ways to style spelling and grammar errors. By default spelling errors — words you have mistyped — get a red dotted underline, thanks to the ::spelling-error pseudo-class selector you can tweak that. Grammar errors — such as a missing capital letter at the beginning of a …

Continue reading “Style Spelling and Grammar Errors with the ::spelling-error and ::grammar-error pseudo-elements”

Style the target text from text-fragment links using the `::target-text` pseudo-element

One of my favorite features that shipped with Chrome 80 — apart from Optional Chaining — is the ability to link to text-fragments. By default Chrome will highlight those in yellow: 💡 To easily create text-fragment links there’s this Chromium Plugin you can use. ~ As tweeted before, coming to Chromium 89 is the ability …

Continue reading “Style the target text from text-fragment links using the ::target-text pseudo-element”

The future of CSS: Higher Level Custom Properties to control multiple declarations

“Higher Level Custom Properties” are Custom Properties that control multiple other CSS Properties. Although still a proposal it’s worth having a look already as they’re really exciting.

Native Aspect Ratio Boxes in CSS thanks to `aspect-ratio`

In “CSS Box Sizing Module Level 4” a new aspect-ratio CSS property is defined. Let’s take a look on how to use it …