Tag Archives: w3c

CSS3 Please! Votre allié lors de vos développements CSS3

29 Sep
CSS3 Please! Screenshot

The test sandbox.

Le CSS3 fait aussi partie du « HTML5« , son but est de diminuer au maximum le nombre de « hacks » et astuces basées sur l’ajout de markup non-sémantique dans des pages HTML.

Pour faire simple, grâce au CSS3, vous allez maintenant pouvoir faire des bords arrondis, des dégradés, des transitions, des ombrages, etc… sans utiliser d’image ni de javascript.

Le gain est double : le chargement de vos pages web s’en trouve accéléré et le rendu de vos pages par le navigateur sera plus rapide sans l’utilisation de javascript additionnel.

Malheureusement, certains navigateurs ne supportent pas du tout certaines propriétés CSS3 alors que d’autres ne les supportent que via des propriétés CSS spécifiques.

Le service CSS3 Please! a pour but de vous aider à simplifier votre recherche de balises compatibles entre tous les navigateurs en les regroupant via un système de « WYSIWYG » vous permettant de tester en direct le rendu des propriétés en question sur une boîte de test.

Son utilisation est très simple, vous entrez les dimensions et les couleurs de votre choix à un autre, et CSS3 Please! les met à jour dans toutes les propriétés ! Il ne vous reste plus qu’à faire un copier-coller du code vers votre feuille de style CSS et le tour est joué !

Pour chaque règle CSS, la compatibilité avec le navigateur est affichée en commentaire, à droite. Ainsi, vous pourrez vérifier directement avec les navigateurs concernés si le rendu est correct.

Le grand avantage de CSS3 Please! est d’être mis à jour régulièrement, permettant le support des derniers navigateurs sortis.

Après HTML5 Boilerplate, cet outil se doit de figurer dans vos favoris ! Vous n’aurez plus d’excuse pour ne pas utiliser du CSS3 dans vos créations graphiques maitnenant !

Wikeo a décidé de mettre à jour son interface et de faire appel au CSS3 en grande quantité !

Valider son site ou son blog HTML5

15 Juil

Ca y est, vous avez suivi mon tutorial sur html5 boilerplate, vous êtes maintenant prêt à lancer votre site !

Pas si vite ! N’oubliez pas de le valider au W3C ! Cette validation vous permettra d’être sûr d’avoir un code correct et bien compréhensible par les moteurs de recherche.

Il n’y a qu’une adresse à retenir pour accéder au validateur du W3C : http://validator.w3.org/

Votre site est valide ? Alors bravo ! Vous l’avez bien mérité :

Logo Html5 valid

Ne vous reposez pas sur vos lauriers ! Il vous faut maintenant référencer votre site et commencer à vous renseigner sur les micro-données 😉

Html5 boilerplate : La boîte à outil du bon intégrateur

29 Juin

Pour bien se lancer dans le HTML5, il est important de disposer des bons outils dès le départ !

Html5 boilerplate logoHtml5 boilerplate fait partie de ces bijoux qu’on est bien content d’avoir dans ses favoris.

Ce projet met à votre disposition une architecture de base (Html5, CSS, htaccess, outils de compilation, etc…) vous permettant de disposer très vite d’un site valide, et regroupant toute une série de best practices connues sur le web.

Trois versions sont disponibles :

  • Stripped – Version sans commentaire ni aide
  • Documented – Version commentée avec des astuces
  • Custom – Version personnalisée en fonction de vos besoins (type de serveur, librairie javascript à utiliser, etc…)

Je vous conseille dans un premier temps la version Documented qui vous permettra de vous faire la main dessus, de l’adapter à vos besoins et d’enlever le superflu.

Tour du propriétaire

Une fois l’archive téléchargée et décompressée, vous pouvez commencer.

Le fichier index.html contient une structure de base pour votre code, il vous reste à placer votre markup, en oubliant pas la sémantique des nouvelles balises introduites en Html5 !

Un fichier CSS se charge d’appliquer des styles identiques sur chaque navigateur sans affecter le comportement des autres balises (à l’inverse d’un CSS reset).

Un fichier .htaccess est présent pour vous servir de base de réflexion, et savoir comment optimiser chaque requête effectuée sur le serveur.

Plusieurs astuces se trouvent dans le fichier html, le css et dans le .htaccess, ces astuces permettent de combler des manquements de certaines navigateurs et assurent une compatibilité maximale avec ceux-ci.

Un build script est fourni, il permet de compresser automatiquement les images, css et html. Je n’ai malheureusement pas encore eu l’occasion de tester ce script mais je le ferai dès que possible et rédigerai un article à ce sujet tellement il est intéressant pour accélérer l’affichage de votre site !

Une fois votre template html terminé, n’oubliez pas de le valider au W3C !

Conclusion

Html5 boilerplate est la référence si vous voulez débuter un site en Html5 dès maintenant sans vous heurter à différents problèmes de compatibilité.

La base des utilisateurs grandit de jour en jour et les mainteneur du dépôt Github sont très actifs et très ouverts, le projet évolue donc dans le bon sens.

En revanche, l’entièreté des scripts n’est pas facile à appréhender pour un débutant voire même un utilisateur confirmé. Le build script est très puissant mais encore trop jeune et pas toujours facile à adapter à un projet déjà existant…