Discussion :

[Bisûnûrs]

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 CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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

donne :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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 CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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

ou en :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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

ou encore en :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

border:1px solid #f00;

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

On peut simplifier :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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 CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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

ou en :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[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é

[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.

[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....

[denisC]

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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

ou en :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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:

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

[Bisûnûrs]

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

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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.