28172 sujets
CSS et mise en forme, CSS3
Outline est en effet ce que tu cherches. Ce n'est pas tiré par les cheveux et fait partie de la spec 2.1:
Bien sûr il y a l'éternelle question de la compatibilité IE. Il faudra trouver une alternative pour IE<=7
Modifié par kustolovic (03 Apr 2012 - 10:45)
a écrit :
At times, style sheet authors may want to create outlines around visual objects such as buttons, active form fields, image maps, etc., to make them stand out. CSS 2.1 outlines differ from borders in the following ways:
- Outlines do not take up space.
- Outlines may be non-rectangular.
[...]
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. Therefore, displaying or suppressing outlines does not cause reflow or overflow.
Bien sûr il y a l'éternelle question de la compatibilité IE. Il faudra trouver une alternative pour IE<=7
Modifié par kustolovic (03 Apr 2012 - 10:45)
Outline a beau faire parti de la spec, son utilisation en remplacement de border est capilotractée :
- Risque de chevauchement avec les éléments adjacents.
- Pas pris en compte dans le box-model, donc contre intuitif dans les calculs de dimensions
- Impossible de styler séparément chaque côté, sans parler des bordures avancées en CSS3.
La principale utilisation d'outline, c'est de mettre en avant l'élément ayant le focus. Sorti de là, c'est un cauchemar pour les évolutions futures qui mérite un coup de batte dans les rotules.
Si le problème est de dealer avec le box-model : box-sizing, prise en compte de l’épaisseur de la bordure dans les dimensions de l'élément ou doublement du container (une div pour la dimension, une pour le padding + border).
- Risque de chevauchement avec les éléments adjacents.
- Pas pris en compte dans le box-model, donc contre intuitif dans les calculs de dimensions
- Impossible de styler séparément chaque côté, sans parler des bordures avancées en CSS3.
La principale utilisation d'outline, c'est de mettre en avant l'élément ayant le focus. Sorti de là, c'est un cauchemar pour les évolutions futures qui mérite un coup de batte dans les rotules.
Si le problème est de dealer avec le box-model : box-sizing, prise en compte de l’épaisseur de la bordure dans les dimensions de l'élément ou doublement du container (une div pour la dimension, une pour le padding + border).
a écrit :
La principale utilisation d'outline, c'est de mettre en avant l'élément ayant le focus. Sorti de là, c'est un cauchemar pour les évolutions futures qui mérite un coup de batte dans les rotules.
Par exemple, si on veut rajouter une bordure au hover d'un lien/image, outline correspond bien car sinon tout partirait un vrille. De la même manière, dans un système applicatif, entourer un ou des éléments sélectionnés, etc. (on se rapproche du focus là).
Bien sûr, cela reste des cas marginaux et dans la plupart des cas, on utilise un border mieux adapté. Mais classer d'emblée son utilisation dans la "triche" est un peu réducteur.