Tchoa.com (version HTML5+CSS3)

Bienvenue dans le web du futur

J'ai créé cette page dans le but de tester et faire la démonstration des nouvelles capacités des normes W3C, HTML5 et CSS3.

HTML5 est souvent cité en ce moment comme argument commercial pour ces capacités audiovisuelles ; mais ce ne sont pas les balises <audio> et <video> qui m'intéressent en priorité, mais plutôt les balises à valeurs sémantiques telles que <header>, <footer>, <article> ou <section>. Néanmoins, le multimédia ne sera pas oublié.

Je me suis laché sur le CSS3 ; depuis le temps que je me restreins à une petite partie du CSS2 ... Là, j'ai mis des polices "opentype", de l'ombre, des arrondis, un effet mirroir, et y'a pleins de trucs à tester ; bref, c'est Noël ! En plus, je vais essayer d'utiliser un minimum d'image pour faire la décoration, pour l'instant, il n'y a qu'un seul PNG de 135 octets.

Le client (navigateur) cible principal est bien sûr Google Chrome, testé avec la version béta à jour, car il est celui qui interprète le mieux ces nouvelles normes parmis les navigateurs majeurs. Safari, grâce au moteur de rendu commun, WebKit, semble être parfaitement compatible. Quelques "patchs" sont ajoutés pour une meilleure compatibilité sous Firefox, mais c'est pas terrible ; IE8 ne comprend rien, comme d'habitude ; mais la page passe sous LYNX.

Le javascript présent dans la page n'est là qu'à des fins de comptage, mais pas pour le rendu, les animations ou les interactions (sauf le bouton "Google Buzz").

La partie HTML

Doctype et balise head

Le Doctype est conforme aux nouvelles spécifications W3C, c'est-à-dire très simple :

<!DOCTYPE html>

Dans la balise head, en plus du "title", du javascript et des styles CSS insérés "inline", il y a juste une balise en plus pour le codage :

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

La déclaration de la langue du document (fr) est indiqué dès la balise <html>.

Les nouvelles balises sémantiques

HTML5 offre aux intégrateurs de nouvelles balises de zoning qui viennent se substituer aux traditionels <div> et qui précisent la fonction des blocks. Ci-dessous, vous decouvrez la structure simplifiée de cette page (contenu du <body> principal).

<article>
  <header> ... </header>
  <section> ... </section>
  <aside>
    <section> ... </section>
    <section> ... </section>
  </aside>
  <section> ... </section>
  <footer> ... </footer>
</article>

J'ai tout mis dans une balise <article> car tout dans la page se rapporte au même sujet, et elle me permet de définir la largeur et la position de l'ensemble. Je n'ai pas utilisé de balise <nav>, ni de structures <body><header><section><footer> imbriquées, car je n'en ai pas besoin.

Le cartouche

Le code HTML du cartouche en entête de page est très simple, le voici, y compris les commentaires :

<h1 class="rndblk">
   Tchoa.com <span>(version HTML5+CSS3)</span>
   <img src="logo_4svg_2010.svg" width="111px" height="70px" alt="">
   <!--<embed type="image/svg+xml" src="logo_4svg_2010.svg" width="111px" height="70px">-->
</h1>

Je reviendrais dans le chapitre sur le CSS sur les définition des styles pour H1 et la classe "rndblk" qui font toute la décoration : font, ombres, arrondis, effet mirroir. Seule la décoration orange en forme de flèche arrondie n'est pas générée par CSS, car je voulais utiliser la norme SVG pour cette forme vectorielle simple, et comme le SVG est du XML, je ne considère pas cette ressource comme une image.
J'ai pu constater lors de mes tests, que la méthode normale (définie par le W3C), qui consiste à insérer une ressource externe dans le flux html par la balise <embed>, fonctionne, mais n'a pas un bon rendu car le fond de la zone est blanche, alors qu'elle est transparente si l'on insére le fichier avec une vulgaire balise <img>. J'ai essayé aussi avec la balise <object>, sans succès.
J'ai également essayé de mettre directement le code SVG (voir le détail ci-dessous) dans le code HTML, comme cela devrait être possible, mais sans succès, malgrès différentes tentatives de syntaxe. Dans mes recherches, j'ai trouvé un fichier HTML contenant du code SVG, et qui s'affichait correctement, mais il avait un Doctype XHTML ; de nombreux autres tests sont envisagables dans ce domaine, et en particulier les interactions avec le javascript.

<svg:svg id="Nv_Logo" xmlns:svg="http://www.w3.org/2000/svg" width="111px" height="70px">
   <svg:path fill="#FF8C24" d="M65.267,12.4c-0.646-0.265-1.291-0.516-1.936-0.769l-3.118,
   7.487c0.576,0.227,1.153,0.454,1.731,0.691c24.316,9.984,40.973,25.521,37.203,34.703c-3.771,
   9.182-26.539,8.531-50.855-1.453C23.974,43.075,7.318,27.538,11.088,18.356c2.514-6.124,
   13.485-7.867,27.726-5.39l0.732,2.54l10.975-4.146l-8.745-5.977l0.014-0.029c-0.025-0.005-
   0.051-0.009-0.076-0.013L35.365,1l1.007,3.492C18.998,2.239,5.375,5.563,1.792,14.289C-3.631,
   27.499,15.994,48.07,45.626,60.237c29.631,12.167,58.049,11.321,63.473-1.888S94.899,
   24.567,65.267,12.4z"></svg:path>
</svg:svg>

Les nouvelles balises multimédias

Pour l'instant, je n'ai pas encore testé les balises multimédia <audio> et <video>.

La partie CSS

Comme il s'agit d'une page de test, je n'ai fait qu'un seul fichier CSS, défini pour tous les médias.
Certaines définitions sont doublées dans la syntaxe Mozilla pour compatibilité, mais celle-ci n'est pas encore parfaite ...

Fonts importées

La technique n'est pas une nouveauté du CSS3, mais elle semble être parfaitement maîtrisée par les navigateurs modernes qui prétendent au HTML5/CSS3.

@font-face {
 font-family: Goudy;
 src: url(OFLGoudyStM.otf);
 }

Re-définitions des balses de bases et des nouvelles balises

La re-définition des styles de la balise <body> n'ont rien d'extraordinaire. On peux juste noter le padding horizontale exprimé en pourcentage pour créer une structure de type "flex".

body {
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 font-size: 0.9em;
 color: #030;
 background-color: #EFF2EE;
 margin: 0px;
 padding: 20px 10%;
 }

Pour la balise <a>, rien d'extraordinaire non plus, juste un petit décalage au passage de la souris.

a {
 color: #033;
 position: relative;
 }
 a:hover {
 top: 1px;
 left: 1px;
 }

Pour les listes et leurs balises <ul> et <li>, là encore, pas de nouveautés au niveau de la norme, juste l'utilisation du pseudo sélecteur ":before", qui était jusque là rarement utilisé car pas compris par le navigateur majoritaire (IE).

ul {
 padding-left: 0.4em;
 list-style: none;
 }
 li {
 text-indent: -1.3em;
 }
 li:before {
 content: "=> ";
 display: inline;
 }

J'ai du ajouter ces re-définitions des nouvelles balises du HTML5, parce que Firefox ne les détecte pas comme des élémentes de type "block".

section, footer, header, aside {
 display: block;
 }

Les autres re-définitions de balises (#pub p, #pub pre et pre) ne sont là que pour créer un rendu harmonieux.

Les nouveautés CSS3 autour du cartouche

La classes "rndblk"

.rndblk {
 background-image: url(alert-overlay.png);
 background-position: 0px 0px;
 background-repeat: repeat-x;
 padding: 16px 32px;
 margin: 0 0 1em;
 border-radius: 16px;
 -webkit-box-shadow: 0 1px 3px #999;
 -moz-border-radius: 16px;
 -moz-box-shadow: 0 1px 3px #999;
 }

Sa réutilisation

h1.rndblk, #edito, #pro {
 background-color: #DFE1C8 ;
 }
#liens {
 background-color: #CDD0A8;
 }
footer.rndblk {
font-size: 0.75em;
padding: 10px 32px;
background-color: #808448;
}

Le reste

header {
 padding-bottom: 70px;
 }
h1.rndblk {
 display: inline-block;
 background-color: #DFE1C8 ;
 -webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, 
   from(transparent), color-stop(.5, transparent), to(white));
 font-family: Goudy,Serif;
 font-size: 3.5em;
 margin: 0;
 padding: 2px 32px;
 text-shadow: #999 3px 3px 3px;
 }
h1 span {
 font-size: 0.3em;
 }
h1 img {
 vertical-align: middle;
 margin-left: 16px;
 }

Les autres nouveautés et astuces

Les balises <h2>

h2 {
 padding: 0 1px 1px 0;
 margin: 0 0 1em;
 text-shadow: #999 1px 1px 3px;
 }
 h2:hover {
 padding: 1px 0 0 1px;
 text-shadow: #999 0px 0px 3px;
 }

Le block "edito" bénéficie d'un colonnage

#edito div {
 column-count: 3;
 column-gap: 32px;
 -webkit-column-count: 3;
 -webkit-column-gap: 32px;
 text-align: justify;
 }

CSS3 dropdown menus

Voici le beau menu que Nick La présente sur son blog WebDesignerWall

~~Bug à cause de la position "relative" du lien en dessous.~~ (inline fixed)