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 …

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, …

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 …

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 …