Honorable défenseur de la propriété CSS outline (du moins jusque là), j’ai toujours pensé/prétendu que celle-ci était sous-estimée. Afin appuyer cette affirmation contestable, voici deux utilisations qui ne manquent pas d’imagination :
- @Lea Verou : Overlay behind lightbox in one simple line
- @thierrykoblentz : Helping users to focus on one form control at a time
Brievement, la propriété outline a été établie lors de la spécification CSS2 et n’a que très peu évolué depuis. Le seul gros changement est amené par la propriété complémentaire outline-offset dans le niveau 3 de CSS (source : CSS3 UI). Je vous l’accorde, il n’y a rien de bien transcendant surtout quand on ne la voit même pas apparaître dans la notation raccourcie outline…
Nous pourrions débattre longuement sur le fonctionnement qui se veut très minimaliste (sans réelles explications) mais ce n’est pas le sujet.
Dans la pratique
Nous utilisons que très rarement cette propriété. A tort certainement. L’usage le plus courant et le plus sauvage/horrible/désespérant reste : * { outline: none; }. Dans mon cas, j’ai pris l’initiative de profiter de cette propriété pour remplacer/simuler une bordure.
Pourquoi ?
- Une envie est une envie. Ne pas y céder ne serait que plus frustrant.
- Un graphiste
aprend le droit de faire des bordures externes. - L’intégrateur râle mais n’a pas le choix parce qu’il le veut bien…
- Le support de box-shadow commence qu’à partir de IE9 (source : caniuse.com)
A première vue, ça semble génial. Mais ne nous y trompons pas, le web va rarement dans le même sens (ça serait trop facile). Cette fois, c’est Opera qui ne semble/veut pas avoir la même vision des choses : table des rendus, table des rendus mobiles
Un grand nombre (des développeurs pour la plupart) diront : “Opera bla bla bla, les stats sur nos serveurs bla bla bla”. Je ne suis pas de cet avis, Opera représente aujourd’hui 300 millions d’utilisateurs qui vont prochainement devoir faire avec Webkit mais qui restent des utilisateurs dont nous devons nous préoccuper.
Et alors ?
Il y a peu de ressources qui relatent le sujet :
- Opera outline rendering bug?
- Opera css bug? CSS outlines “showing through” overlayed elements.
- Opera 9.5+ CSS bug: rendering outline over absolute positioned element
Le bug problème est connu et cela depuis la version 9.5 d’Opera. Difficile d’en dire plus (sans se tromper) car jusque là je n’ai pas trouvé de billet/ticket rapportant le problème officiellement.
La première ressource est certainement la plus intéressante. Pour ne pas changer, la vérité vraie se trouve dans les documentations (CSS 2.1, CSS3). Et voila de quoi nous laisser dubitatif :
The outline created with the outline properties is drawn “over” a box, i.e., the outline is always on top, and does not influence the position or size of the box, or of any other boxes.
This specification does not define how multiple overlapping outlines are drawn, or how outlines are drawn for boxes that are partially obscured behind other elements.
Since the outline does not affect formatting (i.e., no space is left for it in the box model), it may well overlap other elements on the page.
Difficile alors de parler de BUG après ces trois extraits. Chacun est libre d’y voir ce que bon lui semble.
Cependant, il est peut être exagérer de garder un tel contre pied à travers 11 versions de navigateur et 9 versions de moteur (source : Wikipédia). Malheureusement, ce ne sera pas la dernière fois que ce genre de choses se passe surtout quand tout le monde à les yeux tournés vers les nouveautés CSS3.
Mais après tout, pourquoi Opéra n’aurait-il pas raison sur son implémentation de la propriété outline ?
Faisons attention, une prochaine version de WebKit pourrait avoir droit à cette interprétation.