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.