Une petite larme à l'œil, vous lui répondrez des banalités que n'importe quel jeune de son âge trouverait sur Wikipedia. Mais forcément, cette époque trop lointaine ne lui évoquera rien. Il ne pourra pas comprendre, malgré tous vos efforts pour lui transmettre votre expérience vécue pendant plusieurs années.

Vous aurez beau lui évoquer sa supériorité écrasante sur tous ses rivaux de l'époque puisque IE6 peut se vanter d'avoir été utilisé par plus de 95% des internautes autour des années 2003.

Vous vous hasarderez à lui inculquer que ce monument de l'histoire du Web a accompagné toute une génération de concepteurs web pendant plus de six années durant lesquelles votre activité a été joyeusement rythmée par la correction de nombreux bogues de rendu CSS (dont une liste est tenue à jour sur le site Position Is Everything), de défauts d'interprétation des standards, de technologies ou éléments propriétaires et de multiples failles de sécurité accumulées au fil des ans.

Tandis que Microsoft annonce que son support d'Internet Explorer 6 cessera en 2014, voici un petit hommage pour la prochaine génération d'internautes qui n'aura pas la chance de connaître ce navigateur d'anthologie, qui représente encore de nos jours environ 6% du marché selon certaines statistiques.

Parce que certains souvenirs ne doivent pas disparaître, Parce que la « Guerre des Navigateurs » n'est pas un vague mythe des livres d'histoire, parce que de nouvelles guerres approchent... Souvenez-vous.

Quelques liens commémoratifs (liste non exhaustive) :

• http://www.ie6nomore.com
• http://www.bringdownie6.com
• http://ie6update.com
• http://www.dieie6.com
• http://www.saveie6.com
• http://www.w3junkies.com/toocool
• http://www.end6.org
• http://www.stopie6.com
• http://www.stoplivinginthepast.com
• http://dearie6.com
• http://www.ie6death.com
• http://ie6funeral.com
• http://isie6dead.com
• http://ripie6.com
• http://iedeathmarch.org

Exclusif : il est encore possible de télécharger IE6, "le nouveau navigateur de Microsoft" sur certains sites tels que Clubic. Chouette !

Une utilisation poussée

La propriété border-radius de CSS3 prévoit une utilisation plus poussée puisqu'elle permet d'accueillir deux valeurs pour chaque angle de boîte à modifier dans l'optique de générer des formes elliptiques. Voici comment pourrait se présenter un de ces codes :

.arrondi {
    width: 120px;
    height: 50px;
    border: 2px solid #000;
    -moz-border-radius: 12px / 24px; 
    -webkit-border-radius: 12px / 24px; 
    -khtml-border-radius: 12px / 24px; 
    border-radius: 12px / 24px; 
}

Comme vous pouvez le constater, l'utilisation d'un slash entre les deux valeurs est indispensable pour un souci de compatibilité entre les navigateurs. En effet en cas d'oubli de ce petit élément, nous avions une différence d'interprétation entre Firefox et Chrome. Cette erreur qui provenait de Chrome semble avoir été corrigée sur la dernière version du navigateur, mais autant prendre de bonnes habitudes de votre côté.

Les deux valeurs utilisées représentent l'arrondi horizontal, pour la première, et l'arrondi vertical, pour la seconde. Vous pouvez ainsi styliser vos angles arrondis en les écrasant un peu.

Mais encore... ?

En poussant le vice un peu plus loin on peut facilement imaginer construire un ovale. La construction d'un ovale respecte une règle assez simple que l'on pourrait résumer ainsi :

"Les dimensions des arrondis d'un ovale sont de moitié égales à celles du rectangle qui le contient."

Certains seront peut-être plus éclairés avec des chiffres, voici donc un exemple :

.ovale {
    width: 200px
    height: 320px;
    background: #9a4;
    -moz-border-radius: 100px / 160px; 
    -webkit-border-radius: 100px / 160px; 
    -khtml-border-radius: 100px / 160px; 
    border-radius: 100px / 160px; 
}

Nous avons ici une classe appliquée à un bloc qui va prendre comme valeurs 200px de largeur et 320px de hauteur. Nos arrondis prennent en valeurs 100px (soit la moitié de 200... si si promis) sur l'horizontale et 160px sur la verticale.

Vous aurez donc compris que le rond (ou cercle) est désormais facilement réalisable en CSS3. Cependant en terme de contenu textuel, n'espérez pas y mettre grand chose, ça se limitera, je pense, à une utilisation graphique (design). Est-il utile de vous rappeler que cette utilisation du CSS permettra un affichage correct uniquement sur les derniers navigateurs ? Il faut oublier toutes les versions de IE... attendons la version 9)

Allons plus loin

La valeur de la propriété border-radius peut être précisée pour réaliser une modification des angles au cas par cas :

.arrondi {
    width: 120px;
    height: 50px;
    border: 2px solid #000;
    -moz-border-radius: 10px 75px 10px 10px / 10px 30px 10px 10px; 
    -webkit-border-radius: 10px 75px 10px 10px / 10px 30px 10px 10px; 
    -khtml-border-radius: 10px 75px 10px 10px / 10px 30px 10px 10px; 
    border-radius: 10px 75px 10px 10px / 10px 30px 10px 10px; 
}

Le principe reste le même que d'habitude dans l'ordre de déclaration des valeurs, nous partons de l'angle haut gauche pour finir à l'angle bas gauche en faisant le tour de la boîte. Tout ce qui se trouve à gauche du séparateur de valeurs (le slash) traite les dimensions horizontales des arrondis, ce qui se trouve à droite traite les dimensions verticales. Nous avons donc ce schéma :

Cette propriété offre donc de nouvelles possibilités, combinée avec les propriétés de transformation et de transition (entre autres) vos styles prendrons une nouvelle dimension.

Si, sur l'écran de votre ordinateur, vous appréciez les onglets, le Speed Dial, voire la synchronisation de vos signets et notes, Opera Mini 5 et Opera Mobile 10 combleront l'internaute mobile que vous êtes éventuellement, puisqu'ils proposent ces fonctionnalités.

À cela il faut ajouter que, Opera étant fidèle à sa réputation de navigateur multiplateforme, Opera Mini et Opera Mobile sont conçus pour pouvoir être installés sur pratiquement tous les téléphones mobiles, à écran tactile ou non (encore faut-il que certains constructeurs consentent à s'ouvrir à la concurrence…).

Pour en savoir plus, il existe une rubrique dédiée Opera pour téléphone, avec une présentation des fonctionnalités Opera Mini et Mobile et un support technique.

Opera Mini 5 et Opera Mobile 10 sont téléchargeables de deux manières :

1. depuis un téléphone mobile,
2. depuis un ordinateur (PC ou Mac).

• La vitesse d'exécution (JavaScript)
• Le support HTML5, CSS3 et DOM
• L'accélération graphique et le début de support de SVG

Ainsi IE se rapproche de plus en plus des standards. On retrouve le support des sélecteurs CSS3, avec les composantes Namespaces, Color, Values, Backgrounds, Borders et Polices.

On notera donc plus prosaïquement la fameuse présence de border-radius, des couleurs RGBA, d'opacity ainsi que des pseudo-classes :target, :enabled, :disabled, :checked, et :not(). Le test Acid3 affiche un score de 55/100 avec des promesses d'améliorations d'ici la sortie finale, bien que ce test ne soit pas toujours significatif ni une mesure exacte de ce que l'on peut attendre des technologies à supporter.

Le support HTML5 est engagé, bien que la spécification soit encore à l'état de brouillon et puisse évoluer. Il en va de même pour SVG de niveau Basic, langage XML de dessin vectoriel déjà supporté par les autres navigateurs modernes. Le DOM n'est pas oublié et bénéficie de perfectionnements significatifs en Level 2 (Range, Views, Core, Style, HTML) et Level 3 (Events).

Les performances du navigateur, qui dans le cas d'IE ont longtemps été à la traîne, n'ont pas été négligées. Microsoft annonce vouloir mettre à contribution le matériel et notamment l'accélération graphique (du GPU) via Direct2D pour tirer un meilleur parti des futures applications web HTML5. Ces accélérations matérielles (et c'est une nouveauté) sont aussi exploitées pour SVG.

Un nouveau moteur de script nommé Chakra fait son apparition. Ce dernier compile le code JavaScript en tâche de fond, et va jusqu'à exploiter les processeurs à plusieurs cœurs pour répartir la charge en parallèle de l'exécution principale d'IE, dans un autre thread. D'après les résultats du benchmark Sunspider fournis par Microsoft, le navigateur joue désormais dans la même cour que Safari, Chrome et Opera, en parvenant même à faire mieux que Firefox 3.6 :

Vous pouvez télécharger IE9 Platform Preview (Windows Vista SP2 est requis au minimum). Attention il ne s'agit là pas d'un navigateur fonctionnel, seul le moteur peut être testé en ouvrant les pages une par une (il n'y a pas de barre d'adresse). Celui-ci sera mis à jour toutes les 8 semaines environ jusqu'à la version finale car Microsoft espère une collaboration plus rapprochée des développeurs. C'est un changement dans le processus de développement et une ouverture que nous ne pouvons que saluer.

Plusieurs modes de rendu du document sont embarqués dans cette preview, respectivement IE5, IE7, IE8, et le petit dernier IE9, accessibles depuis le menu Debug, Document Mode et toujours manipulables avec l'instruction <meta http-equiv="X-UA-Compatible" content="IE=9">.

Un nouvel outil fait son apparition, en plus des Outils pour développeurs déjà accessibles via F12. Il s'agit d'un outil de monitoring réseau / HTTP permettant de capturer le trafic et de détailler son contenu avec précision.

On peut donc en conclure d'après cette annonce que Microsoft a saisi l'enjeu du support des standards, et de l'amélioration des performances pour l'utilisateur final et les applications web qui envahissent son quotidien. IEBlog fait mention à plusieurs reprises d'une volonté de conformité rigoureuse aux standards et d'une prise en compte plus importante des retours des développeurs web. Il ne faut pas oublier que cette prise de conscience s'est imposée à Microsoft, après une longue période de léthargie qui a permis aux navigateurs alternatifs la conquête progressive et victorieuse d'une grande part du marché. L'accent est mis sur le support des accélérations matérielles via le système d'exploitation (Windows), qui sera probablement un nouveau terrain de bataille pour Firefox, Opera, Safari et Chrome qui doivent quant à eux supporter des OS différents.

Un petit bémol cependant : il n'est pas fait mention d'un support de l'élément Canvas, ni des polices Web Open Font Format (WOFF). Le codec supporté pour la vidéo HTML5 sera H.264 et non Ogg Theora.

Consultez également :

• Release Notes Windows Internet Explorer 9 Platform Preview
• Internet Explorer Platform Preview Guide for Developers

Actuellement en stage chez Alsacréations, la première étape pour moi était de m'adapter aux coutumes locales. Rien de mieux pour cela que de mettre les mains dans la choucroute ! J'ai donc eu la chance de travailler sur ce générateur original.

Intégrateurs et développeurs, vous qui êtes habitués à l'utilisation du célèbre Lorem Ipsum lors de la réalisation de vos maquettes, nous avons décidé de bousculer vos habitudes en vous proposant une alternative... en Alsacien bien entendu.

L'histoire (avec un petit "h")

Pour rappel le Lorem Ipsum est né en 1337 (de source totalement invérifiée) et est utilisé comme "faux texte", texte de remplissage sans valeur sémantique qui n'est là que pour simuler une mise en page en imprimerie. Son utilisation s'est étendue par la suite dans le monde merveilleux du Web.

Le Schnapsum

C'est donc avec l'aide de Fourcht la saucisse traductrice (sponsor officiel 2010) que nous vous proposons aujourd'hui la version beta 0.1337 du Schnapsum, le Lorem Ipsum Alsacien.

Doté d'un Générateur Chenerator de texte, vous aurez la possibilité d'attraper une cliquite aigüe en générant un contenu partiellement aléatoire (nous avons tout de même conservé les célèbres trois premiers mots).

En parcourant la page vous trouverez plusieurs codes en HTML5 parmi les plus usités tels une navigation sous forme de liste, un formulaire, ou même une simulation d'article complet pour les amateurs de blog.

À utiliser sans modération pour vous démarquer dans vos futures maquettes !

Le positionnement des éléments sur la page est un sujet de préoccupation pour les concepteurs web : blocs contigus, positionnements originaux, empilements, grilles et architectures complexes. Au fur et à mesure, ils se sont rabattus sur des mécanismes qui apportaient des réponses concrètes à leurs fantaisies graphiques, que ces éléments soient prévus pour cela ou non : les tableaux de mise en page (balise HTML <table>), les cadres (balise HTML <frame>), le positionnement absolu (introduit dans CSS2) et le flottement (CSS1).

Float, un positionnement ?

La version CSS1 ne prévoit pas de propriétés dédiées au "positionnement" tel que nous l'entendons aujourd'hui (par exemple : deux blocs dimensionnés l'un à côté de l'autre) : la propriété position n'existe pas encore, et la propriété en flux display n'accepte alors que les valeurs block, inline, list-item ou none.

La propriété float apparaît dès CSS1, classée dans les "modèles de mise en forme", tels que inline, block et list-item (un peu comme si l'idée avait été de créer une règle de type display: float).

Définition dans CSS1 (source de la traduction) :

Avec une propriété 'float', un élément sort du flux normal des autres éléments et acquiert un format de type bloc. Par exemple, en donnant la valeur 'left' à la propriété 'float' d'une image, celle-ci est repoussée vers la gauche jusqu'à buter sur les marges, espacements ou bordures d'un autre élément de type bloc. Le flux normal se déroule sur le côté droit de l'image. Ses marges, bordures et espacements sont respectés, cependant les marges ne fusionnent jamais avec celles des éléments adjacents.

Les spécifications initiales ne semblent pas avoir prévu l'usage de cette propriété pour positionner les éléments tel que nous le faisons actuellement (même si rien n'indique que cela soit interdit non plus) : tous les exemples illustrant le flottement désignent des images ou des portions de texte à pousser à droite ou gauche dans un élément.

D'ailleurs, dans la partie dédiée à la propriété float, l'explication suivante illustre son emploi : On utilise le plus souvent 'float' avec des images en ligne, mais on l'applique aussi aux éléments avec du texte.

En voici un exemple proposé par le W3C :

<STYLE TYPE="text/css">
  IMG { float: left }
  BODY, P, IMG { margin: 2em }
</STYLE>

<BODY>
  <P>
    <IMG SRC=img.gif>
    Some sample text that has no other...
</BODY>

De plus, La liste de contraintes imposées par le W3C ne facilite pas la chose aux navigateurs.

Détournement de l'usage initial

Le flottement est très vite adopté pour positionner des blocs conteneurs au même titre que le font à cette époque les tableaux de mise en page.

D'ailleurs Håkon Wium Lie (co-inventeur de CSS) ne s'en prive pas dans ses pages HTML de tests : By using floating DIV elements, many of the HTML pages now using tables can be simplified and accessibility improved.

A cette même époque, le W3C propose une page illustrant une large batterie de tests autour du "positionnement" flottant : rien qu'en observant ce genre de pages de tests, on est en droit de se dire que "c'est pas gagné" !

La grande illusion ?

Employant float comme un schéma de positionnement hors-flux hybride, les webdesigners détournent finalement cette propriété de son usage premier en vue de disposer des éléments les uns par rapport aux autres, voire de les imbriquer.

Cet usage étendu de float a rendu son implémentation complexe dans les navigateurs : ce type de positionnement est celui qui rencontre le plus de bugs d'affichage connus et recensés (dont les célèbres Float model, Double margin, Escaping floats, Peek-a-boo, Guillotine, Three pixel jog, Multiple opposing floats (bug opera) et quelques bugs sur IE5 Mac) et nécessite de jouer avec des contextes de formatage obscurs pour des débutants (clear - lui-même buggué sur certains navigateurs - , overflow, hasLayout...).

Le modèle global de float est interprété différemment selon chaque navigateur, c'est le moins qu'on puisse dire. Bref, un joli mélange indigeste pour les webdesigners néophytes à qui l'on a rabâché que la mise en page via tableaux était à proscrire.

Où float devient schéma de positionnement

Avec CSS2, les notions sont quelque peu remaniées : la propriété float acquiert un statut de "schema de positionnement", classé au même titre que le positionnement dans le flux et le positionnement absolu.

La propriété display prend elle aussi de l'ampleur et se voit attribuer 17 valeurs possibles, dont inline-block et table-cell, permettant de "positionner" plus finement chaque élément tout en demeurant dans un schéma de flux.

CSS2 propose donc officiellement 3 schémas de positionnement :

• le flux (propriété display)
• le flottement (propriété float)
• le positionnement absolu (position:absolute)

Tout cela, géré selon des règles assez complexes si l'on cumule les différents schémas.

En résumé

La définition initiale de la propriété float a engendré une période de flottement (hé hé) : de modeste mécanisme d'affichage d'éléments simples, elle passe à schéma de positionnement au même titre que le flux ou le positionnement absolu. float a pris du galon tout en conservant les mesures et contraintes de gestion de flux initialement prévues.

L'idée de cet article n'est pas de proclamer qu'il n'est plus souhaitable (ou qu'il n'a jamais été souhaitable) d'utiliser le positionnement flottant mais de comprendre que ses nombreuses lacunes et sa relative complexité est simplement due à un mécanisme initial qui n'est pas forcément adapté à l'usage qui en est fait actuellement.

Mais je ne peux pas m'empêcher de lancer un petit clin d'œil aux ayatollah anti-tableau de mise en page "parce que c'est pas fait pour ça au départ", même si la comparaison demeure bien trop hâtive avec float.

D'autres solutions ?

Il serait bien malvenu de ma part de discréditer le sympathique positionnement flottant et de conclure en déclarant qu'il n'existe pas d'autres alternatives.

En théorie, la réponse est donc "oui". En tout cas, les standards prévoient des solutions propres et adaptées depuis CSS2.

Le positionnement dans le flux doit toujours être privilégié puisqu'il demeure le schéma le plus fluide et le plus robuste dans toutes les configurations (agrandissement du texte, modification du contenu, etc.).

Les nouvelles valeurs CSS2 de la propriété display permettent d'afficher et de placer chaque élément exactement tel qu'on le voudrait en modifiant simplement son rendu : inline, block, mais aussi inline-block et table / table-cell (entre autre).

Forcément, ça se corse à partir du moment où un navigateur important, Internet Explorer, ne reconnaît pas (ou mal) ces différentes valeurs dans ses versions inférieures à IE8. Si le positionnement flottant, malgré toutes ces contraintes et lacunes, a gagné peu à peu le cœur des intégrateurs web, il y a donc bien une raison empirique.

Tout ce bel article pour être finalement frustré et devoir employer float quand-même ?

J'avoue tout : oui, le positionnement flottant a encore de beaux jours devant lui... et les consultants et formateurs en CSS également : grâce aux retards des navigateurs, ils auront longtemps de quoi étayer leurs supports de cours !

En 2010, à l'heure où CSS3 gagne du terrain, force est de constater que le mode de positionnement le plus employé actuellement date de CSS1 (1996). Pire, il n'a pas été conçu pour cela au départ.

Mais alors, je fais quoi maintenant ?

Cet article ne va pas révolutionner vos habitudes, désolé, mais selon votre niveau de pratique, il est susceptible de vous ouvrir des horizons dans un avenir proche :

• Si vous débutez dans le monde du positionnement CSS, retenez simplement qu'il n'existe pas de solution meilleure qu'une autre. Le positionnement flottant répond à des besoins concrets et il est de mieux en mieux supporté par les navigateurs récents. Il demeure toutefois un schéma plus complexe qu'il n'y paraît au premier abord.
• Si vous êtes plus aguerri voire expert, n'hésitez pas à vous tourner vers d'autres types de positionnements avancés avec la propriété Display (excellent article de Benjamin De Cock), qui méritent le détour à condition de prévoir des alternatives pour les anciens navigateurs.
• Si vous pensez encore que les tableaux HTML c'est mal, et les float c'est bien, c'est votre choix et je le respecte.

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.1
Host: www.alsacreations.com
Accept-Encoding: gzip
User-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 OK
Server: Apache
Content-Type: text/html
Content-Encoding: gzip
Content-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 headers
a2enmod 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.0
SetOutputFilter DEFLATE
AddOutputFilterByType 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.

<?php
ob_start("ob_gzhandler");
?>
... Le reste du code ...
<?php
ob_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).

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é par Laurie-Anne (confirmé)
• "Accessibilité des documents PDF" : proposé par Victor Brito (confirmé)
• "Découpe HTML/CSS pertinente" : proposé par FranckHTML (confirmé)
• "Intégration d'une newsletter" : proposé par Corinne (confirmé)
• "Présentation de jQuery" : proposé par Teles (confirmé)

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.

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

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:

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.

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 ?!

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é.

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.