Prise en charge de la propriété 'background-size' sur les anciens navigateurs?

Question

Y at-il un moyen que je peux utiliser la propriété CSS3 'Background-Size' et ensuite utiliser quelque chose comme Modernizr pour s'assurer qu'il est pris en charge dans les anciens navigateurs (en particulier je veux utiliser l'option 'background-size: cover')? J'ai regardé cssFx, qui est mentionné sur le site Modernizr, mais cela ne semble ajouter que des préfixes fournisseurs pour les navigateurs qui ont besoin d'une propriété, plutôt que de permettre à des navigateurs comme IE8 de prendre en charge la propriété de taille d'arrière-plan .

Également regardé CSS3Pie, mais cela ne semble pas supporter actuellement la propriété background-size.

[11/10/2011 - Par les anciens navigateurs je pense surtout IE7/8, mais idéalement, je voudrais couvrir FF3.6, etc.]

Answer 1

Je pense que vous voulez probablement utiliser Modernizr pour vérifier si la propriété est prise en charge dans le navigateur actuel ou non. Si ce n'est pas le cas, essayez de trouver un affichage alternatif de votre site/application qui semble toujours bon sans avoir besoin de la propriété background-size.

Bien sûr, vous pouvez également essayer une autre approche qui n'implique pas du tout cette propriété comme une div sous-jacente avec une image (que vous pouvez dimensionner) et le contenu qui chevauche cette div. Bonne chance.

Answer 2

Vous avez raison de dire que background-size n'est pas pris en charge sur un certain nombre de navigateurs plus anciens.

La solution typique à ceci est de le simuler en utilisant <div> supplémentaire ou même un élément <img> placé derrière l'élément que vous voulez avoir l'arrière-plan. Cela peut être réalisé simplement en utilisant un balisage supplémentaire, mais cette solution présente l'inconvénient de l'utiliser pour tous les navigateurs, au lieu de la propriété background-size. En d'autres termes, cela signifie délibérément dégrader votre code pour les vieux navigateurs, ce qui n'est pas idéal.

Si vous souhaitez utiliser la propriété CSS pour les navigateurs qui le prennent en charge, vous pouvez utiliser un peu de Javascript pour générer le balisage ci-dessus, mais uniquement si nécessaire. Cela signifie que les navigateurs modernes peuvent utiliser heureusement background-size, et seuls les anciens navigateurs utiliseront la solution de repli.

Il existe un certain nombre de solutions Javascript à ce disponible sur le web (un google rapide a révélé ce qui suit: http://css-tricks.com/766-how-to-resizeable-background-image/ entre autres), mais plus important encore, vous devez savoir comment le déclencher en fonction du navigateur.

C'est là qu'intervient Modernizr. La description que vous avez donnée de Modernizr dans la question n'est pas tout à fait exacte. Ce qu'il fait est de produire un ensemble de classes CSS dans votre balise HTML et des variables correspondantes dans votre Javascript qui représentent toutes les fonctionnalités du navigateur. Ce sont des drapeaux booléens indiquant si le navigateur actuel est compatible. Ainsi, avec Modernizr, vous pouvez vérifier en Javascript si le navigateur prend en charge background-size ou non, et ne lancez la fonction javascript alternative que si elle ne le supporte pas.

if(!Modernizr.backgroundsize) { 
    //do stuff here to simulate the background-size property for older browsers. 
} 

Espérons que ça aide.

Answer 3

Tout d'abord, il existe une solution simple pour Firefox 3.6.Il y a un préfixe du vendeur:

-moz-background-size 

En ce qui concerne une solution lors de l'utilisation des requêtes des médias: Vous pouvez utiliser Modernizr pour cibler une autre image lorsque les utilisateurs regardent les navigateurs plus anciens, cela signifierait une autre demande de navigateur. Cependant, vous allez probablement charger des images plus petites pour chaque requête où la taille de l'écran devient plus petite. Parce que Modernizr va créer une situation où ces demandes seront ignorées dans les navigateurs les plus récents, vous réduirez les requêtes serveur pour la majorité des utilisateurs utilisant des navigateurs plus récents. Par curiosité, j'ai essayé la solution ci-dessus et cela a fonctionné. J'ai appliqué les classes de modernizr suivantes comme: .no-backgroundsize pour la taille non-supportant l'arrière-plan ie et chargé dans une nouvelle image. Pour tous les autres navigateurs j'ai ajouté la classe .backgroundsize et inclu le préfixe mention en haut pour FF. Cela pourrait être répété pour chaque requête multimédia avec une nouvelle image pour .no-background. C'est une façon de résoudre le problème.

-J'ai modifié ce post après l'avoir essayé 15/12/12.

Answer 4

Vous pouvez voir le soutien pour le fond de taille et de ses propriétés à: http://www.standardista.com/css3/css3-background-properties

Cette CSS prend en charge IE9 +, FireFox 3.6+, Safari, Chrome:

background-size: cover; 
-moz-background-size: cover; 

Pour IE7/8 soutien, caniuse.com listes ce polyfill: https://github.com/louisremi/background-size-polyfill

Answer 5

Une autre option serait Background Size Polyfill:

.selector { 
    background-size: cover; 
    /* The url is relative to the document, not to the css file! */ 
    /* Prefer absolute urls to avoid confusion. */ 
    -ms-behavior: url(/backgroundsize.min.htc); 
} 

Answer 6

meilleur échantillon pour mieux soutenir:

background-image: url(bg-image.png); 

     -webkit-background-size: 100% 100%;   /* Safari 3.0 - Old Chrome - Old Android */ 
     -moz-background-size: 100% 100%;   /* Gecko 1.9.2 (Firefox 3.6) */ 
      -o-background-size: 100% 100%;   /* Opera 9.5 */ 
       background-size: 100% 100%;   /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */ 

Ne pas ajouter cela, car il a fait problème dans les nouvelles versions de Firefox:

-moz-border-image: url(bg-image.png) 0; /* Gecko 1.9.1 (Firefox 3.5) 

Source: mozilla.org