Home | Nos Offres | Nos Créations | WebNews | Contact

Web News

Mozilla sort Firefox 4 beta 2

Mozilla a mis à disposition du public la deuxième beta de Firefox 4.

Cette nouvelle version du navigateur est disponible en 24 langues et affiche désormais les tabs au-dessus de la barre d'adresse par défaut sous Windows et Mac OS.

Niveau développement web, les transitions CSS font leur entrée (préfixée de -moz-), le moteur javascript et l'interface sont encore plus rapides et le support de WebGL est complet (mais désactivé par défaut).

Firefox 4 beta 2 introduit de plus le support du format vidéo HD WebM récemment mis à la disposition du public par Google, un nouveau parser pour HTML5, l'introduction de l'API HTML History qui permet d'ajouter des pages à l'historique du navigateur et permet l'utilisation des WebSockets.

Une liste complète des changements est disponible ici.

Vous pouvez télécharger la dernière beta de Firefox 4 à cette adresse ou directement sur le FTP de Mozilla.
Rafraîchissement d'été
Pour cet été, nous vous avons concocté un petit rafraîchissement graphique, qui sera actif sur l'ensemble du site Alsacreations.com.

Il s'agit principalement :
- d'alléger la structure du site (réduction d'un tiers du poids des pages)
- d'améliorer la lisibilité du menu de navigation
- de permettre d'autres optimisations dans le futur, notamment en version mobile
Nous espérons que ce nouvel habillage (v3.1) vous plaira et facilitera l'accès au contenu.
Utiliser CSS3 aujourd'hui, outils et ressources
Bien que les spécifications CSS 3 soient encore dans un état embryonnaire, il devient acquis qu'un certain nombre de ses composantes sont déjà exploitables en production sur les navigateurs actuels, moyennant quelque gymnastique pour notre attachant boulet à tous qu'est Internet Explorer.

Le contexte actuel est pour le moins excitant pour nous autres webdesigners, puisque l'on peut enfin s'évader d'une norme CSS2.1 vieille de plus de 10 ans ! Nous nous trouvons dans une période clé, et de grands changements vont bientôt s'opérer dans notre façon de travailler au quotidien. Cependant Internet Explorer modère cet engouement puisque seule sa version 9 commence à supporter ces nouveautés, version encore au stade beta non utilisable par le grand public.

De multiples ressources CSS3 pour déjouer les faiblesses d'IE voient le jour presque quotidiennement, notamment par l'ajout de JavaScript. On en vient à soupeser les avantages et inconvénients de chacune de ces solutions : d'un côté la rapidité d'intégration; de l'autre une baisse de performance non négligeable sur ce navigateur. Selon le contexte, le public ciblé ou nos affinités, la balance ne penche pas toujours du même côté.

Voyons quelques uns de ces outils en ligne en vogue actuellement :

CSS3pie.com

Dans la jungle des outils permettant d'émuler CSS3 sur Internet Explorer, CSS3Pie semble être le plus robuste aujourd'hui et bénéficie d'une communauté et d'un compte Twitter plutôt actifs.

Via un fichier .HTC, CSS3Pie permet d'appliquer un certain nombre de propriétés CSS3 intéressantes : border-radius, box-shadow, border-image, backgrounds multiples et dégradés linéaires. Très prometteur.

CSS3please.com

CSS3Please n'est rien d'autre qu'une excellente démonstration en direct et interactive de différentes propriétés CSS3 (arrondis, ombrages, dégradés, transparence, rotation, transition, font-face)

Vous pouvez modifier les options et valeurs de la page, elles s'appliqueront instantanément sur la boîte d'exemple et l'ensemble des syntaxes (-moz-, -webkit-, et filtres IE) est proposée.

CSS3generator.com

Dans la même veine que CSS3Please, CSS3Generator est un outil de génération automatique de syntaxes CSS dont le résultat est affiché en direct à l'écran.

Certaines fonctionnalités telles que les colonnes multiples, resize, box-sizing ou outline le démarquent de ses concurrents.

IE-css3.js

Toutes les ressources ne se limitent pas à rendre utilisable les propriétés CSS3, certaines telles que IE-CSS3.js permettent d'émuler les différents sélecteurs (:first-child, :last-child, :nth-child, :focus, :target,…) CSS3 sur IE6-IE8 via JavaScript.

Sous forme de plugin ajouté à un framework existant (jQuery, Mootools, Prototype,…), cet outil nous semble bien abouti et robuste.

Font-face generator

Exclusivement dédié à l'intégration de polices non standards sur tous les navigateurs, Font-face generator permet non seulement de convertir un fichier de fonte en plusieurs formats (.eot, .ttf, .woff) mais offre également une page de démonstration du résultat obtenu. Et ça marche !

Gradients generator

Gradients generator vous facilite la création de vos dégradés linéaires ou radiaux à l'aide d'un environnement où se croisent pipette, plage de couleurs, options de dégradés, code obtenu et résultat visuel.

N'oublions pas ces deux autres sites de ressources et d'information :

CSS3.info

CSS3.info est site d'information sur les spécifications CSS3 pertinent et régulièrement alimenté.

Vous y trouverez les dernières actualités concernant cette norme et les navigateurs, quelques tutoriels ainsi que l'avancement des travaux sur les différentes propriétés et sélecteurs.

Findmebyip.com

FindMeByIP propose quelques tableaux évocateurs du support actuel des navigateurs concernant les diverses propriétés CSS3 et les sélecteurs.

On y constate généralement que le retard pris par Internet Explorer est véritablement significatif et qu'il demeure complètement isolé à l'heure actuelle.

Et aussi…
- 10 CSS properties that ‘were’ impossible to implement in IE6
- IE-CSS3.htc de Fetchak : même principe de CSS3Pie, mais un peu plus limité
- CSS Transform sur IE : rotations et déformations sur Internet Explorer
- Border-radius.com : testez vos coins arrondis en direct
- Roundies.js : un petit script JavaScript très léger pour des coins arrondis simples sur IE
- IE7nomore.com : une page de tests de CSS avancés (pas uniquement CSS3)
- When can I use : un récapitulatif des dernières technologies et de leur support sur les générations de navigateurs
- Et certainement bien d'autres demain…
Activer l'impression des éléments HTML5 sous Internet Explorer
Internet Explorer (versions 6,7,8) fait face à un problème de gestion de l'impression des balises HTML5, car il ne prend pas en compte les styles pour le média print pour ces balises (même si vous les avez déclarées dans le DOM pour les afficher pour le média screen).

La seule solution actuellement est d'inclure un fichier JavaScript qui fixe ce problème : IE Print Protector. Celui-ci remplace temporairement les éléments HTML par des autres éléments neutres (comme div et span) avant l'impression, puis les restaure après, tout en conservant les styles associés.

Notez que html5shiv intègre désormais également IE Print Protector. Pour l'utiliser, vous pouvez inclure ce bout de code dans l'élément head avant les appels aux feuilles de styles CSS.
```

```
Article complété par dew
Simulez votre site sur téléphones mobiles avec ProtoFluid
Du fait de la pluralité des plateformes et des différences des moteurs de rendus, il n'est pas toujours aisé de tester son site web sur le media mobile. Sans compter le coût d'acquisition du matériel. La plupart des émulateurs en ligne se contentent malheureusement de redimensionner la page sans tenir compte des spécificités inhérentes à chaque terminal : iphonetester.com, l'extension Webdeveloper, viewlike.us, resizemybrowser,…

En dehors de l'installation des divers SDK officiels des constructeurs ou de l'excellente version d'Opera Mobile installable sur un système d'exploitation classique (Windows, Mac OS X...), point de salut pour visualiser ses pages dans un environnement proche des conditions réelles.

ProtoFluid est une application en ligne permettant de simuler au mieux l'affichage de votre site web ou d'une url locale sur divers terminaux mobiles :
- Motorola Droid
- iPhone/iPod
- iPad
- Google Nexus One
Simple et efficace pour un test rapide

Il suffit de renseigner l'URL à visionner ainsi que la plate-forme désirée, et sa résolution si vous souhaitez la modifier. Le résultat apparaît dans une fenêtre modale (lightbox). Il vous est ensuite possible de modifier l'orientation (portrait ou paysage) puis de rafraîchir votre résultat.

Pour l'avoir testé sur quelques uns de nos sites web dont les feuilles de styles prennent en charge le média mobile (meta tag "viewport", CSS media queries), tels que alsacreations.fr et ie7nomore.com, je ne peux qu'en conclure que l'outil se rapproche beaucoup plus du résultat escompté que ses congénères, même si le rendu reste tributaire du navigateur utilisé pour consulter le site ProtoFluid car la simulation ne se fait qu'au travers d'un élément iframe et de JavaScript. Il faudra donc éviter d'y accéder avec Internet Explorer.

Viewport et Media Queries CSS3

Il est possible de définir la résolution du terminal à l'aide du meta tag viewport reconnu par Safari, Webkit et Opera à l'heure actuelle. Ce meta tag est généralement un bon point de départ pour adapter harmonieusement un design sur le média mobile. ProtoFluid prend en compte les informations véhiculées via ce meta tag.

Les Media Queries sont interprétées sur les navigateurs les connaissant, accompagnées des propriétés width, max-width, max-device-width ainsi que orientation (portrait ou landscape).

Par contre, dans le cas ou vous testeriez sur un écran d'ordinateur classique, vous devrez accompagner votre règle media query max-device-width par un complément max-width sous peine de ne pas être pris en compte puisque votre écran de bureau ne peut pas être considéré comme un périphérique d'affichage de taille réduite :
```
@media only screen and (max-device-width:640px), only screen and (max-width:640px) {
   body  {width: auto}
}
```
Le marché du téléphone intelligent est en plein boom et chaque jour naissent de nouvelles ressources et outils pratiques pour faciliter le développement ou les tests sur le média mobile. ProtoFluid n'est pas parfait mais une nouvelle ressource verra peut-être le jour pour des simulations encore plus pratiques et fidèles.

L'équipe de développement, Optic Swerve, est en train de plancher sur une nouvelle version (1.1) de leur outil, vous pouvez suivre l'évolution du projet sur leur compte Twitter.

Limites de l'outil

Comme tout outil de ce type, ProtoFluid ne peut que "deviner" comment va se comporter le moteur de rendu final et s'y adapter à partir de votre navigateur de test. Cela signifie que certaines technologies présentes sur votre poste de bureau (flash par exemple) vont apparaître sur la simulation iPhone, ce qui ne risque pas d'arriver de sitôt sur un véritable terminal d'Apple.
De même, certaines règles CSS telles que le positionnement fixé, normalement désactivé sur de nombreux mobiles, vont tout de même être exécuté sur la simulation.
Sachez tenir compte de ces incongruités dans vos tests.

Liens connexes
Slideshow en CSS3
Présentation et compatibilité

Cette partie du tutoriel va légèrement reprendre le contenu d'une publication d'Antoine Cailliau, Tutoriel sur les Transitions CSS3, que je vous conseille de lire au préalable.

Ce tutoriel repose sur les spécifications du W3C concernant la pseudo-classe target du module "Selectors Level 3 (:target)" et sur le module "CSS Animations Module Level 3" actuellement en Working Draft.

La pseudo-classe target

Beaucoup de liens d'un site web renvoient sur des parties précises d'une page par l'intermédiaire d'ancres. La navigation devient alors beaucoup plus aisée et le passage d'une partie d'une page à une autre est facilité. Nous rencontrons ceci assez souvent dans les F.A.Q. d'un site internet, avec un sommaire de questions, puis plus bas toutes les réponses correspondantes.

Voici la syntaxe d'un lien renvoyant sur une ancre.
```
<a href="#faire-lien">Comment faire un lien</a>
```
Ce lien cible un élément (l'ancre) dont l'id est faire-lien, en voici un exemple :
```
<div id="faire-lien" class="blocReponse">
   <p class="question">Comment faire un lien ?</p>
   <p class="reponse">La réponse à la question...</p>
</div>
```
Une fois le clic effectué sur le lien l'élément ciblé peut subir des changements de styles grâce à la pseudo-classe target.
```
.blocReponse:target {
   background: #DDD;
   border: 1px solid #000;
}
```
Voir l'exemple

Vous remarquerez l'utilisation de la classe .blocReponse dans le CSS en lieu et place de l'id correspondant #faire-lien. Cela simplifie l'utilisation de cette pseudo-classe si, pour poursuivre sur notre exemple, notre F.A.Q. devait posséder une cinquantaine de questions !

Remarque : la pseudo-classe target est actuellement prise en charge par toutes les dernières versions des navigateurs modernes, sauf Internet Explorer 8 et ses versions antérieures.

Les animations

Les spécifications relatives aux transitions et animations sont "CSS3 Transitions" et "CSS Animations Module Level 3".

Pour simplifier les lignes de code qui suivront je ne préciserai aucun des suffixes nécessaires à la prise en charge des animations en CSS par les navigateurs. Je vous rappelle que pour la prise en charge complète (actuelle et à venir) de ces propriétés, il serait idéal d'écrire :
```
element {
   -webkit-transition: all 1s;   /* pour Webkit */
   -o-transition: all 1s;   /* pour Opera 10.5+ */
   -moz-transition: all 1s;   /* pour Firefox 3.7 */
   transition: all 1s;   /* pour tous (futur...) */
}
```
Remarque : avec les animations en CSS nous commençons déjà à restreindre la liste des navigateurs compatibles, puisque seuls Chrome (Webkit), Safari (Webkit) et Opera prennent en charge cette fonctionnalité. Firefox 3.7 devrait rejoindre d'ici peu cette petite liste.

Passons à la pratique !
Opensearch pour ajouter le moteur de recherche à votre navigateur
Vous pouvez désormais ajouter le moteur de recherche d'Alsacreations à votre navigateur si celui-ci est équipé d'une zone adaptée. Il vous suffit de cliquer sur la liste déroulante des moteurs intégrés et de choisir "Ajouter". Vous pourrez le retirer par la suite si vous le souhaitez dans les paramètres (sous Firefox "gérer les moteurs de recherche").

Les navigateurs compatibles avec Opensearch sont :
- Mozilla Firefox 2+
- Google Chrome
- Internet Explorer 7+
Malheureusement Opera ne l'exploite pas encore, malgré la présence d'un champ de recherche dans son interface. OpenSearch a initialement été proposé par A9 (Amazon).

Comment cela fonctionne-t-il en pratique ?

Pour ajouter une telle fonctionnalité sur votre site, il vous suffira d'éditer deux fichiers.

La description XML

Premièrement il faut créer un fichier XML tel que opensearch.xml, placé par exemple à la racine de votre site :
```
<?xml version="1.0" encoding="UTF-8" ?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
  <ShortName>Alsacreations</ShortName>
  <Description>Recherche dans les ressources</Description>
  <Image>favicon.png</Image>
  <Language>fr</Language>
  <InputEncoding>UTF-8</InputEncoding>
  <Url type="text/html" template="http://www.alsacreations.com/search/tag/{searchTerms}"/>
</OpenSearchDescription>
```
Celui-ci est relativement simple à comprendre. Des exemples plus complets avec d'autres balises sont disponibles sur le site Opensearch.org Specifications.

OpenSearchDescription

Il s'agit de l'élément racine, de namespace http://a9.com/-/spec/opensearch/1.1/

ShortName

Le titre de votre moteur/site de recherche

Description

La description un peu plus longue.

Url

L'adresse à interroger, dont l'attribut template définit le masque, notamment via {searchTerms} qui sera remplacé par les mots entrés dans le champ d de recherche (et échappés, de la même façon que urlencode en PHP).

Image

L'url vers l'image favicon du site.

Language

La langue d'après la spécification XML.

InputEncoding

Pour spécifier l'encodage des valeurs à utiliser, par exemple UTF-8.

Le lien avec link

Deuxièmement, y faire référence dans le code source du site, section head, grâce à l'élément link avec les attributs (rel, type, title) appropriés et surtout l'URL vers le fichier XML dans l'attribut href :
```
<link rel="search" type="application/opensearchdescription+xml" title="Alsacreations" href="http://www.alsacreations.com/opensearch.xml" />
```
Note : Le titre indiqué dans la balise link doit correspondre au contenu de la balise ShortName du fichier XML.

Bien entendu cette spécification va au-delà du simple ajout au moteur et définit d'autres fonctionnalités d'interrogation et de réponses, avec une présentation des résultats et des agrégateurs.
Opera 10.6 en version finale
La nouvelle version 10.6 d'Opera est disponible depuis aujourd'hui en version finale. Et, contrairement à la 10.5, l'ensemble des plateformes est servi en même temps.

Parmi les nouveautés, on distingue :
- l'apparition du moteur de recherche Bing dans le Speed Dial (cela dit, comme il est indiqué dans le billet Bing in Opera, Google demeure le moteur de recherche par défaut d'Opera),
- la suggestion de recherche,
- la géolocalisation (la démonstration Live Map en apporte un exemple, avec la possibilité de refuser de partager sa localisation),
- le support du format WebM pour la vidéo (une démonstration est disponible),
- la poursuite du support du HTML 5,
- un moteur plus rapide (jusqu'à 50 % plus rapide que celui de la version précédente).
Pour en savoir plus
- Télécharger Opera 10.6 ;
- Download new version of Opera, sur le blog Choose Opera ;
- What is faster than the fastest?, communiqué de presse d'Opera ;
- revue de presse sur Opera 10.6, sur le blog Choose Opera.
Chrome met l'accent sur l'accessibilité grâce aux extensions

Le projet Chromium qui sert de base open-source au navigateur Google Chrome souhaite mettre en avant les possibilités pour améliorer l'accessibilité du web à ses utilisateurs. Ce projet en lui-même définit déjà des pistes générales pour la prise en charge de la navigation au clavier, de l'affichage des polices, du support de WAI-ARIA et des synthèses vocales (voir Chromium Projects : Accessibility).

Le répertoire des plug-ins comporte déjà une rubrique pour les extensions concernant l'accessibilité et qui répondent à des besoins de facilité de navigation avec les périphériques utilisateur, de perception visuelle, ou de (re)mise en forme du contenu.

Le Developer's Guide de Code Labs, section Accessibility (a11y) fait maintenant mention de quelques informations supplémentaires pour l'implémentation des plug-ins en terme d'accessibilité, et des bonnes pratiques pour la navigation clavier, le contraste et l'agrandissement du texte. La nouvelle extension ChromeVis a également été publiée en open-source ; celle-ci permet d'améliorer dynamiquement la lisibilité du texte d'une page.

Ne manquez pas la vidéo décrivant ces quelques idées :

Chromium/Chrome se prononce donc davantage en faveur d'un web accessible, et tente de redorer son blason dans ce domaine qui montre de grandes lacunes, notamment par le support des lecteurs d'écran (aucune compatibilité de la part de JAWS, Window-Eyes et NVDA).
Inclure la librairie jQuery de manière optimisée
jQuery est désormais une librairie JavaScript bien connue, permettant en quelques lignes de code de dynamiser un site web, de créer de petites animations, des interactions avec les formulaires, de programmer des appels Ajax. Voici en détails quelques possibilités d'intégration à votre site, afin de minimiser l'impact sur les performances et le temps de chargement.

Appel classique à la librairie (fichier téléchargé)

De la manière la plus basique, il est vous est proposé sur le site jQuery.com de télécharger le fichier - en affichant son code source - et de le placer sur votre site, par exemple dans jquery.js ou jquery-1.4.2.min.js.

Fichier et compression

Vous récupérerez ainsi une version "minifiée", c'est à dire compressée jusqu'à un certain niveau par un algorithme supprimant espace et commentaires, mais rendant peu lisible la déclaration des fonctions. Ceci n'est pas bien grave car il s'agit la plupart du temps de ne pas modifier cette librairie mais de la combiner à nos propres fonctions, déclarées de façon externe.

Voyez les différences entre la version non minifiée et la version minifiée. Sachez qu'il est possible de faire de même pour vos propres scripts grâce à Google Closure Compiler ou encore YUI Compressor de Yahoo.

Il vous est aussi possible de délivrer ce fichier re-compressé au format gzip pour gagner encore en taille, c'est à dire 24 Ko au total au lieu de 72 Ko. Pour ceci, consultez le tutoriel correspondant : Compression des pages web avec Gzip ou Deflate en HTTP.

Performances au chargement

Pour des questions de performance, Google Code et Yahoo Developer Network : Exceptional Performance recommandent :
- de placer les appels aux librairies en fin de page avant </body>
- de placer les appels aux feuilles de style CSS avant, dans la section <head> grâce au tag link
- de combiner au maximum les fichiers JavaScript/CSS, de les compresser/minifier et de les externaliser (c'est à dire les placer chacun dans un fichier externe à la page et non en ligne avec toutes leurs instructions dans le code html)
Vous obtiendrez ainsi :
```
<!doctype html>
<html>

  <head>
     <title>Titre de la page</title>
     <link rel="stylesheet" type="text/css" href="styles.css">
  </head>

  <body>
     ...
     <script src="jquery.js"></script>
     <script src="mon_script.js"></script>
  </body>

</html>
```
Depuis Google AJAX Librairies API

Google propose une API dédiée au chargement de différentes librairies, . L'avantage étant de bénéficier d'un hébergement externe et rapide (mais soumis la plupart du temps à une requête HTTP+DNS supplémentaire) avec un fichier délivré en gzip sans avoir à configurer votre serveur. Il vous faudra néanmoins vous inscrire - gratuitement - pour obtenir une clé API AJAX Search.
```
<script type="text/javascript" src="http://www.google.com/jsapi?key=VOTRE_CLE"></script>
<script type="text/javascript">google.load("jquery", "1.4.2");</script>
```
Le premier argument étant le nom de la librairie, et le deuxième sa version (si vous spécifiez "1.4", vous obtiendrez la dernière version de la branche "1.4.x", avec "1" aussi, etc). Vous pouvez également directement charger ce fichier en vous passant de l'appel à l'API JS google.load :
```
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
```
D'autres librairies sont disponibles (MooTools, Dojo, SWFObject, YUI, Chrome Frame, WebFont), pour ceci consultez la documentation. Reprenons notre exemple, sans avoir besoin d'héberger le fichier jquery.js :
```
<!doctype html>
<html>

  <head>
     <title>Titre de la page</title>
     <link rel="stylesheet" type="text/css" href="styles.css">
  </head>

  <body>
     ...
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
     <script src="mon_script.js"></script>
  </body>

</html>
```
Votre premier script jQuery

Bien entendu il vous faudra placer votre propre fichiers JavaScript ou vos déclarations à la suite de cet appel, dans mon_script.js. Ceci est la plupart du temps valable pour les autres librairies JavaScript.

Pour ceci vous avez deux possibilités :
- placer une fonction directement dans le code de la page à l'aide de la balise <script> mais sans fichier externe (sans attribut src). Le seul avantage de cette méthode est de supprimer une requête HTTP, mais cela ajoute du contenu à votre code HTML qui ne sera pas (ou plutôt rarement) mis en cache.
- placer vos instructions dans un fichier externe (*.js), plus facile à maintenir et à inclure sur un groupe de pages de votre site, avec le petit inconvénient d'effectuer une requête HTTP en plus.
Utilisons la deuxième solution pour placer notre script jQuery dans mon_script.js. Dans la majorité des cas, nous souhaiterons exécuter le code au chargement de la page, grâce à la fonction ready() appliquée à l'objet document. C'est-à-dire lorsque les objets de la page seront prêts à être manipulés par JavaScript.
```
$(document).ready(function() {
   // Votre code ici
});
```
La fonction $() est la fonction magique de jQuery. Celle-ci permet de cibler les éléments grâce aux sélecteurs, de déclarer des gestionnaires d'événements, d'utiliser les autres fonctions de la librairie, il s'agit en réalité d'un alias sur l'objet jQuery lui-même.

Tranchons dans le gras

Le but de cet astuce étant juste de faire appel minimaliste à jQuery, nous nous contenterons pour cette démonstration de masquer un élément <div id="masque">, puis de le révéler au clic sur un lien <a id="afficher">Afficher l'élément</a>.

Toujours dans la déclaration $(document).ready(function() {, nous placerons les instructions jQuery de notre script :
```
$(document).ready(function() {

   // Dès le chargement on masque l'élément portant l'id #masque
   // grâce à la fonction hide() de jQuery
   $("#masque").hide();

   // On déclare un gestionnaire d'événement 'click' sur un lien
   // pour afficher l'élément précédemment masqué
   $("a#afficher").click(function() {

      // La fonction click() appliquée à notre sélecteur $("a#afficher")
      // prend en argument une fonction anonyme (sans nom) contenant
      // le reste des instructions :

      $("#masque").show("fast");

      // L'argument "fast" est facultatif mais nous permet
      // d'afficher l'élément avec une petite animation

      return false;

      // On retourne 'false' pour prévenir l'exécution du lien
      // c'est à dire pour éviter au navigateur de changer de
      // page en suivant son attribut href

   });

   // Faites bien attention à la syntaxe et à l'imbrication des
   // parenthèses et accolades

});
```
Démo

Consultez la démonstration pour explorer le code source :
- index.html
- mon_script.js
Voici donc une brève introduction à l'inclusion de jQuery sur votre site. N'hésitez pas à consulter la documentation de jQuery pour faire connaissance avec les autres fonctions et sélecteurs possibles ou à utiliser la section JavaScript du forum.
Exploiter n'importe quelle police dans vos pages HTML avec FLIR
FLIR est une solution axée sur une combinaison PHP/Javascript. Elle génère dynamiquement une image à partir d'un texte contenu dans votre page web dans une police de caractère déposée sur votre serveur et qui, autrement, ne pourrait pas être vue par vos visiteurs.
L'image générée sera automatiquement insérée dans votre page à l'aide de Javascript et visible sur tous les navigateurs modernes. N'importe quel élément contenant du texte peut être remplacé depuis les headers (<h1>, <h2>, etc...) jusqu'aux éléments <span>.

Avant de vous jeter les yeux fermés dans l'éxecution de ce tutoriel, sachez que l'utilisation de FLIR requiert un serveur web supportant PHP et la librairie GD.
PHP5 est recommandé mais PHP4 devrait fonctionner également. Une version récente d'ImageMAgick (6.3+) est requise pour bénéficier des effets offerts par les plug-ins FancyFonts et QuickEffects (que nous n'aborderons pas dans ce tutoriel).

Voir l'exemple final ici : http://course-a-pied.info/flir/

Et voilà ce que vous devriez obtenir :

Etape 1 - Mise en place de Facelift

Avant toute chose, téléchargez Facelift v1.2 (dernière version stable) sur http://facelift.mawhorter.net/download/. Décompressez l'archive téléchargée sur votre serveur (de préférence dans son propre répertoire).
Pour simplifier ce tutoriel, j'ai renommé le répertoire d'origine "facelift/".

A l'intérieur du répertoire "facelift/" se trouve un fichier Javascript nommé "flir.js".
Vous pouvez choisir de le laisser à l'endroit initial ou de le déplacer où bon vous semble, par exemple dans un répertoire où vous centralisez vos fichiers JS. Pour ce tutoriel, nous allons déplacer le fichier dans un répertoire "js/" à la racine de notre site.

Ouvrez "flir.js" dans un éditeur de code et rendez vous ligne 28. Vous devriez voir ceci :
```
	,path: ''
```
Nous avons besoin de définir entre apostrophes un chemin absolu ou relatif vers notre répertoire "facelift/".
Toutefois, les chemins relatifs le sont à la page et pas au fichier "flir.js", ce qui peut causer des problèmes avec les sites qui utilisent l'url rewriting. Ainsi, le moyen le plus sûr que tout fonctionne est de définir un chemin absolu.
```
	,path: 'facelift/'
```
Ouvrez la page HTML dans laquelle vous souhaitez ajouter FLIR et imbriquez la ligne suivante entre les balises <head> pour attacher "flir.js" :
```
	<script src="js/flir.js" type="text/javascript"></script>
```
Ensuite, ajoutez ceci juste avant la balise </body> fermante :
```
	<script type="text/javascript">  
    		FLIR.init();  
    		FLIR.auto();  
	</script>
```
Etape 2 - Choisissez et configurez vos polices

Téléchargez les polices que vous souhaitez utiliser. Placez les dans le répertoire "fonts/" au sein du répertoire "facelift/".

Pour les besoins de ce tutoriel, j'ai utilisé les polices suivantes téléchargées sur DaFont :
- Hard Rock par Last Soundtrack (http://www.dafont.com/hard-rock.font),
- Brushed par Pizzadude (http://www.dafont.com/brushed.font),
- Remington Noiseless par Richard Polt (http://www.dafont.com/remington-noiseless.font),
- Rayair par Rodrigo German (http://www.dafont.com/fr/rayairregular.font).
Remarque : ces 4 polices sont au format TTF, mais les polices au format OTF fontionneront également avec FLIR.

Ouvrez "config-flir.php" dans lequel vous trouverez un bloc de code qui ressemble à ceci :
```
	// Each font you want to use should have an entry in the fonts array.
	$fonts = array();
	$fonts['illuminating'] 	= 'ArtOfIlluminating.ttf';
	$fonts['okolaks'] 		= 'okolaksBold.ttf';
	$fonts['wanta'] 			= 'wanta_091.ttf';


	// The font will default to the following (put your most common font here).
	$fonts['default'] 		= $fonts['okolaks'];
```
Chaque clé (array) dans le tableau "$fonts" correspond à une police que vous avez placé dans le répertoire "fonts/".

Ajoutons les polices que nous avons téléchargé précédemment :
```
	// Each font you want to use should have an entry in the fonts array.
	$fonts = array();
	$fonts['hardrock'] 	= 'HARD_ROCK.ttf';
	$fonts['brushed'] 	= 'BRUSHED.TTF';
	$fonts['remington'] 	= 'Remington-Noiseless.ttf';
	$fonts['rayair'] 	= 'rayairregular.ttf';
```
La mention (clé) entre crochets est celle qu'il faudra utiliser dans notre feuille de styles lorsque nous souhaiterons appliquer les polices à du texte. Pensez donc à quelque chose d'à la fois simple et pertinent :).

Remarque : la police assignée à la clé $fonts['default'] sera utilisée par défaut si aucune autre n'est spécifiée. Dans notre exemple, nous utiliserons la police Rayair.
```
	// The font will default to the following (put your most common font here).
	$fonts['default'] 		= $fonts['rayair'];
```
Il existe une multitude d'autres options à définir dans le fichier "config-flir.php", mais nous allons les laisser de côté pour ce tutoriel de démarrage. Le fichier est explicitement commenté si vous souhaitez en tester d'avantage et vous pourrez également vous référer à la documentation (en anglais) sur le site de FLIR (http://facelift.mawhorter.net/doc/).

Etape 3 - Styler :)

L'ultime manoeuvre consiste à créer notre feuille de styles comme nous le faisons habituellement.
Utilisez les clés définies dans le tableau $fonts (vu plus haut) en tant que nom de police dans vos déclarations.
Nous allons appliquer à notre page la police Hard Rock à l'ensemble des balises <h1>, la police Brushed à toutes les balises auxquelles seront attribué la classe .brushed et la police Remington-Noiseless à toutes les balises <p> associées à la classe .remington.
```
	h1{
		font-family: hardrock, Arial, Helvetica, sans-serif;
	}

	.brushed{
		font-family: brushed, Arial, Helvetica, sans-serif;	
	}

	p.remington{
		font-family: remington, Arial, Helvetica, sans-serif;
	}
```
Il reste pour finir à spécifier au bas de votre fichier HTML les éléments à remplacer dans votre contenu en listant dans la fonction FLIR.auto() que nous avions ajoutée à l'étape 1 vos sélecteurs CSS précédemment créés.
```
	<script type="text/javascript">  
    		FLIR.init();  
		FLIR.auto([ 'h1', '.brushed', 'p.remington', 'strong.important' ]);   
	</script>
```
Dans notre exemple, FLIR remplacera donc par des images l'ensemble des balises <h1>, toutes les balises auxquelles est attribuée la classe .brushed et toutes les balises <p class="remington">.

Les éléments <strong class="important"> seront remplacés par la police par défaut spécifiée plus haut dans le fichier "config-flir.php", car strong.important n'a pas été défini dans notre feuille de styles.
Le texte dans l'image générée prendra la taille spécifiée par la propriété font-size. FLIR prendra également en charge la couleur, l'espace entre les lettres, mais pas l'ensemble des possibilités de transformation de texte (text-transform, font-weight, font-style…) offertes par CSS.

Attention : si le texte que vous souhaitez remplacer passe sur plusieurs lignes, il vous faudra activer le mode "wrap" de FLIR. Pour ce faire, rendez-vous en ligne 689 du fichier "flir.js". Vous devriez voir ceci :
```
	mode: '' // none (''), wrap,progressive or name of a plugin
```
Activez le mode "wrap" ainsi :
```
	mode: 'wrap' // none (''), wrap,progressive or name of a plugin
```
Une dernière remarque pour finir, mais non des moindres : le dossier "facelift/" et son sous-dossier "cache/" doivent avoir des droits en écriture afin que les images puissent être générées (écrites) sur le serveur.

Voir l'exemple final ici : http://course-a-pied.info/flir/

Conclusion

Bien que FLIR soit une solution de remplacement de texte par des images relativement propre, il persiste quelques problèmes mineurs.

La librairie PHP GD n'offre pas un rendu finement détaillé de toutes les polices et, dans certains cas, vous pourrez voir apparaitre quelques artefacts (notamment dans le cas de polices très graphiques que vous afficheriez en un peu trop petit).

Un autre léger défaut de FLIR est qu'il requiert un serveur web supportant PHP et la librairie GD.
Celà dit, mis à part quelques services gratuits la plupart des hébergeurs proposent aujourd'hui les deux.

Un bénéfice de FLIR par rapport à sIFR (son concurrent le plus direct) reste qu'il demeure bien plus facile à implémenter et qu'il ne requiert pas Flash pour générer et visualiser les polices.

L'utilisation de FLIR (pour ce qui est de ces options les plus basiques en tout cas) ne pose pas de problème de validité du code en regard des préconisations du W3C.

FLIR est également davantage accessible. Il est lu par les lecteurs d'écrans et lorsque les images et/ou Javascript sont désactivés, le contenu (sous forme de police "standard" cette fois) apparaît toujours. Il apparaît également en "dur" dans le code source de votre page HTML.
Dans un navigateur traditionnel et toutes options activées, on ne peut néanmoins pas opérer de sélection sur le texte.

Note : Adaptation du tutoriel initialement rédigé en anglais par James Lao : http://net.tutsplus.com/javascript-ajax/how-to-use-any-font-you-wish-with-flir/
Paris Web 2010 est en ligne !

La version 2010 du site internet de Paris Web est en ligne depuis hier.

Comme chaque année en vue de l'édition à venir, ce dernier a fait l'objet d'une refonte importante menée de main de maître par l'ensemble de l'équipe.

Côté design, l'aspect général tranche de manière assez radicale par rapport aux versions antérieures : ajout d'une couleur complémentaire en lieu et place du gris, choix d'une police particulière pour les titres principaux, illustration en page d'accueil et j'en passe.

Côté technique, notons que le site affiche fièrement un Doctype HTML5. L'utilisation du balisage HTML5 étant peut-être un peu prématurée à l'heure actuelle.

Enfin côté contenu, le site semble plus complet que les versions précédentes. Nous remarquons d'ailleurs une nouvelle section très utile intitulée Venir dans de bonnes conditions. Vous y trouverez quelques indications pratiques concernant le logement, la restauration, et le transport.

À l'heure actuelle les inscriptions ne sont pas encore ouvertes et les programmes ne sont pas encore définis. Il faudra donc patienter un petit peu avant de connaître le contenu de cette 5ème édition.
Gérer les débordements de contenu grâce à CSS
Sommaire
Précision : cet article se limite volontairement au dépassement de contenus et non à d'éventuelles erreurs de conception de design, de mauvaise gestion de la fluidité, ou à des débordements de blocs flottants.

overflow: hidden : circulez, y'a rien à voir !

La propriété CSS2 overflow a été conçue pour administrer les débordements d'éléments au sein d'un bloc.

A l'heure actuelle, le peu de valeurs prises en charge par cette propriété la rend quelque peu abrupte : soit le contenu est tronqué et masqué (valeur hidden), soit de laides barres de défilement apparaissent (valeur scroll ou auto).

Voici comment mettre en œuvre cette propriété :
```
	
p.overflow {
      width: 200px; /* à modifier selon vos besoins */
      overflow: hidden; /* les dépassements seront masqués */
}
	
```
Même si cette propriété est actuellement reconnue par l'ensemble du collège des navigateurs, reconnaissons que son manque de souplesse est pour le moins frustrante. Passons donc à d'autres méthodes encore méconnues...

La césure avec word-wrap : chérie, ça va couper !

Dans un texte de contenu, lorsqu’un mot (sans espace ni trait d’union) est plus large que la dimension définie pour son parent, le comportement normal consiste à faire déborder le texte au delà de la largeur normale du cadre, sans retour à la ligne et sans que la dimension du conteneur ne soit affectée (sauf sur IE 6).

Il est toutefois possible de forcer la césure d’un mot long à l’aide de la propriété CSS3 word-wrap, appliquée au parent et qui aura pour effet de couper le mot à un endroit arbitraire afin de provoquer un retour à la ligne.

La propriété word-wrap admet deux valeurs : normal par défaut, et break-word :
```
	
.bloc { 
  word-wrap: break-word;
}
	
```
Cette précaution se révèle particulièrement pratique dans les projets web où l’on n’est pas toujours maître du contenu et où de multiples rédacteurs alimentent le site, par exemple via un gestionnaire de contenu (CMS).

En effet, un certain nombre de cas de figure sont susceptibles de dégrader complètement un design web en raison des débordements de contenus. C’est le cas par exemple pour les URL très longues qui « dépassent » du conteneur prévu, ou des noms d’éléments ou de fichiers à télécharger tels que Mon_Joli_PDF_De_Bilans_Comptables_Avec_Previsionnel_Sur_5_ans.pdf.

Exemple (HTML) :
```
	
<p>L'adresse du lien suivant devrait passer à la ligne pour demeurer au sein du paragraphe<br />
    <a href="http://www.Supercalifragilisticexpialidocious.com">http://www.Supercalifragilisticexpialidocious.com</a>
</p>
	
```
Partie CSS :
```
	
p {
      width: 100px;
      margin: auto;
      padding: 10px;
      background: green;
      color: #fff;
      font-size: 1.2em;  
      word-wrap: break-word;   
}
	
```
Compatibilité

La propriété word-wrap a une particularité qui va vous surprendre : elle est définie dans les spécifications CSS 3 tout en étant supportée depuis Internet Explorer 5.5 ! L’explication est moins sexy puisqu’il s’agit tout simplement d’une propriété inventée par Microsoft et proposée récemment au W3C puis intégrée aux dernières spécifications.

Si cette propriété est aussi peu connue et employée au quotidien, c’est – une fois n’est pas coutume – en raison du mauvais support de Mozilla jusqu’à ce jour puisqu’elle n’est reconnue qu’à partir de Firefox 3.5.

En résumé, puisque seules les anciennes versions de Firefox antérieures à 3.5 ne reconnaissent pas word-wrap, il s’agit véritablement d’une astuce à appliquer sans modération à toutes les zones de contenu où les visiteurs de votre site web risquent d’interagir : commentaires de blog, sujets et messages d’un forum, blocs de largeur réduite, messagerie privée, zones de texte d’un gestionnaire de contenu, etc.
À noter enfin que word-wrap est une propriété finalisée qui ne nécessite pas de préfixe vendeur pour être interprétée.

Pour les plus curieux, voici une une page personnelle de mon crû regroupant quelques exemples et tests de césures : http://ie7nomore.com/fun/wrapping/

Les points de suspension avec text-overflow

Dans certains contextes particuliers, pour ne pas dénaturer la mise en page d’un document, nous sommes amenés à masquer les contenus d’un élément dimensionnés à l’aide de la règle overflow (hidden, scroll ou auto).

Les contenus qui débordent de ce bloc sont alors rognés et invisibles. Il peut être utile de laisser un indice visuel pour indiquer la présence de ce contenu masqué. C’est là qu’intervient la propriété css3 text-overflow : associé à la valeur ellipsis, des points de suspension (…) sont générés à l’endroit où le terme est rogné, mais il est possible de substituer cet indice par un autre de son crû à l’aide de la propriété text-overflow-ellipsis.

Voici comment mettre en œuvre cette propriété :
```
	
p.text-overflow {
      width: 200px; /* à modifier selon vos besoins */
      overflow: hidden;
      -o-text-overflow: ellipsis; /* pour Opera 9 */
      text-overflow: ellipsis; /* pour le reste du monde */
}
	
```
En pratique, text-overflow est une propriété très précieuse pour certains contenus spécifiques et volontairement raccourcis, tels qu’un résumé – ou abstract – d’un article, ou des commentaires de visiteurs que l’on ne souhaite pas afficher en totalité sur la page d’accueil.

Note : gardez bien à l'esprit que text-overflow à lui tout seul ne coupe rien du tout, il ne sert qu'à donner une indication (des points de suspension par exemple) sur un texte déjà coupé (via overflow hidden généralement)

Compatibilité

Proposée par Microsoft et par conséquent compatible depuis Internet Explorer 6, la propriété text-overflow est globalement bien reconnue par l’ensemble des navigateurs actuels (Chrome 4, Safari 3 et Opera 9)… mis à part Firefox qui ne la supporte qu’à partir de la version de développement 3.7.

Fixer des limites avec max-width

La propriété css2.1 max-width ne vous est sans-doute pas inconnue. Elle détermine une valeur de largeur maximale pour un élément de dimension variable (en pourcentage ou em par exemple) et est souvent employée dans le cas de désigns de largeur fluide.

En pratique, cette fonction est particulièrement utile pour la gestion des contenus récalcitrants : plutôt que de limiter la largeur du bloc parent, nous allons nous en servir pour restreindre les dimensions des éléments internes de contenus. L'avantage est que cette propriété peut s'appliquer sur des éléments tels que des images ou des tableaux de données.
```
	
p img {
      max-width: 200px; /* les images seront limitées à 200px de large */
}
	
```
Compatibilité

Pour rappel, la propriété max-width n'est pas supportée par Internet Explorer 6, pour ceux qui s'en soucient encore.

Cas des cellules de tableau

Le comportement des cellules de tableaux est souvent radicalement différent des autres éléments du document. Ainsi, certaines propriétés ne s'y appliquent pas, ou demeurent bridées.

Pour rendre word-wrap et text-overflow fonctionnels sur la majorité des navigateurs, il suffit généralement d'indiquer une largeur maximale (max-width à la cellule de tableau incriminée. Cependant, il apparaît que cela n'est pas interprété sur toutes les versions d'Internet Explorer : c'est supporté sur IE6 et IE7... mais pas sur IE8 !

Une autre solution, un peu plus lourde et obstrusive, est à mettre en pratique : fixer la largeur du tableau et lui applique une déclaration table-layout: fixed :
```
	
table {
      width: 600px; /* à adapter selon vos contraintes */
      table-layout: fixed; 
}
	
```
Conclusion

Jusqu'alors frustré par les possibilités restreintes de CSS2, nous allons dès à présent pouvoir profiter des opportunités offertes par CSS3 afin de gérer au mieux les différents cas de dépassements de contenus provoqués par des contributeurs maladroits.

L'avantage étant que même si certaines de ces propriétés ne sont pas encore supportées par tous les navigateurs actuels (Firefox notamment), nous n'avons aucun risque à les employer puisque le préjudice demeure assez faible en cas de non reconnaissance.
[Coup de gueule] : Citez vos sources !
Edit : Au vu des commentaires, je me rends compte que la version précédente de ce billet pouvait porter à confusion (je m'en excuse une fois encore auprès des personnes concernées). Afin d'éviter tout amalgame malheureux, ce dernier a donc été remanié comme suit :

Comme le disait Raphael il n'y a pas si longtemps : nous vivons une époque formidable.

Pourquoi ?
Mais simplement parce que les choses bougent :
- parce que HTML5 est là, tout près ;
- parce que CSS3 nous laisse entrevoir des choses insoupçonnables il n'y a pas si longtemps ;
- parce que les Standards du Web sont enfin rentrés dans les moeurs ;
- parce que l'accessibilité n'est plus forcément la dernière roue du carrosse ;
- parce qu'il fait beau et que les oiseaux chantent.
Cette époque a amené avec elle son lot de changements et d'évolutions formelles et fonctionnelles.
Côté contenu, l'interactivité l'emporte haut la main. Côté design, les nouvelles tendances mettent à l'honneur icônes, polices atypiques et fond texturés.

Pourquoi pas, après tout... :o)
On voit de très belles réalisations dans le genre. Je pense par exemple à Remix Jobs ou encore Peaxl qui semble bien parti pour être superbe.
La nouvelle version de l'agence Alsacréations n'échappe d'ailleurs pas à la règle.

Je précise que la suite de mes propos ne concerne pas les sites susnommés. Je trouve simplement qu'ils illustrent parfaitement la nouvelle tendance graphique évoquée.

Ce qui fait la force de ce nouveau genre de design, c'est justement les ressources sur lesquelles il s'appuye : les polices exotiques, les icône web 2.0 et les arrière-plan de caractère.
Ces ressources sont, dans la majorité des cas, distribuées sous Licence Creative Commons. La seule obligation du site y ayant recourt est donc de nommer explicitement l'auteur en citant son nom.

Là où le bât blaisse, c'est que bon nombre de sites utilisant des éléments sous Creative Commons ne citent par leurs sources : ils "oublient" de mentionner les auteur concernés.

A la place, on y trouve plutôt une phrase du style :
Les textes proposés, les images et illustrations sont la propriété exclusive de "insérer ici le nom du site". Il est interdit de reproduire, représenter, transférer, distribuer, ou d'enregistrer tout ou partie de ces éléments, sous quelque forme que ce soit, sans l'accord préalable et écrit de "insérer ici le nom du site".

Un comble, vous ne trouvez pas ?

Alors soyez réglo et citez vos sources !
C'est finalement la moindre des choses que de rendre à César ce qui lui appartient !
Car le jour où il fermera les vannes, on sera tous bien em...és !
Apprendre jQuery / Ajax en DVD
Nous avons le plaisir de vous annoncer la sortie d'un nouveau DVD aux éditions Elephorm dont le sujet est l'apprentissage de jQuery. Celui-ci a été réalisé en collaboration avec Alsacréations à l'attention de tous ceux souhaitant découvrir ce framework de plus en plus incontournable, en ayant des notions de JavaScript ou non. On y fait le tour en vidéo, explications et démos de l'ensemble des fonctionnalités essentielles de jQuery.

Sommaire (simplifié)
- Principes de base
- Mise en œuvre de JavaScript et jQuery
- Votre premier script jQuery minimaliste
- Sélecteurs et filtres
- Événements (souris, clavier
- Manipulations du texte et du code HTML
- Manipulations des attributs
- CSS et manipulations des classes
- Dimensions et positionnement
- DOM (Document Object Model) et contenus dynamiques
- Animations et Effets
- Parcours, recherche
- Mises en applications (liste déroulante, accordéon, onglets, slideshow, lightbox)
- Écriture de plug-ins
- Étendre les possibilités de jQuery avec l'écriture de plug-ins
- Ajax, load, $.ajax, $.post, $.get, traitements XML et JSON
Synopsis

Ce DVD introduit pas à pas toutes les notions fondatrices de ce langage avant d'en détailler les fonctionnalités et applications principales. Créez des effets d'animation, des présentations dynamiques, des menus ergonomiques facilement implémentables et compatibles multi-navigateurs, et bien d'autres applications encore. Des projets complets joints à cette formation permettront de trouver de nouvelles bases solides pour enrichir vos projets Web. Les méthodes Ajax offertes par jQuery y sont détaillées avec des cas pratiques construits pas-à-pas.

La durée totale est de 5h. Le contenu est également disponible en VOD.

Vous pouvez retrouver ce DVD jQuery sur Elephorm, Fnac.com, Amazon (bientôt) et dans la plupart des rayons informatique (librairies ou grandes surfaces).

Tutoriaux pour la création de site web

Astuce : Utiliser CSS3 aujourd'hui, outils et ressources
Bien que les spécifications CSS 3 soient encore dans un état embryonnaire, il devient acquis qu'un certain nombre de ses composantes sont déjà exploitables en production sur les navigateurs actuels, moyennant quelque gymnastique pour notre attachant boulet à tous qu'est Internet Explorer.

Le contexte actuel est pour le moins excitant pour nous autres webdesigners, puisque l'on peut enfin s'évader d'une norme CSS2.1 vieille de plus de 10 ans ! Nous nous trouvons dans une période clé, et de grands changements vont bientôt s'opérer dans notre façon de travailler au quotidien. Cependant Internet Explorer modère cet engouement puisque seule sa version 9 commence à supporter ces nouveautés, version encore au stade beta non utilisable par le grand public.

De multiples ressources CSS3 pour déjouer les faiblesses d'IE voient le jour presque quotidiennement, notamment par l'ajout de JavaScript. On en vient à soupeser les avantages et inconvénients de chacune de ces solutions : d'un côté la rapidité d'intégration; de l'autre une baisse de performance non négligeable sur ce navigateur. Selon le contexte, le public ciblé ou nos affinités, la balance ne penche pas toujours du même côté.

Voyons quelques uns de ces outils en ligne en vogue actuellement :

CSS3pie.com

Dans la jungle des outils permettant d'émuler CSS3 sur Internet Explorer, CSS3Pie semble être le plus robuste aujourd'hui et bénéficie d'une communauté et d'un compte Twitter plutôt actifs.

Via un fichier .HTC, CSS3Pie permet d'appliquer un certain nombre de propriétés CSS3 intéressantes : border-radius, box-shadow, border-image, backgrounds multiples et dégradés linéaires. Très prometteur.

CSS3please.com

CSS3Please n'est rien d'autre qu'une excellente démonstration en direct et interactive de différentes propriétés CSS3 (arrondis, ombrages, dégradés, transparence, rotation, transition, font-face)

Vous pouvez modifier les options et valeurs de la page, elles s'appliqueront instantanément sur la boîte d'exemple et l'ensemble des syntaxes (-moz-, -webkit-, et filtres IE) est proposée.

CSS3generator.com

Dans la même veine que CSS3Please, CSS3Generator est un outil de génération automatique de syntaxes CSS dont le résultat est affiché en direct à l'écran.

Certaines fonctionnalités telles que les colonnes multiples, resize, box-sizing ou outline le démarquent de ses concurrents.

IE-css3.js

Toutes les ressources ne se limitent pas à rendre utilisable les propriétés CSS3, certaines telles que IE-CSS3.js permettent d'émuler les différents sélecteurs (:first-child, :last-child, :nth-child, :focus, :target,…) CSS3 sur IE6-IE8 via JavaScript.

Sous forme de plugin ajouté à un framework existant (jQuery, Mootools, Prototype,…), cet outil nous semble bien abouti et robuste.

Font-face generator

Exclusivement dédié à l'intégration de polices non standards sur tous les navigateurs, Font-face generator permet non seulement de convertir un fichier de fonte en plusieurs formats (.eot, .ttf, .woff) mais offre également une page de démonstration du résultat obtenu. Et ça marche !

Gradients generator

Gradients generator vous facilite la création de vos dégradés linéaires ou radiaux à l'aide d'un environnement où se croisent pipette, plage de couleurs, options de dégradés, code obtenu et résultat visuel.

N'oublions pas ces deux autres sites de ressources et d'information :

CSS3.info

CSS3.info est site d'information sur les spécifications CSS3 pertinent et régulièrement alimenté.

Vous y trouverez les dernières actualités concernant cette norme et les navigateurs, quelques tutoriels ainsi que l'avancement des travaux sur les différentes propriétés et sélecteurs.

Findmebyip.com

FindMeByIP propose quelques tableaux évocateurs du support actuel des navigateurs concernant les diverses propriétés CSS3 et les sélecteurs.

On y constate généralement que le retard pris par Internet Explorer est véritablement significatif et qu'il demeure complètement isolé à l'heure actuelle.

Et aussi…
- 10 CSS properties that ‘were’ impossible to implement in IE6
- IE-CSS3.htc de Fetchak : même principe de CSS3Pie, mais un peu plus limité
- CSS Transform sur IE : rotations et déformations sur Internet Explorer
- Border-radius.com : testez vos coins arrondis en direct
- Roundies.js : un petit script JavaScript très léger pour des coins arrondis simples sur IE
- IE7nomore.com : une page de tests de CSS avancés (pas uniquement CSS3)
- When can I use : un récapitulatif des dernières technologies et de leur support sur les générations de navigateurs
- Et certainement bien d'autres demain…
Astuce : Activer l'impression des éléments HTML5 sous Internet Explorer
Internet Explorer (versions 6,7,8) fait face à un problème de gestion de l'impression des balises HTML5, car il ne prend pas en compte les styles pour le média print pour ces balises (même si vous les avez déclarées dans le DOM pour les afficher pour le média screen).

La seule solution actuellement est d'inclure un fichier JavaScript qui fixe ce problème : IE Print Protector. Celui-ci remplace temporairement les éléments HTML par des autres éléments neutres (comme div et span) avant l'impression, puis les restaure après, tout en conservant les styles associés.

Notez que html5shiv intègre désormais également IE Print Protector. Pour l'utiliser, vous pouvez inclure ce bout de code dans l'élément head avant les appels aux feuilles de styles CSS.
```

```
Article complété par dew
Astuce : Simulez votre site sur téléphones mobiles avec ProtoFluid
Du fait de la pluralité des plateformes et des différences des moteurs de rendus, il n'est pas toujours aisé de tester son site web sur le media mobile. Sans compter le coût d'acquisition du matériel. La plupart des émulateurs en ligne se contentent malheureusement de redimensionner la page sans tenir compte des spécificités inhérentes à chaque terminal : iphonetester.com, l'extension Webdeveloper, viewlike.us, resizemybrowser,…

En dehors de l'installation des divers SDK officiels des constructeurs ou de l'excellente version d'Opera Mobile installable sur un système d'exploitation classique (Windows, Mac OS X...), point de salut pour visualiser ses pages dans un environnement proche des conditions réelles.

ProtoFluid est une application en ligne permettant de simuler au mieux l'affichage de votre site web ou d'une url locale sur divers terminaux mobiles :
- Motorola Droid
- iPhone/iPod
- iPad
- Google Nexus One
Simple et efficace pour un test rapide

Il suffit de renseigner l'URL à visionner ainsi que la plate-forme désirée, et sa résolution si vous souhaitez la modifier. Le résultat apparaît dans une fenêtre modale (lightbox). Il vous est ensuite possible de modifier l'orientation (portrait ou paysage) puis de rafraîchir votre résultat.

Pour l'avoir testé sur quelques uns de nos sites web dont les feuilles de styles prennent en charge le média mobile (meta tag "viewport", CSS media queries), tels que alsacreations.fr et ie7nomore.com, je ne peux qu'en conclure que l'outil se rapproche beaucoup plus du résultat escompté que ses congénères, même si le rendu reste tributaire du navigateur utilisé pour consulter le site ProtoFluid car la simulation ne se fait qu'au travers d'un élément iframe et de JavaScript. Il faudra donc éviter d'y accéder avec Internet Explorer.

Viewport et Media Queries CSS3

Il est possible de définir la résolution du terminal à l'aide du meta tag viewport reconnu par Safari, Webkit et Opera à l'heure actuelle. Ce meta tag est généralement un bon point de départ pour adapter harmonieusement un design sur le média mobile. ProtoFluid prend en compte les informations véhiculées via ce meta tag.

Les Media Queries sont interprétées sur les navigateurs les connaissant, accompagnées des propriétés width, max-width, max-device-width ainsi que orientation (portrait ou landscape).

Par contre, dans le cas ou vous testeriez sur un écran d'ordinateur classique, vous devrez accompagner votre règle media query max-device-width par un complément max-width sous peine de ne pas être pris en compte puisque votre écran de bureau ne peut pas être considéré comme un périphérique d'affichage de taille réduite :
```
@media only screen and (max-device-width:640px), only screen and (max-width:640px) {
   body  {width: auto}
}
```
Le marché du téléphone intelligent est en plein boom et chaque jour naissent de nouvelles ressources et outils pratiques pour faciliter le développement ou les tests sur le média mobile. ProtoFluid n'est pas parfait mais une nouvelle ressource verra peut-être le jour pour des simulations encore plus pratiques et fidèles.

L'équipe de développement, Optic Swerve, est en train de plancher sur une nouvelle version (1.1) de leur outil, vous pouvez suivre l'évolution du projet sur leur compte Twitter.

Limites de l'outil

Comme tout outil de ce type, ProtoFluid ne peut que "deviner" comment va se comporter le moteur de rendu final et s'y adapter à partir de votre navigateur de test. Cela signifie que certaines technologies présentes sur votre poste de bureau (flash par exemple) vont apparaître sur la simulation iPhone, ce qui ne risque pas d'arriver de sitôt sur un véritable terminal d'Apple.
De même, certaines règles CSS telles que le positionnement fixé, normalement désactivé sur de nombreux mobiles, vont tout de même être exécuté sur la simulation.
Sachez tenir compte de ces incongruités dans vos tests.

Liens connexes
Tutoriel : Slideshow en CSS3

Beaucoup de Webdesigners en rêvent : utiliser les CSS plutôt que le JavaScript ou le Flash pour animer leur page web. Ce rêve devient petit à petit concret avec les nouvelles implémentations des modules CSS en cours de travail (Working Draft), notamment CSS3 Animations. Celui-ci équipé des keyframes devient fort intéressant pour un contrôle avancé des animations. Nous verrons donc comment utiliser cette nouveauté, mais aussi comment combiner intelligemment la pseudo-classe target pour réaliser un slideshow. [...]
Astuce : Opensearch pour ajouter le moteur de recherche à votre navigateur
Vous pouvez désormais ajouter le moteur de recherche d'Alsacreations à votre navigateur si celui-ci est équipé d'une zone adaptée. Il vous suffit de cliquer sur la liste déroulante des moteurs intégrés et de choisir "Ajouter". Vous pourrez le retirer par la suite si vous le souhaitez dans les paramètres (sous Firefox "gérer les moteurs de recherche").

Les navigateurs compatibles avec Opensearch sont :
- Mozilla Firefox 2+
- Google Chrome
- Internet Explorer 7+
Malheureusement Opera ne l'exploite pas encore, malgré la présence d'un champ de recherche dans son interface. OpenSearch a initialement été proposé par A9 (Amazon).

Comment cela fonctionne-t-il en pratique ?

Pour ajouter une telle fonctionnalité sur votre site, il vous suffira d'éditer deux fichiers.

La description XML

Premièrement il faut créer un fichier XML tel que opensearch.xml, placé par exemple à la racine de votre site :
```
<?xml version="1.0" encoding="UTF-8" ?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
  <ShortName>Alsacreations</ShortName>
  <Description>Recherche dans les ressources</Description>
  <Image>favicon.png</Image>
  <Language>fr</Language>
  <InputEncoding>UTF-8</InputEncoding>
  <Url type="text/html" template="http://www.alsacreations.com/search/tag/{searchTerms}"/>
</OpenSearchDescription>
```
Celui-ci est relativement simple à comprendre. Des exemples plus complets avec d'autres balises sont disponibles sur le site Opensearch.org Specifications.

OpenSearchDescription

Il s'agit de l'élément racine, de namespace http://a9.com/-/spec/opensearch/1.1/

ShortName

Le titre de votre moteur/site de recherche

Description

La description un peu plus longue.

Url

L'adresse à interroger, dont l'attribut template définit le masque, notamment via {searchTerms} qui sera remplacé par les mots entrés dans le champ d de recherche (et échappés, de la même façon que urlencode en PHP).

Image

L'url vers l'image favicon du site.

Language

La langue d'après la spécification XML.

InputEncoding

Pour spécifier l'encodage des valeurs à utiliser, par exemple UTF-8.

Le lien avec link

Deuxièmement, y faire référence dans le code source du site, section head, grâce à l'élément link avec les attributs (rel, type, title) appropriés et surtout l'URL vers le fichier XML dans l'attribut href :
```
<link rel="search" type="application/opensearchdescription+xml" title="Alsacreations" href="http://www.alsacreations.com/opensearch.xml" />
```
Note : Le titre indiqué dans la balise link doit correspondre au contenu de la balise ShortName du fichier XML.

Bien entendu cette spécification va au-delà du simple ajout au moteur et définit d'autres fonctionnalités d'interrogation et de réponses, avec une présentation des résultats et des agrégateurs.
Astuce : Inclure la librairie jQuery de manière optimisée
jQuery est désormais une librairie JavaScript bien connue, permettant en quelques lignes de code de dynamiser un site web, de créer de petites animations, des interactions avec les formulaires, de programmer des appels Ajax. Voici en détails quelques possibilités d'intégration à votre site, afin de minimiser l'impact sur les performances et le temps de chargement.

Appel classique à la librairie (fichier téléchargé)

De la manière la plus basique, il est vous est proposé sur le site jQuery.com de télécharger le fichier - en affichant son code source - et de le placer sur votre site, par exemple dans jquery.js ou jquery-1.4.2.min.js.

Fichier et compression

Vous récupérerez ainsi une version "minifiée", c'est à dire compressée jusqu'à un certain niveau par un algorithme supprimant espace et commentaires, mais rendant peu lisible la déclaration des fonctions. Ceci n'est pas bien grave car il s'agit la plupart du temps de ne pas modifier cette librairie mais de la combiner à nos propres fonctions, déclarées de façon externe.

Voyez les différences entre la version non minifiée et la version minifiée. Sachez qu'il est possible de faire de même pour vos propres scripts grâce à Google Closure Compiler ou encore YUI Compressor de Yahoo.

Il vous est aussi possible de délivrer ce fichier re-compressé au format gzip pour gagner encore en taille, c'est à dire 24 Ko au total au lieu de 72 Ko. Pour ceci, consultez le tutoriel correspondant : Compression des pages web avec Gzip ou Deflate en HTTP.

Performances au chargement

Pour des questions de performance, Google Code et Yahoo Developer Network : Exceptional Performance recommandent :
- de placer les appels aux librairies en fin de page avant </body>
- de placer les appels aux feuilles de style CSS avant, dans la section <head> grâce au tag link
- de combiner au maximum les fichiers JavaScript/CSS, de les compresser/minifier et de les externaliser (c'est à dire les placer chacun dans un fichier externe à la page et non en ligne avec toutes leurs instructions dans le code html)
Vous obtiendrez ainsi :
```
<!doctype html>
<html>

  <head>
     <title>Titre de la page</title>
     <link rel="stylesheet" type="text/css" href="styles.css">
  </head>

  <body>
     ...
     <script src="jquery.js"></script>
     <script src="mon_script.js"></script>
  </body>

</html>
```
Depuis Google AJAX Librairies API

Google propose une API dédiée au chargement de différentes librairies, . L'avantage étant de bénéficier d'un hébergement externe et rapide (mais soumis la plupart du temps à une requête HTTP+DNS supplémentaire) avec un fichier délivré en gzip sans avoir à configurer votre serveur. Il vous faudra néanmoins vous inscrire - gratuitement - pour obtenir une clé API AJAX Search.
```
<script type="text/javascript" src="http://www.google.com/jsapi?key=VOTRE_CLE"></script>
<script type="text/javascript">google.load("jquery", "1.4.2");</script>
```
Le premier argument étant le nom de la librairie, et le deuxième sa version (si vous spécifiez "1.4", vous obtiendrez la dernière version de la branche "1.4.x", avec "1" aussi, etc). Vous pouvez également directement charger ce fichier en vous passant de l'appel à l'API JS google.load :
```
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
```
D'autres librairies sont disponibles (MooTools, Dojo, SWFObject, YUI, Chrome Frame, WebFont), pour ceci consultez la documentation. Reprenons notre exemple, sans avoir besoin d'héberger le fichier jquery.js :
```
<!doctype html>
<html>

  <head>
     <title>Titre de la page</title>
     <link rel="stylesheet" type="text/css" href="styles.css">
  </head>

  <body>
     ...
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
     <script src="mon_script.js"></script>
  </body>

</html>
```
Votre premier script jQuery

Bien entendu il vous faudra placer votre propre fichiers JavaScript ou vos déclarations à la suite de cet appel, dans mon_script.js. Ceci est la plupart du temps valable pour les autres librairies JavaScript.

Pour ceci vous avez deux possibilités :
- placer une fonction directement dans le code de la page à l'aide de la balise <script> mais sans fichier externe (sans attribut src). Le seul avantage de cette méthode est de supprimer une requête HTTP, mais cela ajoute du contenu à votre code HTML qui ne sera pas (ou plutôt rarement) mis en cache.
- placer vos instructions dans un fichier externe (*.js), plus facile à maintenir et à inclure sur un groupe de pages de votre site, avec le petit inconvénient d'effectuer une requête HTTP en plus.
Utilisons la deuxième solution pour placer notre script jQuery dans mon_script.js. Dans la majorité des cas, nous souhaiterons exécuter le code au chargement de la page, grâce à la fonction ready() appliquée à l'objet document. C'est-à-dire lorsque les objets de la page seront prêts à être manipulés par JavaScript.
```
$(document).ready(function() {
   // Votre code ici
});
```
La fonction $() est la fonction magique de jQuery. Celle-ci permet de cibler les éléments grâce aux sélecteurs, de déclarer des gestionnaires d'événements, d'utiliser les autres fonctions de la librairie, il s'agit en réalité d'un alias sur l'objet jQuery lui-même.

Tranchons dans le gras

Le but de cet astuce étant juste de faire appel minimaliste à jQuery, nous nous contenterons pour cette démonstration de masquer un élément <div id="masque">, puis de le révéler au clic sur un lien <a id="afficher">Afficher l'élément</a>.

Toujours dans la déclaration $(document).ready(function() {, nous placerons les instructions jQuery de notre script :
```
$(document).ready(function() {

   // Dès le chargement on masque l'élément portant l'id #masque
   // grâce à la fonction hide() de jQuery
   $("#masque").hide();

   // On déclare un gestionnaire d'événement 'click' sur un lien
   // pour afficher l'élément précédemment masqué
   $("a#afficher").click(function() {

      // La fonction click() appliquée à notre sélecteur $("a#afficher")
      // prend en argument une fonction anonyme (sans nom) contenant
      // le reste des instructions :

      $("#masque").show("fast");

      // L'argument "fast" est facultatif mais nous permet
      // d'afficher l'élément avec une petite animation

      return false;

      // On retourne 'false' pour prévenir l'exécution du lien
      // c'est à dire pour éviter au navigateur de changer de
      // page en suivant son attribut href

   });

   // Faites bien attention à la syntaxe et à l'imbrication des
   // parenthèses et accolades

});
```
Démo

Consultez la démonstration pour explorer le code source :
- index.html
- mon_script.js
Voici donc une brève introduction à l'inclusion de jQuery sur votre site. N'hésitez pas à consulter la documentation de jQuery pour faire connaissance avec les autres fonctions et sélecteurs possibles ou à utiliser la section JavaScript du forum.
Tutoriel : Exploiter n'importe quelle police dans vos pages HTML avec FLIR

Pouvoir exploiter n'importe quelle police de caractère dans le contenu des pages web sans avoir à créer systématiquement des visuels (des images) est une demande récurrente de la part des designers. Nous lésinons cependant à accéder à leur requête car si diverses solutions existent déjà (hack CSS @font-face, sIFR...), elles posent un certain nombre de difficultés : compatibilité cross-browser, validité du code source en regard du W3C, accessibilité, emploi de technologies propriétaires…

Ce tutoriel vous propose de mettre en place rapidement Facelift Image Replacement (ou FLIR), une alternative intéressante à sIFR, car elle ne requiert pas Flash.
[...]
Tutoriel : Gérer les débordements de contenu grâce à CSS

Comment ça ? Vous pensiez être maître de votre design web et voilà que certains bouts de textes débordent par-ci par-là en cassant toute votre œuvre ? Quel manque de reconnaissance de vos rédacteurs !

J'ai une mauvaise nouvelle pour vous : le Web n'est pas un média figé ou paginé tel que le média d'impression. Vous n'êtes pas maître de votre contenu et il va falloir vous y faire.

Puisque - heureusement - il n'est plus possible de fixer la taille, voici un point sur les différentes techniques modernes permettant de canaliser les caprices de vos contributeurs…
[...]
Tutoriel : Comment centrer verticalement sur tous les navigateurs ?
Ce tutoriel présente des solutions pour centrer verticalement des éléments de tailles variables dans des conteneurs de hauteur fixe ou fluide.

Les techniques exposées sont compatibles avec tous les navigateurs actuels, y compris IE7 (IE6 n'est volontairement pas abordé) et n'utilisent ni <table>, ni JavaScript.

Sommaire
1. Introduction
2. Avant d'aller plus loin
3. Centrage vertical dans un conteneur de hauteur fixe avec :
4. Centrage vertical dans un conteneur de hauteur fluide avec :
  - plusieurs blocs alignés
5. Conclusion
Introduction

Le temps du valign=middle sur nos tableaux de mise en page est bel et bien révolu. La démocratisation de la sémantique (X)HTML a donné naissance à de jolis gabarits standardisés, mais a également marqué la disparition des techniques simples pour centrer verticalement.

Avec CSS2 et l'arrivée de nouvelles valeurs pour la propriété display, beaucoup ont vu en table-cell une nouvelle ère pour le centrage vertical. Cette valeur permet d'indiquer qu'un élément doit se comporter comme une cellule d'un tableau, sur laquelle le vertical-align:middle pourrait fonctionner. Comme à la bonne époque des <table>.

Malheureusement, c'était sans compter sur le vilain petit canard : Internet Explorer. En effet, celui-ci ne supporte display:table-cell qu'à partir de sa version 8. Si aujourd'hui, faire sans IE6 peut être envisageable, il n'est pas évident de faire de même avec son grand frère (actuellement 15% des internautes utilisent IE7, et celui-ci est imposé par les administrateurs réseaux dans encore beaucoup d'entreprises).

Bref, le dossier "display:table-cell et centrage vertical" fût rangé au placard, on s'est dit qu'on le ressortirait après les funérailles ~~d'IE6~~ et d'IE7. L'acharnement provoqué autour de la propriété table-cell a finalement réussi à ancrer dans les mœurs des idées bien reçues autour du centrage vertical : Non, il n'est pas possible aujourd'hui de centrer verticalement à cause d'IE.

Pourtant, si l'on remonte à la source et que l'on regarde la spécification de la propriété vertical-align :

La propriété vertical-align s'applique aux éléments de type en-ligne et à l'élément table-cell.

On retrouve effectivement notre ami table-cell, mais pourquoi la piste des éléments "en-ligne" a t-elle suscité aussi peu d'attention ?

Et au fait, le vertical-align ça marche comment ? Descendons un peu plus bas dans la doc :

vertical-align se rapporte à la valeur de la propriété line-height de l'élément lui-même.

Donc pour résumer, et sans rien inventer, le centrage vertical doit théoriquement fonctionner sur un élément "en-ligne" (de nature, ou modifié avec display:inline-block), couplé avec un line-height adéquat.

Essayons de voir ce que cela donne en pratique...

Avant d'aller plus loin
- Ce tutoriel n'a pas pour vocation d'expliquer en détail le fonctionnement du display:inline-block. Si vous n'êtes pas familier avec cette propriété je vous invite à consulter les ressources suivantes avant de continuer la lecture :
  
  Mise en page CSS avancée grâce à la propriété display (Alsacreations)
  Inline-block dans tous les navigateurs modernes ? (Covertprestige)
- Les techniques abordées ne sont pas initialement compatibles avec Internet Explorer 6. Et puis quoi encore...
- Elles pourraient l'être avec Firefox 2.x, mais au vu des statistiques de ce dernier, est-ce bien nécessaire ? (si toutefois vous tenez vraiment à la compatibilité, le correctif se trouve quelque part dans les liens juste au dessus).
- Ce tutoriel traite exclusivement du centrage vertical. Si vous souhaitez en savoir plus sur le centrage horizontal, jetez un coup d'oeil à cet article.
- Le code présenté sur cette page a été allégé afin de ne présenter que l'essentiel de chaque technique. Vous trouverez le code complet dans les démos.
- La plupart des techniques présentées ici utilisent du line-height sur des éléments (de nature ou modifiés) inline. Ce qui veut dire que le résultat peut varier en fonction de la police utilisée et de sa taille (donc du navigateur, du système d'exploitation, etc.). D'une manière générale, n'utilisez pas ces techniques pour créer des gabarits où les éléments sont alignés au "pixel près", mais plus pour réaliser les mises en forme de vos contenus.
Centrer verticalement une image de taille variable dans un conteneur de hauteur fixe

Écritures XHTML qui fonctionnent sur tous les navigateurs :
```
<p> <img src="img.jpg" alt=""/> </p>
```
```
<p><span><img src="img.jpg" alt=""/></span></p>
```
```
<p>
	<img src="img.jpg" alt=""/>
</p>
```
Ne fonctionne pas sur IE7 :
```
<p><img src="img.jpg" alt=""/></p>
```
Le code CSS :
```
p { 
height:200px;
line-height:200px;
text-align:center; /* centrage horizontal d'un élément en-ligne */ }

img { 
vertical-align:middle; }
```
Voir la démo.

Concernant IE7, celui-ci a besoin d'espaces ou d'un élément "en-ligne" comme <span> autour de l'image pour déclencher le centrage. Pour entretenir sa réputation de maillon faible, sans doute.

Centrer verticalement une ligne de texte dans un conteneur de hauteur fixe
```
<p>Lorem ipsum</p>
```
```
p {
height:200px;
line-height:200px;
text-align:center; /* centrage horizontal */ }
```
Voir la démo.

Technique mondialement connue qui a fait ses preuves. On utilise le combo height / line-height pour réaliser le centrage, la propriété vertical-align devient optionnelle.

Centrer verticalement plusieurs lignes de texte dans un conteneur de hauteur fixe
```
<p> <span>Lorem ipsum <br/> Cras [...]</span> </p>
```
```
p {
height:200px;
line-height:200px;
text-align:center; /* centrage horizontal */ }

span { 
width:100px; /* largeur zone de texte */
border:1px solid #fff;
vertical-align:middle;
display:inline-block;
line-height:1.2; /* on rétablit le line-height */
text-align:left; /* ... et l'alignement du texte */ }
```
Voir la démo.

Comme pour le centrage vertical d'une image, on dispose de 3 écritures pour faire fonctionner la technique sur IE7 (mettre des espaces, encapsuler dans un élément "en-ligne" ou encore indenter l'imbrication).

Pas besoin de corriger le inline-block pour IE7, cette valeur fonctionne correctement sur les éléments nativement "en-ligne".

Centrer verticalement un bloc dans un conteneur de hauteur fixe
```
<div class="conteneur">
	<div class="bloc">
		<h3>Kikoo !</h3>

		<p>Lorem ipsum [...]</p>
	</div>	
	<span></span>
</div>
```
```
div.conteneur {
height:200px;
line-height:200px;
text-align:center; /* centrage horizontal */ }

div.bloc {
width:100px;
border:1px solid #fff;
vertical-align:middle;
display:inline-block;
line-height:1.2; /* on rétablit le line-height */
text-align:left; /* ... et l'alignement du texte */ }
```
Et pour IE7 seulement, à l'aide des commentaires conditionnels (ou d'autres choses) :
```
div.bloc { 
display:inline; /* correctif inline-block */ }

div.conteneur > span { 
zoom:1; /* layout */ }
```
Voir la démo.

La technique utilisée ici est très similaire à la précédente. Seul le correctif pour IE7 est un peu plus élaboré.

Sur IE7, le centrage vertical ne pose pas de problème avec des blocs alignés dans un conteneur de hauteur fluide (voir la méthode suivante du tutoriel). D'où l'idée d'utiliser un <span> de pleine hauteur mais de largeur nulle pour déclencher le line-height (un <span> doté du layout occupera toute la hauteur de son parent. La propriété display:inline-block permettant également de conférer le layout à un élément, on pourrait aussi l'utiliser à la place de zoom:1).

Et enfin, vous aurez remarqué le choix d'un sélecteur d'enfant ( > ) pour cibler le <span>, ce qui nous évite d'alourdir inutilement le code (X)HTML avec une classe CSS supplémentaire.

Centrer verticalement des blocs dans un conteneur de hauteur fluide
```
<div class="conteneur">

	<div class="bloc">
		<p>Cras mollis [...]</p>
	</div>
	
	<div class="bloc">
		<p>Lorem ipsum [...]</p>
	</div>
	
</div>
```
```
div.conteneur { 
text-align:center; /* centrage horizontal */ }

div.bloc { 
width:100px;
margin:0 10px; /* espacement horizontal des blocs */
border:1px solid #fff;
display:inline-block;
vertical-align:middle;
text-align:left; /* on rétablit l'alignement du texte */ }
```
Et pour IE7 :
```
div.bloc { 
display:inline; /* correctif inline-block */ }
```
Voir la démo.

Rien d'extraordinaire dans cette technique, on applique simplement les bases du display:inline-block, sans oublier le correctif pour IE7 qui ne reconnait inline-block que pour les éléments naturellement "en-ligne".

Notez toutefois que pour fonctionner sur IE7, le bloc doit également avoir le layout (qui est conféré automatiquement si celui-ci a une largeur fixe en pixel ou en pourcentage. Si ce n'est pas le cas, et en dernier recours, on pourra ajouter un zoom:1 ou un height:1% au correctif).

Conclusion

Les méthodes exposées dans ce tutoriel devraient vous permettre de coder vous-même les quelques cas de figure manquants (notamment en ce qui concerne les conteneurs de hauteur fluide).

N'oubliez pas que les résultats obtenus dépendent fortement du contexte dans lequel sont placés les éléments. Et que ceux-ci peuvent être décalés de quelques pixels (par rapport à un centrage parfait) en fonction de la police et de sa taille.

Le décalage reste tout de même quasiment invisible à l'oeil nu. Vous pouvez donc utiliser sans crainte ces solutions en production. :)
Astuce : Une «classe conditionnelle» pour IE 6 et 7
Les cancres du Web, Internet Explorer 6 et 7, nous mènent parfois la vie dure. Même quand on s’abaisse à leur niveau, il leur arrive de ne pas comprendre, ou d’y mettre de la mauvaise volonté.

C’est qu’en plus d’être limités, ces deux navigateurs ont parfois des réactions bizarres. Heureusement, IE8 corrige largement ces problèmes. Mais comment gérer le cas Internet Explorer 7 quand modifier légèrement les styles appliqués à tous les navigateurs ne suffit pas? Ou pire encore, gérer les multiples bugs d’IE6 (si vous en assurez encore le support)?

La solution classique (comprendre: à l’ancienne) est d’utiliser des hacks CSS. Ces derniers sont déconseillés car peu fiables; en effet, on ne sait jamais à l’avance quels seront les navigateurs sur le marché dans deux ou cinq ans, et comment ils comprendront ou pas nos hacks CSS. Une deuxième solution, conseillée par Microsoft et Alsacréations (que du beau monde :)), est d’utiliser les commentaires conditionnels.

Nous allons voir dans cette article que l’utilisation habituelle des commentaires conditionnels a quelques désavantages, et proposer une technique qui combine le meilleur des deux mondes: commentaires conditionnels pour cibler Internet Explorer, et quelques hacks CSS pour cibler des versions particulières.

1. Utilisation classique des commentaires conditionnels

On veut appliquer à chaque version d’Internet Explorer qui pose problème (mettons la 6 et la 7) une feuille de styles qui comportera quelques lignes de correctifs CSS. Quelques lignes seulement, car si on se retrouve à dupliquer la feuille de styles principale on s’est planté (non seulement c’est inutile, mais en plus ça posera des problèmes lors des modifications ultérieures des styles CSS).

On écrira donc dans l'élément head de chaque page du site:
```
<link rel="stylesheet" type="text/css" href="styles.css" />


```
Les inconvénients de cette méthode:
- IE6 doit charger deux fichiers au lieu d’un (styles.css et styles-ie6.css), de même pour IE7 (styles.css et styles-ie7.css). Ce n’est pas énorme mais ça fait une requête HTTP supplémentaire, ce qui a un petit impact sur la vitesse d’affichage des pages.
- Certains correctifs CSS s’appliquent à la fois à Internet Explorer 7 et à IE6. Il faudra les écrire une fois dans chaque fichier de correctifs.
- Le plus important: à chaque changement de styles.css, il faudra vérifier dans les deux feuilles de correctifs CSS s’il n’y a pas des changements à répercuter. La maintenance et l’évolution des styles CSS deviennent difficiles.
2. Une classe CSS conditionnelle

La méthode que je vous propose permet de se passer de feuilles de styles supplémentaires. La première étape se passe également dans la structure HTML de vos pages. Cette fois, on ne s’intéresse pas à l'élément head mais à l’élément body:
```
<body>

...

</body>
```
On encadre tout le contenu de body par deux commentaires conditionnels, qui visent tous les deux IE7 et IE6 (et aussi les versions inférieures, mais ces dernières ont pour ainsi dire disparu de la circulation).

En clair, le code HTML compris par Internet Explorer 6 ou 7 ressemble à ceci:
```
<body>
<div class="ISIE67">
...
</div>
</body>
```
Tandis que IE8, IE9, Firefox, Chrome, Safari, Opera et tous les autres comprennent ceci:
```
<body>
...
</body>
```
Cela veut dire que la classe "ISIE67" (nom choisi arbitrairement, changez-le si vous le souhaitez) peut être utilisée pour différencier Internet Explorer 6 et 7 des autres navigateurs. Voici comment ça se passe côté CSS:
```
#test { 
  /* Styles pour tous navigateurs */ 
} 
.ISIE67 #test { 
  /* Styles pour IE 6 et 7 */ 
} 
body > .ISIE67 #test { 
  /* Styles pour IE 7 */ 
} 
* html .ISIE67 #test { 
  /* Styles pour IE 6 */ 
}
```
Voici une analyse de ce code, sélecteur par sélecteur:
1. Le sélecteur de base utilisé dans cet exemple est #test {}. Il correspond à un élément du contenu de la page, quel qu’il soit (un conteneur, un paragraphe, un lien…). La plupart du temps, on va définir les styles pour #test sans se soucier d’Internet Explorer 6 et 7.
2. Si jamais on rencontre un bug dans l’une ou l’autre version d’Internet Explorer, et que modifier légèrement les styles CSS appliqués à tous les navigateurs ne suffit pas, on peut avoir besoin d’appliquer un correctif CSS d’une ou deux lignes (rarement plus), spécifique à IE6-7, pour cet élément. On va pouvoir utiliser le sélecteur .ISIE67 #test {}.
3. Si le problème est spécifique à Internet Explorer 7 (c’est assez rare), on a un moyen simple de cibler uniquement cette version. On continue à utiliser la classe "ISIE67" pour restreindre le champ d’action à ces deux navigateurs, et on la combine avec le sélecteur d’enfant (symbole >) qu’IE6 ne comprend pas. On écrit donc body > .ISIE67 #test {} (car l’élément qui porte la classe "ISIE67" est un enfant de body), et le sélecteur sera compris par IE7 et ignoré par IE6.
4. Enfin, pour cibler IE6 uniquement, on va utiliser un hack CSS. Il s’agit du Star HTML Hack, qui consiste à placer un sélecteur d’élément universel (symbole *) avant un sélecteur d’élément qui vise l’élément html. Le sélecteur obtenu ne devrait trouver aucun élément dans la page, car l’élément html est la racine du document, il n’y a pas d’autre élément en amont! Ce sélecteur est malgré tout compris par Internet Explorer 6, tandis qu’IE7 corrige ce bug. On l’utilise donc ici pour distinguer IE6 et IE7, tout en conservant notre classe "ISIE67" pour filtrer les autres navigateurs, pour plus de sécurité. On obtient donc: * html .ISIE67 #test {}.
Pour finir, sachez que cette technique est inspirée d’une technique présentée par Pierre Bertet. La technique de Pierre est plus complète, et sensiblement plus complexe côté HTML; par contre la syntaxe des sélecteurs CSS est un peu plus simple quand il s’agit de viser spécifiquement IE6 ou IE7 (surtout si vous n’êtes pas un habitué du sélecteur d’enfant et du Star HTML Hack). À vous de voir quelle variante vous préférez.

3. Limites de la technique de classe conditionnelle, et solutions

La technique que je présente a quelques limites:
1. Elle s’intéresse uniquement à Internet Explorer 6 et 7, et ne permet pas de viser la version 8. (À ma connaissance ce n’est pas un grand problème car le support de CSS 2.1 dans IE8 est très bon.)
2. L’élément div qui porte la classe "ISIE67" est un enfant de body. Cela signifie que cette classe ne peut pas être utilisée pour modifier les styles des éléments html et body.
3. Enfin, certains scripts JavaScript créent à la volée des éléments HTML qui sont rajoutés à la fin de l’élément body. Les styles de ces éléments générés en JavaScript ne pourront pas être modifiés via la classe "ISIE67" non plus.
D’expérience, les deux premiers problèmes sont rarement handicapants. Par contre le troisième problème peut l’être. Je vous propose donc une solution JavaScript, qui n’est pas parfaite, mais qui peut être utile. Il s’agit de rajouter dans l’élément head de la page le code suivant:
```

```
Vous pouvez utiliser cette solution en remplacement du code HTML à rajouter dans le body, mais dans ce cas la classe "ISIE67" ne sera utilisable que si JavaScript est activé! Vous pouvez aussi garder les deux codes (celui-ci dans le head, et celui proposé dans la partie précédente dans le body).

Enfin, je précise à l’attention des développeurs JavaScript que la solution ci-dessus peut être gérée différemment, avec un ajout de classe sur l’élément body plutôt que html, peut être reproduite en jQuery ou autre, etc. À vous d’adapter. :)
Astuce : Ne cibler que les navigateurs modernes grâce aux sélecteurs avancés
A l'inverse du concept de dégradation gracieuse, le principe d'amélioration progressive ("progressive enhancement" en anglais) est une stratégie de conception web en couches successives qui permet à chacun d'accéder au contenu et fonctionnalités de base d'une page web en utilisant n'importe quel navigateur, tout en offrant une version améliorée aux utilisateurs disposant de navigateurs plus récents ou plus évolués.

En pratique et dans le domaine des styles CSS, cela se traduit par une mise en forme initiale commune à l'ensemble des logiciels de navigation, puis une couche "bonus" pour agrémenter ceux qui ne supportent pas encore CSS3 ou mal CSS2.1.

Lorsqu'il s'agit tout simplement d'agrémenter un élément de décorations CSS3 telles que border-radius, gradient, box-shadow ou text-shadow, il suffit généralement de rajouter les différentes propriétés dans le bloc de déclaration. Elles seront purement et simplement ignorées par les navigateurs à la traîne.

Voici un exemple :
```
#toto {  
  float: left; 
  width: 150px; 
  -moz-box-shadow: 5px 5px 10px #fff;   /* tout ce qui suit ne sera interprété que par les navigateurs modernes (CSS3) */ 
  -webkit-box-shadow: 5px 5px 10px #fff; 
  box-shadow: 5px 5px 10px #fff;  
  -moz-border-radius: 10px; 
  -webkit-border-radius: 10px; 
  border-radius: 10px;
  ...
} 
```
Cependant, il est parfois nécessaire d'employer des propriétés radicalement différentes entre les générations de navigateurs, typiquement lorsqu'il s'agit d'intervenir directement au niveau du modèle de boîte de l'élément ou de son positionnement.

Quel intérêt ?

Pour éviter d'utiliser des hacks ou des commentaires conditionnels (qui ne seraient lus que par Explorer), il peut être parfois plus judicieux de tirer parti des sélecteurs avancés (CSS2.1 voire CSS3)

E:nth-of-type(1n), :root et :lang

Les sélecteurs CSS récents permettent de cibler uniquement les navigateurs modernes et de modifier les styles des éléments en conséquence. Dans l'article "Hack for CSS3 supporting browsers", l'auteur utilise un sélecteur E:nth-of-type(1n) bien intéressant mais un peu complexe en pratique.

Dans la même optique,la pseudo-classe CSS3 :root, est simple à utiliser et est comprise par tous les navigateurs modernes sauf Internet Explorer (IE8 compris).

Notre troisième sélecteur CSS3, :lang() a l'avantage d'être reconnu à partir de IE8. Il est donc possible de cibler tous les navigateurs actuels à l'aide d'un sélecteur qui débuterait par :lang(fr). Cette astuce suppose bien entendu que l'attribut HTML lang, soit appliqué à un élément de structure principal (généralement la balise <html>) et qu'il ait pour valeur "fr" !

Quelques exemples pratiques

Expérimenter le modèle de boîte flexible CSS3
```
#toto {   /* Pour tout le monde */
  display: block; 
  float: left; 
}  
:root #toto {   /* Pour les navigateurs modernes (CSS3 uniquement) */  
  display : -moz-box; 
  display : -webkit-box; 
  display : box; 
  float: none; 
} 
```
Positionner à l'aide de table-cell

Note : ce cas de figure est à méditer, car il pourrait être plus judicieux d'utiliser un commentaire conditionnel ciblant IE7 et inférieur
```
#toto { /* Pour tout le monde, dont IE6/IE7 */ 
  float: left; 
  width: 300px; 
} 
:lang(fr) #toto {  /* Pour les navigateurs modernes et IE8 */ 
  display: table-cell; 
  float: none; 
  width: auto; 
} 
```
Positionner à l'aide de inline-block

Note : ce cas de figure est à méditer, car il pourrait être plus judicieux d'utiliser un commentaire conditionnel ciblant IE8 et inférieur
```
:lang(fr) #toto {  /* Pour les navigateurs modernes et IE8 */ 
  display: inline-block; 
} 
#toto { /* Pour IE6/IE7 et les anciens navigateurs */ 
  display: inline; 
  zoom: 1;
} 
```
Astuce : Ovale et forme elliptique avec CSS3 sans image
La propriété border-radius offre la possibilité d'arrondir les angles de vos blocs en CSS3. Comme le présente très bien cet article de Raphaël sur le border-radius, son utilisation est plutôt aisée.

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.
Article : Float : le grand bluff ?
Les feuilles de style CSS version 1 sont nées en 1996. Adaptées à des documents principalement de type textuel, où les éléments sont disposés de façon linéaire, empilés les uns sur les autres (titres, paragraphes, listes), les feuilles de style ne furent pas plébiscitées par les graphistes en quête du design le plus vendeur ou le plus innovant.

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.
Article : Compression des pages web avec Gzip ou Deflate en HTTP
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.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).
Article : Obtenir la transparence PNG avec Internet Explorer 6
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:
```


```
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:
```

```
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.
Astuce : Bien construire sa hiérarchie de titres
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.
Article : Osez HTML5 et CSS3 !

Après une excitante présentation de ce que nous réserve CSS3 et une introduction à HTML5, les concepteurs web sont de plus en plus curieux de savoir si l'on peut d'ores et déjà créer un site décent à l'aide de ces technologies passionnantes.

La question en substance : "peut-on concrètement faire du HTML5 et du CSS3 en 2010 ?", la question subsidiaire - inévitable - "...et que faire des anciens navigateurs ?".

Vous l'avez deviné, le but de cet article est de répondre positivement à la première question et de proposer des solutions à la seconde.
[...]
Astuce : IE Bicubic Fix, maîtrisez le lissage de vos images
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.
Astuce : Comment utiliser la dernière version de jQuery dans WordPress ?
Si vous souhaitez utiliser la dernière version de jQuery (actuellement 1.4.x) en lieu et place de la version imposée dans WordPress (actuellement 1.3.x) dans la partie publique (theme) et admin, ajoutez ses lignes dans votre fichier functions.php de votre thème (le créer au besoin) :
```
wp_deregister_script('jquery');
wp_register_script('jquery',
("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false, '');
wp_enqueue_script('jquery');
```
Si vous rencontrez des incompatibilités avec certaines zones de l'administration, vous pouvez toujours ne l'activer que pour la partie publique de votre site, en insérant ce code :
```
if( !is_admin()){
 wp_deregister_script('jquery');
 wp_register_script('jquery',
("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false, '');
 wp_enqueue_script('jquery');
}
```