Journal du Webmaster

Intérêt de la compression

De nos jours, l’accent est souvent mis sur la performance des sites et les économies de bande passante. Les temps d’accès et de téléchargement se mesurent (très précisément avec de nombreux outils) en millisecondes. De nombreuses recommandations provenant de Google et Yahoo font mention de la compression des pages avant leur transit sur le réseau.

1. Le serveur compresse les données (code HTML, CSS…)
2. Les fichiers transitent par le réseau via HTTP
3. Le navigateur décompresse les données avant de les interpréter

Ce qui représentait une charge supplémentaire pour les serveurs web à l’époque où leur puissance était moindre, peut désormais devenir négligeable en regard des améliorations apportées, notamment pour les navigateurs mobiles. Si la compression impose une charge trop importante à votre serveur, il est possible de pré-compresser les contenus, les placer en cache et les délivrer directement.

Ces techniques qui sont prévues depuis HTTP/1.1 (1999) peuvent tout à fait être mises en œuvre pour les documents HTML mais aussi CSS, XML ou JavaScript. Il est inutile de s’en servir pour les fichiers binaires (images, vidéos, PDF…). Elles ne vous dispensent pas de réduire initialement la taille des fichiers HTML ou CSS (les “minifier”) en appliquant d’autres critères tels que la suppression des espaces excédentaires ou des commentaires inutiles.

Navigateurs

La première interrogation - dans le monde impitoyable de la création web et des guerres entre navigateurs modernes et antiques - concerne le support de cette fonctionnalité. Or, ici, bonne nouvelle : on peut considérer que la totalité des navigateurs supportent la décompression des pages avec HTTP/1.1 :

• Netscape depuis 4.06

• Microsoft Internet Explorer depuis 4.0*
• Opera depuis 5.12
• Firefox toutes versions
• Google Chrome toutes versions
• Safari toutes versions

* avec quelques petits bugs jusqu’aux versions 5.0 et 6.0 comprises

De plus, il incombe aux navigateurs d’envoyer un en-tête HTTP indiquant les types de pages compressées supportées . Si cet en-tête ne figure pas dans ceux reçus par le serveur, il lui suffit de ne pas activer la compression.

GET / HTTP/1.1Host: www.alsacreations.comAccept-Encoding: gzipUser-Agent: Firefox/3.6

Le serveur répond alors de la même manière, grâce à Content-Encoding, et en faisant suivre par le contenu compressé de la page.

HTTP/1.1 200 OKServer: ApacheContent-Type: text/htmlContent-Encoding: gzipContent-Length: 13337...

Deux formats coexistent :

• Deflate, algorithme qui couple LZ77 et le codage de Huffman.
• Gzip, évolution de Deflate, un peu plus performant, mieux supporté, plus répandu.

Mise en place au niveau des serveurs web

Attention : les indications suivantes doivent être ajustées selon votre configuration et vos besoins.

Apache est équipé du module officiel mod_deflate depuis sa version 2.0 qui utilise zlib, et de mod_gzip ou mod_deflate pour sa version 1.3. Ces modules sont désactivés par défaut, mais peuvent être activés dans la configuration générale du serveur si vous y avez accès. Par défaut mod_deflate permet de spécifier les types de fichiers à compresser à la volée grâce à la directive AddOutputFilterByType DEFLATE. Une fois ces modules disponibles vous pouvez également exploiter les fichiers .htaccess dans chaque répertoire pour plus de souplesse (voir au point suivant).

Apache 2

En ligne de commande avec les droits root pour activer les modules nécessaires :

a2enmod headersa2enmod deflate/etc/init.d/apache2 restart

Éventuellement en ajoutant aussi un fichier dans mods-available/deflate.load et un lien symbolique vers celui-ci dans mods-enabled/, ou une ligne dans httpd.conf :

LoadModule deflate_module /usr/lib/apache2/modules/mod_deflate.so

Sous Windows, il faudra indiquer le chemin du fichier .dll éponyme. Attention : si un lien symbolique vers mod_deflate.conf est déjà présent dans mods-enabled avec une directive de configuration générale, il est possible que tous vos fichiers soient déjà délivrés compressés. Faites un test avant tout - voir en fin d’article.

Puis il faut ajouter des directives à la configuration (par exemple dans un fichier situé dans /etc/apache2/conf.d/) pour compresser des types de fichiers bien spécifiques, dans un répertoire spécifique lui aussi. Ceci est recommandé lorsque l’on place toutes les feuilles de style dans un répertoire indépendant, ainsi que les JavaScripts, car le but n’est pas de (re)compresser tous les fichiers hébergés sur le serveur web mais de se focaliser sur l’essentiel. Il est donc possible d’indiquer <Location /css> pour n’appliquer ces règles que sur ce répertoire (on considère ici l’URL) et ses descendants, ou d’utiliser <Directory /chemin/absolu/vers/css> si l’on se réfère au système de fichiers.

<IfModule mod_deflate.c> DeflateCompressionLevel 1</IfModule><Location /> AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/atom_xml AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/x-httpd-php AddOutputFilterByType DEFLATE application/x-httpd-fastphp AddOutputFilterByType DEFLATE application/x-httpd-eruby SetOutputFilter DEFLATE SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary SetEnvIfNoCase Request_URI \.(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary SetEnvIfNoCase Request_URI \.(?:pdf|avi|mov|mp3|mp4|rm)$ no-gzip dont-vary BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html # Pour les proxies Header append Vary User-Agent env=!dont-vary</Location>

DeflateCompressionLevel

Indique le facteur de compression, de 1 (faible, par défaut) à 9 (fort).

AddOutputFilterByType DEFLATE text/html

Applique la compression sur les fichiers de type mime text/html

SetOutputFilter DEFLATE

Active le filtre compression.

SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary

Exclut les fichiers binaires de type .gif .jpg .jpeg .png

BrowserMatch ^Mozilla/4 gzip-only-text/html

Applique ou désactive la compression (et variantes) pour certains navigateurs. Dans l’exemple ci-dessus, on exclut Netscape 4.x qui gère mal la compression des types autres que text/html, et les 4.06, 4.07, 4.08 qui le font encore plus mal pour tous les types de fichiers. La dernière instruction BrowserMatch rétablit la compression pour Internet Explorer qui s’identifiait aussi en tant que Mozilla/4 dans l’en-tête User-Agent.

N’oubliez pas de redémarrer (restart) ou recharger (reload) Apache après chaque modification de la configuration.

/etc/init.d/apache2 restart

Apache 1.3

Activation du module dans httpd.conf :

LoadModule gzip_module modules/mod_gzip.so

Puis configuration, semblable à celle mentionnée auparavant :

<IfModule mod_gzip.c>   mod_gzip_on Yes   mod_gzip_can_negotiate Yes   mod_gzip_static_suffix .gz   AddEncoding gzip .gz   mod_gzip_update_static No   mod_gzip_command_version '/mod_gzip_status'   mod_gzip_temp_dir /tmp   mod_gzip_keep_workfiles No   mod_gzip_minimum_file_size 500   mod_gzip_maximum_file_size 500000   mod_gzip_maximum_inmem_size 60000   mod_gzip_min_http 1000   mod_gzip_handle_methods GET POST   mod_gzip_item_exclude reqheader "User-agent: Mozilla/4.0[678]"   mod_gzip_item_include file \.html$   mod_gzip_item_include file \.htm$   mod_gzip_item_include file \.php3$   mod_gzip_item_include file \.php$   mod_gzip_item_include file \.js$   mod_gzip_item_include file \.css$   mod_gzip_item_include mime ^text/   mod_gzip_item_exclude mime ^httpd/unix-directory   mod_gzip_item_exclude mime ^image/   mod_gzip_dechunk Yes   mod_gzip_add_header_count Yes   mod_gzip_send_vary Yes</IfModule>

N’oubliez pas de recharger Apache après chaque modification de la configuration.

/usr/sbin/apachectl graceful

Les options sont relativement parlantes (pour les anglophones), elles ne seront pas détaillées dans cet article.

Microsoft IIS

IIS supporte la compression depuis la version 4, mais celle-ci est victime de bugs. Dans la version 5, les efforts de Microsoft n’ont pas porté leurs fruits puisque celle-ci est toujours instable. C’est enfin dans la version 6 que la compression HTTP a été finalisée. Cependant elle nécessite quelques manipulations (voir documentation Microsoft : Using HTTP Compression for Faster Downloads (IIS 6.0) et tutoriel en français pour activer la compression GZip dans IIS6.

Les autres serveurs restent marginaux. Lighttpd est équipé du module bien nommé mod_compress.

Solutions rapides avec un .htaccess pour Apache

Les fichiers .htaccess sont des fichiers placés à la base d’un répertoire et modifiant le comportement du serveur pour les fichiers qu’il contient. On peut y placer les instructions de configuration mentionnées ci-dessus (sans la directive Location ou Directory).

Voici des exemples testés et exploités sur Alsacreations.com. Si vous obtenez des erreurs HTTP 500 après la mise en place du fichier .htaccess, vérifiez sa syntaxe, l’adéquation avec votre type de serveur et la disponibilité des modules. Vous pouvez également combiner le tout avec des options de cache (mod_expires dans l’exemple pour Apache 1.3) pour éviter de servir plusieurs fois le même contenu aux visiteurs et sa compression par le serveur - ceci relève d’un autre article.

Apache 2

Contenu du fichier .htaccess, dans le répertoire contenant les fichiers CSS et JavaScript.

# Apache 2.0SetOutputFilter DEFLATEAddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript

Apache 1.3

# Compression pour fichiers CSS<IfModule mod_gzip.c>    mod_gzip_on       Yes    mod_gzip_dechunk  Yes    mod_gzip_minimum_file_size 1024    mod_gzip_maximum_file_size 100000    mod_gzip_item_include file \.css$    mod_gzip_item_include mime ^text/css$</IfModule><IfModule mod_expires.c>    ExpiresActive on    ExpiresDefault "access plus 1 month"    ExpiresByType text/css "access plus 1 day"    ExpiresByType image/png "access plus 1 week"    ExpiresByType image/gif "access plus 1 week"    ExpiresByType image/jpeg "access plus 1 week"</IfModule>

# Compression pour fichiers JS<IfModule mod_gzip.c>    mod_gzip_on       Yes    mod_gzip_dechunk  Yes    mod_gzip_minimum_file_size 512    mod_gzip_maximum_file_size 1000000    mod_gzip_item_include file \.js$    mod_gzip_item_include mime ^application/x-javascript.*</IfModule># Cache<IfModule mod_expires.c>    ExpiresActive on    ExpiresByType application/x-javascript "access plus 1 month"</IfModule>

Solution alternative en PHP

La fonction ob_gzhandler et l’ensemble des fonctions de type ob_* disponibles depuis PHP4 permettent la gestion du tampon de sortie, c’est à dire des données qui seront envoyées au navigateur. Il est alors possible de générer le contenu complet de la page et de le compresser avec Gzip avant envoi. On active le tampon en début de script avec ob_start, et on le vide à la fin avec ob_end_flush.

La fonction ob_gzhandler a le mérite de vérifier les types de compressions supportés par le navigateur (gzip, deflate ou aucun) avant de retourner le contenu du tampon de manière appropriée. Si le navigateur ne supporte pas les pages compressées, cette fonction retournera false.

<?phpob_start("ob_gzhandler");?>... Le reste du code ...<?phpob_end_flush();?>

Bien sûr, ceci est à adapter en fonction de la structure de votre site. Il ne suffit pas toujours de placer ces instructions en début et en fin de script PHP car de nombreux CMS utilisent déjà leur propre système de buffer (tampon) interne.

Tests dans la pratique

Vous pourrez aisément vérifier le bon déroulement du transfert et de la décompression en vérifiant les propriétés de la page dans le navigateur (dans Firefox : clic bouton droit, Informations sur la page, onglet Général, Taille). Comparez la taille du fichier original et la taille lue (à l’octet près).

Souvenirs, souvenirs

Certains se souviennent peut-être qu’Alsacréations avait organisé deux petites rencontres de sympathisants à Strasbourg, en 2005 et en 2006.

Quatre ans plus tard, on s’est dit qu’il serait sympa de renouer avec cette “tradition” ancestrale et de proposer une nouvelle rencontre en Alsace (le truc en haut à droite sur la carte).

Le principe, comme les fois précédentes, est de discuter en soirée autour d’un verre de l’amitié, voire de manger un bout dans un restau.

L’originalité de cette édition 2010 est que nous allons prévoir un préambule “technique” sous forme d’ateliers pratiques présentés par ceux qui en auraient envie et sur des sujets variés : CSS3, HTML5, Microformats, jQuery, Accessibilité, CMS, ou autre.

On prévoirait ainsi 3 ou 4 ateliers (ou plus si nécessaire) de 15 à 30 min et animés par des membres motivés. Si vraiment l’idée séduit beaucoup, on pourrait aller jusqu’à louer une salle tout équipée avec équipement de projection.

Après cette étape “technique”, on passe aux choses sérieuses : on boit un coup !

Où, quand, comment ?

La date retenue est le vendredÿ 16 avril 2010. Le lieu (quelque part au centre ville de Strasbourg) et les modalités seront annoncés dès que possible, mais voici une proposition :

• - Début des réjouissances (ateliers pratiques) : 18 heures (compter une heure)
• - Partie “apéro informelle” à partir de 19h
• - Puis éventuellement un repas avec les plus motivés, vers 20h - 20h30.

Au delà des aspects du web et de la technique, l’objectif est de se rencontrer et de passer ensemble une excellente soirée. Merci de confirmer votre présence en votant pour le sondage et/ou en laissant un commentaire dans ce sujet.

Note importante : cette rencontre n’est pas du tout réservée aux membres ou aux sympathisants Alsacréations. Il s’agit d’un regroupement plus général d’internautes et de personnes concernées par le Web et les standards en général.

EDIT : Voici les ateliers éventuellements prévus :

• “Jouons avec CSS3″ : proposé par Raphaël Goetter (confirmé)
• “Comment gérer IE6″ : Proposé (sérieusement ?) par Laurie-Anne
• “Accessibilité des documents PDF” : proposé par Victor Brito (confirmé)
• “Découpe HTML/CSS pertinente” : proposé par FranckHTML
• “Intégration d’une newsletter” : proposé par Corinne
• “Présentation de jQuery” : proposé par Teles

Présentation du concours

Vous êtes le meilleur ? Sachez le démontrer en réalisant votre CV en ligne que vous allez présenter aux yeux des Alsanautes tout en exploitant les langages web à bon escient.

Modalités

Créez votre page de Curriculum Vitae en tenant compte de critères tels que l’originalité, l’esthétique, les prouesses techniques et la conformité aux standards.

Les propositions seront soumises aux votes et commentaires des membres d’Alsacréations pendant une quinzaine de jours.

Si vous n’êtes pas sur le marché de l’emploi, rien ne vous empêche de participer en fournissant des informations totalement fausses et inventées.

En terme de technologies, Flash est autorisé à condition qu’il y ait une alternative pertinente consultable sans plugin.

HTML5, CSS3, librairies JavaScript, et micro-formats sont autorisés (voire recommandés), à condition que le site reste consultable sur les navigateurs actuels (avec “dégradation gracieuse” sur les plus anciens).

Vous devrez héberger la page et indiquer le lien ainsi qu’une capture d’écran.

Attention : un portfolio n’est pas forcément un C.V. Le concours se limite à la page “CV”.

Participer au concours

Qu’est-ce qu’on gagne ?

Ni sponsor, ni lot cette fois-ci. Les gagnants seront publiés en ligne et auront l’honneur de bénéficier d’une visibilité durant la période du concours, ainsi que des critiques constructives sur leurs œuvres.

Lire les modalités générales des concours (FAQ)

On en parle sur le Forum…

La nouvelle version 10.5 d’Opera est disponible en version finale depuis aujourd’hui. Elle intègre la version 2.5 du moteur de rendu Presto.

Parmi les nouveautés, on notera, en matière de support des standards, les améliorations suivantes :

• la prise en charge de la valeur collapse de la propriété CSS 2.1 visibility,
• le support de la propriété CSS 3 border-radius (et sans préfixe, s’il vous plaît !),
• le support des modules arrière-plan et bordures, transformations 2D et transitions de CSS 3,
• l’implémentation de l’élément HTML 5 video.

Pour plus de détails, on consultera les changelogs d’Opera 10.5 pour Windows, ainsi que la liste des spécifications Web prises en charge par Presto 2.4 (la liste pour Presto 2.5 n’est pas encore disponible).

Bref, à l’heure où le choix du navigateur arrive enfin explicitement pour les utilisateurs de Windows, Opera 10.5 possède des atouts fort attrayants non seulement pour les utilisateurs, mais surtout pour les intégrateurs et développeurs Web.

Pour le moment, seule la version pour Windows est disponible, les versions pour les autres systèmes d’exploitation pris en charge (notamment Mac OS X et Linux) devant sortir bientôt.

Le tutoriel consacré aux ombrages en CSS3 a été complété par une astuce suggérée par Ladytron, concernant Internet Explorer et le support de l’ombrage, plus précisément l’effet de halo.

Pour rappel, IE (version 8 comprise) n’implémente ni box-shadow ni text-shadow. Pour combler ces lacunes, on peut employer des filtres, dont Glow (filtre propriétaire donc forcément non valide).

La syntaxe :

    filter:progid:DXImageTransform.Microsoft.Glow(Color=#c0c0c0,Strength=8);

L’attribut Color désigne la couleur du halo.
L’attribut Strength désigne la taille de l’effet.

Voici une illustration : (Voir le résultat sur Internet Explorer)

Le rendu est loin d’être parfait… mais dans certains (rares?) cas il peut suffire.

Code utilisé :

Bien entendu, pour éviter de gêner les bons élèves, nous pouvons appliquer cette bidouille uniquement sur Internet Explorer à l’aide d’un commentaire conditionnel.

<!--[if lte IE 8]>  <style type="text/css">  .ombrage {filter:progid:DXImageTransform.Microsoft.Glow(Color=#c0c0c0,Strength=8);zoom: 1;  }   </style><![endif]-->

Source : tutoriel consacré aux ombrages en CSS3

Cet article est la réécriture d’une astuce publiée en 2008.

Le format PNG permet de gérer des images RVB dotées d’une couche alpha, c’est à dire d’indications de transparence graduelle. Contrairement au format GIF, il ne s’agit pas d’une transparence binaire (un pixel est soit transparent, soit opaque), mais bien d’une transparence graduelle: chaque pixel peut être un peu, beaucoup ou pas du tout transparent (256 nuances).

C’est donc un format très pratique pour le design web. Sauf que… Papy IE6, version vieillissante et en perte de vitesse d’Internet Explorer (mais toujours parmi nous en 2010), ne supporte pas la transparence PNG. Heureusement, les versions 7 et 8 d’Internet Explorer interprètent correctement le format PNG. Mais pour la version 6, lorsque l’on doit assurer son support, on peut avoir besoin de trouver une parade.

Les moyens disponibles sont nombreux. Vous avez peut-être entendu parler de «PNGfix» ou d’autres solutions miracles. En fait, les solutions miracles n’existent pas. Je vous propose donc une liste restreinte de solutions, par ordre de préférence.

Le PNG8 avec couleurs RGBA

C’est quelque chose de peu connu, mais le PNG8, c’est-à-dire la version «couleurs indexées» du format PNG (256 couleurs maximum), peut utiliser la transparence graduelle. Contrairement au format GIF par exemple, chaque couleur définie pourra être une couleur RGBA (avec un taux de transparence) plutôt qu’une couleur totalement opaque ou une transparence complète.

Si cette propriété du PNG8 est peu connue, c’est que des logiciels populaires comme Photoshop ne la gèrent pas! Le principal logiciel de création ou retouche d’images qui gère ce format est Fireworks (édité par Adobe, anciennement par Macromedia). (On peut aussi citer pngnq disponible comme petit utilitaire graphique pour OS X et comme exécutable binaire pour Windows.)

Quel intérêt pour IE6? Il ne comprendra toujours pas la transparence graduelle, mais il affichera tous les pixels opaques, et considèrera les autres (tout pixel largement ou même faiblement translucide) comme complètement transparents. En créant son image avec soin, on pourra avoir un effet «comme du PNG32» dans tous les navigateurs modernes, et un rendu «comme du GIF» avec IE6, en utilisant une seule image. Cerise sur le gâteau: quand on veut intégrer une image avec translucide dans un design, le PNG32 va très vite donner des fichiers très lourds (30 ou 50 Ko pour un détail…), tandis qu’en PNG8 avec transparence alpha on va rester sur des poids de fichier beaucoup plus raisonnables.

En savoir plus: PNG 8 Bits avec transparence Alpha, c’est possible!

Ce format (PNG8 avec transparence alpha) est donc idéal dans de nombreuses situations. Son principal problème est qu’il est géré par très peu de logiciels d’édition.

Éviter le masque gris moche dans IE6

Parfois, on pourrait se permettre d’afficher un PNG translucide comme une image complètement opaque dans IE6. Le problème alors est qu’IE6 va afficher une horrible couleur grise comme fond de l’image. Mais si on pouvait choisir la couleur de fond de l’image dans IE6, ça serait pas mal, hein?

Ça tombe bien, on peut. Cette solution de «dégradation gracieuse» consiste à utiliser un PNG avec transparence alpha (PNG32 ou PNG8) et à spécifier une couleur de fond «par défaut», le bKGD chunk de son petit nom. Un logiciel comme GIMP permet de l’enregistrer avec l’option «Enregistrer la couleur de fond» du dialogue d’enregistrement. Fireworks parle de «matte» (en anglais) ou de «mattage» (en français). Photoshop, encore une fois, se montre incapable d’enregistrer cette information (du moins dans la version CS3).

Si vous utilisez Windows, et ne souhaitez pas utiliser Gimp ou Fireworks, vous pouvez utiliser le petit utilitaire TweakPNG pour rajouter le paramètre bKGD.

Substituer un format différent

Encore une astuce de dégradation gracieuse.

Si vous utilisez les commentaires conditionnels ou un autre moyen pour viser IE6, vous pouvez utiliser des images de fond en PNG32 ou PNG8 avec transparence alpha pour les navigateurs modernes, et spécifier une image en GIF ou PNG8 avec transparence binaire, voire un JPEG, pour Papy IE6.

Voilà, on a fait le tour des principales options de dégradation gracieuse. Je vous les recommande chaudement. Mais si vraiment vous voulez un résultat visuellement identique dans IE6, je vous laisse lire la suite de cet article (et pendant ce temps j’appelle les hommes en blancs, je crois que vous avez besoin d’aide mon ami(e)).

Un script JS qui utilise le VML

Le script DD_belatedPNG de Drew Diller est une trouvaille ingénieuse qui consiste à utiliser la technologie VML (ancêtre de SVG…) intégrée à IE6 pour afficher des images PNG avec transparence graduelle.

Le script est assez efficace, et pose un peu moins de problèmes que les filtres DirectX (voire plus bas), mais gardez à l’esprit que le script est présenté comme une version «alpha», donc potentiellement (très) instable. À tester consciencieusement!

Les filtres AlphaImageLoader

Internet Explorer 6 intègre le support de fonctions propriétaires permettant de faire appel à DirectX pour certaines manipulations graphiques. L’une de ces manipulations graphiques consiste à intercaler, entre le fond d’un bloc et son contenu, une image avec transparence graduelle.

On peut utiliser cette fonctionnalité via JavaScript, mais nous passerons ici par la propriété CSS non standard filter. Afin d’éviter que cette propriété ne s’applique à IE7 (ou 8 ou 9) également, et pour garder un code CSS valide par ailleurs, on utilisera un commentaire conditionnel:

<!-- Code à insérer dans le "head" de la page --><!--[if lte IE 6]><style type="text/css" media="screen">#bloc {  background: none; /* Il faut supprimer l'image de fond    s'il y en a une de déclarée dans la feuille de styles principale */  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(    src="/chemin/vers/mon-image.png", sizingMethod="scale");}</style><![endif]-->

Attention, si on place cette propriété dans une feuille de styles externes (une feuille de correctifs CSS pour IE6 et inférieurs appelée via un commentaire conditionnel, par exemple), le chemin ne s’appliquera pas depuis la feuille de style (comme c’est normalement le cas en CSS), mais depuis la page HTML. Une solution pour ne pas s’emmêler les pinceaux: utiliser des chemins absolus, commençant par /.

Le code ci-dessus permet donc d’afficher l’image PNG, qui sera étirée (sizingMethod="scale") dans le bloc. Les valeurs possibles pour la propriété sizingMethod sont:

• crop (rogne l’image pour qu’elle tienne dans le bloc);
• image, valeur par défaut (réduit ou élargit le bloc pour correspondre aux dimmensions de l’image);
• scale (étire l’image aux dimmensions du bloc).

Les limites de cette méthode

Tout d’abord, il faut bien noter que le filtre AlphaImageLoader ne substitue pas une image (avec transparence PNG activée) à l’image de fond d’un bloc. L’image placée en «fond» du bloc (en fait entre le fond et le contenu) n’est pas une image de fond à proprement parler, et on ne pourra pas utiliser les propriétés CSS pour les images de fond.

Donc:

1. pas de background-position (et pas d’équivalent via des propriétés d’AlphaImageLoader);

2. pas de background-repeat (et pas d’équivalent… sauf peut-être sizingMethod="scale" pour les images unies, sans motif, et dans les cas où on aurait pu utiliser une image de fond de 1px de haut répétée en hauteur — ou une image de 1px de large répétée en largeur).

Une autre limite importante vient du fait que pour que cela fonctionne, le bloc doit avoir le layout. Il faudra donc peut-être également conférer le layout au bloc, par exemple de la manière suivante:

<!--[if lte IE 6]><style type="text/css" media="screen">#bloc {  zoom: 1; /* HasLayout */  background: none;  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(    src="/chemin/vers/mon-image.png", sizingMethod="scale");}</style><![endif]-->

Au sujet du HasLayout, on pourra lire:

HasLayout et bugs de rendu dans Internet Explorer 6-7.

Effets secondaires du filtre Alphaimageloader

Le filtre DirectX AlphaImageLoader a plusieurs effets secondaires. Le principal est que le texte à l’intérieur d’un élément sur lequel on a appliqué le filtre n’est plus sélectionnable, les liens plus cliquables, etc. Cela se corrige le plus souvent en passant le texte ou les liens en positionnement relatif. Mais cela peut être un peu plus subtil et il y a des cas particuliers assez retors, comme par exemple quand l’élément sur lequel on utilise le filtre est positionné en absolu.
Cf. Effets secondaires du filtre AlphaImageLoader en cas de positionnement absolu.

On pourra aussi lire PNG alpha transparency: AlphaImageLoader filter flaws.

Enfin, il faut noter que l’utilisation du filtre AlphaImageLoader n’est pas neutre en termes de performances. D’aucuns conseillent de ne pas l’utiliser: Ne pas filtrer les PNGs, par Éric Daspet.

Automatiser l’utilisation de Alphaimageloader avec JavaScript

Plusieurs scripts JavaScript se proposent d’appliquer automatiquement des filtres AlphaImageLoader dans IE6, soit pour les images dans le code HTML, soit pour les images de fond CSS, soit pour les deux.

Celui-ci est régulièrement cité: IE PNG Fix, par Angus Turnbull.

Le tutoriel “Créer des coins arrondis sans images”, rédigé le mois dernier, vient d’être partiellement remis à jour.

La version initiale proposait, en guise d’alternative pour Internet Explorer, la technique JavaScript “Roundies”, qui nous a paru à la fois légère et simple à mettre en œuvre.

Une autre technique vient d’être ajoutée au tutoriel : celle des comportements .htc spécifiques à Microsoft. Dans la pratique, cette méthode très simple semble plus compatible que Roundies pour les cas particuliers (transparence, images d’arrière-plan). Le rendu visuel avec .htc nous semble également plus réussi sur Internet Explorer.

Vous disposez à présent de tous les atouts pour créer de beaux effets arrondis sur tous les navigateurs (ou presque). Qu’attendez-vous encore ?!

Selon un billet posté le 29 janvier 2010 par Rajen Sheth (Chef de produits Google Apps) sur le blog des applications de Google, le géant annonce que ses produits ont besoin de navigateurs modernes pour fonctionner pleinement.

La conséquence est que le support des “anciens navigateurs” tels qu’Internet Explorer 6 ne sera plus assuré pour les outils Google Docs et Google Sites, de même que “d’autres navigateurs qui ne sont plus pris en charge par leurs propres constructeurs”. Et ce, dès le 1er mars 2010.

Google, très précis dans ses recommandations, nous incite à choisir entre les navigateurs suivants : Microsoft Internet Explorer 7.0+, Mozilla Firefox 3.0+Google Chrome 4.0+, Safari 3.0+ (à noter la curieuse absence d’Opera dans cette liste).

La plupart des réactions à cette annonce surprise sont enthousiastes. Quelques réfractaires rappellent toutefois qu’IE6, bien qu’ancien, est bien moins gourmand en ressources que ces successeurs et qu’ils recommandent à leurs clients de ne pas migrer vers IE7/IE8.

Note : selon les stats actuelles mondiales de Statcounter, le navigateur IE6 représenterait encore environ 13% du marché.

Aujourd’hui, le W3C vient de lancer un groupe de travail dédié au RDFa : le RDFa Working Group.

La mission de ce nouveau groupe de travail consistera à encourager l’utilisation du RDFa, un format permettant d’embarquer des données structurées dans les documents Web, autrement dit un format ouvrant la porte à l’univers du Web sémantique (d’ailleurs, le groupe de travail est rattaché à l’activité Web sémantique du W3C).

Le groupe de travail aura également comme mission de faciliter l’écriture de données au format RDFa, en promouvant son adoption dans le HTML, le XHTML et le XML, ainsi qu’en aidant les développeurs à créer des applications en RDFa.

Enfin, le groupe de travail ne se désintéressera pas des travaux du groupe de travail du HTML, notamment ceux concernant l’implémentation du RDFa dans le HTML 5 : d’ailleurs, un brouillon de travail intitulé HTML+RDFa, A Mechanism for embedding RDF in HTML peut être consulté à ce sujet.

Les titres de section

Ce que l’on appelle « hiérarchie des titres » ou plus simplement hiérarchie est l’ensemble des éléments titres de section balisés de H1 à H6 (que l’on appellera “Hn“). Le W3C définit le titre de section comme un élément qui décrit brièvement le sujet de la section qu’il introduit. Ce titre de section ne doit pas être confondu avec le titre de la page, balisé avec title, exclusivement dans le head du document.

La hiérarchie des titres sert principalement à structurer le document  mais elle a bien d’autres utilités, voire même nécessités :

• Pour les utilisateurs de lecteurs d’écran, les titres Hn sont un moyen efficace de naviguer dans la page, mais les logiciels de lecture d’écran ne peuvent générer une liste de titres compréhensible que si la hiérarchie des titres du site est correcte.
• Pour les robots indexeurs des moteurs de recherche, les titres de haut niveau représentent du contenu important et ont donc une pondération plus forte que le reste du contenu. Ces titres doivent donc être présents et bien utilisés.
• Les visiteurs scannent les pages d’un site plus qu’ils n’en lisent le contenu. Les titres de section et de sous-section étant des points de repère, il est important que ces titres soient présents et annoncent le contenu qui les suit.

Dans la pratique

La hiérarchie des titres d’une page web doit être :

• Logique : elle doit suivre le schéma d’une table des matières comme pour tout document textuel.
• Continue : elle doit commencer par un H1 et ne pas comporter de sauts de niveau (un H1 ne peut être directement suivi d’un H3, il doit y avoir au moins un H2 entre les deux).
• Pensée pour l’utilisateur, et non pour le référencement : les titres doivent être des titres et non des mots clés sans rapport avec ce qui suit, ni des paragraphes complets.
• Sémantique, et non visuelle : un élément Hn doit être utilisé pour sa valeur sémantique (titre de niveau n) et non pour son rendu visuel (qui peut être totalement transformé avec CSS).
• Ergonomique : Les utilisateurs sont habitués aux titres, ils les aident à se retrouver dans la page, tant papier que virtuelle, et à aller à l’essentiel de l’information. La présence de titres de section rend également le texte plus digeste et lisible  et de fait aide à retenir l’attention, très volatile sur Internet, du lecteur.

Note :

Peut-il y avoir plusieurs H1 dans une même page ?

Oui, c’est tout à fait possible. Bien que certains pensent que H1 ne doit être utilisé qu’une seule et unique fois dans la page  aucune règle, sémantique ou autre, ne tranche sur ce sujet. L’élément H1 doit désigner un titre de niveau 1, si la construction de la page implique la présence de plusieurs titres de niveau 1, il est tout à fait logique d’utiliser l’élément approprié : H1. Par contre, l’élément H1 ne doit en aucun cas être utilisé, à tort, pour « booster le référencement » d’un site en y mettant autre chose que des titres de niveau 1.

Après de nombreuses rumeurs et spéculations, Apple vient de lancer l’iPad, fusion entre un iPod géant et un tablet PC (ou plutôt Mac). Outre l’objet innovant en soi, sur lequel nous serons probablement nombreux à poser un regard curieux et qui sera disséqué par de nombreux sites, penchons-nous sur les implications pour la conception web.

La résolution

Premièrement, l’iPad affiche une résolution native de 1024×768 pixels avec un écran LED. Ce sont des dimensions déjà relativement éprouvées, qui paraissent toutefois un peu décevantes, la plupart des netbooks récents parviennent à un niveau supérieur. Dans la majorité des situations, nous sommes tous habitués à prendre en compte ce paramètre et à concevoir des sites lisibles et confortables avec une largeur d’écran de 1024 pixels, par exemple en utilisant des grilles ou des frameworks CSS. Nous avons donc encore de nombreuses années devant nous à devoir considérer ces limites et notamment à penser à l’orientation de l’écran puisque l’iPad peut être utilisé horizontalement (1024 pixels de large) ou verticalement (768 pixels de large).

iTouch myself

Le navigateur embarqué est bien sûr Safari épaulé par le moteur Webkit. Le support de HTML5 et CSS3, pour les parties déjà implémentées à l’heure actuelle, est donc présent, c’est une bonne nouvelle. L’iPad continue sur la lancée de l’interface tactile multi-touch désormais courante sur les mobiles, et quelque peu expérimentée sur quelques PC de bureau classiques mais avec moins de succès. Tout site web se devra de posséder des contrôles assez larges pour recevoir le focus, c’est à dire tout simplement mettre en œuvre quelques bonnes pratiques de base en terme d’accessibilité.

La navigation se fait toujours avec le doigt, donc les contrôles présents sur la page ne doivent pas gêner le scroll ou déclencher d’action non désirée. Les éléments de formulaire notamment devront être suffisamment grands pour pouvoir être ciblés par le doigt qui offre une moindre précision que la souris. A priori, point de :hover ou drag & drop possible au sein du navigateur, c’est donc à éviter (je pense notamment aux frameworks JavaScript qui y font appel pour certains widgets). Notez qu’un clavier pourra être utilisable en option, mais cela restera anecdotique.

Formats

Point de surprise, l’iPad ne fait pas mieux que l’iPhone et l’iPod : le support de Flash est inexistant à l’heure actuelle. Il devrait le rester, car il est relativement difficile de concevoir contrôler du Flash avec le doigt dans une interface indépendante avec la même aisance que l’on connaît (c’est une zone devant recevoir et perdre le focus), et surtout car cela représenterait une concurrence face aux applications hébergées sur l’App Store notamment les jeux. Adobe rappelle par contre qu’il est possible d’exporter des applications complètes à partir de Flash, à l’aide de librairies spécifiques. En revanche il sera tout à fait possible de faire appel à JavaScript et SVG.

Les formats vidéo seront donc semblables à ceux déjà interprétés par l’iPhone et mis en avant par Mac OS X (H.264, M4V, MP4, AAC, Quicktime). Les players Flash ne pourront fonctionner donc le format de vidéo Flash FLV non plus. Pensez à des alternatives ou à des images cliquables pour permettre le téléchargement dans ces formats comme le font déjà les grands sites de partage vidéo.

Réseau

Du point de vue du réseau, l’iPad disposera du Wifi (802.11n) et de la 3G en option. La question de la réactivité et des débits se pose surtout dans le deuxième mode de navigation. Les utilisateurs surferont avec un débit moindre (7 Mb/s dans des conditions optimales, en réalité beaucoup moins), et avec une latence supplémentaire introduite par ce type de connexion mobile. Il convient donc toujours de concevoir des sites performants et légers.

L’App Store

Ceci ne concerne qu’indirectement le web, cependant l’iPad pourra télécharger/acheter des e-books, et exploiter les nombreuses applications déjà disponibles sur l’App Store et développées initialement pour l’iPod Touch et l’iPhone, avec un upscaling pour adapter leur résolution (le résultat risque de ne pas être très esthétique).

On pourra déplorer ce modèle très fermé et mercantile, qui oblige de nombreux éditeurs à concevoir une application spécifique développée avec le SDK (payant) alors qu’une simple application web pourrait convenir. Le modèle économique d’Apple ne l’autorisera probablement pas, tandis qu’il serait tout à fait possible de prévoir des applications web riches, facilement “installables” parmi les autres icônes, en HTML5 notamment permettant un stockage local si la connexion n’est pas établie. Ce point se résume à une décision politique en terme d’ergonomie pour l’installation, de création d’un catalogue d’applications web et de leur promotion auprès des utilisateurs. Bien entendu ce rêve n’aura que peu de chances de se réaliser car il empêche tout contrôle et toute vente directe. On voit mal Apple (avec plus de 3 milliards d’applications téléchargées sur l’AppStore) opérer un tel changement de cap.

Autres fonctionnalités

Un processeur à 1 GHz, une prise casque, des hauts-parleurs intégrés, un microphone intégré, un GPS, une boussole et un accéléromètre, le support de “nombreux” formats audio, vidéo et de documents (en consultation), une batterie avec une autonomie annoncée de 10 heures. Pour les applications on retrouve les grands classiques : Safari, Mail, Photos, iPod, iTunes, YouTube, iBooks, App Store, Maps, Notes, Calendar, Contacts, et la suite iWork.

Vidéo de présentation

Posons le décor

Pour étayer cet article, nous allons nous servir d’un fil rouge : mon site personnel Goetter.fr dont je viens de finir l’intégration, et destiné à servir de passerelle entre mes différentes activités.

Puisqu’il s’agit d’un site sans grande portée médiatique ni contraintes, j’ai pu en profiter pour tester HTML5 et moult règles CSS2 et 3 (border-radius, rgba, inline-block, transitions, rotations, @font-face, text-shadow, opacity, :before/:after et autres joyeusetés…).

Voyons en détails le cheminement et les écueils de cette intégration…

Les Grands Anciens

Rappel historique

Avant de nous lancer dans le vif du sujet, rappelons certains points essentiels. Le premier d’entre-eux est que CSS3 est toujours en état de brouillon pour une grande partie.

Fort heureusement, cela n’empêche pas les navigateurs récents de se lancer dans l’aventure en proposant des implémentations de propriétés considérées comme “sûres”.
En réalité, si l’on tient à se limiter aux normes finalisées, on va devoir se passer de CSS3, mais aussi CSS 2.1 qui ne l’est toujours pas (Statut “CR”) et devoir se baser sur une version de CSS 2.0 datant de… 1998.

A l’heure actuelle, quasiment tous les navigateurs modernes reconnaissent les propriétés CSS3 ou HTML5 employées dans cet article.

Le cas Internet Explorer

Internet Explorer 8, débarqué en janvier 2009 annonce fièrement reconnaître toutes les propriétés CSS2, ce qui n’était pas le cas de son prédécesseur, mais il est encore à la traîne en ce qui concerne CSS3.

Là où le bât blesse, c’est que les anciens IE7 et IE6 - qui ne reconnaissent pas tout CSS2 - sont toujours vigoureux sur de vastes parcs informatiques. On parle encore début 2010 de statistiques comprises entre 10 et 15% d’usage d’Internet Explorer 6.

Vaut-il mieux utiliser des technologies obsolètes (tableaux, frames, float) pour concevoir des sites qui fonctionnent partout même sur IE6, et donc perdre du temps en production pour gérer tous les différents bugs d’affichages ? …Ou proposer quelque chose de stable (CSS2, CSS3, voire HTML5) sur les navigateurs modernes et des “patchs” (correctifs) uniquement pour les mauvais élèves ?

En ce qui me concerne, j’ai pris la décision récemment de systématiquement privilégier la seconde alternative, que ce soit pour mon site personnel que nous allons décortiquer ici (Goetter.fr), mais aussi pour des sites professionnels. Je vous annonce à ce sujet qu’une nouvelle version du site Alsacreations.fr est en bonne voie.

La problématique est biaisée puisque les intégrateurs ont depuis plusieurs années l’habitude de procéder de la première manière et le passage à la seconde va forcément nécessiter un temps de veille technologique… un peu comme le passage des “tableaux” aux “tableless”.

HTML5, la charpente du site

HTML5, bien qu’apportant son lot de nouveautés et d’éléments, se base sur son prédécesseur HTML 4.01 dont il ne change pas radicalement au niveau de la logique et de la structure.

L’article d’introduction à HTML5 de julixyde survole quelques nouveaux éléments que j’ai employés sur mon site personnel.

Doctype

Le Doctype HTML5 s’écrit de la sorte :

<!DOCTYPE html>

Voilà, votre document est identifié comme étant en HTML5, il suffit à présent de nous servir des éléments inédits de cette nouvelle version.

Les nouveaux éléments

Parmi les nouveaux éléments apportés par HTML5, j’ai identifié la liste suivante pour la structure de mon site :

• <header> : en-tête de la page
• <nav> : liens de navigation
• <section> : section de contenu
• <figure> : pour regrouper des images et leur description
• <footer> pied de page

La plupart des navigateurs ne reconnaissent pas ces éléments (il seront identifiés comme étant de type “en-ligne” par défaut, ce que l’on peut comparer à un <span>), mais rien ne nous empêche de les utiliser en connaissance de cause en leur appliquant un display approprié (display:block ou autre).

Le hic : Internet Explorer 8 et versions inférieures nécessitent un code JavaScript afin de créer au préalable ces éléments dans leur DOM sous peine de ne rien afficher du tout.

Concrètement, il suffira d’appeler un script externe dès le début de la page de manière spécifique à IE :

<!--[if IE]><script src="scripts/html5-ie.js"></script><![endif]-->

Le code JavaScript du fichier html5-ie.js étant celui-ci :

document.createElement("header");document.createElement("footer");document.createElement("section");document.createElement("aside");document.createElement("nav");document.createElement("article");document.createElement("figure");

Ces petites manipulations vous permettent de disposer sans grosse difficultés des principales balises de structures HTML5 dans des pages tout en étant correctement interprétées par l’ensemble des navigateurs courants, y compris anciens. Attention cependant car celles-ci n’auront toutefois aucune valeur sémantique avant que les navigateurs ne les supportent officiellement.

L’attribut “role”

L’attribut “role” a été introduit dans (feu) XHTML2 afin d’ajouter du contexte aux éléments (de la sémantique).

Il est ainsi possible pour les agents utilisateurs et pour les applications accessibles riches (ARIA) d’exploiter ces informations complémentaires.

HTML5 définit une liste de valeurs pour l’attribut “role”. Les principales étant :

• main : définit le contenu principal d’un document
• secondary : représente une section unique et secondaire du document, tel que l’heure, la météo ou autre module de ce genre
• navigation : définit le menu de navigation du document. Typique de liens vers d’autres pages du site ou vers d’autres endroits de la page
• banner : située en haut de page, elle contient habituellement le logo de la société, les éléments publicitaires,…
• contentinfo : informations à propos du contenu de la page : notes, copyrights, mentions légales, …
• definition : représente la définition d’un élément
• note : correspond à une note entre parenthèse ou de bas de page
• seealso : indique que l’élément contient des données contextuelles au contenu principal de la page
• search : la section de recherche d’une page. Typiquement un formulaire de recherche

(Source W3C traduit par ma pomme)

Notez enfin que le Validateur HTML du W3C permet d’ores-et-déjà de valider du code HTML5 sans réglages particuliers à apporter.

La charpente HTML étant formée, passons à des choses plus excitantes et périlleuses encore : l’application de mises en forme modernes à notre document à l’aide des récentes innovations des feuilles de style CSS3.

Styles CSS2 et CSS3 pour la mise en forme

L’écriture des spécifications CSS progresse à grands pas, et la version 3 comporte déjà plusieurs modules implémentés dans les navigateurs récents. L’année 2010 verra certainement nos habitudes changées par les nouvelles possibilités offertes.

Vous pourrez constater l’état d’avancement des différents modules CSS sur la page récapitulative Cascading Style Sheets : Current Work.

Polices exotiques

Abandonnée en CSS2, la propriété @font-face réintégrée à CSS3 permet d’afficher une police exotique embarquée sur le serveur.

Avant toute utilisation de police non standard sur votre site web, prenez garde à deux points essentiels :

• Comme toute œuvre artistique, une fonte est soumise à des droits d’auteurs. Peu sont libres de droits;
• L’ensemble du fichier est téléchargé même si vous n’utilisez que quelques caractères. Certaines fontes pèsent plus de 1Mo et vont considérablement ralentir l’affichage de votre document.

Les navigateurs modernes tels qu’Opera 10, Firefox 3.5, Safari 3 et Chrome 4 reconnaissent cette propriété CSS3, mais là encore Internet Explorer ne facilite pas les choses en ne reconnaissant qu’un seul format de fichier de fonte (.eot), incompatible avec les autres ! Il est donc nécessaire de systématiquement proposer une double version des polices à télécharger : .ttf (ou .otf) pour le commun des mortels, et une version .eot pour IE.

Fort heureusement, de plus en plus d’outils proposent de vous prémâcher le travail, c’est le cas de Font-Face Generator de Font Squirrel.

Dans le cas de Goetter.fr, la fonte utilisée est “Hit The Road”, une police libre et gratuite de 9 Ko réalisée par Matthew Welch.

Une fois vos fichiers convertis à l’aide de Font-Face generator, il vous suffit de les appeler dans vos feuilles de styles de la sorte :

Version pour tout le monde, incluant uniquement la version truetype .ttf :

@font-face {font-family: 'NewRegular';src: local('NewRegular'), local('HittheRoad'), url('fonts/HITROAD.ttf') format('truetype');}

Version prévue dans la feuille de style dédiée à Internet Explorer à l’aide de commentaires conditionnels, incluant la version .eot :

@font-face {font-family: 'NewRegular';src: url('fonts/HITROAD.eot');}

Concrètement, il suffit ensuite de déclarer le nom de cette police dans la liste des valeurs de la propriété font-family, par exemple :

h1 {   font-family: "NewRegular", "Lucida Grande",Tahoma, "Trebuchet MS", Arial, Helvetica, FreeSans, sans-serif;} 

Sachez qu’Internet Explorer télécharge les deux fichiers de police (.eot et .ttf) et non pas seulement celui qui le concerne ! Soyez donc doublement vigilants quant au poids de vos fontes.
Une des solutions pour éviter ce problème serait d’appeler la police classique .ttf à l’aide d’un commentaire conditionnel excluant Explorer, tel que <!--[if !IE]>–> <link href=”not_ie.css” rel=”stylesheet” type=”text/css”> <!–<![endif]–>.

Ombrages sur le texte et les boîtes

La propriété CSS3 box-shadow crée un ombrage solide ou dégradé sur tous les éléments HTML et la propriété text-shadow crée une ombre autour des textes.

A l’heure actuelle, seuls les navigateurs basés sur les moteurs Gecko (Mozilla Firefox 3.1+) et sur Webkit (Safari, Chrome) reconnaissent la propriété box-shadow. En pratique, la propriété doit être préfixée par -moz- pour Gecko ou -webkit- pour Webkit pour fonctionner sur ces navigateurs. box-shadow devient donc -moz-box-shadow et -webkit-box-shadow.

Dans le cas de Goetter.fr, les ombrages ont été employés sur le texte du logo “Raphaël Goetter”, sur les quatre figures ainsi que sur les vignettes des images issues de Flickr.

Voici les règles CSS appliquées pour créer un halo autour des figures :

#content figure {  -moz-box-shadow: 1px 1px 13px #999;   -webkit-box-shadow: 1px 1px 13px #999;   box-shadow: 1px 1px 13px #999;}

Et voici ce qui a été mis en œuvre pour le texte du logo :

h1 {   text-shadow: 0px 0px 5px #fff; }

Ces propriétés non reconnues par Internet Explorer pourraient être simulées à l’aide de filtres propriétaires. Cependant, le résultat n’est pas toujours très esthétique et c’est pourquoi j’ai fait le choix de ne pas offrir d’alternative sur ce navigateur.

Plus d’informations sur ces propriétés (et leur compatibilité) dans un article sur les ombrages (box-shadox et text-shadox) qui y est consacré.

Coins arrondis

La propriété CSS3 border-radius accomplit le rêve ancestral du webdesigner de pouvoir créer facilement des coins arrondis sans images dans ses pages web.

Comme pour les ombrages, cette propriété est reconnue par tous les navigateurs récents (y compris Opera 10.5)… sauf Internet Explorer (y compris IE8), et là aussi des préfixes sont de mise. Border-radius devient donc -moz-border-radius sur Firefox et -webkit-border-radius sur Webkit.

J’ai appliqué des coins arrondis à plusieurs éléments de la page, notamment les liens de navigation au survol, les quatre figures, les images Flickr et les liens de réseau sociaux du pied de page.

Pour tous ces éléments, la syntaxe fut la même, par exemple :

header nav a:hover, header nav a:focus {  -moz-border-radius: 8px;  -webkit-border-radius: 8px;  border-radius: 8px;}

Afin de conserver cette fonctionnalité sur Internet Explorer, il a été nécessaire de recourir à un petit script JavaScript de 8ko : Roundies.js. J’en explique le mécanisme et la mise en oeuvre dans le tutoriel nommé “Créer des coins arrondis en CSS et sans images”.
Ce petit stratagème léger, uniquement appliqué à IE permet d’obtenir des coins arrondis aux différents éléments de la page sans l’apport l’images.

Transparence

Jouer sur la transparence est possible sans avoir recours à des formats d’images tels que le PNG transparent, non reconnu par IE6 nativement. Il suffit pour cela d’adopter l’écriture RGBa telle que nous la décrivons en détail dans le tutoriel “La transparence de couleur avec RGBa en CSS3″.

Sur Goetter.fr, les valeurs de transparence ont été appliquées sur les liens de navigation au survol ainsi que sur les bordures des quatre figures principales.

Pour ces éléments, la syntaxe employée fut, par exemple :

#content figure {  background: rgba(255,255,255,0.2);  border: 12px solid rgba(255,255,255,0.2);}

Comme prévu, la plupart des navigateurs prennent en charge cette valeur de transparence… à l’exception d’Internet Explorer, IE8 compris. Pour ce navigateur, il est possible de se rabattre sur le filtre propriétaire “Gradient” afin d’émuler partiellement cette propriété (voir article sus-cité).

Le souci est que ce filtre n’est pas compatible avec les autres effets appliqués à l’élément : il faut donc faire un choix entre la transparence, les ombrages ou les coins arrondis. En ce qui me concerne, j’ai fait le choix de conserver les arrondis sur IE.

Positionnement “avancé”

A l’heure où le positionnement flottant est devenu la principale solution de positionnement hors-flux, le moment est venu d’explorer d’autres voies.

Tout simplement parce que la propriété float n’a pas été conçue originellement pour positionner des blocs tel que nous le concevons actuellement, mais aussi en raison des nombreux bugs d’interprétation de certains navigateurs.

Il y a plusieurs mois déjà, Benjamin De Cock nous a concocté un excellent article permettant de découvrir la “Mise en page avancée grâce à la propriété Display”.

Quelques techniques évoquées dans cet article deviennent à présent utilisables en production, notamment la valeur inline-block de la propriété display. Cette valeur offrant les avantages des deux mondes : permettre aux éléments de s’afficher les uns à côté des autres (tels des “inline”) tout en leur attribuant des dimensions (tels des “block”).

Ce type de positionnement “avancé” a été choisi pour les éléments suivants :

• Le logo (titre <h1>) : afin de permettre au menu (lui aussi en ligne) de demeurer sur la même ligne
• Les titres de niveau 2 dans les pages de contenu (”à propos”, “contact”) : pour éviter qu’ils n’occupent automatiquement toute la largeur

#content section.presentation h2, #content section.contact h2 {  display: inline-block;}

Puisque tout n’est pas rose, signalons quand-même que display: inline-block n’est pas reconnu par les versions inférieures à Firefox 3.0, ni sur Internet Explorer pour les éléments HTML nativement de type “block”. Pour ce dernier, il faut ruser en appliquant des styles spécifiques 

#content section.presentation h2, #content section.contact h2 {  display: inline; /* Passage de block à élément inline */   zoom:1; /* Attribution du layout à l'élément */ }

Pour les versions de Firefox inférieures à FF3.0, il est nécessaire de recourir à la syntaxe propriétaire -moz-inline-stack dont le principe et l’application sont détaillés dans un article de Florent Verschelde :“Inline-block dans tous les navigateurs modernes?”.

Rotation

Les propriétés de Transformation CSS3 sont reconnues sur Firefox à partir de la version 3.5, sur Webkit (Chrome 1+, Safari 4+) et sur Opera à partir de la version 10.5

A condition de ne pas tomber dans l’excès, elles permettent d’offrir de petits agréments visuels sur les navigateurs récents. J’ai choisi de les employer dans les liens de mon pied de page : la liste des réseaux sociaux et les liens vers les deux sites d’Alsacréations : au survol, les images se tournent selon un angle de 8 degrés.

footer nav a:hover {  -moz-transform: rotate(8deg);   -webkit-transform: rotate(8deg);}

Conclusion

Ne nous leurrons pas : à l’heure actuelle, un certain nombre de dispositions doivent être prises avant d’intégrer les fonctionnalités nouvelles proposées sur cette page.

Si vous n’aviez à retenir que l’essentiel, ce serait :

• HTML5, même à l’état de brouillon, est déjà parfaitement utilisable en production (avec une astuce pour IE), sous réserve d’éviter les balises encore “conflictuelles” telles que <canvas>, <audio> et <video>.
• inline-block, c’est bien, utile, et ça marche… là aussi sous certaines conditions.
• Les effets CSS3 nécessitent tous (et pour un certain temps encore) de prendre en compte le “cas Internet Explorer”. Des alternatives existent en JavaScript, mais à un moment il faut faire un choix car on ne pourra pas obtenir un équivalent “au pixel près”.

Résultat sur différents navigateurs

Voici le résultat obtenu sur différents navigateurs courants actuellement :

• Internet Explorer 6 et 7
• Internet Explorer 8
• Firefox 3.5
• Safari 4
• Chrome 3 et 4
• Opera 10.1

Bonus : message d’avertissement pour IE6

Cette partie bonus ne fera pas plaisir à tout le monde, notamment certains modérateurs, mais s’il est un combat que je tiens à mener c’est celui de tout faire pour prévenir les internautes qu’Internet Explorer 6 est une antiquité obsolète et, surtout, peu sécurisée.

Pour ce faire, j’ai pour habitude d’afficher un bandeau contenant message d’avertissement en haut de mes sites web. A l’aide d’un commentaire conditionnel réservé à IE6, vous pouvez très facilement cibler ce navigateur et lui adresser un code HTML dédié :

<!--[if lte IE 6]>      <div class="alert-ie6">      Ici votre message d'avertissement pour IE6 le préhistorique      </div><![endif]--> 

N’hésitez pas à consulter le code source HTML de Goetter.fr pour vous inspirer du message d’avertissement proposé.

La nouvelle version 3.6 de Firefox est sortie aujourd’hui en version finale.

Les nouveautés de cette version sont résumées dans les notes de version.

Firefox 3.6  utilise Gecko 1.9.2, le moteur de rendu Web de Mozilla. Il est en développement depuis début 2009 et contient des améliorations pour les développeurs Web et ceux des modules complémentaires ainsi que pour les utilisateurs. Cette version, plus rapide et réactive, a été optimisée pour fonctionner sur les systèmes d’exploitation mobiles comme Maemo.

Fonctionnalités notables de Firefox 3.6

• Disponible dans plus de 70 langues - téléchargez votre version.
• Offre un nouveau type de thème appelé Personas, qui permet aux utilisateurs de changer l’apparence de Firefox en un simple clic.
• Protège votre navigateur contre les plugins qui ne sont pas à jour afin que vous puissiez naviguer en toute sécurité.
• Les vidéos natives et au format ouvert peuvent maintenant être visualisées en plein écran et gèrent la directive poster frame.
• Performance JavaScript, réceptivité générale du navigateur et vitesse de démarrage améliorées.
• Possibilité pour les développeurs Web d’indiquer si les scripts doivent fonctionner de manière asynchrone afin d’accélérer le temps de chargement des pages.
• Support permanent pour les polices Web téléchargeables via le nouveau format de police WOFF.
• Supporte les nouveaux attributs CSS comme les dégradés, la taille des arrière-plans et les évènements pointeurs.
• Supporte les nouvelles spécification DOM et HTML5 incluant l’API Drag & Drop et l’API File, qui permettent des pages Web plus interactives.
• Changement dans l’interaction entre les logiciels tiers et Firefox afin d’éviter les plantages.

Les développeurs peuvent trouver plus d’informations sur les changements et les nouvelles fonctionnalités dans le Mozilla Developer Center.

Lorsqu’elles sont redimensionnées arbitrairement via le code HTML (width="..." height="...") ou CSS (width: ... height: ...), les images doivent être lissées pour ne pas heurter l’œil du visiteur à cause d’effets d’escaliers disgracieux.

De nos jours les navigateurs modernes s’en sortent relativement bien, mais ce n’était malheureusement pas le cas sur les anciens navigateurs qui furent lancés à une époque où la puissance des ordinateurs était encore assez limitée pour ne pouvoir garantir le lissage de toutes les images lors d’une navigation web quotidienne.

A gauche l’image d’origine (250 pixels de large), à droite la même image pour laquelle l’attribut width="300" a été spécifié.

Capture sous Mozilla Firefox, Apple Safari, Google Chrome

Le résultat est propre et sans bavure.

Capture sous Opera

L’algorithme est un peu moins performant mais cela reste regardable.

Capture sous Internet Explorer 6 et 7

Cachez ces pixels que je ne saurais voir !

Il est néanmoins possible de forcer le lissage bicubique sur ces navigateurs dépassés grâce à deux astuces respectives, lors de l’agrandissement ou de la réduction des images.

Fix pour Internet Explorer 7

Pour Internet Explorer 7 il est possible d’utiliser une simple directive CSS, nommée -ms-interpolation-mode.

img { -ms-interpolation-mode: bicubic; }

L’autre propriété (par défaut) de -ms-interpolation-mode (qui a été introduit avec IE7) est nearest-neighbor.

Fix pour Internet Explorer 6

Il va falloir ruser pour créer un élément englobant l’image, modifier son apparence grâce à un filtre AlphaImageLoader qui permet le lissage, et masquer l’image d’origine elle-même en fixant son opacité à 0.

<span style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='galets.jpg', sizingMethod='scale');position: absolute; z-index: 100; width: 300px; display: inline-block;"><img src="galets.jpg" alt="" width="300" style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" /></span>

Résultat final sous Internet Explorer 6 et 7

Attention : ces contournements ne seront pas valides en CSS car il s’agit d’instructions propriétaires Microsoft. Vous pouvez bien entendu les placer dans une feuille de style spécifique aux navigateurs IE, ou à l’aide de commentaires conditionnels.

Ceci ne fonctionne que pour des images de type JPEG et GIF non transparent. L’idéal reste bien entendu de ne pas redimensionner les images ainsi “à la volée” dans le navigateur.

Learnivore.com est un agrégateur de screencasts (payants ou gratuits) que j’ai construit pour me former plus facilement à tout ce qui touche au développement Ruby, Rails et iPhone.

On voit apparaître de plus en plus de screencasts tournant autour du design, css, jquery et du développement sur iPhone en html/css/javascript, aussi je pense que ce site peut intéresser les lecteurs d’Alsacréations.

Le site dispose d’un flux rss et d’un compte twitter pour rester informé, et d’une recherche full-text pour trouver ce que vous cherchez.

Les suggestions sont les bienvenues!