Simplification de "border".

Version imprimable

Bonjour,

Comme la plupart d'entre vous le savent, il est facilement possible de simplifier l'écriture d'un style qui tient sur plusieurs lignes en une seule.

Exemple :
Code:

1 2 3 4 background-color:#f00; background-image:url(monimage); background-repeat:no-repeat; background-position:top center;
donne :

Code:

background:#f00 url(monimage) no-repeat top center;

Pour ce qui est des bordures, c'est pareil, ou presque. On peut simplifier :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 border-left-style:solid; border-right-style:solid; border-top-style:solid; border-bottom-style:solid; border-left-width:1px; border-right-width:1px; border-top-width:1px; border-bottom-width:1px; border-left-color:#f00; border-right-color:#f00; border-top-color:#f00; border-bottom-color:#f00;
en :
Code:

1 2 3 border-style:solid solid solid solid; border-width:1px 1px 1px 1px; border-color:#f00 #f00 #f00 #f00;
ou en :
Code:

1 2 3 border-style:solid; border-width:1px; border-color:#f00;
ou encore en :

Code:

border:1px solid #f00;

Qu'en est-il quand chaque côté de la bordure est différent ?

On peut simplifier :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 border-left-style:solid; border-right-style:solid; border-top-style:solid; border-bottom-style:solid; border-left-width:1px; border-right-width:2px; border-top-width:3px; border-bottom-width:4px; border-left-color:#f00; border-right-color:#0f0; border-top-color:#00f; border-bottom-color:#ff0;
en :
Code:

1 2 3 border-style:solid solid solid solid; border-width:3px 2px 4px 1px; border-color:#00f #0f0 #ff0 #f00;
ou en :
Code:

1 2 3 4 border-left:1px solid #f00; border-right:2px solid #0f0; border-top:3px solid #00f; border-bottom:4px solid #ff0;
Mais peut-on simplifier ce code de manière à n'obtenir qu'une seule ligne ?

Je sais qu'il n'y a aucun intérêt, le code serait à peine moins long et plus chiant à relire, c'est juste par pure curiosité.

Merci.

Edit :

Eh "saperlipopopette" .. J'avais les deux forums HTML/CSS et Javascript ouverts et j'ai posté dans le mauvais .. X_x
Si un modérateur passe par là, peut-il me le déplacer ? Merci.

30/10/2006, 09h43
Joe-La-Boule

Pourquoi veut tu simplifier alors qu'avec des commentaires ca te fait un code tout propre et tout joli ;) !
Je ne pense pas qu'on peut nounours :( desolé ;)
30/10/2006, 09h46
Bisûnûrs

@antony59370 : Des commentaires ?

Hein ?

Pourquoi tu me parles de commentaires ?

Et la simplification permet d'avoir un code de 10 lignes au lieu d'un code de 50 lignes.
30/10/2006, 09h48
Joe-La-Boule

Ba tu peut commenter pour savoir a premiere vue ce que les lignes de code suivante vont être mais a mon avis on ne peut vraiment pas faire ce que tu voulais....
30/10/2006, 09h51
denisC
Citation:
Envoyé par BisounoursJos

Code:

1 2 3 border-style:solid solid solid solid; border-width:3px 2px 4px 1px; border-color:#00f #0f0 #ff0 #f00;

ou en :

Code:

1 2 3 4 border-left:1px solid #f00; border-right:2px solid #0f0; border-top:3px solid #00f; border-bottom:4px solid #ff0;

Mais peut-on simplifier ce code de manière à n'obtenir qu'une seule ligne ?
Tu as essayé:
Code:

1 2 border:3px 2px 4px 1px solid #00f #0f0 #ff0 #f00;
Je sais pas si le parseur est capable de comprendre ça (surtout sous IE6 ).

Après tests, en fait, il ne peut pas (en tout cas FFx 1.5).

Et dans la spécifif CSS:

Citation:

Envoyé par W3C

The 'border' property is a shorthand property for setting the same width, color, and style for all four borders of a box. Unlike the shorthand 'margin' and 'padding' properties, the 'border' property cannot set different values on the four borders. To do so, one or more of the other border properties must be used.

http://www.w3.org/TR/CSS21/box.html#...and-properties

Donc même le W3C ne peux pas faire ce que tu veux, donc je pense que tu peux abandonner :)

Par contre, ton post est bon pour aller dans la FAQ CSS :)
30/10/2006, 09h59
Bisûnûrs

@denisC : Oui, j'avais essayé de cette manière et même de la manière suivante :

Code:

border:3px solid #00f 2px solid #0f0 4px solid #ff0 1px solid #f00;

Mais si le W3C dit qu'on ne peut pas ..

Merci beaucoup pour ta réponse, je mets ce topic comme résolu. :)