css 4 design » IE6

css 4 design » IE6 http://css4design.com Le blog de l'intégrateur web Thu, 02 Sep 2010 16:53:27 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Quelques notes — Prévoir un supplément pour rendre un site compatible avec IE6 ? http://css4design.com/quelques-notes-prevoir-un-supplement-pour-rendre-un-site-compatible-avec-ie6 http://css4design.com/quelques-notes-prevoir-un-supplement-pour-rendre-un-site-compatible-avec-ie6#comments Wed, 02 Jun 2010 12:10:24 +0000 Bruno Bichet http://css4design.com/?p=6192

« Si le client veut qu’on prenne en compte IE6, il faudra qu’il paie pour ça » via @fran6. C’est clair, c’est net, mais un peu court (en même temps en 140 caractères, difficile de développer). Ca fait longtemps que pour les développeurs et les intégrateurs web, IE6 est comme une écharde qui n’arrête pas de s’infecter ou plutôt comme le dit Microsoft lui-même : «Surfer avec Internet Explorer 6, c’est comme boire du lait périmé depuis 9 ans». Mais de quoi parle-t-on exactement ?

Développement front-end ?

Oui, ça veut dire Javascript. Mais ça fait longtemps que les bibliothèques Javascript comme jQuery ont bouché les nids de poule qui se trouvaient sur la voie du développement Cross-Browsers. Rien que ce terme parait désuet aujourd’hui, alors qu’il était le Sésame ouvre-toi pour trouver du Javascript compatible avec plusieurs navigateurs il y a quelques années.

Intégration web ?

Oui, ça veut dire mise en page avec HTML et CSS. Mais ça fait longtemps que les Frameworks CSS ont nivelé la voie, au prix de quelques déclarations spécifiques que l’on peut facilement cacher sous le tapis des commentaires conditionnels !

Graphisme ?

Oui, ça veut dire transparence, coins arrondis, dégradés, ombres portées, etc. Mais ça fait longtemps que… Nan, je plaisante. Pour le coup, c’est assez récent et le tempo correspond pile-poil à l’arrivée en fanfare de CSS3, ce qui a aiguisé les appétits.

Alors oui, c’est assez rageant de constater que tous ces beaux joujoux que l’on voit en rêve ne fonctionneront pas Internet Explorer, y compris jusqu’à la version 8 pour certaines propriétés !

La faute à l’iPhone et à l’iPad (troll=’on’) ?

Je soupçonne Apple d’être la cause de tout ce remue-ménage. Les graphistes qui travaillent généralement sur des machines Apple ont toujours trouvé dommage de ne pas pouvoir faire bénéficier leurs créations d’un environnement graphique à la hauteur de leur talent, comme ils en ont l’habitude avec Safari sur un écran chatoyant de plus de 25 pouces. Jusqu’à l’arrivée de l’iPhone et maintenant de l’iPad, ils s’étaient fait une raison, mais aujourd’hui la tentation est grande d’envoyer paitre les mauvais navigateurs.

Photoshop ou CSS3 ?

On parle de plus en plus de design dans le navigateur (cf. mon tutoriel paru dans le magazine Web Design), ce qui est une bonne chose. Mais cette tendance ne doit pas être l’arbre qui cache la forêt. En effet, il est très, mais alors très rare que les fantaisies graphiques des .psd que j’ai eu l’occasion de découper jusqu’à présent aient pu se satisfaire des propriétés CSS3. Cela voudrait dire que le graphiste ne s’est pas cassé la tête pour concevoir ses bords arrondis, ses dégradés, ses ombres portées ou ses dégradés dont le rendu reste perfectible, sans compter les différences d’affichage selon les navigateurs.

Faire payer quoi en plus, exactement ?

Ce qui m’étonne souvent, c’est qu’en général ceux qui tiennent ce discours sont des travailleurs indépendants, libres de fixer leur prix. De mon temps, on fixait les tarifs en fonction du temps passé, multiplié par le tarif horaire… Il suffirait peut-être de revenir aux fondamentaux ;) Les problèmes liés à IE6 ne sont pas tant des problèmes de développeurs ou d’intégrateurs, mais le signe que le cahier des charges n’a pas été bien défini et que le devis a passé sous silence les contraintes Cross Browsers.

Le bonheur est dans le cahier des charges

Ce que je trouverais assez smart, c’est d’ajouter une ligne dans le devis pour proposer une remise de xx% pour inciter le client à ne pas prendre en compte IE6 dans tout ou partie du développement de son site. On pourrait par exemple fixer ce pourcentage en fonction du nombre d’utilisateurs surfant avec IE6 dans le secteur d’activité du client, genre 15% de IE6 dans les stats, 15% de remise !

]]> http://css4design.com/quelques-notes-prevoir-un-supplement-pour-rendre-un-site-compatible-avec-ie6/feed 16 Ajouter une classe CSS dans BODY ou HTML pour Internet Explorer (IE6 — IE9) http://css4design.com/ajouter-une-classe-css-dans-body-ou-html-pour-internet-explorer-ie6-ie7-ie8-ou-ie9 http://css4design.com/ajouter-une-classe-css-dans-body-ou-html-pour-internet-explorer-ie6-ie7-ie8-ou-ie9#comments Thu, 01 Apr 2010 20:46:19 +0000 Bruno Bichet http://css4design.com/?p=5690

Toujours dans ma recherche de solution pour servir des déclarations CSS uniquement à Internet Explorer, je suis tombé sur une technique que j’appellerais «classification» sélective du body (ou de la balise html) en fonction du navigateur. Une fois encore, les commentaires conditionnels serviront à détecter Internet Explorer pour ajouter une classe à la balise html pour éviter de créer une feuille de style dédiée à IE.

<!--[if !IE]><!--><html><!-- <![endif]-->
<!--[if IE]><html class="ie"><![endif]-->

Reste à utiliser ce sélecteur .ie dans votre feuille de style pour cibler IE toute version confondue. Rien n’empêche d’utiliser plusieurs commentaires pour cibler différentes versions, comme le suggère Yves Van Goethem (dont le code source de la page personnelle – http://yves.vg – a fourni la matière première de ce billet).

Cibler chaque version d’Internet Explorer

<!--[if !IE]><!--><html><!-- <![endif]-->
<!--[if lte IE 6]><html class="ie6"><![endif]-->
<!--[if IE 7]><html class="ie7"><![endif]-->
<!--[if gte IE 8]><html class="ie8"><![endif]-->

Internet Explorer ne tiendra pas compte de la première ligne. Ensuite, on fait un premier tri pour mettre de côté les versions inférieures ou égales à IE6. Plus loin, on isole IE7, et pour finir on cible les versions supérieures ou égales à IE8.

Et le prochain IE9 ?

Si IE9 utilise les commentaires conditionnels de la même manière, il sera toujours temps de modifier la dernière ligne et d’en ajouter une :

<!--[if IE 8]><html class="ie8"><![endif]-->
<!--[if IE 9]><html class="ie9"><![endif]-->

Exemple d’utilisation

Dans la feuille de style, on pourra utiliser (au hasard) :

#sidebar { width: 200px; }
.ie6 #sidebar { margin-left: -3px; }

]]> http://css4design.com/ajouter-une-classe-css-dans-body-ou-html-pour-internet-explorer-ie6-ie7-ie8-ou-ie9/feed 16 «Test Drive» (IE9 preview) sur Vista http://css4design.com/test-drive-ie9-preview-sur-vista http://css4design.com/test-drive-ie9-preview-sur-vista#comments Tue, 16 Mar 2010 19:29:02 +0000 Bruno Bichet http://css4design.com/?p=5698

Petite note rapide pour signaler le lancement de Test Drive par Microsoft. Une fois l’archive .msi installée sur votre disque dur (le moteur de rendu d’IE9 s’installe à côté de votre exemplaire d’Internet Explorer), Internet Explorer Platform Preview vous permettra de tester le moteur de rendu de IE9 censé respecter les standards (CSS3, HTML5) au plus près des spécifications du W3C.

Cerise sur le gâteau, il est possible de basculer vers les modes d’affichage des anciennes versions IE5, IE7 et IE8. Ce qui devrait permettre de tester ses pages web beaucoup plus rapidement, sous réserve que le IE5 Document Mode affiche bien les pages comme le fait IE6 !

Quelques plantages, mais je dois avouer que la mémoire de mon PC était pleine comme un oeuf lors de mes tests, ceci expliquant (espérons-le) cela…

Comme on peut le voir, ce blog s’affiche correctement dans cette preview d’Internet Explorer 9 : pourvu que ça dure !

css 4 design vu par Internet Explorer Platform Preview. Cliquez pour agrandir l'image.

Les outils pour développeurs de cette preview ne rivaliseront pas avec Firebug, mais offrent un environnement de débuggage fonctionnel et assez réactif.

Sélection d'un paragraphe à l'intérieur d'un élément de liste avec les outils pour développeurs de IE9

Lire MIX10 : Internet Explorer 9 se dévoile en preview pour plus d’information.

]]> http://css4design.com/test-drive-ie9-preview-sur-vista/feed 4 Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8 http://css4design.com/une-feuille-de-style-et-des-hacks-css-pour-cibler-ie6-ie7-ou-ie8 http://css4design.com/une-feuille-de-style-et-des-hacks-css-pour-cibler-ie6-ie7-ou-ie8#comments Sun, 14 Mar 2010 20:38:27 +0000 Bruno Bichet http://css4design.com/?p=5631

Les hacks CSS sont une utilisation peu conventionnelle des sélecteurs CSS pour s’adresser à un ou plusieurs navigateurs quand on doit servir une propriété ou une valeur CSS spécifique à un ou plusieurs navigateurs. Si IE6 fait la fine bouche devant sa soupe de balises, il peut être intéressant de lui servir le même plat mais dans une assiette différente (la comparaison est bancale). Ces hacks s’utilisent souvent pour cibler des versions spécifiques d’Internet Explorer (généralement IE6 et IE7). Toutefois, il en existe pour Firefox, Opéra, Safari, iPhone, etc. Par ailleurs, je n’utilise pas ces hacks CSS dans ma feuille de style principale, mais uniquement dans une CSS réservée à IE via les commentaires conditionnels.

Comment utiliser les hacks CSS ?

Dans l’article Un seul fichier CSS pour cibler IE6 et IE7 avec les commentaires conditionnels, j’utilisais un commentaire conditionnel pour cibler les versions inférieures ou égales à IE7. Toutefois, IE9 est sur les rails et il est temps de le prendre en compte, d’autant plus que Microsoft veut en faire un champion des standards du web en terme de rendu CSS3 et HTML5.

L’idée derrière la feuille de style unique pour IE est de ne pas augmenter inutilement le nombre de requêtes pour charger une CSS pour chaque version d’Internet Explorer. En attendant de voir ce que nous réserve IE9, j’ai décidé de cibler les versions inférieures ou égales à IE8 en espérant que IE9 tienne ses promesses et en attendant de voir s’il va continuer à gérer les commentaires conditionnels (auquel cas nous pourrions cibler les version inférieures à IE9).

Cibler les versions <= à IE8

<!--[if lte IE 8]>
    <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen,projection" />
<![endif]-->

De cette manière, les règles CSS placées dans ie.css s’adressent uniquement à Internet Explorer ; les autres navigateurs considèrent ces commentaires conditionnels comme de simples commentaires HTML. Ça va sans dire mais encore mieux en le disant : les déclarations situées dans style.css s’appliquent aussi à Internet Explorer ce qui implique que l’appel à ie.css doit se situer après style.css pour surcharger les déclarations qui posent problème.

Note : il existe une forme de commentaires conditionnels qui permet de cibler tous les navigateurs sauf Internet Explorer :  IE Windows ne lira pas ça 

Dans cette feuille de style ie.css, si IE6 (et seulement lui) ne se comporte pas comme prévu devant #header { margin-top: 0; }, il suffira d’y ajouter * html #header { margin-top: -5px; } pour régler le problème. Si le problème concerne IE6 et IE7 et que IE8 se comporte de manière standard (c’est à dire que la règle située dans style.css suffit), il faudra utiliser les hacks de la manière suivante :

* html #search .submit { margin-top: -10px; } // IE6
*+html #search .submit { margin-top: -14px; } // IE7

En revanche, si vous avez également besoin d’une valeur différente pour IE8, il faudra prendre soin d’ajouter la règle CSS #search .submit { margin-top: -7px; } au-dessus des deux autres, soit :

#search .submit { margin-top: -7px; }         //Toutes les versions d'IE
* html #search .submit { margin-top: -10px; } // Surcharge pour IE6 seulement
*+html #search .submit { margin-top: -14px; } // Surcharge pour IE7 seulement

Mettez vos frameworks CSS à jour

Les frameworks CSS proposent souvent une feuille de style spécifique à Internet Explorer. Le plus souvent, le hack utilisé pour cibler IE7 est de la forme html>body qui n’est pas pris en charge par IE6. Or, si l’on cible les versions <= à IE8, ce hack est obsolète puisqu’il est compris par IE8. Pour y remédier, j’utilise *+html qui n’est compris que par IE7.

Ainsi, dans le fichier ie.css de Blueprint, il sera nécessaire de modifier la ligne html>body p code { white-space: normal; } par +html p code { *white-space: normal; } pour éviter que IE8 ne s’emmêle les pinceaux ;)

22 hacks CSS à consommer avec modération

Cette liste de 22 contournements a été compilée par Paul Irish. Elle présente le double intérêt de la quasi-exhausitivité et de distinguer les hacks jouant sur les sélecteurs de ceux qui concernent les attributs.

Hacks sur les sélecteurs

IE6 et inférieurs
```
* html .test  { color: red }
```
IE7
```
*:first-child+html .test { color: red }
```
IE7, Firefox, Safari, Opera
```
html>body .test { color: red }
```
IE8, Firefox, Safari, Opera (Tout sauf IE 6,7)
```
html>/**/body .test { color: red }
```
Opera 9.27 et inférieurs, Safari 2
```
html:first-child .test { color: red }
```

Safari 2 — 3

html[xmlns*=""] body:last-child .test { color: red }

safari 3+, Chrome 1+, Opera9+, Firefox 3.5+
```
body:nth-of-type(1) .test { color: red }
```
Safari 3+, Chrome 1+, Opera9+, Firefox 3.5+
```
body:first-of-type .test { color: red }
```

Safaris 3+, Chrome1+

   @media screen and (-webkit-min-device-pixel-ratio:0) {
            .test  { color: red }
    }

iPhone / Webkit mobile

   @media screen and (max-device-width: 480px) {
            .test { color: red }
    }

Safari 2 — 3.1

html[xmlns*=""]:root .test  { color: red }

Safari 2 — 3.1, Opera 9.25
```
*|html[xmlns*=""] .test { color: red }
```
Tout sauf IE6 — 8
```
:root *> .test { color: red  }
```
IE7
```
*+html .test { color: red }
```
Uniquement Firefox. 1+
```
.test,  x:-moz-any-link  { color: red }
```

Firefox 3.0+

.test,  x:-moz-any-link, x:default  { color: red }

Hacks sur les attributs

IE6
```
.test { _color: blue }
```

IE6, IE7

.test { *color: blue /* or #color: blue */ }

Tout sauf IE6
```
.test { color/**/: blue }
```
IE6, IE7, IE8
```
.test { color: blue\9 }
```
IE7, IE8
```
.test { color/*\**/: blue\9 }
```

IE6, IE7 — fonctionne comme !important

.test { color: blue !ie } /* la chaine après ! peut être n'importe quoi */

]]> http://css4design.com/une-feuille-de-style-et-des-hacks-css-pour-cibler-ie6-ie7-ou-ie8/feed 8 CSS & Navigateurs — 10 problèmes de compatibilité récurrents http://css4design.com/css-navigateurs-10-problemes-de-compatibilite-recurrents http://css4design.com/css-navigateurs-10-problemes-de-compatibilite-recurrents#comments Mon, 25 Jan 2010 20:43:44 +0000 Bruno Bichet http://css4design.com/?p=4992

Les problèmes de compatibilité entre les feuilles de style CSS et leurs interprétations parfois fantaisistes d’un navigateur à l’autre font partie du quotidien des intégrateurs web et autres webdesigners. Voici une liste de liens (en anglais) qui vous permettra de reconnaitre et corriger les bugs de rendu qui font tâches dans votre design web :

]]> http://css4design.com/css-navigateurs-10-problemes-de-compatibilite-recurrents/feed 2 Tester un site dans plusieurs navigateurs (mais surtout dans IE6 avec Vista) http://css4design.com/tester-un-site-dans-plusieurs-navigateurs-mais-surtout-dans-ie6-avec-vista http://css4design.com/tester-un-site-dans-plusieurs-navigateurs-mais-surtout-dans-ie6-avec-vista#comments Wed, 30 Dec 2009 21:40:48 +0000 Bruno Bichet http://css4design.com/?p=4641

Tester ses pages web dans les différents navigateurs présents sur le marché est souvent source de frustration. Même lorsqu’on utilise un système Windows, on rencontre des difficultés pour tester les sites dans IE6, IE7 et IE8 en même temps. Opera, Firefox, Google Chrome ou Safari ne posent pas de problème particulier. Selon votre configuration, il existe plusieurs techniques permettant d’assurer un affichage homogène sur la majorité des navigateurs : virtualisation, logiciels, services en ligne ou pourquoi pas un deuxième ordinateur dédié comme un NetBook ?

Il est bien évident que la question de pose différemment selon que l’on utilise un Mac ou un PC et dans ce dernier cas, c’est encore différent selon que l’on utilise Windows XP, Vista ou Seven. Si vous êtes sous Linux, ma foi, vous devriez être capable de vous en sortir tout(e) seul(e), non ? ^_^v

Installer «Test Drive» (IE9 preview) sur Vista

Note du 16/03/2010 — Microsoft vient de lancer Test Drive pour mettre la version preview d’Internet Explorer 9 en téléchargement. Cette version propose de basculer vers les models de document de IE5, IE7 et IE8 (et bien sûr IE9 par défaut). Ce qui devrait permettre de tester ses pages web beaucoup plus rapidement, sous réserve que le IE5 document mode affiche les pages comme le fait IE6 !

Machine Virtuelle avec Windows XP et IE6

Si comme moi vous utilisez Windows Vista, vous rencontrez peut-être des difficultés pour travailler avec IE6 dans de bonnes conditions. La virtualisation avec Virtual PC ou VirtualBox et l’image disque proposée gratuitement par Microsoft regroupe une version de Windows XP et Internet Explorer 6 et offre un environnement de travail opérationnel.

Une fois l’installation et le paramétrage de la connexion internet de Windows XP effectués, vous pouvez tester votre site sous IE6. Mais c’est très gourmand en ressources et la séance de test se transforme vite en cauchemar à moins d’avoir 4 go de ram et deux écrans (j’ai souvent Photoshop et/ou Illustrator ouverts sans compter les autres logiciels…).

Si votre configuration tient la route, cette solution présente l’avantage de vous permettre de tester votre site avec une vraie version d’IE6, Javascript et commentaires conditionnels en ordre de marche, ce qui n’est pas forcément le cas pour toutes les solutions présentées plus bas.

Quelques conseils pour l’installationde Virtual PC chez xuxu et Comment ça marche.

Logiciels pour tester votre site sous IE

A coté de la virtualisation, il existe des solutions logicielles pour tester son site avec plusieurs navigateurs :

Si vous êtes sous Windows XP avec IE6, vous pouvez utiliser IE7_standalone pour tester sous IE7. Si vous avez déjà IE7, utilisez Multiple IE pour tester dans IE6 et les versions précédentes. Si vous êtes passé sous Vista, vous pouvez tester IE6 for Vista en version alpha. A noter qu’en désinstallant IE7 sur Windows XP, on retrouve une bonne vieille version d’IE6.
Dans le même esprit, il existe Internet Explorer Collection qui contient pratiquement toutes les versions d’Internet Explorer : d’IE 1.0 à IE 8.0 ! (Merci à Deloo).
Si vous utilisez IE8, vous pouvez basculer le moteur de rendu graphique et Javascript dans le mode IE7 ou encore le mode Quirks (IE5) déclenché par IE8 en l’absence de Doctype. Pour cela, rendez-vous dans les outils pour développeurs. Ces outils sont une tentative bienvenue de la part de Microsoft pour offrir des outils de débuggage comme Firebug pour Firefox. Plus d’information sur la prise en charges des CSS, Javascript et documentMode dans IE8.
IE Tab est une extension Firefox qui utilise le moteur de rendu d’Internet Explorer (IE7 ?) dans un onglet Firefox. C’est surtout utile lorsqu’un site vous annonce qu’il n’est pas compatible avec votre navigateur préféré. Le rendu ressemble vaguement à IE7 mais avec des variantes, notamment en ce qui concerne les comportements Javascript.

IETester

Pas convaincu par les logiciels précédents ? Installez donc IETester qui vous permettra de tester votre site avec la majorité des versions d’Internet Explorer. Toujours en version Alpha, la v0.42 propose des options pour développeurs comme l »activation ou la désactivation du Javascript.

IETester est un peu instable, mais relativement confortable pour des séances courtes.

Tester votre site dans IE5.5, IE6, IE7, IE8 avec IETester. Cliquez pour agrandir l'image.

La communauté autour de IETester semble assez active et vous trouverez de l’aide sur le forum.

Captures d’écran en ligne

Si les solutions précédentes ne vous conviennent pas, vous pouvez vous tournez vers les services en ligne pour obtenir des captures d’écran sous différentes combinaisons de navigateurs et de systèmes d’exploitation :

Browser Sandbox

Browser Sandbox est un bac à sable pour navigateurs à mi-chemin entre les solutions logicielles et la virtualisation via une extension pour Firefox ou un plugin (.exe) pour Internet Explorer.

Le résultat s’affiche sous la forme d’une instance du navigateur que vous avez choisi parmi IE8, IE7, IE6, Firefox 3.5, Firefox 3, Firefox 2; Apple Safari 4 et 3, Google Chrome ou encore Opera 9 et 10 pour finir.

A noter qu’à l’instar d’IETester, l’affichage des polices de caractère n’est pas identique au vrai IE6 et bénéficie plutôt du rendu de la version d’Internet Explorer installée sur votre système.

Browser Sandbox fonctionne bien malgré des plantages inopinés qui surviennent de temps à autre.

Affichage du site dans dans Internet Explorer 6 avec Browser Sandbox de Spoon. Cliquez pour agrandir l'image.

NetBook ou Portables

La solution qui a ma préférence, c’est le NetBook sous Windows XP et IE6. C’est presque trop beau pour être vrai : pour moins de 300€ on s’offre la même configuration que les moins bien lotis de nos visiteurs : faible résolution d’écran, petit processeur et navigateur obsolète… le rêve, je vous dis !

Depuis que j’ai eu l’occasion d’admirer mon blog dans la résolution moyenne de ces Netbook (1024 par 600), je fais en sorte d’avoir du texte à lire dans cette zone en dehors du logo et de la baseline.

Essayez, et vous serez surpris par le nombre de sites ou de blogs qui ne proposent rien à lire dans cette zone primordiale des 500 premiers pixels (oui, il faut retrancher quelques précieux pixels occupés par les barres d’adresse et d’outils de votre navigateur).

Des modèles comme le Asus EeePC 1005HA ou 1008HA, le Samsung N140 ou encore le HP Compaq Mini 311c sous Windows XP sont de bons candidats. Tout autre portable sous Windows XP fera bien entendu l’affaire.

Adobe Browserlab

Oui, mais voilà, vous voudriez également savoir à quoi ressemble votre site chez le Mac Addict qui ne jure que par Mac OS X. Dans ce cas-là Browserlab est fait pour vous. Non seulement il vous permettra de tester votre site sous Firefox et Safari pour Mac OS X, mais en prime vous aurez la possibilité de voir ce que ça donne dans IE6 et IE7 pour Windows de manière à la fois fluide et rapide.

L’affichage des capture est assez rapide et il est possible de comparer plusieurs versions.

Affichage du site sous Safari Mac OSX et IE6 pour Windows. Cliquez pour agrandir l'image.

Comparer son site : IE6 sous Windows et Safari 3.0 sous Mac OS X. Cliquez pour agrandir l'image.

Internet mobile

Avec des chiffres estimés à plusieurs millions d’utilisateurs, il est important de vérifier que son site web s’affiche correctement sur les petits écrans des périphériques mobiles.

Plus d’information sur MobiReady dans l’article Votre blog sur un téléphone portable, really ready ?

N’oubliez pas de proposer un menu skip links à vos visiteurs mobiles !

Testez votre site web dans plusieurs téléphones portables avec Mobi Ready. Cliquer pour agrandir l'image.

Pour conclure

Cet article fait rapidement le tour des solutions que j’ai eu l’occasion de tester de manière plus ou moins approfondie pour tester mes pages web avec IE6, sachant que j’utilise Vista au quotidien. Si dans votre environnement professionnel les pages web doivent s’afficher correctement partout, il vaut mieux utiliser de vraies machines sous Mac OS X, Windows Vista, XP, Linux, etc.

Il s’agit de la seule manière de pouvoir compter sur le moteur de rendu graphique et Javascript et des éventuels outils d’aide à l’intégration et au développement… Le débuggage d’une page web ne se réduit pas à recaler une barre latérale qui passe sous le contenu principal !

Par ailleurs, il est toujours très intéressant de voir le rendu de son site sous une autre configuration (taille d’écran et résolution différentes, autres polices de caractère installées, etc). Ça calme !

]]> http://css4design.com/tester-un-site-dans-plusieurs-navigateurs-mais-surtout-dans-ie6-avec-vista/feed 9 HTML5 et CSS pour l'intégrateur web http://css4design.com/le-petit-journal-de-l-integrateur-web-html5-et-css http://css4design.com/le-petit-journal-de-l-integrateur-web-html5-et-css#comments Wed, 21 Oct 2009 18:33:36 +0000 Bruno Bichet http://www.css4design.com/?p=4090

L’actualité du développement web est riche et c’est sans compter les liens plus anciens qui en ont encore sous le pied. Après le petit journal du web et celui consacré à WordPress, voici une sélection de ressources qui devrait plaire aux intégrateurs HTML et CSS. Au menu : un paquet de référence sur la prise en compte des balises HTML5 et des propriétés CSS par les différents navigateurs ; du nouveau pour aller au-delà des polices installées sur le poste client ; quelques Frameworks CSS à tester pour occuper les longues soirées hivernales et du float en veux-tu en voilà !

Références diverses pour les balises HTML5 et les propriétés CSS selon les navigateurs

The Future of HTML5 — Les spécifications de HTML 5 s’appelaient à l’origine Web Applications 1.0. La plupart des observateurs ont focalisé sur la création des nouveaux marqueurs HTML comme header, nav, aside ou footer alors que cette nouvelle version recèle des trésors fabuleux : 1) Images dynamiques et graphiques avec canvas ; 2) Validation des formulaires améliorées avec webforms 2.0 ; 3) base de données locales pour enregistrer les données ; 4) Géolocalisation et 5) Création de barres d’outils et de menus.
HTML5 Cheat Sheet — 4 pages en PDF pour connaitre toutes les balises disponibles dans HTML5 (y compris celles qui étaient déjà présentes dans HTML4). Par exemple :

Tag Information Version Attributes

blockquote Long quotation 4/5 cite

dialog dialog, conversation 5 global attributes

section section 5 cite
Prise en charge des CSS selon IE6, IE7 et IE8 — Excellente mise au point des différences de prise en charge des sélecteurs et propriétés CSS selon les différentes versions d’Internet Explorer. Pouvons-nous utiliser body>p, a[href] ou encore position: fixeddans IE7 ? Toutes les réponses à ces questions — et à bien d’autres — sur une page claire et concise.
CSS Compatibility and Internet Explorer — Je devrais y penser plus souvent : le réseau Microsoft pour les développeurs est plein de ressources pour faire le point sur la prise en charge des sélecteurs ou des attributs CSS disponibles dans les différentes versions d’Internet Explorer. Merci Josselin :)
Web browser CSS support — Spécifications et prise en charge des propriétés CSS 2.1 et CSS3 selon les navigateurs. Possibilité de choisir parmi 14 agents utilisateurs : IE 4, IE 5, IE 5.5, IE 6, IE 7, IE 8, Firefox 1, Firefox 1.5, Firefox 2, Firefox 3, Opera 8.5, Opera 9, Konqueror 3.5 et Safari 2. Via les Carnets de La Grange.
Browser support for CSS3 and HTML5 — Tableaux synthétiques pour connaitre le degré de prise en charge de HTML5 et CSS3 par les principaux navigateurs du marché : Safari 4 (Win), Firefox 3.5 (Win), Google Chrome (Win), Opera 10 (Win) et Internet Explorer 6, 7 & 8. Les propriétés les plus largement supportées (dans une optique d’amélioration progressive) sont : rgba(), hsla(), opacity(), border-radius (except Opera) et canvas.
Pour finir cette rubrique, je vous propose de lire ou relire HTML5 et l’avenir du web de Tim Wright (traduit par Goulven Champenois) qui fait le point sur les avancées technologiques apportées par la nouvelle version de HTML.

Typographie : au-delà des polices installées chez l’utilisateur

Utiliser n’importe quelle police sur un site web — L’article fait rapidement le point sur les différentes manières d’utiliser les polices de caractères sur son site web et présente la directive CSS3 @font-face qui commence à faire parler d’elle.

Pour que vos fontes puissent être intégrées à Internet Explorer, il faudra convertir les polices du format TTF (TrueType Font) vers le format EOT (Embedded OpenType) avec TTF to EOT Font Converter.

Si vous n’avez pas de belles fontes libres de droits sous la souris, je propose aux cinq premiers d’entre vous qui en feront la demande dans les commentaires, une invitation pour tester TypeKit. Grosso modo, une fois inscrit, vous pourrez faire une sélection de polices de caractère parmi près de 70 fontes classées par style (Serif, Sans Serif, Script et Exotic) ou par tag (clean, geometric, futuristic, grunge, gothic, etc.). Merci à bibinou pour l’invitation.

Framework CSS sans stress

Pour avoir une liste plus conséquente de frameworks CSS et une analyse plus touffue, je vous invite à lire :

CSS Float

Avoir les pieds dans la float n’est pas toujours agréable, alors voici quelques liens qui devraient vous aider à vous en sortir :

Understanding CSS Floats — La propriété float expliquée en texte, code et illustration. Des explications claires et didactiques en anglais.
CSS Float Theory — Dans la même veine que le lien précédent, en plus complet peut-être. Ce tour d’horizon sur float contient également une palanquée de liens qui valent également le coup d’oeil.
Floatutorial — Si je devais partir sur un ile déserte avec un seul site sur float, c’est certainement celui-ci que j’emporterais avec moi, ne serait-ce que pour les nombreux exemples concret mettant en oeuvre la propriété float.

Allez, encore un effort pour en savoir davantage sur cette propriété CSS passionnante (en français) :

Miscellanées

Last but not least, je termine cette revue de presse avec ces liens qui viennent de me tomber sous la souris :

Intégrateurs, montez au front — Voici le résumé de la conférence donnée par Stephane Deschamps à Paris-Web 2009. Cette intervention aurait pu s’appeler L’intégrateur, cet inconnu. Ce métier est mal connu, sans doute à cause de l’étendue des techniques et des savoir-faire qu’il faut connaitre et maitriser si possible.

]]> http://css4design.com/le-petit-journal-de-l-integrateur-web-html5-et-css/feed 13 DOM vs namespace pour implémenter HTML5 sur IE6, IE7, Firefox2, Camino, etc. http://css4design.com/dom-vs-namespace-pour-implementer-html5-sur-ie6-ie7-firefox2-camino-etc http://css4design.com/dom-vs-namespace-pour-implementer-html5-sur-ie6-ie7-firefox2-camino-etc#comments Fri, 17 Jul 2009 15:14:04 +0000 Bruno Bichet http://www.css4design.com/?p=3272

Sur webdevfr, les discussions vont bon train sur HTML5 : Yves Van Goethem soumet à notre attention deux méthodes disponibles aujourd’hui pour pallier les insuffisances des anciens navigateurs (Firefox 2) ou des mauvais élèves du W3C (IE6, IE7) :

DOM vs Namespace `html:`

Le DOM pour créer ~~from scratch~~ ex nihilo les balises manquantes. Cette méthode préconisée notamment par John Resig consiste à créer les éléments dont nous avons besoin via Javascript :


    <!--[if IE]>
        <script type="text/javascript">
            document.createElement("header");
            document.createElement("footer");
            document.createElement("nav");
            document.createElement("article");
            document.createElement("section");
        </script>
    <![endif]-->

Pour automatiser la création des éléments présents dans HTML5, Remy Sharp nous propose HTML5 enabling script :


   <!--[if IE]>
       <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
   <![endif]-->

Le préfixe html: pour déclarer l’élément dans son namespace :
```
<html:header>Ceci est un header</html:header>
```

Pour faire le point sur les avantages et inconvénients de ces deux techniques, voici l’excellent article How to get HTML5 working in IE and Firefox 2 suggéré par Adrien Leygues dans le fil de discussion en question.

Un script PHP à écrire…

Pour réunir le meilleur des deux mondes, Yves Van Goethem propose de servir les éléments HTML avec ce préfixe uniquement pour IE, le code serait réécrit par un moteur en back-end pour obtenir un script côté serveur (et non plus dépendant de Javascript) pour automatiser la prise en compte des balises HTML5 par IE, ce qui permettrait d’utiliser les nouvelles balises HTML5 dès avant-hier ! N’hésitez pas à vous manifester si vous avez déjà développé un script ou simplement si vous avez des idées sur la question.

En attendant Godot 2022 ^_^v

Voici un exemple de page HTML5 valide proposée par Remy Sharp dans HTML 5 Boilerplates utilisant le script html5.js :


    <!DOCTYPE html>
    <html>
        <head>
            <meta charset=utf-8 />
            <title>HTML 5 complete</title>
            <!--[if IE]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
            <![endif]-->
            <style>
                article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; }
            </style>
        </head>
        <body>
            <p>Hello World</p>
        </body>
    </html>

Notez le display: block pour déclencher la prise en compte des éléments HTML and the cat’s in the bag!.

Links for Free

]]> http://css4design.com/dom-vs-namespace-pour-implementer-html5-sur-ie6-ie7-firefox2-camino-etc/feed 5 Feuille de style CSS conditionnelle avec Conditional CSS http://css4design.com/feuille-de-style-css-conditionnelle-avec-conditional-css http://css4design.com/feuille-de-style-css-conditionnelle-avec-conditional-css#comments Wed, 11 Mar 2009 21:29:37 +0000 Bruno Bichet http://www.css4design.com/?p=2685

Conditional-CSS est un programme écrit en php4 et php5 (au choix) qui permet d’utiliser des commentaires pour cibler une dizaine de navigateurs par leur nom et leur version, à la manière des commentaires conditionnels ciblant les différentes versions d’Internet Explorer.

Les commentaires conditionnels de Conditional-CSS peuvent s’appliquer à l’ensemble d’une règle CSS ou à une seule de ses propriétés. Voici un exemple d’utilisation :

/* Conditional-CSS example */
a.button_active, a.button_unactive {
    display: inline-block;
    [if lte Gecko 1.8] display: -moz-inline-stack;
    [if lte Konq 3.1] float: left;
    height: 30px;
    [if IE 5.0] margin-top: -1px;
    text-decoration: none;
    outline: none;
    [if IE] text-decoration: expression(hideFocus='true');
}

Voici les navigateurs pris en charge par le script :

Internet Explorer
Internet Explorer Mac
Gecko (Firefox etc)
Webkit (Safari etc)
Opera
Konqueror
Safari Mobile (iPhone, iPod)
IE Mobile
PSP Web browser

Même si je ne suis pas fan de ce genre de technique — qui automatise d’une certaine manière les hacks CSS souvent décriés — force est de reconnaitre que l’auteur de c-css à fait du beau travail. Je garde l’adresse sous le tapis de souris : on ne sait jamais ;)

]]> http://css4design.com/feuille-de-style-css-conditionnelle-avec-conditional-css/feed 10 TweakPNG 1.3.0 http://css4design.com/tweakpng-130 http://css4design.com/tweakpng-130#comments Thu, 20 Nov 2008 14:12:04 +0000 Bruno Bichet http://www.css4design.com/?p=2501

Une nouvelle version de TweakPNG vient de sortir. La dernière datait de 2004 ! Parmis les nouveautés :

Prise en charge du chunk iTXt,
Utilisation des dernières version de zlib et libpng.
Le code binaire est désormais une application Unicode,
Le logiciel n’est pas compatible avec Window 95/98/ME,
Beaucoup de ménage dans le code source,
Quelques bugs réparés, mais d’autres bugs sont sûrement apparus qu’il faudra réparer à leur tour !
Passe de la licence GPLv2 à GPLv3.

Ce petit utilitaire est très pratique pour modifier la couleur par défaut des PNG transparents pour éviter le background disgrâcieux sous IE6 ;)

]]> http://css4design.com/tweakpng-130/feed 1