L'aspect des sites internet pourrait bientôt évoluer et se moderniser en abandonnant les éternelles grilles rectangulaires. De nouvelles propriétés de programmation visuelle offrent aux développeurs des solutions pour créer des conceptions fluides sans recourir à des artifices techniques complexes.
Depuis les premières normes de mise en page publiées en 1996, la conception numérique copiait la structure des journaux papier. The Register rappelle que les navigateurs récents intègrent désormais des fonctions qui libèrent les développeurs de ces blocs géométriques stricts.
Des outils de stylisation pour façonner un web non linéaire
Le langage HTML et les feuilles de style CSS imposaient historiquement des bordures strictement horizontales ou verticales sur les pages web. Pour obtenir des présentations originales, les créateurs devaient empiler des modules externes lourds (rappelez-vous… Flash Player, Silverlight…)ou écrire de longues lignes de JavaScript complexes à maintenir. Le format SVG a ensuite permis de tracer des courbes, mais il restait enfermé dans un cadre fixe souvent incapable de s'adapter aux différents écrans. La commande path() a bien tenté de corriger ce problème, mais elle figeait invariablement les dimensions en pixels, rendant les designs peu réactifs (ou "responsives").
Mais récemment, une nouvelle propriété CSS a fait son apparition : shape(). Concrètement, cet outil lit des coordonnées géométriques précises pour dicter une trajectoire directement dans le code du site. Elle utilise une syntaxe native qui comprend de multiples variables et s'adapte automatiquement à l'espace disponible sur la page. Les créateurs l'associent aux propriétés border-shape et corner-shape pour sculpter les bordures physiques de leurs contenus. La première applique le tracé sur les limites du conteneur dès le calcul initial de la page. La seconde fournit un catalogue de motifs prêts à l'emploi, comme des bords joliment biseautés ou le "squircle", un hybride curieux entre le carré et le cercle.
Pour les néophytes, la création manuelle de ces arcs de cercle ou de ces polygones peut paraître complexe. Le développeur Temani Afif explique sur le site CSS-Tricks que ces outils divisent logiquement les formes en catégories : les lignes droites, les courbes, et les motifs répétés. Des convertisseurs gratuits en ligne transforment instantanément vos anciens graphiques SVG en syntaxe shape() parfaitement valide, sans imposer de fastidieux calculs de positionnement spatial. Il devient alors très aisé de dessiner des bulles de discussion, des tickets de cinéma ou de créer un cœur à l'intérieur d'une boîte carrée classique. Les développeurs appliquent aussi des animations fluides pour qu'une forme se modifie ou grandisse au simple passage de la souris.
L'implémentation de ces nouvelles fonctionnalités par l'industrie avance rapidement. La propriété shape() est désormais prise en charge par les principaux navigateurs du marché, comme Chrome 137 ou Safari 18.4. Les éléments border-shape et corner-shape demeurent encore considérés comme expérimentaux par certains acteurs, bien qu'ils fonctionnent déjà très bien sur Edge et Opera.
Au fil du temps les interfaces Web devraient donc devenir plus vivantes sans pour autant compromettre l'accessibilité ou le référencement SEO. Bon heureusement, en cas d'abus (et il y en aura), les extensions activant le mode de lecture minimaliste seront toujours fonctionnelles.
