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)