CSS: les images sont-elles demandées si elles sont déclarées en CSS mais plus tard écrasées?

Question

Je construis un site Web qui utilise une bonne quantité d'ombres portées et de gradients. Je peux accomplir beaucoup de cela via les propriétés box-shadow de CSS. Hélas, nous supportons toujours IE, nous avons donc besoin d'ajouter des images d'arrière-plan dans ces situations. Je pourrais être paresseux et juste donner à tous les images d'arrière-plan, mais j'essaye de rationaliser des choses pour ceux qui utilisent les navigateurs modernes. Idéalement, j'aimerais que ces utilisateurs n'aient pas à demander les images.

Alors, j'ajoute une classe supplémentaire via javascript si le navigateur prend en charge l'ombre de la boîte (boîte shadowSupport) et mon CSS finit par ressembler à ceci:

.box { 
    background: url('myImage.jpg'); 
} 

.box-shadowSupport { 
    background: none; 
    [box shadow properties go here] 
} 

Si le HTML finit par ressembler à ceci:

<div class="box box-shadowSupport"></div> 

L'image sera-t-elle demandée? Ou le navigateur comprend-il qu'il n'est pas nécessaire en raison du deuxième style qui l'emporte sur la propriété de l'image d'arrière-plan? Si l'image est demandée, j'ai besoin de réorganiser mes CSS et javascript donc au lieu de surcharger un style via la cascade, je vais devoir permuter les classes pour que le premier ne soit même pas référencé dans le HTML .

Answer 1

Je crois que chaque navigateur Web traitera cela à sa manière - comme d'habitude :) Ma suggestion est d'utiliser un proxy Web comme Charles et voir, si l'image a été demandée ou non. Et bien sûr, testez ceci dans les différents navigateurs.

Answer 2

Ce que vous voudrez peut-être à considérer est la définition des styles spécifiques IE dans une feuille séparée et chargement avec conditional comments, comme ceci:

<!--[if IE]> 
<link rel="stylesheet" id="ie-css" href="ie-specific.css" 
    type="text/css" media="all" /> 
<![endif]--> 

Cela ne charge la feuille avec des paramètres spécifiques IE et vous pouvez Remplacer les autres classes par des marqueurs !important. Les commentaires conditionnels ont été autour depuis IE5, et tout autre navigateur ignorera le bloc ci-dessus.

Answer 3

Je recommande juste d'ignorer les ombres dans IE.

La plupart des gens utilisent un seul navigateur et ils ne sauront pas qu'il doit y avoir des ombres. Ce n'est pas un gros problème si le site semble différent dans les différents navigateurs tant qu'ils ont l'air normal (ce qui signifie pas glitchy).

Sinon, utilisez un si balise pour c.-à-feuilles de style spécifiques, et vous pouvez faire tomber ombre là-bas avec:

.box { 
    filter: progid: DXImageTransform.Microsoft.dropShadow(
      color=#818181, 
      offX=5, offY=5, 
      positive=true); 
} 

Pour en savoir plus sur ce see here.

Answer 4

Je suis assez sûr que tous les navigateurs web récents vont charger 'myImage.jpg'. En fait, le code que vous avez fourni décrit le mode CSS pur de préchargement des images sans utiliser javascript :)