Dépoussiérer ses vieux sélecteurs CSS !

Dépoussiérer ses vieux sélecteurs CSS !

11 Aoû

Auteur : Matthieu Gadrat, Catégories : Web Site Development

Le constat est bien là : tous ceux qui intègrent régulièrement des pages web en utilisant des feuilles de style (CSS) passent leur temps à faire des compromis !

Icône validation css

Avec le temps, nous - développeurs - avons appris à connaître les défauts des principaux navigateurs (Internet Explorer, Firefox, Opera, Chrome, Safari, etc.). Ces défauts nous ont poussés à mettre de coté, petit à petit et par dépit, plusieurs sélecteurs qui font pourtant partie de la norme CSS 2.1.

La plus grosse épine dans le pied des intégrateurs a toujours été Internet Explorer 6. À cause de ce navigateur (ancestrale par rapport à ces concurrents), plusieurs d’entre-nous avons été réduits à n’utiliser que les sélecteurs de base : balise, classe, index par soucis de compatibilité et de bon rendu.

Depuis le début de l’année 2010, plusieurs corporations influentes (Google, Facebook, etc.) ont décidé de ne plus chercher ce genre de compromis pour un seul navigateur. La tendence est donc à ignorer ce navigateur et de pousser les utilisateurs à en changer.

Sorti en 2001 et représentant environ 10% des navigateurs utilisés au niveau mondial, celui-ci est quasiment obsolète pour le Web 2.0 et la très grande majorité des nouvelles techniques de développement. Comme celui-ci oblige à de nombreux ajustements (et limitations) techniques, de plus en plus d'entreprises web facturent un supplément pour que ce navigateur soit pris en charge.

Je crois qu’il est temps de mettre à  profit ce virage vers des navigateurs plus moderne pour nous permettre (enfin) de ressortir nos vieux sélecteurs CSS oubliés et pourtant si... géniaux !

Faire cet effort de dépoussiérer nos vieux sélecteurs permet souvent d’alléger la structure de nos pages XHTML sans pour autant en perdre le contrôle sur la mise en page. Enfin, nous pouvons nous débarrasser de nombreux "DIV" destinés à contourner les limitations de IE6, et faire place à un code propre, épuré et SÉMANTIQUE.

Voici une liste de ces sélecteurs oubliés qui pourront désormais reprendre leurs place dans notre quotidien.

  • p>a : Le > désigne un enfant DIRECT de l’élément qui se trouve à sa gauche. Ce sélecteur est très utile pour cibler un niveau précis dans une liste imbriqué de <ul><li>. 

Le code ci-dessous ne cible que les liens du deuxième niveau du menu (ceux des sous-sections). Plus besoins d’une classe ajoutée dans le menu qui ne fera qu’alourdir le XHTML.

Exemple HTML :
<ul>
 <li>
<a>Section</a>
<ul>
<li><a> Sous section<a></li>
<li><a> Sous section <a></li>
<li><a> Sous section <a></li>
</ul>
 </li> 
<li>
<a>Section</a>
<ul>
<li><a>Sous section<a></li>
<li><a> Sous section <a></li>
<li><a> Sous section <a></li>
</ul>
 </li>
</ul>

Exemple CSS : 
ul>li>ul>li>a{
color:#fff;
}

  • p + blockquote : Un <blockquote> précédé d’un <p>. Très utile pour cible le premier paragraphe d’un article, si il est précéder d’un titre par exemple.
Le code ci-dessous permet de n'avoir en texte gras que le paragraphe 1.

Exemple HTML :
<h2>Titre</h2>
<p>Paragraphe 1<p>
<p>Paragraphe 2<p>

Exemple CSS : 
h2 + p{
Font-weight :bold
}

  • input[type=’text’] : Dans les [], il est possible désigner un attribut et sa valeur. Dans ce cas-ci : Un champ de type texte. Pratique pour cible un type de champs en particulier dans un formulaire.

Ci-dessous, la couleur du texte du champs password sera rouge dans cet exemple.

Exemple HTML :
<form action=’login.php’>
<label for=’email’>Email: </label><input type=’text’ name=’email’ id=’email’/>
<label for=’pass’>Mot de passe: </label><input type=’password’ name=’pass’ id=’pass’/>
<input type=’submit’ value=’envoyer’>
</form>

Exemple CSS : 
input[type=’password’]{
color:#f00;
}

  • a:first-child : Cette pseudo-classe permet de cibler la première occurrence de cet élément dans son niveau du DOM. Pratique pour appliquer un style différent au premier élément d’une liste par exemple. 
Ci-dessous, une petite ligne sépare tous les éléments de ce menu sans avoir à ajouter une classe au premier élément !

Exemple HTML :

<ul>
<li><a> section<a></li>
<li><a> section <a></li>
<li><a> section <a></li>
</ul>

Exemple CSS : 
ul li{
display:inline;
padding : 0 5px;
border-left:1px solid #00f;
}
ul li:first-child{
border-left:none
}

  • p :first-letter : La première lettre de l’élément (oui oui, cela veut dire pouvoir faire des lettrines avec du texte dynamique !).
Ci-dessous, une magnifique lettrine au début de chaque paragraphe.

Exemple CSS : 

p:first-letter{
Font-size:60px;
Display:block;
Float:left;
Color :#fff;
background-color:#000;
}

Outre ces sélecteurs, voici pour rappel, quelques propriétés supportées par les successeurs de IE6 :

  • border-color:transparent : Mettre une bordure sans couleur ni forme à un élément.
  • margin:pourcentage : Ajuster la marge avec une valeure en pourcentage.
  • max-height / min-height : Appliquer une hauteur minimal ou maximal à un élément.
  • max-width : Appliquer une largeur minimal ou maximal à un élément.

Enfin, voici plusieurs liens pour vous remettre à jour sur l'ensemble des sélecteurs CSS !

Tags : chrome, css, développement, firefox, html

Ajouter un commentaire