Clearideaz, le portfolio d'Olivier Gorzalka, webdesigner sur Lille, Nord-Pas de Calais

webdesigner et intégrateur XHTML / CSS

Articles avec le tag ‘HTML5’

Internet Explorer 9 sur la bonne voie

Des débuts (très) difficiles

Internet Explorer 9, the fucking browserInternet Explorer a (très) souvent été la cible de critiques passionnées. En cause, son moteur de rendu (Trident) non conforme aux standards du web définis par le W3C et ses nombreux bugs.
La version 6 s’imposait de nombreuses années au sein du système Windows XP.

Microsoft décide de publier la version 7 de son navigateur qui sera en série sur le tout nouveau système, Windows Vista. Les améliorations sont nombreuses mais la firme Redmond persiste dans sa volonté d’imposer ses « standards ». Il intègre toutefois de nouveaux pseudo-sélecteurs CSS (IE6 ne supportant que les pseudo-sélecteurs affectés aux liens) et supporte enfin le format PNG alpha.
Problème, la plupart des utilisateurs de Windows XP ne migrent pas vers Vista, le système ayant une mauvaise réputation en terme de stabilité et d’ergonomie. Le passage vers IE7 prendra beaucoup de temps et encore aujourd’hui, IE6 dispose d’une part importante dans le pourcentage des navigateurs utilisés. Cette lente migration s’explique également par le fait qu’Internet Explorer 6 ne dispose d’aucun système de mise à jour automatique (à contrario de Firefox par exemple).

Lire la suite

Astuce pour HTML5

Comme vous avez surement pu le constater, il est possible en HTML5 d’encadrer des balises de type bloc par une balise de type lien inline de cette manière :

<a href="http://www.smashingmagazine.com">
  <h1>Smashing Magazine</h1>
  <h2>online magazine dedicated to designers and developers.</h2>
</a>

Le lien devient ainsi actif sur l’ensemble des balises bloc. Ceci évite d’insérer plusieurs fois le même lien.

Ce balisage marche sur la plupart des navigateurs dont IE6 seulement voilà, sur ce dernier, le curseur n’est pas correct au survol des balises de type bloc. A la place du pointeur, on à le curseur de type de texte.

Voici ce que l’on peut ajouter dans la feuille de style pour corriger celà :

a * { cursor:pointer; }

Et miracle, le curseur par défaut des liens fonctionne également sur les balises type bloc.

Détecter le support HTML5 du navigateur via Jquery

Le site Dive into HTML5 a publié récemment un article détaillant les différentes méthodes de détection de fonctionnalités HTML5 sur les navigateurs via Javascript.

Utilisateur régulier de jQuery, j’ai décidé de porter ces scripts au sein de la fonction $.support.

Voici la liste des tests possibles : audio, audioMp3, audioVorbis, audioWav, audioAAC, canvas, canvasTxt, command, datalist, details, device, formConstraints, iframeSandbox, iframeSrcDoc, autofocus, placeholder, color, email, number, range, search, tel, url, date, time, datetime, datetime-local, month, week, meter, output, progress, time, video, videoCaptions, videoPoster, videoWebM, videoH264, videoTheora, contentEditable, dragAndDrop, fileAPI, geoLocation, history, localStorage, microdata, applicationCache, eventSource, sessionStorage, svg, svgInHtml, webSimpleDb, webSocket, openDatabase, webWorkers, undo.

Vous trouverez une démonstration des possibilités offertes par le script sur cette page de test du support HTML5 de votre navigateur.

Si vous souhaitez par exemple tester le support du SVG, insérez la ligne suivante au sein de votre fichier Javascript :

$.support.svg // retourne false sur IE et true sur les versions récentes de Firefox

Le script est léger : 8ko en version source et 3ko en version minifiée.

Vous pouvez télécharger l’extend jQuery sur mon espace Github

N’hésitez pas à me signaler le moindre bug.

Édit : correction d’un lien