The false promise of design tokens
Design tokens in theory and practice
![](/design-tokens-false.png)
Gradient borders in CSS
Using background-clip: border-area
![](/border-gradient.png)
How to gif (2025 edition)
Animated AVIF, AV1 video, JPEG-XL...
![](/howtogif.png)
Combining currentcolor with relative color syntax
Using the CSS currentcolor keyword with relative color syntax
![](/currentcolor.png)
CSS :open pseudo-class
A CSS pseudo-class for styling open dialogs, details, selects, and inputs.
![](/open.png)
Which Apple devices support hardware-accelerated AV1 video decoding?
AV1 decoding on Mac, iPhone and iPad
![](/av1.png)
Focus styles and programmatic focus
:focus, :focus-visible and the JavaScript .focus() method
![](/focusVisible.png)
Building a tooltip with the popover API
Building a toggletip using the popover API
![](/tooltips-popover.png)
Do JavaScript frameworks still need portals?
Problems solved by the HTML dialog element, popover attribute and CSS anchor positioning
![](/portal.jpg)
What's new with dialog
Zero-JavaScript modals, light dismiss functionality, toggle events and more...
![](/dialog.png)
Calendars in Temporal
Understanding calendars in the Temporal API
![](/calendars.png)
Formatting dates and times in JavaScript with Temporal and the Internationalization API
Human-readable dates and times without a library
![](/formattingdates.png)
Get a Unix timestamp with the Temporal API
Get a Unix timestamp using Temporal.Instant or Temporal.ZonedDateTime
![](/unixtime.png)
Date pickers and the Temporal API
ISO 8601, date and time inputs, and the Temporal API
![](/datetimepicker.png)
Cookie Store API
A modern asynchronous alternative to document.cookie
![](/cookiestore.png)
CSS @import is cool, actually
Importing CSS into a cascade layer. Conditionally importing CSS with feature queries and media queries. @import vs <link>
![](/cssimport.png)
A more powerful CSS attr() function
Fallback values and non-string values, for any CSS property, not just content
![](/attr.png)
The best approach to SVG icons
Inline SVG, <use>, <symbol>, spritesheets, JSX...
![](/svg.jpg)
Are icon fonts a bad practice?
Icon fonts in 2024. Icon fonts vs SVG. Performance, a11y, etc.
![](/icon-fonts.jpg)
Centering things: a solved problem?
Vertical and horizontal centering without grid or flexbox, text-box-trim, and centering an absolutely positioned element
![](/centeringthings.jpg)
The stretch keyword: a better alternative to width: 100% in CSS?
Use margins while avoiding overflow and horizontal scrollbars with width: stretch
![](/stretch.png)
Color fonts
COLR, COLRv1, OpenType-SVG.
![](/colorfonts.png)
New alternatives to innerHTML
getHTML, setHTML, setHTMLUnsafe, declarative shadow DOM and sanitization
![](/sethtml.png)
Parsing declarative shadow DOM
Document.parseHTMLUnsafe is the new improved .parseFromString
![](/parseHTML.png)
Render-blocking on purpose
The new blocking="render" attribute.
![](/render-block.jpg)
The slow death of CSS vendor prefixes
Do we still need Autoprefixer?
![](/webkit.jpg)
Custom pseudo-classes for web components with the CustomStateSet API
Custom CSS pseudo-classes for custom elements
![](/custompseudo.png)
Sharing styles between shadow DOM
Sharing styles between web components using CSS modules.
![](/sharing-styles.png)
Creating and importing styles with constructable stylesheets and CSS module scripts
Creating, importing and manipulating stylesheets using JavaScript.
![](/cssmodules.png)
AVIF Everywhere
A new image format for the web finally gets full browser support.
![](/avif.jpg)
Easy vertical alignment without flexbox
Easy vertical alignment with display block
![](/easy-centering.png)
The AV1 video codec gains broader hardware support
The next-gen royalty-free video codec is supported on new Apple devices.
![](/m3.jpg)
The View Transitions API, the Navigation API and the SPA vs MPA debate
Memory leaks, accessibility, core web vitals, paint holding, native browser loading spinners, Server Side Rendering, and more.
![](/spavsmpa.png)
User-adaptive interfaces with AccentColor
Respecting user preferences for form controls.
![](/accentcolor.png)
Declarative Shadow DOM
Shadow DOM without JavaScript
![](/declarativeshadowdom.png)
Converting between iterables and web streams
ReadableStream.from() and Array.fromAsync()
![](/iterablestreams.png)
Import JSON, CSS and more with import attributes
A standard way to import JSON modules, CSS modules and more
![](/importattribute.png)
Change array by copy
toReversed(), toSorted() and toSpliced()
![](/changearray.png)
Grouping array items with groupBy()
Object.groupBy()
![](/groupby.png)
Using emoji on the web
Probably more than you ever wanted to know about emoji
![](/emoji.png)
The new @font-face syntax
Using variable fonts and color fonts with @font-face.
![](/fontface.png)
System font deep dive
system-ui, ui-monospace, ui-rounded, ui-sans-serif and ui-serif.
![](/systemfonts.png)
color-mix and relative color
How to modify the hue, saturation, lightness and opacity of colors with CSS
![](/relativecolor.png)
Modern component-driven HTML email
Using CSS variables, components and Tailwind in HTML Email
![](/component-email.png)
Standardising design tokens
The Design Tokens Community Group standard
![](/design-tokens.png)
A guide to CSS shapes and offset-path
Big improvements are coming to CSS Motion Path. Use offset-path and offset-distance to move elements along a path.
![](/offset-path.png)
image-set() for CSS background images
Use the latest image formats in CSS.
![](/image-set.png)
Styling scrollbars
How to style scrollbars... and the question of whether you should.
![](/scrollbars.png)
An introduction to @scope in CSS
Style based on proximity and set a lower boundary for a selector.
![](/scope.png)
Changing inline styles with JavaScript
Use the Typed OM and older APIs to get, delete and add inline styles using JavaScript.
![](/inline-styles.png)
Register custom properties in CSS, get and update them with JavaScript
Use @property to register custom properties in CSS. Get and update them in JavaScript with the Typed OM.
![](/custom-properties.png)
Using linear() for better animation
Using the linear() easing function with CSS transitions, animations and the JavaScript Web Animations API
![](/linear.png)
__dirname & __filename equivalent in Bun
Get the directory and file name of the current module
![](/bun.png)
Modern HTML email (tables no longer required)
Coding email like it's 2023
![](/email.png)
The clear-site-data header
Wipe data from a web browser with this header
![](/placeholder.png)
The submitter parameter for FormData
Learn about the new submitter parameter for FormData
![](/placeholder.png)