Voilà pour l’échauffement, passons à la mise à mort. Je vais vous détailler pourquoi border-radius et box-shadow ne sont que des résidus de cagoinces (si, si).

Le cas border-radius

Combien de fois ai-je entendu “Oui, mais tu comprends, pour les bords arrondis, border-radius, c’est mieux”. Mieux ? Mieux que quoi exactement ? Non parce que sans déconner, moi, intégrer des bords arrondis, ça fait plus de 10 ans que je le fait. Ok, ne soyons pas de mauvaise foi, border-radius permet de faire des bords arrondis “sans image” ni “sur-balisage HTML” ni “Javascript”. C’est donc bien une autre méthode, parfois plus légère, pour réaliser des bords arrondis simples. Mais je ne vois pas en quoi c’est “mieux” :

• Pas d’image : Donc ça c’est un non-argument absolue. Que dites-vous ? Économiser des requêtes HTTP pour les performances ? Vous ne connaissez pas les DATA URL ? Qui sont implémentées par tous les navigateurs qui supportent border-radius et avec des équivalents pour les vieux IE ! Mmmh ? Réduire le poids des pages Web ? Non sans rire, vous en êtes à optimiser 500 octets d’image (le poids maximum d’une image correctement compressée pour faire l’équivalent de ce que permet border-radius) ! Vous êtes sur que vous n’avez pas autre chose à optimiser avant, comme la durée de vie du cache de vos ressources statiques par exemple ? Accessoirement, l’utilisation d’images pour gérer les bordures offre d’énormes avantages graphiques car elles permettent de créer des formes bien plus subtiles et complexes donc, allez plutôt trifouiller border-image et apprenez à faire des sprites CSS, hein.
• Pas de sur-balisage HTML : Ceci est un argument presque recevable sauf que… Sauf que dans la vraie vie, ce n’est vraie que si vous cherchez à intégrer des boites qui s’élargissent à la fois en hauteur et en largeur et qui doivent s’afficher avec des coins transparents. Une fois sortie de ce cas de figure, somme toute assez rare, il y a 9 chances sur 10 (voir 9,9 si vous vous intéressez aux sélecteurs CSS 3) que votre code source soit suffisamment balisé pour vous permettre de rajouter des bords arrondis sans avoir à vous casser la tête sur le HTML (et je ne vous parle même pas d’utiliser des techniques un peu délicates comme les pseudo-éléments CSS).
• Pas besoin de Javascript : Donc, là, vous ne le voyez pas, mais je suis sous mon bureau, ravagé par une crise de fou rire. Si vous avez tout lu jusque là, vous aurez sans doute deviné que je n’ai jamais utilisé une once de Javascript pour produire des bords arrondis. Mais même si c’était le cas… en toute honnêteté, c’était quand la dernière fois que vous avez créer un site qui n’embarque pas une bibliothèque Javascript à tout faire (jQuery, Prototype, YUI, etc.) ? Accessoirement, si vous avez pris de bonnes habitudes en terme de Javascript non-intrusif, ça ne devrait pas vous poser l’ombre d’un cas de conscience.

Alors, oui, border-radius, ça peut être plus simple et plus rapide… mais c’est aussi très limité dès que vous voulez essayer de produire des bordures un peu chiadées graphiquement parlant (genre avec un petit reflet de lumière ou avec un petit déséquilibre dans les formes… bref, si vous voulez un truc un peu moins raide). Et dans ce cas-là… mmmh… je crois qu’il y a un truc en CSS 3 qui s’appelle border-image.

box-shadow, ni fait, ni à faire

Ayant donc d’autorité décrété que border-radius c’était plutôt “bof”, je vais maintenant faire de même avec box-shadow.

Box-shadow est cette propriété qui, comme son nom l’indique, permet de créer des ombres portés et, comme son nom ne l’indique pas, des effets de halo, de lumière et même… de bordures ! Et oui ! En soit, c’est une propriété intéressante (en tout cas beaucoup plus que border-radius), dès qu’on cherche à la tordre pour en faire autre choses que ce qu’elle suggère. Malheureusement, elle souffres de quelques défauts que je qualifie assez volontiers de majeur :

• Les ombres (ou lumières) générées sont carrées ou plus exactement, elles ont la forme exacte de la boite sur laquelle la propriété est appliquée (ce qui inclue l’usage de border-radius heureusement, mais pas la transparence des images, j’y reviens plus loin). Certes, elles peuvent être distendues ou contractées homothétiquement, mais pas déformées à l’envie. Donc, si vous souhaitez créer des effets graphiques un peu travaillés, du genre feuille-de-papier-qui-se-décolle-sur-un-coin, vous repassez par la case image (et vous ne touchez pas 20 000 Francs, votre client n’en ayant rien à foutre que vous galériez à produire l’effet qu’il attend… il fallait y penser avant).
• Si vous ne mettez pas une couleur d’arrière plan à la boite qui génère l’ombre, celle-ci sera… troué ! Et oui, c’est la spec qui le dit : The shadow is drawn outside the border edge only: it is clipped inside the border-box of the element.. En clair, la partie de l’ombre qui est sous la boite correspondante n’est pas rendue et puis voilà, c’est tout… iiirk ! Vous pourriez m’objecter que ça peut être utile. Oui, c’est vrai, mais pas toujours et comme ce n’est pas paramétrable, c’est chiant.

Donc, de deux choses l’une : Soit vous atteigniez le niveau zéro du web design (et franchement, une boite à bord arrondi et/ou avec une ombre porté, oui, c’est le niveau zéro du web design ; le truc que tous les apprentis intégrateurs font le premier jour où ils découvrent les joies de CSS) et avez besoin de produire de simples ombres portées ou des effets de lueur interne sur une boite, dans ce cas, c’est ok, cette propriété est faite pour vous ; soit vous voulez réalisez des effets un peu plus complexes et vous allez vite vous rendre compte que ce n’est pas plus simple ou pire, que c’est carrément limité et vous allez alors soit vous rabattre vers l’utilisation d’images (là encore, border-image peut bien vous aider… oui, je sais, je suis un peu lourd là, mais il faut vraiment voir toute la souplesse graphique qu’offre cette propriété) soit, si vous êtes un peu plus aventureux, vous allez regarder du coté des filtres SVG (aventureux car pour l’instant, l’application de filtres SVG sur des éléments HTML ne fonctionne qu’avec Firefox 4… qui n’est pas encore sorti au moment ou je publie ce coup de gueule).

Je ne suis pas le seul à penser que box-shadow est une propriété mal finie. En effet, les développeurs de webkit ont implémenté une autre propriété d’ombre : -webkit-svg-shadow. Cette propriété ne fait actuellement l’objet d’aucune normalisation, mais elle est une tentative pour porter la souplesse des ombres SVG vers CSS sans avoir à subir toute la lourdeur des primitives de filtres SVG. L’idée étant d’avoir une propriété qui gère pleinement la transparence des boites HTML et des images pour créer des ombres qui ont des formes complexes. En effet, essayez d’appliquer box-shadow à une image transparente… l’ombre sera carré : fail ! (Ceci étant dit, les développeurs de Webkit ferait mieux de travailler sur l’implémentation de box-shadow. Essayez de créer une ombre interne sur une boite avec border-radius et vous comprendrez de quoi je parle).

Conclusion

Aaaah, je me sens mieux !

Vous l’aurez compris, en ce qui me concerne ces deux propriétés ne méritent pas l’attention qu’on leur porte. Certes, elles apportent des solutions élégantes à certains problèmes communs d’intégration mais sans non plus porter à elles seules la révolution qu’est CSS3. De fait, je ne les renie pas car elles ont leur utilité (et il m’arrive même de les utiliser, si, si !). Cependant, il existe moult autres propriétés CSS3 en cour d’implémentation qui sont infiniment plus utiles (mais aussi infiniment moins sexy). En particulier, je vous invite à regarder de près ce qui ce fait au sein du module CSS Basic UI avec en particulier les propriétés box-sizing et pointer-events qui sont assez discrètes mais super utiles au quotidien (non mais vraiment !) ainsi que toutes les pseudo-classes de ce module et du module CSS selecteur Level 3. Ah ! Et au fait, est-ce que je vous ai parlé de border-image ?