B1nj blog - cssBoite à outils pour webmaster : html, css, php...2016-12-31T14:17:35-04:00b1njurn:md5:2594f6cf87f008e79d7a42698b5fdd60DotclearJ'ai joué avec html5, css3 et jQuery sur vauclindecouverte.frurn:md5:21c3cc52d8998dc2c7c41c808fb1cc892012-07-02T22:04:00+01:002013-02-06T09:45:09+00:00Benjamin SimoncssHtml5 et css3 c'est cool, c'est à la mode et c'est surtout très pratique. Malheureusement on ne peut pas encore pleinement utiliser ces technologies du fait des contraintes de compatibilités avec les anciens navigateurs.
<p><a title="Header Vauclin découverte" href="http://www.b1nj.fr/blog/public/vauclin-decouverte.jpg"><img title="Header Vauclin découverte, juil. 2012" style="margin: 0 auto; display: block;" alt="Header Vauclin découverte" src="http://www.b1nj.fr/blog/public/.vauclin-decouverte_m.jpg" /></a></p>
<p>Et si pour une fois, on oubliait IE6, IE7, IE8 et compagnies ? J'ai pris cette liberté lors de la réalisation du site <a hreflang="fr" href="http://www.vauclindecouverte.fr">vauclindecouverte.fr</a> pour un ami.</p> <p>Bon, par contre même mon ami Dédé va m'en vouloir si sur IE8 c'est illisible. Surtout qu'une mise à jour de ce navigateur n'est plus possible sur le système d'exploitation XP (IE8 le futur bouler de Microsoft ? ). </p>
<p>Qu'importe une dégradation élégante fera l'affaire pour ce navigateur. <strong>Dégradation élégante ?</strong> Oui, en gros cela veut dire qu'il sera moche sur IE8, mais que les fonctionnalités/contenus seront présents :)</p>
<p style="text-align: center;"><a title="Vauclin Découverte sur IE8" href="http://www.b1nj.fr/blog/public/vauclin-decouverte-ie8.jpg"><img title="Vauclin Découverte sur IE8, juil. 2012" style="margin: 0 auto; display: block;" alt="Vauclin Découverte sur IE8" src="http://www.b1nj.fr/blog/public/.vauclin-decouverte-ie8_m.jpg" /></a><br /><em>Aperçu sur Internet Explorer 8. Jeu des 7 erreurs</em></p>
<p>Et alors on fait quoi de plus avec html5 et css3 ? Voici la liste des fonctionnalités utilisées sur <a hreflang="fr" href="http://www.vauclindecouverte.fr">vauclindecouverte.fr.</a> </p>
<ul><li>Meilleur structure du document avec les nouvelles balises <strong>header, section, article, nav</strong></li>
<li>Possibilité d'éditer du texte directement sur le site avec la propriété html <strong>contenteditable</strong></li>
<li>Coins arrondis avec la propriété css <strong>border-radius</strong></li>
<li>Transparence alpha avec la notation <strong>rgba </strong>de la propriété background-color</li>
<li>Ombrages interne et externe avec <strong>box-shadow</strong></li>
<li>Les rotations d'un élément avec <strong>transform: rotate</strong></li>
<li>utilisation d'une police non web-safe avec <strong>@font-face</strong></li>
<li>Animation d'un élément avec <strong>animation </strong>et les <strong>keyframes</strong></li>
<li>Les transitions avec <strong>transition</strong></li>
</ul>
<p>Sans oublier la propriété css2 <strong>:before</strong>, la technique des <strong>sprites </strong>et le manipulation du DOM et des effets avec <strong>jQuery</strong>.</p>
<p>Je vous invite bien sur à regarder le code source du site. Il s'y trouve un bonus.</p>
<p>A vous de jouer.</p>
<p><em>PS : J'ai essayées les balades de Dédé. Elles sont sont vraiment sympa !!!</em></p>