28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Je cherche désespérément la propriété qui permet d'entourer une boite (comme une bordure) sans succès Smiley ohwell la propriété permet de faire une bordure spécifique qui n'ajoute pas de pixels dans la dimension de la boite .. merci
Hello.

Une raison particulière pour ne pas utiliser de bordure?
Selon les cas, il y a moyen de tricher en utilisant outline, mais c'est un peu tiré par les cheveux.
Modérateur
Outline est en effet ce que tu cherches. Ce n'est pas tiré par les cheveux et fait partie de la spec 2.1:

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).
Modérateur
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.
Par triche j'entendais l'utilisation d'outline là ou on devrait utiliser border. Les cas que tu cites sont légitimes.