Le web d’aujourd’hui, démontré

Un fragment shader calcule la sortie de chaque pixel à l’aide de champs de distance mathématiques. Cette démo évalue un métachamp à partir de cinq points en orbite plus la position de votre curseur, produisant des surfaces par pure arithmétique. Déplacez-vous dans le frai. Cliquez n’importe où pour déclencher une pulsation. La fenêtre de code affiche les uniforms transmis au GPU à chaque image.

// envoyé à chaque image
gl.uniform2f(u.res, canvas.width, canvas.height);
gl.uniform1f(u.time, 0.00);
gl.uniform2f(u.mouse, 0.00, 0.00);
gl.uniform1f(u.pulse, 0.00);
gl.drawArrays(gl.TRIANGLES, 0, 3);

// dans le shader, le pointeur est un
// centre de plus dans le champ :
// f += (0.06 + pulse * 0.14)
//        / dot(p - mouse, p - mouse)

Les timelines d’animation CSS associent le mouvement à la progression du défilement plutôt qu’au temps de l’horloge. La barre de défilement devient une tête de lecture. Toute l’animation ici utilise une timeline nommée en CSS ; le thread compositeur exécute le mouvement de façon indépendante. JavaScript ne fait que lire et afficher le pourcentage de défilement courant.

.scroller {
	scroll-timeline: --demo-scroll y;
}

.progress-bar {
	animation: fill linear both;
	animation-timeline: --demo-scroll;
}

.item {
	animation: rise linear both;
	animation-timeline: view();
	animation-range: entry 0% entry 90%;
}

/* progression du défilement : 0% */

OKLCH organise la couleur dans un espace perceptuellement uniforme : luminosité, chroma, teinte. Des couleurs de même luminosité paraissent d’une clarté identique à l’œil humain. Une seule propriété personnalisée CSS contrôle toute la palette ci-dessous ; l’échelle de sept teintes et ombres est calculée en direct avec color-mix(). Déplacez le curseur de teinte pour voir le thème se régénérer à partir d’un seul nombre.

@property --demo-hue {
	syntax: "<number>";
	initial-value: 195;
	inherits: true;
}

.lab {
	--demo-hue: 195;
	--demo-accent: oklch(0.62 0.13 var(--demo-hue));
	/* = oklch(0.62 0.13 195) */
}

.tint {
	background: color-mix(in oklch,
		var(--demo-accent), white 50%);
}

Les polices variables encodent tout l’espace de conception d’un caractère dans un seul fichier. Roboto Flex possède plusieurs axes : graisse, chasse, taille optique, grade et inclinaison. Le GPU interpole les formes de lettres entre les masters définis. Ajustez les curseurs — aucun téléchargement de police supplémentaire.

@font-face {
	font-family: "Roboto Flex";
	src: url("/fonts/roboto-flex/….woff2")
		format("woff2-variations");
	font-weight: 100 1000;
}

.specimen {
	font-variation-settings:
		"wght" 400,
		"wdth" 100,
		"opsz" 14,
		"GRAD" 0,
		"slnt" 0,
		"XTRA" 468;
}

CSS offre désormais un contrôle précis du retour à la ligne. text-wrap: balance répartit les mots uniformément entre les lignes, idéal pour les titres. text-wrap: pretty élimine les orphelines — ces mots courts isolés sur la dernière ligne. Cliquez un bouton pour appliquer la valeur au paragraphe.

.text {
	text-wrap: wrap;
}

/* Valeurs valides : */
/* text-wrap: wrap;     — défaut */
/* text-wrap: nowrap;   — pas de retour à la ligne */
/* text-wrap: balance;  — longueurs de ligne équilibrées */
/* text-wrap: pretty;   — évite orphelines/veuves */
/* text-wrap: stable;   — retour à la ligne stable */
/* Cliquez un bouton pour tester. */

La propriété CSS initial-letter crée une lettrine — la première lettre s’étend sur plusieurs lignes. Combinez-la aux axes de police variable pour un contrôle typographique dynamique. Ajustez la graisse et la chasse pour voir la lettrine se transformer en temps réel.

p::first-letter {
	font-family: "Roboto Flex";
	initial-letter: 3.8;
	font-variation-settings:
		"wght" 700,
		"wdth" 75;
}

L’API View Transitions capture l’ancien état de la page, applique les changements du DOM, capture le nouvel état, puis anime entre les deux avec les animations CSS que vous définissez. Le titre possède un view-transition-name et se métamorphose donc séparément. Les navigateurs non compatibles permutent instantanément, sans animation.

const swap = () => {
	title.textContent = "Lorem";
	// …met à jour le corps du panneau…
};

document.startViewTransition(swap);

/* le titre s'anime grâce à : */
h3 {
	view-transition-name: demo-vt-title;
}

// transitions exécutées : 0

Le sélecteur :has() lit l’état des enfants pour styler les éléments parents. Cette capacité a manqué à CSS pendant des décennies. Ci-dessous, les deux cartes changent de style uniquement selon l’état des champs ; c’est CSS qui fait le travail. JavaScript ne fait que surligner la règle active dans la fenêtre de code. Cochez la case ou saisissez un e-mail.

.card {
	border-color: var(--border);
}

.card:has(input:checked) {
	border-color: teal;
	translate: 0 -3px;
}

.card:has(input:valid) {
	border-color: green;
}

.card:has(input:invalid) {
	border-color: red;
}

Les requêtes de conteneur permettent aux composants de réagir à leurs propres dimensions plutôt qu’à la fenêtre. La boîte en pointillés est le conteneur ; redimensionnez-la en tirant le coin. La carte à l’intérieur applique des règles de mise en page à 320px et 440px de sa largeur. La taille de la fenêtre n’a aucune importance.

.box { container: demobox / inline-size; }

.card {
	grid-template-columns: 1fr;   /* empilée */
}

@container demobox (min-width: 320px) {
	.card { grid-template-columns: 76px 1fr; }
}

@container demobox (min-width: 440px) {
	.card { grid-template-columns: 1fr 104px; }
	.thumb { order: 2; }   /* vignette → droite */
}

/* largeur du conteneur : — */

Détection de fonctionnalités à l’exécution via CSS.supports() et vérification de l’existence des API. Toutes les sondes ci-dessous ont été exécutées au chargement de la page dans votre navigateur. Vert : pris en charge ; rouge : absent. Cliquez une sonde pour voir le test exact.

Sondage…