Tip
Stop writing unnecessary, heavy, thread-blocking JavaScript — Una Kravets
Tip
CSS is now the most powerful design tool for the Web — Matthias Ott
Tip
With all the new web features right on their way (view-transitions, @starting-style, calc-size(), speculation rules, style and container queries, relative color syntax, ... the list goes on and on), it's time to face it... 🫣👇 — Stefan Judis
- The
<dialog>element - The
<details>element - The customizable
<select>element - The
popoverattribute - The
commandattribute - The
focusgroupattribute - The
switchattribute - The
CloseWatcherapi - The
Abort Controllerapi
- Proposal: Customized built-in elements via elementInternals.type
- Proposal: Custom attributes for all elements
- Document element (1):
<html> - Document metadata (6):
<head>,<title>,<base>,<link>,<meta>,<style>, - Sections (15):
<body>,<article>,<section>,<nav>,<aside>,<h1-6>,<hgroup>,<header>,<footer>,<address> - Grouping content (16):
<p>,<hr>,<pre>,<blockquote>,<ol>,<ul>,<menu>,<li>,<dl>,<dt>,<dd>,<figure>,<figcaption>,<main>,<search>,<div> - Text-level semantics (29):
<a>,<em>,<strong>,<small>,<s>,<cite>,<q>,<dfn>,<abbr>,<ruby>,<rt>,<rp>,<data>,<time>,<code>,<var>,<samp>,<kbd>,<sub>,<sup>,<i>,<b>,<u>,<mark>,<bdi>,<bdo>,<span>,<br>,<wbr> - Edits (2):
<ins>,<del> - Embedded content (13):
<picture>,<source>,<img>,<iframe>,<embed>,<object>,<video>,<audio>,<track>,<map>,<area>,<math>,<svg> - Tabular data (10):
<table>,<caption>,<colgroup>,<col>,<tbody>,<thead>,<tfoot>,<tr>,<td>,<th> - Forms (14):
<form>,<label>,<input>,<button>,<select>,<datalist>,<optgroup>,<option>,<textarea>,<output>,<progress>,<meter>,<fieldset>,<legend> - Interactive elements (3):
<details>,<summary>,<dialog> - Custom elements (2):
<template>,<slot> - Scripting (3):
<script>,<noscript>,<canvas> - Experimental (1):
<portal> - Proposed (-):
<selectedcontent>
Note
These last element landed in the HTML spec was the <search> element, at March 24th 2023.
- CSS Scroll Animations
- CSS View Transitions
- CSS Anchor Positioning
- CSS Subgrid
- CSS Discrete Property Animations
- CSS Container Queries
- CSS Custom Functions
- CSS Custom Highlight
- CSS
color-mix() - CSS
if()notation - CSS
attr() - CSS tips ✨
calc(), var(), clamp(), fit-content(), repeat(), min(), max(), attr(), env(), color(), rgb(), hsl(), oklch(), circle(), polygon(), url(), translate(), scale(), rotate(), matrix(), invert(), sin(), cos(), tan(), pow(), hypot(), log(), steps(), scroll(), scroll-state(), view()
- 2025-01-21 — attr() is getting an upgrade
- 2024-12-21 — Re-imagine the web
- 2024-08-08 — Transition to
height: auto&display: noneUsing Pure CSS - 2024-12-19 — CSS box-decoration-break
- 2024-12-31 — New Front-End Features In 2025
- 2024-12-31 — CSS Wrapped 2024
- 2024-02-01 — Interop 2024 Dashboard
- 2023-12-31 — CSS Wrapped 2023
- News to the web platform
- Better, Faster, Stronger Web UI by Una Kravets
- Modern CSS patterns in Campfire
- Write better CSS with modern CSS
- The latest in Web UI (Google I/O ‘24)
- Adam Argyle blog
- CSS Tips
- A standards first web framework
<dialog>: modal content, sidebars<details>: accordions, disclosurespopover: menus, custom toast notifications, content pickersanchor: tooltips