Contraction et simplification CSS [RÉSOLU]

Bonjour
Je ne me rappelle plus du nom de la méthode qui vise à simplifier le CSS.
Par exemple, au lieu de marquer background-image, puis à la ligne background-repeat, on peut tout mettre sur une seule ligne.
Est-ce qu'il existe un tutoriel pour cela ?
Modifié par Sam Soul (18 Sep 2009 - 17:48)

Bonjour,

Sur Google, en recherchant CSS shortcut, je suis tombé sur cet article.

Super merci !
Si quelqu'un a d'autres astuces, je prends !
Par contre j'aimerai bien savoir si c'est supporté par tous les navigateurs.

Rajout :
J'aurai une autre question.
On attribut un même style à plusieurs class en les séparant par une virgule.
Question : peut faire la même chose avec class et id mélangé ?
Exemple :

.class-a, #id-a
{
color:red;
}

J'ai essayé ça marche mais est-ce conseillé où cela peut poser problème ?

Rajout :
J'ai une autre question, peut-on avoir dans un même CSS plusieurs fois un id ou une class ?
exemple :

.class-a, .class-b
{
color:grey;
}

et plus bas :

.class-b
{
font-weight:bold;
}

Modifié par Sam Soul (17 Sep 2009 - 18:50)

Sam Soul a écrit :
Super merci !
Si quelqu'un a d'autres astuces, je prends !
Par contre j'aimerai bien savoir si c'est supporté par tous les navigateurs.

Rajout :
J'aurai une autre question.
On attribut un même style à plusieurs class en les séparant par une virgule.
Question : peut faire la même chose avec class et id mélangé ?
Exemple :
.class-a, #id-a
{
color:red;
}
J'ai essayé ça marche mais est-ce conseillé où cela peut poser problème ?

Aucune contre-indication dans les deux cas

Si ça te chante tu peux écrire :

element, .class a:hover, tr#id.class2 input[type="checkbox"] { propriete: valeur; }

EDIT pour le rajout n°2 :
oui aussi, même dans des feuilles de style différentes. Dans ce cas, le navigateur lit les feuilles de style dans l'ordre de chargement et du début à la fin, c'est la dernière instruction lue qui compte, en tenant compte du poids des sélecteurs ("#id element" est prioritaire par rapport à "#id")
Modifié par Felipe (17 Sep 2009 - 18:58)

ok mais c'est quoi #id element ?

Bonjour,

"element" représente un élément HTML (donc p, div, Hn...)

#id element visera donc tout les éléments contenu dans un élément ayant l'id #id.

merci.
Par contre je rencontre quelques problème avec ces simplifications.
Exemple :
Avec ce code :

h4
{
height:20px;
text-decoration:underline;
text-indent:25px;
background:url("photos/boule-verte.jpg") no-repeat left;
margin-left:35px;
}

J'obtiens ceci :
http://img15.imageshack.us/img15/433/90316621.png

Et avec celui-ci qui est le même mais simplifié dans e margin

h4
{
height:20px;
text-decoration:underline;
text-indent:25px;
background:url("photos/boule-verte.jpg") no-repeat left;
margin:0 0 0 35px;
}

Là j'obtiens ceci :
http://img41.imageshack.us/img41/6545/78893929.png

Qu'est-ce donc cette étrangeté ?

C'est normal : margin-left:35px; ne spécifie que la marge gauche, donc les autres marges conservent leur valeurs par défaut.
Avec margin:0 0 0 35px; tu spécifies et donc tu appliques une valeur à chaque côté de ta boîte.

Voir le lien Rendu par défaut des éléments HTML, dans les différents navigateurs dans la rubrique Outils

Ah OK c'est compris, je pensais que la valeur par défaut pour le margin des h4 était 0.
Merci.