Si vous vous êtes perdus dès le deuxième mot, n’hésitez pas à visiter le bref glossaire en bas de l’article.

Pourquoi tous les développeurs fantasment sur le CSS3?

Avant le CSS3, c’est-à-dire encore aujourd’hui, les développeurs étaient contraints à une foultitude d’acrobaties pour obtenir le résultat escompté. La principale embûche répond au doux nom de «compatibilité crossbrowser». Sur l’ensemble des navigateurs utilisés dans le monde, l’hégémonie d’Internet Explorer est incontestable.

Or, avant sa version 8, le navigateur de Microsoft présente des fonctionnalités très critiquables: il ne comprend pas le langage standardisé sur lequel s’entend la grande majorité des autres navigateurs.

Ces standards, consultables sur le site du W3C (World Wide Web Consortium) sont indispensables, car ils permettent une harmonisation du langage tant dans la sémantique de l’écriture que dans le formatage des documents ou encore le choix des processus à employer pour telle ou telle fonction.

Tant que tous les développeurs et tous les navigateurs ne parleront pas la même langue, on ne pourra pas prétendre à une réelle transversalité du développement et ainsi garantir un affichage identique sur toutes les machines. En attendant, les développeurs s’échinent à trouver des aménagements pour répondre aux disparités de chaque navigateur.

CSS3, le flash killer

Mais notre ami développeur ne s’arrête pas là. Lorsqu’un graphiste lui envoie la maquette d’un site Internet, la plupart du temps il lui faut la tronçonner pour isoler chaque élément qu’il intégrera ensuite avec une ligne de code. L’image ci-dessous est celle utilisée sur apple.com pour afficher les différents états de sa barre de navigation. La première ligne est l’état normal, la deuxième est l’état quand la souris survole chaque onglet, la troisième quant on clique sur un onglet, et la quatrième quand on est sur la page demandée. Testez-vous même!

Avec la nouvelle version du CSS, il est possible de spécifier directement en code les dégradés, les ombres, les reflets et les arrondis: on n’aura donc plus à charger d’images, ce qui allègera considérablement la taille des sites et leur temps de chargement.

D’autre part, vous avez surement remarqué que fleurissent depuis plusieurs mois les petites animations qui améliorent l’expérience utilisateur d’un site.

Il y a quatre ans, on aurait très certainement utilisé du flash. Au détriment de tous les utilisateurs dont l’ordinateur est démodé, la connexion Internet mauvaise, ou le logiciel obsolète. Aujourd’hui, c’est réalisé en javascript, grâce à des librairies toute prêtes qui comportent la plupart des fonctions de base et qu’il suffit d’activer avec une ligne de code.

Mais là encore, tous les navigateurs ne réagissent pas de la même manière, et le temps de chargement est alourdit. Alors rêvons, parce que, demain, toutes les animations seront réalisables en CSS directement, sans passer par une application tierce. C’est techniquement déjà possible, mais on ne peut pas s’en contenter parce que trop peu de gens y auraient accès. En Chine, plus de 80% des internautes utilisent encore un navigateur incompatible. Affaire à suivre.

HTML5, du sens et la simplicité

Pour pousser la découverte du HTML5, les plus courageux se plongeront dans la lecture de ce très clair article de Lachlan Hunt, rédacteur chez A List Apart. Traduit de l’anglais pas Sylvain Jorge Do Mardo.

Glossaire

CSS : Le CSS est un langage de codage informatique utilisé dans la construction de sites internet. Il permet de spécifier simplement l’apparence et la disposition des différents éléments qui constituent le site, couleur, typographie, taille des textes et sections… Toutes ces informations sont enregistrées dans un fichier nommé généralement style.css.

ex :

Pour définir comme blanc la couleur de fond de la section appelée “article”.

#article{ background : white; }

HTML : Le HTML est un langage de codage informatique utilisé dans la construction de sites internet. Il permet de construire et hiérarchiser la structure d’une page de site internet grâce à l’emploi de “balises”, et il définit le contenu à afficher.

ex :

Pour afficher un gros titre suivi d’un paragraphe de texte.

<h1>Gros Titre</h1>

<p>Paragraphe de Texte</p>

ex :#article{ background : white; }ex :<h1>Gros Titre</h1><p>Paragraphe de Texte</p>