Plus précisément la version 6.0.472.53 rejoint la branche stable et la branche beta. La branche dev permet désormais le test de la version 7 qui promet une accélération matérielle et du code natif dans les webapps en prévision du Chrome Web Store.

Au programme des nouveautés :

• Une nouvelle interface graphique
• Des performances accrues
• Un regroupement des fonctionnalités dans un seul bouton à droite de la barre d'adresses
• Un cadenas vert affiché lors d'une connexion HTTPS
• Auto-complétion des formulaires
• Synchronisation de ces informations et des extensions au travers du compte Google

Si vous mettez à jour votre version beta (déjà en version 6), vous ne constaterez pas de grands changements, par contre ceux-ci seront plus sensibles lors d'une mise à jour depuis la version stable 5.

Notez que la visionneuse PDF intégrée n'est pas activée par défaut, il vous faudra consulter chrome://plugins.

Google Chrome (et le projet Chromium) existe maintenant depuis 2 ans et remporte un franc succès, de par sa simplicité, son interface épurée et sa rapidité d'exécution.

C'est ce matin que la société MPEG LA a annoncé que le format vidéo H.264, largement utilisé par certains acteurs du marché des navigateurs web (Apple avec Safari et iTunes, Adobe avec Flash, Microsoft avec Silverlight...), resterait gratuit même après le 31 décembre 2015, date fixée depuis le début de l'année 2010 à laquelle la licence devait être renouvelée.

Ceci ouvre la possibilité aux éditeurs de navigateurs d'intégrer la lecture du format H.264 à l'élément video HTML5, par contre la gratuité ne sera pas immédiate pour eux car MPEG LA continuera de collecter des sommes de la part des compagnies qui implémentent le codec (lecture ou encodage) ou qui l'utilisent pour la vente/location de vidéos. En revanche, les internautes pourront lire et poster/diffuser ces vidéos librement sans crainte de se voir réclamer des royalties.

Cette décision de la part de MPEG LA a pour but de relancer la concurrence entre les différents protagonistes, notamment après l'arrivée de WebM, le standard vidéo de Google lancé il y a peu et déjà supporté par la plupart des dernières versions bêta des principaux navigateurs (Mozilla, Google et Opera, y compris annoncé pour IE9).

Malheureusement, Mozilla et Opéra n'intégreront probablement pas H.264 qui reste donc payant pour les éditeurs et avec un code source propriétaire ; tout en privilégiant WebM et Ogg Vorbis dont la vocation est d'être libres et ouverts pour garantir l'interopérabilité. Cependant H.264 reste très dominant actuellement en termes de parts de marché puisque la plupart des vidéos Flash y font appel ainsi qu'iTunes.

Les "Google Phones" et de nombreux autres modèles de marques concurrentes sont désormais équipés du système d'exploitation open-source Android conçu pour les smartphones et les PDA. Il est possible de simuler l'exécution d'Android, par exemple pour visualiser le rendu d'un site sur les mobiles qui en sont équipés, grâce à l'émulateur officiel proposé par l'équipe de développement. Android est équipé d'un navigateur basé sur le moteur Webkit, également celui exploité par Google Chrome.

Il faut tout d'abord télécharger le SDK Android adapté à votre système d'exploitation et le kit Java JDK de Sun si vous ne le possédez pas déjà :

• SDK Android
• Java SE Development Kit (JDK)

Après avoir installé Java JDK, décompressez Android SDK dans le répertoire de votre choix. Celui-ci contient un sous-répertoire tools dans lequel sont situés les programmes qui nous intéressent, ainsi qu'un exécutable à la racine nommé SDK Setup vous permettant de télécharger de nouveaux profils pour exécuter votre émulateur.

Si vous obtenez un message d'erreur de ce type : Failed to fetch URL https://dl-ssl.google.com/android/repository/repository.xml, reason: HTTPS SSL error. You might want to force download through HTTP in the settings, explorez l'onglet Settings et cochez la case "Force https:// sources to be fetched using http://".

Vous devez télécharger au poins une plateforme dans votre environnement, pour ensuite créer une Android Virtual Device (AVD) et exécuter celle-ci dans l'émulateur. La première étape est de mettre à jour les packages proposés dans Available Packages. Cochez l'adresse du dépôt (repository) puis les versions d'Android pour lesquelles vous souhaitez développer/tester votre site (la dernière suffit), puis téléchargez-les. Vous pourrez ajouter d'autres versions par la suite pour tester vos développements.

Créer un AVD

Dans l'onglet Virtual Devices cliquez sur New.

Donnez un nom à votre équipement virtuel dans le champ Name, sélectionnez la version d'Android ciblée, dans Target, attribuez une taille à la mémoire virtuelle de la carte SD (en MiB), choisissez un Skin puis validez avec Create AVD.

Retournez consulter la liste des Virtual Devices, vous trouverez dans la liste celle qui vient d'être créée, que vous pourrez lancer avec le bouton Start... puis Launch dans la fenêtre suivante.

Soyez patients durant le lancement de l'émulateur...

Cliquez sur l'icône du navigateur (Web Browser) pour le lancer. Vous voilà prêt à entrer l'adresse de votre site dans la barre de navigation. Le clavier est exploitable ainsi que la souris pour simuler l'interface tactile.

D'autres skins sont téléchargeables sur internet. Il vous suffira de les placer dans le répertoire \platforms\android-[version]\skins\.

Le SDK Android permet également le développement d'applications (notamment grâce à Eclipse) avec toutes les API pour l'affichage 2D et 3D, le support des SMS et MMS, la vidéo (H.264, MPEG-4), l'audio (OGG, MP3, AAC) le GPS et SQLite.

Vous retrouverez donc dans un zip de 464 Ko tous les fichiers et sous-répertoires organisés pour débuter votre intégration avec d'excellentes bases. Bien entendu, vous l'aurez deviné, le but est de favoriser l'adoption de HTML, d'où l'inclusion par défaut de la librairie Modernizr, ainsi que jQuery via GoogleAPI (avec fallback local). Voici une liste des fonctionnalités supportées :

• HTML5 ready
• Compatibilité cross-browser (IE6 inclus)
• Directives variées de configuration par défaut
• Directives pour les navigateurs mobiles
• Préparation pour l'utilisation de règles @font-face
• Dégradation gracieuse et amélioration progressive
• Classes spécifiques à IE pour un contrôle plus fin
• Classes .js et .no-js
• Classes .clearfix et .visuallyhidden pour styler ces éléments de la bonne façon (accessible)
• Profiling JavaScript dans IE6 et IE7
• Optimisation de console.log (non bloquant)
• Reset CSS et normalisation des polices
• Feuille de style impression (media print)
• Squelette HTML/CSS adaptable pour iOS, Android, Opera Mobile
• Fichier .htaccess pour utilisation des fonctionnalités HTML5 et optimisation du chargement du contenu, règles pour le cache (dates d'expiration) et la compression
• Fix PNG pour IE
• Fichier plugins.js déjà prêt pour jQuery
• Fichier robots.txt
• Page 404 par défaut
• Fichier crossdomain.xml
• Code Google Analytics
• Modèle pour des tests unitaires
• Le tout en UTF-8

Attention, tout ceci relève d'un condensé d'expérience et de recommandations généralistes, par exemples celles définies par Yahoo et Google, il est possible que certaines ne soient pas applicables à votre site ou provoquent des effets non désirés, faites donc bien attention à comprendre tous les critères utilisés et dans quel but. Il vous faudra peut-être retirer quelques instructions superflues.

Bien entendu d'autres sont à découvrir dans le code source, comme par exemples les indications pour les icônes Apple touch + favicon par exemple. Vous pouvez consulter directement la source sur le site et vous en inspirer.

Parmi elles, la création d'une icône spécifique d'accès au site web, pour l'écran d'accueil (un raccourci dirons-nous). En effet, le navigateur Safari Mobile qui accompagne les trois appareils cités précédemment prévoit la prise en compte d'une balise <link> supplémentaire pour faciliter la création d'un lien direct associé à un fichier icône au format PNG.

Par défaut si aucune icône n'est indiquée, une capture d'écran de votre site sera utilisée.

Pour implémenter cette fonctionnalité sur votre site il vous suffit de créer une icône de format carrée, idéalement avec une résolution supérieure ou égale à 114 x 114 pixels ^(*). L'effet "glossy" et les coins arrondis seront ajoutés automatiquement par l'appareil lui-même. Sauvegardez le tout au format PNG.

Par défaut, le navigateur Safari Mobile vérifiera la présence d'un fichier portant le nom de apple-touch-icon.png à la racine de votre site. Cependant il vous est possible de prendre la main sur ce comportement (pour attribuer une icône spécifique à une page par exemple ou placer le fichier dans un sous-répertoire) pour cela il vous faut ajouter cette ligne dans la section <head> de votre code html :

<link rel="apple-touch-icon" href="chemin_vers_votre_image.png" />

Cette icône sera donc utilisée à la place de apple-touch-icon.png. Et le tour est joué!

^(*) Apple recommandait initialement une dimension de 57 x 57 px, mais la résolution de leurs nouveaux appareils se trouvant augmentée, celle des icônes peut également l'être pour gagner en qualité. En effet toute icône sera redimensionnée aux valeurs requises par la plate-forme de destination. Notez que le site Apple.com utilise une icône de 129 x 129px. A l'heure actuelle les dimensions minimales sont de :

• iPad : 72 x 72 px
• iPhone (≥4) : 114 x 114 px
• iPhone ≤3GS: 57 x 57px

Le CSSR nouveau est arrivé

L'édition 2007 du CSSR avait réuni 70 participants et avait consacré Benoit Sanier et son GotoCSS3.com (aujourd'hui disparu de la Toile). En cette année 2010, avec la maturation de technologies telles que CSS3, HTML, jQuery ou les micro-formats, nous nous attendons à un spectacle visuel, technique et ergonomique très attrayant, qui pourrait même faire figure de référence.

Comment participer ?

Le concours est ouvert à tous les membres inscrits d'Alsacréations, sauf les modérateurs et les administrateurs. Pour y accéder, visitez la section "Concours". Il ne vous reste plus qu'à découvrir les modalités du concours CSSR2010 et à vous inscrire dès maintenant en proposant une capture d'écran de votre site actuel avant la refonte.

Dates clé

• Début des inscriptions : 06 Août 2010 à 12:00:00 CET
• Fin des inscriptions : 23 Septembre 2010 à 12:00:00 CET
• Début des votes : 27 Septembre 2010 à 12:00:00 CET
• Fin des votes : 12 Octobre 2010 à 12:00:00 CET

Lots et sponsors

Comme pour chacun de nos concours, chaque participant bénéficie du plaisir de voir son travail bien fait, de la reconnaissance via les votes et commentaires reçus, de la visibilité pendant toute la durée du concours et après en archive. Exceptionnellement, ce CSSR2010 a attiré d'importants sponsors et se voit doté de nombreux lots.

Microsoft France et le programme WebsiteSpark

WebsiteSpark est un programme de Microsoft qui fournit des licences d’outils et serveurs (presque gratuit sur 3 ans, pour $100), ainsi que du support technique et de la visibilité pour les freelances et les petites Web agencies.

Lots de logiciels :

• Windows 7 Intégrale FR
• Office 2010 Pro FR
• Expression Studio 4 et Expression Web 4

Mozilla-Europe

Mozilla-Europe, l'éditeur du célèbre navigateur Web Firefox et du client de messagerie Thunderbird. ainsi que d'autres produits et technologies, comme Bugzilla, propose une tablette graphique Wacom Intuos4 M pour le vainqueur du concours.

• Une tablette graphique pour le vainqueur
• Un Tshirt Mozilla (taille L) également pour le vainqueur

Codeur.com

Codeur, la place de marché des freelances, offre :

• 6 mois d'abonnement membre haut de gamme "Pro Max" aux trois premiers.

Elephorm

Elephorm, la formation aux logiciels créatifs avec les meilleurs experts francophones. Elephorm vous propose des tutoriels vidéos professionnels sur les thématiques de conception de sites Web avec les langages de programmation, le Web design, l'Infographie et la PAO, la Vidéo et le compositing, l'Audio, la 3D ou encore la Photographie, offre un lot de 10 DVD d'apprentissage :

• Ajax
• XHTML/CSS
• Photoshop CS5 les nouveautés
• Wordpress
• Joomla
• Dreamweaver CS5
• Flash CS5
• PHP/MySQL

Eyrolles

Eyrolles, le célèbre éditeur d'ouvrages informatiques (entre-autre), gratifie les gagnants d'un lot de 10 livres dans le domaine de la conception Web :

• "Lisibilité des sites web"
• "Bien rédiger pour le Web"
• "Ergonomie Web"
• "XHTML, CSS et JavaScript pour le Web mobile"
• "Premières applications web avec AJAX, jQuery et PHP"
• "Améliorer ses taux de conversion web"
• "Applications iPhone avec HTML, CSS et JavaScript"
• "Réussir son blog professionnel"
• "Conduite de projet Web"
• "CSS2, pratique du design web"

Voir les détails des lots et leur répartition sur la page du concours CSSR2010.

En savoir plus ?

Toutes les informations et la discussion communautaire se trouve dans un sujet du Forum.

Si vous êtes un aficionado de Twitter, sachez que vous pourrez (aussi) suivre l'évolution de ce concours en suivant le hashtag (mot clé) #CSSR2010. N'hésitez pas à l'utiliser.

Les avantages des sprites CSS sont multiples :

• cela permet de se passer totalement de JavaScript : il n'y a pas besoin de préchargement d'images ni de gestionnaire d'événements comme onmouseover pour déclencher l'effet survolé (en CSS),
• dans les cas de recherche de performances ou d'optimisations pointues, quelques astuces permettent d'obtenir des résultats très intéressants en réduisant le nombre de requêtes au serveur pour afficher plusieurs images,
• comme ces techniques se basent sur XHTML et CSS, tous les avantages de ces derniers utilisés à bon escient sont présents : séparation présentation/structure, code lisible et léger, accessibilité, etc.

Par exemple vous pourrez stocker de la sorte dans le même fichier les différents onglets d'un menu de navigation graphique, tel que celui qu'on retrouve sur La Gazette des Communes :

Des sites à fort trafic (Youtube, Google, Facebook, Amazon, ...) exploitent cette technique sur des pages que vous consultez tous les jours :

La technique des sprites CSS

Approche de base (sans sprite)

L'idée est de n'utiliser que XHTML/CSS pour mettre en forme un lien. En partant de l'idée somme toute logique que le lien en question possède une image en état normal et une autre en état survolé, voici ce que cela pourrait donner :

<!-- pour le XHTML --> <a href="#" title="L'édito" id="editorial"><span>L'édito</span></a> 

/** pour la CSS **/ #editorial{ display:block; width:80px; height:31px; background:url(edito_normal.jpg) 0 0 no-repeat; } #editorial:hover,#editorial:active,#editorial:focus{ background:url(edito_survole.jpg) 0 0 no-repeat; } #editorial span{ text-indent: -5000px; } 

La technique semble naturelle... seul souci, l'appel au fichier edito_survole.jpg se fait au moment du survol sur le lien. Il en résulte un "clignotement", ou un délai d'apparition sur certains navigateurs, selon le temps de chargement. Cette technique, bien que naturelle, est donc à oublier.

Principe (avec sprite)

C'est là que les sprites CSS entrent en jeu, l'idée va être la suivante :

• les deux images de fond (état normal et état survolé) seront combinées en une seule,
• seule la partie haute de l'image va être affichée grâce à background (ci-contre encadrée en rouge),
• l'image de fond du lien sera simplement décalée lorsqu'on la survole avec la souris grâce à background-position.

<!-- pour le XHTML --> <a href="#" title="L'édito" id="editorial"><span>L'édito</span></a> 

/** pour la CSS **/ #editorial{ display:block; width:80px; height:31px; background:url("editorial.jpg") 0 0 no-repeat; } /* on décale l'image de fond de la hauteur du lien, soit 31 px */ #editorial:hover,#editorial:active,#editorial:focus{ background-position:0 -31px; } /* permet de cacher le texte du lien */ #editorial span{ text-indent: -5000px; } 

On affiche en background les premiers 31 pixels du haut de l'image (l'état normal du lien), et on décale l'image grâce à background-position pour faire apparaître celle en-dessous.

Le décalage étant instantané, l'illusion est parfaite, comme le montre l'exemple n°1.

Pousser la logique de la technique des sprites à l'extrême : quête de performance

Les extensions apôtres de la performance des sites que sont Google Page Speed et Yahoo Yslow vous l'indiqueront : il faut autant que possible minimiser les requêtes HTTP. Autrement dit, il faut essayer de charger le moins de fichiers possible. Certes les sprites CSS permettent de n'avoir qu'une image par lien au lieu de deux (état normal et survolé), mais cela fait quand même 10 fichiers images à charger si vous avez 10 liens... et donc 10 requêtes HTTP GET pour chaque image. Même si les connexions ADSL actuelles sont très performantes, il est légitime de penser à améliorer la vitesse de chargement sur les petites connexions, les Smartphones, etc. Le gain sera toujours appréciable entre le temps mis par le navigateur pour formuler la requête et l'affichage de l'image.

L'idée des sprites CSS peut alors être poussée à l'extrême : nous allons combiner les 10 images de liens d'un bandeau... en une seule.

<!-- pour le XHTML --> <div id="bandeau"> <div id="menugauche"> <ul> <li><a href="#" id="cv"><span>CV</span></a></li> <li><a href="#" id="edito"><span>Edito</span></a></li> <li><a href="#" id="skins"><span>Skins</span></a></li> <li><a href="#" id="newsweblog"><span>Weblog</span></a></li> <li><a href="#" id="realweb"><span>Réalisations</span></a></li> </ul> </div> <div id="menudroite"> <ul> <li><a href="#" id="liens"><span>Liens</span></a></li> <li><a href="#" id="terragen"><span>Terragen 2</span></a></li> <li><a href="#" id="animations"><span>Animations</span></a></li> <li><a href="#" id="photonum"><span>Photo numérique</span></a></li> <li><a href="#" id="plansite"><span>Plan du site/Contact</span></a></li> </ul> </div> </div> 

Construisons la CSS petit à petit, je ne mettrai que les propriétés réellement utiles à la compréhension, la totalité du code est donnée dans l'exemple.

#bandeau{ background:url("top.jpg") 0 0 no-repeat; width:980px; padding:0; } 

La div bandeau prend donc l'image de fond, jusqu'ici rien de bien extraordinaire.

#menugauche span,#menudroite span{ text-indent: -5000px; } #menugauche ul,#menudroite ul{ list-style-type:none; margin:0; padding:0; border:0; } #menugauche li,#menudroite li{ margin:0; padding:0; } 

Ensuite, on fait disparaître les textes des liens pour n'afficher que les images de fond, et on fixe à 0 toutes les marges et autres paddings des divers éléments.

#menugauche li a,#menudroite li a{ position:absolute; top:36px; left:30px; display:block; height:52px; width:92px; background:url("bandeau.jpg") no-repeat; margin:0; border:0; } 

Ici nous définissons les propriétés communes à tous les liens du bandeau, afin de factoriser la CSS : les liens seront donc positionnés en absolu, auront tous la même image bandeau.jpg en fond (état normal comme survolé, tous sont inclus dedans), auront tous la même taille et hauteur. Seul le positionnement des liens et de l'image de fond va différer pour chacun.

#menugauche #cv{ background-position:2px 0; } #menugauche #cv:hover,#menugauche #cv:active,#menugauche #cv:focus{ background-position:2px -52px; } #menugauche #edito{ left:122px; background-position:-89px 0; } #menugauche #edito:hover, #menugauche #edito:active, #menugauche #edito:focus{ background-position:-89px -52px; } /* etc... */ 

Le premier lien est positionné (il garde dejà les propriétés left:30px et top:36px définies plus haut dans les propriétés communes aux liens. Le suivant est décalé à droite et a son background décalé, l'effet de rollover étant aussi assuré par un décalage (celui du lien en état normal sur l'axe x, et le lien en état survolé sur l'axe y).

Le décalage étant toujours instantané, l'illusion est parfaite, comme on peut le constater sur l'exemple n°2.

Les avantages sont indéniables en termes de performances : une seule image permet de charger tous les liens de mon bandeau. Si vous généralisez le concept comme je l'ai fait pour intégrer le design de mon site dont sont tirés ces exemples :

• Les liens du bandeau utilisent donc une seule image au lieu de 10 !
• 12 images pour mes titres h1 sont combinées en une seule image, qui plus est, cette image se prête bien au format GIF : 26,2 Ko pour 12 titres en image, c'est plutôt appréciable !
• Avantage supplémentaire : le temps de chargement du graphisme sera instantané pour les autres pages, l'image des h1 ayant déjà été chargée.
• Au final, la totalité du graphisme se charge en seulement 6 images au lieu de 26.

Inconvénients

Néanmoins, la technique des sprites CSS poussée à l'extrême présente quelques inconvénients :

• Si l'on doit changer une image d'un unique lien du bandeau, il faut rechanger et ré-exporter toute l'image au lieu d'une seule.
• La feuille de style CSS sera un petit peu plus lourde.
• Le positionnement peut être ardu si vous devez comme dans mon cas positionner au pixel près pour que les divers fonds soient parfaitement raccordés.

L'essentiel est de savoir à quel niveau s'arrêter : si le temps d'intégration et/ou de maintenance explose littéralement les bénéfices en termes de performances, autant revenir à la méthode classique. Bien entendu, ne se pose pas le problème de temps si vous faites votre intégration CSS à temps perdu. Toutefois, certains cas peuvent vous permettre de passer outre cette complexité... certaines fois en améliorant encore les performances de votre intégration. Jetons un oeil à ces astuces.

Autres pistes

Jouer avec les images de fond

Nous l'avons vu, le cas précédent d'intégration peut être difficile ou du moins un peu longuet. En travaillant sur une version en taille réduite de cette CSS, une idée simple m'est venu à l'esprit : positionner les liens du bandeau peut être pénible sans point de repère, donc pourquoi ne pas mettre les images des liens survolés directement dans l'image de fond ?

• Déjà, cela permet d'avoir des points de repère pour positionner en absolu les éléments.
• Ensuite, cela réduit le poids de l'image bandeau.jpg, qui ne contiendra que les images des liens en version normale, les images des liens survolés étant déjà contenues dans l'image de fond.
• L'effet de rollover sera plus simple, il suffira de décaler l'image du lien normal pour faire apparaître ce qui sera caché derrière, à savoir l'image du lien en état survolé.

Voyons un exemple pratique (pour pouvoir grouper tous les exemples sur la même page, j'ai juste utilisé des classes et renommé les id, sinon le code reste le même) :

<!-- pour le XHTML --> <div id="bandeau2"> <div id="menugauche2"> <ul> <li><a href="#" class="cv2"><span>CV</span></a></li> <li><a href="#" class="edito2"><span>Edito</span></a></li> <li><a href="#" class="skins2"><span>Skins</span></a></li> <li><a href="#" class="newsweblog2"><span>Weblog</span></a></li> <li><a href="#" class="realweb2"><span>Réalisations</span></a></li> </ul> </div> <div id="menudroite2"> <ul> <li><a href="#" class="liens2"><span>Liens</span></a></li> <li><a href="#" class="terragen2"><span>Terragen 2</span></a></li> <li><a href="#" class="animations2"><span>Animations</span></a></li> <li><a href="#" class="photonum2"><span>Photo</span></a></li> <li><a href="#" class="plansite2"><span>Plan du site</span></a></li> </ul> </div> </div> 

Nous allons de nouveau construire la CSS petit à petit, je ne mettrai que les propriétés réellement utiles à la compréhension, la totalité du code est donnée dans l'exemple.

#bandeau2{ background:url("itop.jpg") 0 0 no-repeat; width:480px; padding:0; }

La div bandeau2 prend donc la nouvelle image de fond, de nouveau rien de bien extraordinaire.

#menugauche2 span,#menudroite2 span{ text-indent: -5000px; } #menugauche2 ul,#menudroite2 ul{ list-style-type:none; margin:0; padding:0; border:0; } #menugauche2 li,#menudroite2 li{ margin:0; padding:0; } 

De nouveau, on fait disparaître les textes des liens pour n'afficher que les images de fond, et on fixe à 0 toutes les marges et autres paddings des divers éléments.

#menugauche2 li a,#menudroite2 li a{ position:absolute; top:2px; left:6px; display:block; height:52px; width:92px; background:url("ibandeau.jpg") no-repeat; margin:0; border:0; }

Nous redéfinissons les propriétés communes à tous les liens du bandeau, afin de factoriser la CSS : les liens seront donc positionnés en absolu, auront tous la même image ibandeau.jpg en fond, auront tous la même taille et hauteur. Seul le positionnement des liens et de l'image de fond va différer pour chacun.

#menugauche2 li a:hover, #menugauche2 li a:active, #menugauche2 li a:focus, #menudroite2 li a:hover, #menudroite2 li a:active, #menudroite2 li a:focus{ background-position:0 800px; }

Propriété commune à tous les liens survolés : il suffira juste de faire disparaître l'image, ce qui fera apparaître l'image en arrière-plan... laquelle contiendra l'image du lien survolé. J'ai volontairement exagéré le décalage de l'image de fond avec la valeur 800 px.

#menugauche2 .cv2{ background-position:-6px -2px; } #menugauche2 .edito2{ left:96px; background-position:-96px -2px; } /** etc. pour les liens de menugauche2 **/

Le premier lien est positionné : il garde dejà la propriété left:6px (top:2px étant commune à tous les liens de #menugauche2). Le suivant est décalé à droite, et a son background décalé aussi.

#menudroite2 li a{ top:54px; }

Là, nous définissons les propriétés communes aux liens de #menudroite2, à savoir leur position verticale.

#menudroite2 .liens2{ background-position:-6px -54px; } #menudroite2 .terragen2{ left:96px; background-position:-96px -54px; } /** etc. pour les liens de menudroite2 **/ 

Le principe reste le même, le premier lien est déjà positionné, et on décale les suivants ainsi que leur background.

Comme nous pouvons le voir sur l'exemple n°3, l'illusion de rollover est impeccable, et l'optimisation est encore meilleure : les images sont plus légères.

Combiner les propriétés CSS de couleurs et les images

Une autre façon d'optimiser votre intégration (avec ou sans sprite CSS d'ailleurs) est de savoir jouer avec les propriétés CSS et vos images, quand le design s'y prête. Si l'image de votre lien contient une bordure, et passe d'un fond noir à un fond gris en état survolé, pensez CSS : les bordures sont faciles à créer via CSS, et le fond se pilote aussi aisément. Si votre image pour le lien se prête à l'utilisation de la transparence, l'effet survolé et même une partie du lien peut être prise en charge par la CSS, ce qui va alléger d'autant les images contenant vos sprites.

Voyons un exemple simplifié, un unique lien :

<!-- pour le XHTML --> <div id="autremenu"> <ul> <li><a href="#" id="autreaccueil" ><span>Home</span></a></li> </ul> </div> 

L'image accueil.gif qui sera utilisée pour ce lien est sur fond transparent. Ainsi, ce sont les CSS qui vont prendre en charge l'effet de survol ainsi que la bordure.

#autremenu li a{ display:block; width:91px; height:12px; margin:5px; background:#000 url("accueil.gif") 0 0 no-repeat; border:1px solid #444; } #autremenu span{ text-indent: -5000px; } #autremenu ul li a:hover, #autremenu ul li a:active, #autremenu ul li a:focus{ background:#444 url("accueil.gif") 0 0 no-repeat; } 

Comme nous pouvons le voir sur l'exemple n°4, à partir de propriétés CSS, on peut obtenir des effets de rollovers sur images sans recourir à une deuxième image pour l'état survolé. Les images des sprites seront d'autant plus légères, vos sprites ne seront utilisés que pour les liens en état normal.

Conclusion

Nul doute que d'autres astuces combinant CSS et images sont possibles et que le tour de la question n'est pas encore fait. En tout cas, concilier une intégration CSS sans besoin de préchargement avec des contraintes de performances est à la portée de tout intégrateur souhaitant optimiser ses intégrations.

Pour rappel, une astuce récente proposait deux très bons outils pour générer automatiquement vos sprites.

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.

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.

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é
• TransformIE : rotations et déformations (rotate, skew, scale, matrix) 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…

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.

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

Article complété par dew

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

• How To Use CSS3 Media Queries To Create a Mobile Version of Your Website
• Tester son site sur Blackberry
• Emuler Google Android

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 !

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.

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.