Le W3C lance de nouvelles fonctionnalités CSS pour des mises en page web plus fluides

Un ensemble de nouvelles fonctionnalités CSS permet de dessiner des pages web en dehors du format en boîte. La fonction shape() et les propriétés border-shape et corner-shape offrent aux designers et aux développeurs des contours courbes, des découpes et des bordures de forme libre, sans plug-in ni JavaScript.

Shape() décrit une forme à partir de coordonnées géométriques. Contrairement à l'ancienne path(), qui reposait sur SVG et n'acceptait que les pixels, elle utilise la syntaxe de CSS et s'adapte à la taille de la page. Combinée à la propriété clip-path, elle sert déjà à dessiner des talons de billets et des bulles de conversation. border-shape applique ces coordonnées à la bordure même de l'élément. Le contour est défini au début du rendu, au lieu d'être découpé à la fin.

Dans ses exemples, il est possible de placer des bordures dans des bordures, de découper un cœur dans un carré et d'animer le contour au survol de la souris. Pour ceux qui ne veulent pas écrire de coordonnées, corner-shape propose des coins prêts à l'emploi : arrondis, chanfreinés, avec encoche et le « squircle », mi-carré, mi-cercle.

Selon le site caniuse.com, tous les principaux navigateurs prennent déjà en charge shape(). border-shape et corner-shape sont encore expérimentales, mais les versions actuelles de Chrome, Edge et Opera les acceptent déjà. Quand le W3C a publié le premier standard de mise en page web, en 1996, les pages copiaient la grille des journaux et des magazines. HTML et CSS ne traçaient que des lignes horizontales et verticales ; les formes libres exigeaient Flash, des applets Java ou du SVG limité à une zone de la page.

Avec des informations de theregister.com.

Texte rédigé avec l'IA à partir des sources citées et vérifié par les règles automatiques de la rédaction. Notre méthode

• #design