Forum

Réagissez dans les forums de JDN Développeurs

L'utilisation de CSS est des plus faciles et logiques, mais certains caractères peuvent être utilisés pour préciser une sélection, et certaines règles peuvent être raccourcies. Elles permettent aux développeurs d'être plus efficaces, mais dans un Web où l'apprentissage par la lecture de la source fait encore foi, nombreux sont ceux qui peuvent être perdus par de tels usages.

Voici donc quelques-unes de ces optimisations de CSS, par l'exemple :

p>i { règles }

C'est un précision de sélection : les règles ici s'appliquent à tous les éléments <i> se trouvant à l'intérieur d'un élément <p>. Dans le cas d'une sélection html>p, les règles s'appliquent à tous les éléments <p> du document...

p+h1 { règles }

Précision de sélection : les règles s'appliquent à tout élément <h1> précédé immédiatement d'un élément <p>.

p { font: bold 11px/1.5 Verdana, sans-serif; }

C'est un raccourci : la règle ci-dessus est une version écourtée des règles suivantes :
font-weight: bold;
font-size: 11px;
line-height: 1.5;
font-family: Verdana, sans-serif;

.contenu { color: #653; }

Un raccourci pour les couleurs web-safe : cette règle correspond à la règle
color: #665533;

#titre { margin: 2px 0; padding: 2px; }

Les règles margin et padding sont normalement de cette forme
margin: 2px 3px 0 5px
padding: 0 0 0 3px
Les règles ci-dessus sont des versions raccourcies de
margin: 2px 0 2px 0;
padding: 2px 2px 2px 2px;



Les meilleures astuces CSS sur le JDN :
- Comment appliquer les CSS d'une page web au contenu d'une iframe ?
- Comment centrer horizontalement une DIV dans une autre en CSS ?
- Comment créer un arrière-plan (backgroud) CSS extensible et adaptable ?
- Comment définir les cellpadding et cellspacing en CSS ?
- Comment modifier l'image d'un bouton input en CSS ?
- Comment rendre l'arrière-plan d'un élément semi-transparent en conservant le texte de cet élément opaque en CSS ?
- Internet Explorer supporte-t-il l'attribut CSS border-radius