david

css astuces

Dans cet article, je vous livre quelques astuces personnelles en CSS.

1 – le sélecteur globale

Pour éviter de reécrire des propriétés sur un bon nombre de sélecteur, j’utilise le sélecteur globale »  * »  et ajoute des propriétés communes à l’ensemble des balises :

*{margin:0; padding:0;}


2 – les listes

J’utilise rarement les puces de listes, alors pour les supprimer, j’utilise ceci :

ol,ul{list-style:none;}


3 – outline et border

Les navigateurs actuels ont tendance à ajouter des styles à la navigation, particulièrement au click et au focus, je suis persuadé que ce n’est pas au navigateur de modifier la visibilité des éléments mais bel et bien à nous, webdesigner, intégrateur.

Firefox ajouter des outlines au click, un peu inesthétique lors d’une balise éloignée du bord gauche du navigateur …

Opéra, Safari et Chrome ajoutent des bordures sur les inputs de type text et textarea, çà casse un design lorsque les couleurs ne correspondent pas …

alors pour résoudre cette problématique, j’utilise ceci :

a, a:focus, a:link, a:visited, a:active, input,  input:focus, input:active{outline:none;text-decoration:none;}


4 – img, input et textarea

Quelle est le point commun entre les balises « img» , « input»  et « textarea»  ?

C’est que par défaut, elles possèdent des bordures.

La balise « img»  n’en possèdent que lorsqu’elle est précédée d’une balise « a» .

J’ai souvent un style défini pour ces balises et donc pour contrer cela, j’utilise :

a img, input, textarea{border:none;}


5 – sélection de texte

Cette astuce ne fonctionne que sous firefox et safari, mais elle permets de modifier la couleur d’une sélection de texte :

::selection, ::-moz-selection{background: #F9FFD1; color:#C42937;}


6 – clear

Le positionnement par floating pose des problèmes aux balises suivantes qui peuvent se positionner suivant le floating précédent, alors pour résoudre ce problème, j’ajoute une balise du genre « div class=» clear»  »  ou « hr»  directement après la dernière balise de mon floating et dans mon css j’ajoute ceci :

.clear, hr{clear:both;height:1px;display:block;width:100%;}


7 – conclusion

J’ajoute à chaque site un css avec l’ensemble de ces astuces, une sorte de framework css de base, ce qui donne :

*{margin:0; padding:0;}

.clear, hr{clear:both;height:1px;display:block;width:100%;}