Le CSS introduit une nouvelle propriété, corner-shape, qui complète border-radius en permettant de créer des coins plus variés que les simples arrondis classiques. Cette fonctionnalité offre des formes comme les coins biseautés (bevel), concaves (scoop), en squircle (style Apple) ou encore des entailles (notch), offrant ainsi plus de flexibilité pour le design d'interfaces. Contrairement aux solutions de contournement précédentes (SVG, clip-path), elle s'applique directement aux bordures, ombres et fonds, sans les inconvénients techniques comme les coupures d'ombres ou les animations fragiles.

L'auteur souligne que cette propriété reste progressive : elle nécessite border-radius pour fonctionner et n'est pas encore supportée par tous les navigateurs. Elle permet cependant de simplifier le code en évitant les hacks complexes, tout en offrant un contrôle précis via des valeurs comme superellipse() pour des ajustements fins. Une avancée majeure pour les développeurs front-end, à l'image de l'impact historique de border-radius il y a 15 ans.

Enfin, l'article insiste sur l'importance de l'amélioration progressive (progressive enhancement), cette fonctionnalité étant appelée à se généraliser progressivement dans les navigateurs. Une évolution bienvenue pour des interfaces plus riches et moins dépendantes des contournements techniques.

L'auteur explique dans cet article comment utiliser la validation des entrées HTML côté client comme une amélioration progressive pour l'expérience utilisateur, en complément de la validation côté serveur. Il montre comment utiliser les attributs natifs HTML comme pattern, minlength, maxlength, et title pour valider et styliser les entrées, tout en soulignant les limites d'accessibilité de ces méthodes. L'article propose ensuite d'améliorer l'accessibilité en utilisant l'API de validation des contraintes JavaScript pour personnaliser l'affichage des erreurs. Un exemple interactif est disponible sur CodePen.

Tout est dans le titre

L'auteur insiste sur l'amélioration progressive... et il a bien raison

Tout est dans le titre

Tout est dans le titre

Tout est dans le titre

Un exemple d'amélioration progressive : la loi européenne impose de demander le consentement de l'utilisateur pour l'utilisation des cookies (et autres moyens de "traçage") L'auteur montre comment il s'y est pris, même si JavaScript est désactivé

Tout est dans le titre (via https://www.smashingmagazine.com/2017/01/web-development-reading-list-166/ )

... et comment y répondre :)

Tout est dans le titre

Astuces : utiliser Modernizr pour détecter la capacité "touch", et faire défiler un lien interne vers sa destination

Transformer des données CSS en visualisations SVG par JavaScript

L'auteur a écrit un beau plaidoyer pour l'amélioration progressive, il m'a convaincu !

TAFEE :) en gros on ne cherche pas à tout prix à ce que le même site s'affiche pareil sous IE6 et sous Chrome 24 - les polyfills Javascript ont un coût non négligeable en terme de performance