background CSS et mise en cache

background CSS et mise en cache - HTML/CSS - Programmation

Marsh Posté le 05-09-2003 à 17:13:37    

Sur un autre sujet (http://forum.hardware.fr/forum2.ph [...] 159&cat=10),Dew indique que certains navigateurs (comme IE6) ne mettraient pas en cache les images-backgrounds situées dans les balises DIV (source ?).
 
Si c'est vrai, cela réduit considérablement l'intérêt de l'usage des DIV pour la mise en page, notamment en terme de rapidité d'affichage... puisque tous les fonds seraient rechargés à chaque fois  :(  
 
- Première question : est-ce que ce bug (?) ne s'applique qu'aux DIV, ou bien à tous les éléments comportant un background?
 
En clair, est-ce que ce genre de technique pourrait pallier à ce bug... et est-ce correct de procéder ainsi ?
 
.fond {
width: 100%;
height: 50px;
background-image: url(url);
border: 0 none;
}
 
Avec <img class="fond" src="" alt="" /> ???
 
- Autre problème : si cette technique permettait la mise en cache du fond, il resterait le problème de la superposition.
En effet, en général on utilise un div + background pour le fond et on place une image (img) par dessus.
Comment régler ce problème simplement et proprement sans avoir recours à des positions absolues/relatives ?


Message édité par sibelius le 07-09-2003 à 12:01:05

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 05-09-2003 à 17:13:37   

Reply

Marsh Posté le 05-09-2003 à 17:47:59    

SIBELIUS a écrit :

- Autre problème : si cette technique permettait la mise en cache du fond, il resterait le problème de la superposition.
En effet, en général on utilise un div + background pour le fond et on place une image (img) par dessus.
Comment régler ce problème simplement et proprement sans avoir recours à des positions absolues/relatives ?


 
Pour ça y a z-index, non ?

Reply

Marsh Posté le 05-09-2003 à 18:01:51    

Pour Ie, c'est vrai, il ne garde pas en cache les background CSS tant que ceux-ci n'ont pas été affichés, quelque soit la balise dans laquelle tu les mets. Par contre, une fois affiché, il reste dans le cache (IE6).
 
Cela ne peut pas être assimilé à un bug dans le sens où s'ils n'on pas à ête afficher, ils n'ont pas à être mis en cache.
 
Maintenant, pour ton autre problème, je n'ai pas compris où tu veux en venir.

Reply

Marsh Posté le 05-09-2003 à 18:06:39    

Pour mon autre problème, je me demandais comment superposer plusieurs images en utilisant des img et non des divs.
En général, je place un img dans un div+background.
La question est : comment faire sans div ?
... mais la question est vaine puisque ça ne change rien d'après ce que tu as expliqué
 
Pour les z-index, il me semble qu'il faut une position (ralative / absolue), non?


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 05-09-2003 à 18:07:23    

gizmo a écrit :

Pour Ie, c'est vrai, il ne garde pas en cache les background CSS tant que ceux-ci n'ont pas été affichés, quelque soit la balise dans laquelle tu les mets.  

Bref, un preload CSS pour IE, c'est pas possible en clair  :cry:


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 05-09-2003 à 18:20:09    

bah oui, sur IE, le preload CSS, c'est vain (c'est pour ça qu'il faut continuer de militer contre ce *CENSURE*, camarade :o)
 
Pour le z-index, il faut effectivement que les objets soient en relatif ou absolu. Mais s'il s'agit de faire un switch entre deux image, rien ne t'empèche de faire 2 images classiques, supperposées en z-index et de modifier le z-index de celle du dessus quand tu passe dessus pour la faire passer derrière la seconde (le tout doit être dans un lien pour ce *CENSURE* de IE).

Reply

Marsh Posté le 06-09-2003 à 21:47:56    

gizmo a écrit :

Pour Ie, c'est vrai, il ne garde pas en cache les background CSS tant que ceux-ci n'ont pas été affichés, quelque soit la balise dans laquelle tu les mets. Par contre, une fois affiché, il reste dans le cache (IE6).
 
Cela ne peut pas être assimilé à un bug dans le sens où s'ils n'on pas à ête afficher, ils n'ont pas à être mis en cache.
 
Maintenant, pour ton autre problème, je n'ai pas compris où tu veux en venir.


 
Sur certaine config, IE6 a un bug et dès que tu touche à l'image de fond, il doit recharger l'image ... menfin je suis pas sûre de ce eu je dit. Mais j'ai eu un spécimen sous la main, ça existe !

Reply

Marsh Posté le 06-09-2003 à 23:16:42    

Eh ben il s'en passe des choses chez Krosoft.
Brrr, j'en ai froid dans le dos  
 :)


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 07-09-2003 à 01:24:10    

gizmo a écrit :

Pour Ie, c'est vrai, il ne garde pas en cache les background CSS tant que ceux-ci n'ont pas été affichés, quelque soit la balise dans laquelle tu les mets. Par contre, une fois affiché, il reste dans le cache (IE6).
 
Cela ne peut pas être assimilé à un bug dans le sens où s'ils n'on pas à ête afficher, ils n'ont pas à être mis en cache.


Si IE ne met pas en cache les images incomplètes, alors il doit avoir ce comportement autant pour le preload par CSS que par JS.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 07-09-2003 à 01:25:27    

SIBELIUS a écrit :

- Autre problème : si cette technique permettait la mise en cache du fond, il resterait le problème de la superposition.
En effet, en général on utilise un div + background pour le fond et on place une image (img) par dessus.
Comment régler ce problème simplement et proprement sans avoir recours à des positions absolues/relatives ?


Si tu ne veux utiliser ni les background ni le positionnement absolu/relatif, je vois pas bien ce qu'il reste ;)


Message édité par gm_superstar le 07-09-2003 à 01:26:20

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 07-09-2003 à 01:25:27   

Reply

Marsh Posté le 07-09-2003 à 11:29:43    

gm_superstar a écrit :


Si tu ne veux utiliser ni les background ni le positionnement absolu/relatif, je vois pas bien ce qu'il reste ;)


Ouaip, je ne vois pas non-plus... c'était la question en fait.


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 07-09-2003 à 11:47:12    

gizmo a écrit :

bah oui, sur IE, le preload CSS, c'est vain (c'est pour ça qu'il faut continuer de militer contre ce *CENSURE*, camarade :o)
 
Pour le z-index, il faut effectivement que les objets soient en relatif ou absolu. Mais s'il s'agit de faire un switch entre deux image, rien ne t'empèche de faire 2 images classiques, supperposées en z-index et de modifier le z-index de celle du dessus quand tu passe dessus pour la faire passer derrière la seconde (le tout doit être dans un lien pour ce *CENSURE* de IE).


 
Pas mal comme idée ... un peu sale mais ça semble la seul solution pour plier au bug de IE6 ... Est-ce que ça marche ?

Reply

Marsh Posté le 07-09-2003 à 12:36:02    

Bah, pourquoi vouloir à tout prix faire un preload en CSS... Je ne vois pas bien les avantages par rapport à un preload en JS (et pourtant, je suis pour limiter autant que possible l'utilisation du JS), mais là, je ne vois pas bien...  :)

Reply

Marsh Posté le 07-09-2003 à 12:36:33    

gm_superstar a écrit :


Si IE ne met pas en cache les images incomplètes, alors il doit avoir ce comportement autant pour le preload par CSS que par JS.


où tu vois qu'on parle d'images incomplètes? avec un display:none elle ne sont pas affichées, ce n'est pas une question de chargement complet ou pas. Dans le JS, tu crées un objet, et il doit donc être initialisé avec les données que tu lui donnes, c'est pour ça qu'il charge l'image.
 
Faden>> tu as un exemple de version de IE/WIN qui pose se problème? parce que j'ai regardé avec IE 6 sur 2k(fr) et XP(en) et je n'ai pas ce bug (tous les deniers patchs appliqués)
 
Sinon, je n'arrive pas à faire fonctionner ma solution sous IE. Il semblerait qu'il refuse de modifier le z-index sur un lien :/
 

Reply

Marsh Posté le 07-09-2003 à 12:49:14    

J'avais cré ce topic sur un pseudo d'emprunt  
 
http://forum.hardware.fr/forum2.ph [...] subcat=389
 
et c'est là que le bug est apparu ... J'ai trouvé un tel PC dans mon école. C'était la config suivante.
 
Bug de IE6 avec les a:hover présent sur
 
    * Config 1
    * Windows 2000 5.00.2195 Service pack4
    * IE 6.0.2800.1106CO SP1; Q324929; Q810847; Q813951; Q330994; Q818529
    * This is a customized version of Internet Explorer
 
Mais il semblerait que le bug apparaisse sur bien d'autres configurations.
 
Le bug est le suivant : Quand on modifie la propiété background d'un lien avec a:hover ( position, display, url ), cela provoque le rechargement le l'image. Et ceci à chaque fois. Plus grave encore si il  y a 15 images de fond identiques, les 15 sont rechargées les une après les autres ( mais ça devait être spécifique au menu dynamique + JS ) ... alors qu'elle sont identiques  :sweat:  
 
Pour tester, cette image est rechargée lors du zoom alors que le CSS ne fait que déplacer l'image de fond.
 
http://www.simplebits.com/code/photo_zoom.html


Message édité par fadenreturns le 07-09-2003 à 13:07:28

---------------
mon blog : http://www.magnin-sante.ch/journal/
Reply

Marsh Posté le 07-09-2003 à 12:57:23    

c'est bizarre, chez moi il ne recharge rien:
 
XP 5.1.2600 SP1
IE 6.0.2800.1106.xpsp2.030422-1633 SP1;Q822925

Reply

Marsh Posté le 07-09-2003 à 13:01:25    

Je sais que c'est difficile à croire. Il faudrait un sondage pour savoir quel est la proportion de IE6 touché ... Dans le doute je m'abstiendrais d'utiliser cette fonction CSS.
 
Notemment je n'ai vu encore aucun Xp touché. Par contre un seveur 2003 et plein de win 2000.


Message édité par fadenreturns le 07-09-2003 à 13:03:37
Reply

Marsh Posté le 07-09-2003 à 13:30:55    

XP pro 5.1.2600 SP1 Nu 2600
 
 
IE6 Version 6.0.2800.1106xpsp2.030422-1633
sp1;Q818529;Q330994;Q820223;Q822925
 
 
Ça fonctionne  :)

Reply

Marsh Posté le 07-09-2003 à 13:34:34    

Windows 2000 serveur fr version : 5.0.2195 SP4 version 2195
 
IE6 version: 6.0.2800.1106
SP1; Q328970; Q324929; Q810847; Q813951; Q813489; Q330994; Q818529; Q820223; Q822825
 
Ça recharge les images  :cry:

Reply

Marsh Posté le 07-09-2003 à 16:39:29    

Voilà je me sens moins seul :) .

Reply

Marsh Posté le 07-09-2003 à 17:09:08    


Windows Server 2003 Enterprise
Version 5.2.3790 Nu 3790
 
IE 6 version :6.0.3790.0
 
Ça fonctionne !  :)

Reply

Marsh Posté le 07-09-2003 à 21:59:42    

fadenreturns a écrit :

Quand on modifie la propiété background d'un lien avec a:hover ( position, display, url ), cela provoque le rechargement le l'image. Et ceci à chaque fois.


 
c'est un autre bug (?) connu qui est le plus gênant de tous.
il paraît qu'une solution existe : spécifier le chemin de l'image en relatif, du coup IE vérifie son cache d'abord
 
ça se voit surtout avec les sites vers lesquels on a des mauvais temps de réponse

Reply

Marsh Posté le 08-09-2003 à 08:06:15    

Oki, tu a un document qui explique tout ça ? En relatif, il me semble que cest comme ça qu'il fait ici
 
http://www.simplebits.com/tips/photo_zoom.html
 
???  
 
Chez moi ça le fait toujours en tout cas.

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed