Fonctionnement d'un chargement CSS

Re bonjour,

Un de mes sites comportes un menu de type <ul><li> contenant 9 éléments.

A la conception, j'ai donc creer 9 images de menu de base + 9 images pour le ":hover" et enfin 9 images pour le ":visited".

Soit 27 images différentes et 27 connexions http probable.

Actuellement, je rationalise un peu l'usine à gaz en jointant mes images: désormais je n'ai plus qu'une image contre 9 en version base (j'entends par là, non hover, non visited).

Ma question est la suivante. Est ce que l'or d'un premier chargement le css exécute toutes les requêtes http? même celles du :hover et :visited?

Avant que vous vous enerviez inutilement: je sais que php est synchrone et que théoriquement une fois chargé la page ne peut pas rechanger. Mais a l'aide de l'outil de développement google je m'aperçois que dans les images chargées de ma page ne se trouve que celles de base (pour une première visite) et que les images correspondante au :hover ne sont pas présente: donc pas chargées.

Est il intelligent du coup, pour un souci de fluidité, de laisser chaque image:hover du menu seule plutôt que de réunir en une seule? (éviter que lors du mouvement de souris, le tps pris pour le chargement de la grande image sprite, n'empêche pas l'apparition immédiate de la vignette survolée)

En clair, j'envisageais de faire un sprite de toutes les images de base pour un premier chargement rapide + 9 images distinct pour les :hover. Enfin un sprite de toutes les images :visited, car si le client est déjà venu, je décide égoistement qu'il peut attendre l'apparition des vignettes déjà visitées.
Modifié par youki (26 Apr 2010 - 08:55)

youki a écrit :
Est ce que l'or d'un premier chargement le css exécute toutes les requêtes http?

Ce n'est pas le CSS qui exécute les requêtes HTTP ou décide de leur exécution, c'est le navigateur.
Le navigateur construit l'arbre du document (DOM). Il charge toutes les ressources référencées dans le code HTML et dont il a besoin pour afficher la page (styles, scripts, images de contenu... certaines resssources par contre ne sont pas chargées, par exemple les fils de syndication).
Pour les ressources référencées dans le code CSS, ça dépend. Si le style est appliqué à un élément du DOM, alors les images correspondantes seront chargées. Autrement, non.
Donc pas de chargement préalable des images de fond pour les styles :hover. Pour le :visited, ça dépend de si le lien est :visited ou pas au chargement de la page.

youki a écrit :
je sais que php est synchrone et que théoriquement une fois chargé la page ne peut pas rechanger

Une fois la page chargée, le navigateur l'analyse et construit le DOM. Ce dernier peut être changé par les scripts JS qui s'exécutent au chargement de la page, suite à divers évènements, etc. Tu peux avoir une page HTML de cinq lignes qui charge un script JS qui a lui tout seul va créer tous les contenus et l'interface d'une application web, par exemple. Donc le fait que PHP soit synchrone, je vois pas trop le rapport en fait.

youki a écrit :
En clair, j'envisageais de faire un sprite de toutes les images de base pour un premier chargement rapide + 9 images distinct pour les :hover. Enfin un sprite de toutes les images :visited, car si le client est déjà venu, je décide égoistement qu'il peut attendre l'apparition des vignettes déjà visitées.

Et pourquoi pas une sprite avec les 27 images?
Ceci dit, attention aux problèmes d'accessibilité. Si les images contiennent du texte ou un pictogramme qui sera la seule information donnée pour le lien, ces images ne doivent pas être placées en background CSS, donc pas de sprites possibles.
http://www.arespritesaccessible.net/

Ce bricolage là, n'est donc pas correct d'un point vue accessibilité?
menu de gauche.

www.emeraudeaviation.fr


Florent V. dit non ça m'arrangerait

youki a écrit :
Ce bricolage là, n'est donc pas correct d'un point vue accessibilité?

En effet, il n'est pas accessible dans plusieurs cas de figure:
- Si l'image de 1*1px qui sert à accueillir un texte alternatif est chargée (et donc le texte masqué), tandis que l'image de fond CSS ne se charge pas (par exemple si on a désactivé l'affichage des images de fond mais pas de celles du contenu, ou si l'image ne se charge pas suite à une erreur technique).
- Si on affiche les images mais qu'on désactive les styles CSS.