Alors que IE8 beta 2 est sorti depuis environ deux mois et que la version finale est prévue pour la fin de cette année, on se surprend à rêver de nouveau à l’idée de pouvoir enfin utiliser l’ensemble (ou presque) de CSS 2.1 et commencer à expérimenter  CSS3. Dernier obstacle sur notre route : la survie d’Internet Explorer 6.0. On se demande comment un navigateur sorti en 2001 peut encore représenter une part d’environ 20% sur l’ensemble des navigateurs du marché.
(Source : http://www.w3schools.com/browsers/browsers_stats.asp)

Ok vous vous accrochez à votre vieille deudeuche avec ces sièges en toile tendue, ses vitres à rabat manuel, son toit qui ne supporte pas les intempéries, etc.. mais, vous sentez vous en sécurité ? N’avez-vous pas envie d’arriver plus vite à bon port et surtout avec plus de confort ?

Bon j’arrête là l’analogie, parce que contrairement à votre vieille voiture, on vous échange votre vieille version d’internet explorer contre la toute dernière version de n’importe quel navigateur, au choix : Firefox, Opéra, Safari, Chrome ou même Internet Explorer : les arguments sont plutôt convaincant, jugez plutôt :

• Sécurité accrue,
• vitesse d’affichage plus rapide,
• meilleure prise en compte des standards du web,
• navigation par onglets,
• modules complémentaires,
• personnalisation,
• blocage des fenêtres popup,
• etc. La liste est longue.

Vous pouvez également rejoindre la « IE6 Death March » où des sites aussi célèbres que Facebook ont carrément laissé tomber le suivi d’IE6. Bon sans aller jusque là on peut peut-être accompagner ce vieux monsieur vers une fin progressive en offrant une version dégradée mais fonctionnelle de son site pour IE6.

Et là c’est une nouvelle façon de coder qui s’ouvre à nous, voyons ce que nous allons pouvoir faire, limite ça donne le tournis :

1. Utiliser enfin toutes les possibilités de CSS 2, comme : 

   – le sélecteur d’enfant direct (>)

   Ce fameux sélecteur, qui était utilisé comme hack IE6 pourra enfin être utilisé dans sa fonctionnalité première, c’est à dire que si nous avons par exemple le code : div > p {color:red} les paragraphes qui sont des enfants directs du conteneur div seront en rouge alors que les autres resteront dans leur couleur par défaut.

   – le sélecteur d’élément adjacent direct (+)

   Dans h1 + p{font-style:italic} chaque paragraphe précédé d’un titre de niveau 1 est en italique, les autres paragraphe conservent le style par défaut ou le style défini dans la css.

   – le sélecteur d’attributs [attr]

   C’est de loin un des sélecteurs les plus intéressants puisqu’on peut styler les balises en fonction de leurs attributs.

   Exemple avec les liens :
   a[rel=external]{padding-right:15px;background:url(http://fr.wikipedia.org/skins-1.5/monobook/external.png) 100% 50% no-repeat;}
   Les liens s’ouvrant dans une nouvelle fenêtre auront un style particulier : un petite icône sur leur droite
   Les formulaires :
   input[type="text"]{border:1px solid #666;}
   Les input de type texte auront une bordure grise.
   Je vous laisse trouver toutes les applications que vous pourrez faire avec ce procédé…

   – les classes multiples

   Ok vous pourrez me dire que vous les utilisez déjà et qu’il y a un moyen de détourner les limitations d’IE6. Il n’empêche que sans IE6, vous seriez plus à l’aise pour organiser vos styles.
   Je vous invite à relire le billet de Pierre du25/01/2008 à ce sujet pour vous en convaincre

   – les pseudos-selecteurs :before, :after, :focus et :first-child,

   :before et :after pour générer du contenu en css et pouvoir gérer des éléments flottants sans ajouter de code html, :focus permettra de rendre les formulaires plus conviviaux sans avoir à recourir à du JS et :first-child pour éviter de mettre des classes first un peu partout sur les premiers éléments d’une navigation par exemple.

   – le pseudo sélecteur :hover sur d’autres éléments que le lien

   Pas indispensable mais quand même pratique pour certains menus déroulants. Fini l’utilisation du JS.

   –  min/max width/height,

   Fixer une hauteur/largeur minimale/maximale serait bien pratique non ? Sans avoir recours à des hacks.

2. Commencer à utiliser CSS3

   – le sélecteur d’élément adjacent indirect (~)

   Dans h1 ~ p{font-weight:bold} tous les paragraphes précédés d’un titre de niveau 1 sont en gras contrairement au sélecteur d’élément adjacent direct où uniquement le premier paragraphe est affecté par le style défini.

   – le sélecteur avancé d’attribut [ attr*]

   Même chose que le sélecteur d’attribut mais sur des portions des valeurs définies dans les attributs.

   La question philosophique qui se pose dans l’effervescence, voire l’urgence actuelle des intégrateurs et développeurs à vouloir se débarrasser d’Internet Explorer 6 est : devons-nous faire en sorte que, pour qu’il soit accessible, le web soit consultable par tous les navigateurs encore en activité sur les postes des internautes ou amener progressivement les retardataires à s’équiper des dernières versions et dans ce cas, faut-il intrusivement suggérer à l’utilisateur comme le fait le script de « Save the developpers » de changer son moyen de naviguer sur la toile ?