Webdesign Friday (#wdfr) - La communauté des webdesigners francophones

Les vendredis Webdesign !Chaque semaine, un nouvel article par un professionnel du Web.

HTML5 et CSS3 sont-ils utilisables à l’heure actuelle ?

HTML5 et CSS3 sont-ils utilisables à l’heure actuelle ?

La question avait déjà été traitée lors de la première saison du tweetup (2010-2011), mais celle-ci était souvent revenue pendant ces derniers mois. J’en profite aujourd’hui pour vous proposer un “petit guide HTML5/CSS3” afin de bien débuter vos intégrations, parce que oui, bien que les spécifications des deux langages ne soient pas totalement fixées, la plupart des navigateurs actuels interprètent parfaitement les nouvelles balises et règles introduites par HTML5 et CSS3.

Qu’est-ce qui change en HTML5 ?

Ce qu’il faut d’abord savoir, c’est que HTML5 est l’évolution de HTML4 (facile) mais aussi de XHTML, dont la version 2 a très vite été “ajoutée” à la définition de HTML5, ainsi les intégrateurs ayant pris l’habitude d’écrire leur markup à la sauce XHTML ne seront pas perdus : bien que le langage soit très permissif au niveau de la syntaxe (comme HTML4), il est tout à fait possible de faire du “XHTML5”.

Le doctype

HTML5 se veut plus simple. Jusqu’à HTML5 on devait choisir entre plusieurs doctypes (strict, transitional, frameset) pour HTML4 et XHTML. Avec HTML5, un doctype unique et très court :

<!doctype html>

plutôt qu’un doctype à rallonge :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Les nouvelles balises

HTML5 se voulant beaucoup plus structuré, de nouvelles balises sont apparues afin de hiérarchiser le contenu publié en lui donnant une valeur beaucoup plus sémantique.

En-tête et pied de page

La balise header permet, par exemple, de définir un contenu comme en-tête de page, d’article ou de section. footer, quand à elle permet de déclarer un pied de page, d’article ou de section (mentions légales, informations sur l’article, etc.).

Structurer l’information

La balise article, permet de signaler le contenu présent dans cette balise comme étant un article, ou plus généralement, le contenu principale de la page (utile lorsqu’on utilise le mode “Lecteur” de Safari et Safari Mobile, par exemple).

Un article peut être découpé en plusieurs sections, pouvant elles-mêmes contenir un header, un footer et un article.
Enfin, la balise aside, permet d’ajouter des informations complémentaires à un article afin d’agrémenter le contenu de celui-ci.

Naviguer à travers les pages

Jusqu’à l’arrivée de HTML5, nos menus de navigation étaient, la plupart du temps, construits grâce à une liste d’éléments non ordonnés :

<ul id=”nav”>
    <li><a href=”accueil.html”>Accueil</a></li>
    <li><a href=”lorem.html”>Lorem</a></li>
    <li><a href=”ipsum.html”>Ipsum</a></li>
    <li><a href=”dolor.html”>Dolor</a></li>
</ul>

Avec HTML5, on peut soit remplacer totalement cette liste par des simples ancres inclues dans l’élément nav :

<nav>
    <a href=”accueil.html”>Accueil</a>
    <a href=”lorem.html”>Lorem</a>
    <a href=”ipsum.html”>Ipsum</a>
    <a href=”dolor.html”>Dolor</a>
 </nav>

Ou bien, garder cette notion de liste et l’encapsuler dans nav :

<nav>
    <ul>
        <li><a href=”accueil.html”>Accueil</a></li>
        <li><a href=”lorem.html”>Lorem</a></li>
        <li><a href=”ipsum.html”>Ipsum</a></li>
        <li><a href=”dolor.html”>Dolor</a></li>
    </ul>
</nav>

D’autres balises, en vrac

HTML5 introduit entre autre les balises suivantes :

  • canvas, qui permet par exemple de définir une zone dans laquelle on pourra dessiner,
  • figure et figcaption, utiles pour légender une photographie,
  • audio et video, permettant de proposer des contenus multimédia adaptés selon le navigateur Web utilisé,
  • summary et details, permettant par exemple de proposer des informations résumées ou développées
  • datalist, permet de suggérer des valeurs possibles à un input ou un select

HTML5 : structure de base d’un document

Pour en finir avec HTML5, voici un exemple très simple de document HTML5.

<!doctype html>
<html lang=”fr”>
    <head>
        <title>Ma première page HTML5</title>
        <meta charset=”utf-8” />
    </head>
    <body>
        <div id=”container”>
            <header>
                <h1>Webdesign Friday</h1>
                <p>La communauté des Webdesigners francophones</p>
                <nav>
                    <ul>
                        <li><a href=”#”>Accueil</a></li>
                        <li><a href=”#”>Lorem</a></li>
                        <li><a href=”#”>Ipsum</a></li>
                        <li><a href=”#”>Dolor</a></li>
                    </ul>
                </nav>
            </header>
            <article>
                <section>
                    <header>
                        <h1>Titre de la section</h1>
                    </header>
                    <p>Lorem ipsum dolor sit amet...</p>
                    <aside>Lorem ipsum dolor sit amet...</aside>
                </section>
                <section>
                    <header>
                        <h1>Titre de la section</h1>
                    </header>
                    <p>Lorem ipsum dolor sit amet...</p>
                    <p>Lorem ipsum dolor sit amet...</p>
                </section>
            </article>
            <footer>
                <small>copyrights et tout et tout...</small>
            </footer>
        </div>
    </body>
</html>

Peut-on utiliser CSS3 dès maintenant ?

CSS3 c’est avant tout CSS2 et en tant que tel, cette nouvelle spécification est déjà utilisable. Bien sûr, toutes les nouveautés apportées par CSS3 ne sont pas totalement supportées par les différents navigateurs. Comme le conseille Dan Cederholm dans CSS3 for Web Designers, s’il l’on souhaite utiliser les nouvelles propriétés CSS3 à l’heure actuelle, mieux vaut se concentrer sur :

  • les récompenses visuelles (ou dégradations gracieuses),
  • les différents états d’un élément (hover, focus, active),
  • les animations

Les préfixes vendeurs

Depuis ces derniers mois et grâce aux fréquentes mises à jours des navigateurs actuels, les préfixes vendeurs tendent à disparaître, mais il est tout de même préférable de les implémenter dans vos feuilles de styles, pour ne pas laisser de côté les navigateurs moins récents (Firefox 3 par exemple) qui savent interpréter ces nouvelles propriétés, si on les aide.
Pour rappel, les préfixes vendeurs sont les suivants :

  • -webkit- pour Chrome et Safari
  • -moz- pour Firefox,
  • -o- pour Opera,
  • -ms- pour Internet Explorer

Les nouvelles propriétés que tout le monde aime

L’adoption par les navigateurs Web actuels de la quasi-totalité des propriétés CSS3 exclusivement réservées à l’aspect graphique permet de réaliser de nombreux effets sans même lancer notre logiciel de graphisme préféré.
En effet, avec des propriétés comme border-radius, box-shadow, il est désormais possible de réaliser des bords arrondis et des ombres sans s’arracher les cheveux devant une pelletée de divs (inutiles) imbriqués les uns dans les autres dans le seul but de réaliser l’effet voulu.
Geoffrey Crofte a d’ailleurs écrit un très bon tutoriel sur la création d’ombres avancées en CSS3.
Les effets de dégradés, ne sont pas non plus en reste bien que ceux-ci ne soient pas encore compris par Internet Explorer 9. Il faudra malgré tout utiliser les préfixes vendeurs pour s’assurer une bonne compatibilité avec les différentes versions des différents navigateurs.

Et la compatibilité avec les différents navigateurs ?

À l’heure actuelle, le couple HTML5/CSS3 est plus ou moins bien supporté par tous les navigateurs Web récent : IE 8+, Firefox 4+, Chrome 11+, Safari 4+ et Opera 11+. Le grand vainqueur étant Chrome avec une compatibilité de 90% depuis sa version 15.0.
Pour combler les manques de certains navigateurs, comme Internet Explorer 6-8 pour ne pas le citer, des solutions Javascript existent comme le très célèbre Modernizr qui permet de combler leurs lacunes à la fois en CSS3 et en HTML5.

Quelques outils pour bien commencer

A propos de l'auteur : Ange Chierchia

Webdesigner et développeur front-end, je parle couramment HTML5 et CSS3 et partage ressources/astuces sur Twitter et mon blog. Mes centres d'intérêt du moment : la typo sur le Web, l'ergonomie des interfaces utilisateur.

  • http://twitter.com/loriskumo Loris Grillet

    Très bonne introduction.
    J’ai néanmoins un souci avec cette syntaxe (même si je l’utilise aussi):

    Accueil
    Lorem
    Ipsum
    Dolor

  • http://twitter.com/nighcrawl Ange Chierchia

    J’avoue que je suis moi aussi dans le même cas, cependant c’est ce que préconise le W3C. Après, ça peut peut-être changer ;) la balise hgroup a bien été supprimée de la spécification HTML5

  • http://www.arnaud-olivier.fr/blog Blog webmaster

    très bon article, je cherchais justement une référence pour débuter en html5 et les sources que tu cites sont de qualité !
    merci :)

  • Geoffrey

    Mince, j’ai loupé cet article à sa sortie :/
    Très bonne introduction à l’utilisation de ces technologies.
    Tu en dis juste ce qu’il faut pour donner envie de les utiliser.

    Pour ma part je suis déjà convaincu ;)

    Bonne continuation et merci pour la mention !

    PS : trois éléments ‘section’ dans un élément ‘article’ ? Je trouve ça un peu louche en terme de sémantique. M’enfin sans contenu réel c’est difficile de juger.

  • http://anggge.me Ange Chierchia

    Dans le cadre d’un article de blog par exemple, pour structurer tes idées, à mon sens plusieurs dans un je ne trouve pas ça louche au contraire, c’est beaucoup plus sémantique puisque tes idées sont bien séparées… Je crois.

  • http://twitter.com/geoffrey_crofte Geoffrey Crofte

    C’est une bonne remarque, mais j’ai un doute également.
    L’organisation de tes idées peut se faire grâce à l’utilisation des niveaux de titre, paragraphes et listes (entre autres), là où ‘section’ permet plutôt de structurer de manière plus large un document.

    Je pense que l’élément présenté par HTML5 Doctor peut nous éclairer : “a composition that forms an independent part of a document, page, application, or site. This could be a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, an interactive widget, or any other independent item of content”.
    http://html5doctor.com/the-section-element/

    Du coup je ne pense pas que ce soit très approprié ici car ‘section’ est un des éléments de sectionnement le plus générique (dans ceux qui possèdent encore un sens) et une partie de ton article ne peux pas réellement être détachable et indépendante. Enfin, je ne pense pas.

    Bonne continuation.

    PS : chez moi les chevrons des balises HTML ont sauté, je vois des “<” à la place…

  • http://twitter.com/blogdelicart Delicart

    Petit soucis dans les balises qui se sont transformés en < et >

    Merci pour cet article

Live Tweet

Dans le Blog

Newsletter

Vous souhaitez être tenu au courant des dernières nouvelles concernant le WDfriday, événements, conférences, barcamps, etc… ?

N'hésitez pas à vous inscrire à notre newsletter !