smartIT

Introduction

Ce soir je me suis lancé un petit défi : faire, en CSS only (sans images), des boutons « étape par étape » ou encore utilisé pour les « fils d’Ariane » comme on en voit assez souvent dans le web moderne. Pour ceux qui s’interrogeraient encore, je parle de ceci par exemple :

Exemple de step-by-step provenant du site B&Q

Je me suis instinctivement dit qu’avec du border-radius, un peu de positionnement et de z-index j’arriverais à faire quelque chose de correct. À ce moment, je me suis rendu compte d’à quel point le border-radius a peut-être été mal pensé.

Radius … et seulement radius ?

Premier problème : comment faire la flèche qui pointe vers la droite ? Avec le border-radius ce n’est pas possible. En effet comme son nom le sous-entend, on crée un arrondi sur les bords. Vous avez cependant la possibilité de préciser 2 valeurs pour un même coin qui représente la largeur et la hauteur de l’ellipse calculée (pour ceux qui ne comprendraient pas, je vous laisse regarder le draft du w3c, vous allez comprendre assez vite).

Concernant mon challenge de ce soir je me suis résigné à cette solution (esthétiquement correct avec un peu de dextérité). Cependant, on peut se poser la question : pourquoi avoir créé uniquement le border-radius ? Simplement à cause des besoins du « web2.0″ qui l’utilise à outrance. Si demain la mode était à une autre forme … on créerait une nouvelle propriété dans l’urgence ? on appellerais ça le web3.0 et on ferait un draft pour le css4 ?

Les valeurs négatives.

Pour en revenir à mon exemple, pour faire les étapes « du milieu », il faut une encoche à gauche du bouton pour être dans la continuité du premier bouton et donc une valeur négative du border-radius => ohhh déception, ce n’est pas permis (je vous invite à lire la section 3.3 du draft sur le w3c ici)

Border ou Corner ?

Après ces premières recherches, voyant que c’était peine perdue pour mon petit challenge, je me suis mis à penser à la notion de border… et je n’ai pas vu de lien avec le border-radius. En effet le border-radius, comme le dit le draft du w3c (toujours dans la section 3.3), doit aussi agir sur le background de l’élement, même s’il n’y a pas de border à l’élément. En gros si l’on voulait arrondir la bordure en laissant le background carré on ne pourrait pas.

Il y a là une erreur de terminologie d’une part, mais plus gravement un manque fonctionnel.

Conceptualisation

J’espère vous avoir démontré que la conception du border-radius est peut-être trop simpliste pour un web qui évolue si vite. Je sens venir les commentaires: « T’avais qu’à proposer mieux » – « Et d’abord tu proposes rien », alors je vais faire mes propositions, d’après les éléments dont j’ai parlé au-dessus et vous laissez en discuter dans les commentaires.

div {corner: 10px rounded}

p.quote {
	corner: 10px square #ccc;
	border: none;
}

• on dissocie les border des corner. On gagnerait donc la possibilité d’avoir des border sans corner ou inversement.
• Ajout de la couleur en dernier paramètre pour rester cohérent avec les border et être plus fonctionnel.
• j’ai changé radius par rounded qui me parait plus correct pour un usage simple. On pourrait dire que « 10px rounded » est un raccourci de « 10px/10px radius » par exemple.
• on n’est plus limité à une seule fonction, on pourrait très bien imaginer que la valeur par défaut d’un corner soit « square » et qu’à la façon des styles de bordure (dotted/solid/dashed/etc.) on aie une bibliothèque de formes simples pour les corner.

J’espère que vous serez fort de propositions et que les petites réflexions comme celles-ci permettront de créer un web meilleur, un css plus intuitif et fonctionnel et permettre ainsi plus de diversité et de créativité.