page-translate

HTML 5 et CSS 3 versus les navigateurs : premier round !

CSS3 / HTML5

Important: Nous venons de migrer d'un site Wordpress vers Drupal alors il se peut qu'il y ait des liens brisés, des images qui ne s'affichent pas ou encore du code mal formatté. Nous travaillons fort pour régler ces problèmes le plus tôt possible.

Depuis un certain temps on entend souvent parler du HTML 5 et CSS 3 et de plus en plus d’agences Web se tournent vers ces technologies pour leur simplicité et leur accessibilité.

Cependant, pour certains, les nouvelles notions apportées avec HTML 5 et CSS 3 restent assez floues : quelles sont les changements par rapport aux anciennes versions ? Est-ce compatible avec tous les navigateurs actuels ? Ou encore avec d’anciennes versions de navigateurs (oui c’est à toi que je m’adresse Internet Explorer ! ) ? Et d’autres questions existentielles auxquelles nous essayerons de répondre … !

Ok c’est bien tout ça mais c’est quoi HTML 5 et CSS 3 ?

Logiquement, le HTML 5 est simplement le succésseur du HTML 4 mais progressivement il prendra la place du XHTML. Développé fin 2003, il n'a vu réellement le jour qu’en 2009 où une version ‘working draft’ a été rendue publique. Le but du HTML 5 est de "faire parler" davantage le code HTML grâce à ses nouvelles balises, et de rendre des fonctionnalités courantes plus accessibles en les intégrant au niveau du fureteur. Par exemple, il permet de gérer plus facilement différents type de médias, et ajoute aussi la possibilité de créer des dessins vectoriels ou même de stocker des donnéesn en local.

Pour ce qui est du CSS 3, il s’agit simplement de la dernière version de CSS, prenant ainsi le relais sur le CSS 2. Le CSS 3 ajoute principalement de nouvelles propriétés permettant, par exemple, de créer des coins arrondis, de gérer la transparence ou encore les ombres portées et bien d’autres. Ces nouvelles propriétés permettent de reproduire des effets visuels de plus en plus complexes, minimisant ainsi l'utilisant d'images.

Compatibilité des navigateurs

Comme toujours la question qui vient en tête est de savoir quels navigateurs acceptent le HTML 5 et le CSS 3.

Dans le cas du HTML 5 cela dépend des éléments et attributs. Chaque navigateur ne gére que certains d’entre eux... ce qui complique les choses pour adapter le code à tous les navigateurs. Le mieux étant de n’utiliser que les éléments ou attributs compatibles avec un maximum de navigateurs, ou encore de faire une version plus "simple" pour les navigateurs moins modernes.

Plutôt que de vous décrire quels navigateurs supportent HTML5, je vous invite à consulter la page Wiki à ce sujet. On remarquera que les moteurs de navigateurs supportant le mieux HTML 5 sont Webkit, Gecko et Presto (moteurs utilisés respectivement par Google Chrome, Firefox et Opera). On notera aussi la faible représentation de Trident, moteur utilisé par Internet Explorer... Eh oui toujours le même vilain petit canard !

Comme pour HTML 5, CSS 3 n’est pas entièrement compatible avec tous les navigateurs. Le plus simple est encore de se rendre sur la page Wiki pour connaître les propriétés de CSS 3 que vous pouvez utiliser sans soucis. On notera une fois de plus la faible représentation d’Internet Explorer qui ne gère la plupart des propriétés de CSS 3 qu’à partir de la version 9.0.

Pour conclure, on peut dire qu’Internet Explorer risque de poser soucis dans le cas où l’on souhaite faire appel à HTML 5 et CSS 3, mais il existe déjà des solutions pour remédier au problème en utilisant des bibliothéques Javascript, comme html5.js pour HTML 5 ou encore Selectivizr qui offre un début de solution pour le CSS 3.

Dans un prochain article nous développerons plus sur ces solutions.

Commentaires

Il faut aussi mentionné qu'avec le HTML5 on a maintenant beaucoup plus de balise sémantique qui va rajouter du sens au balisage HTML. Voici quelques nouvelles balises maintenant disponible: - header - nav - footer - article - aside Ce qui va permettre d'enlever une foule de classe CSS et de les remplacer directement par la balise sémantique approprié. Et il y a aussi toute les nouveauté pour les formulaire pour la validation des champs, et tout les nouveaux les type de champ (date, nombre, url, courriel, ...)

Ajouter un commentaire

CAPTCHA
Êtes-vous un robot ?
Image CAPTCHA
Écrivez le code apparaissant dans l'image.

Derniers articles