Émuler CSS3 border-radius et box-shadow dans IE7 / 8
Je travaille sur HTML pour une petite application web; la conception appelle une zone de contenu avec des coins arrondis et une ombre portée. J'ai pu produire cela avec CSS3, et cela fonctionne parfaitement sur Firefox et Chrome:
Cependant, Internet Explorer 7 et 8 (ne prenant pas en charge CSS3) est une autre histoire:
Existe-t-il une solution JavaScript simple et légère qui me permettrait soit 1) d'utiliser des fonctionnalités spécifiques à IE pour y parvenir, soit 2) de modifier le DOM (par programme) de manière à ajouter des images personnalisées autour de la zone de contenu pour émuler l'effet ?
Ceci est ma méthode, j'utilise les conditions pour cibler les fichiers CSS vers les navigateurs IE.
Disons que vous avez votre div avec l'ID #page_container. Dans votre fichier master.css ou css3.css normal, vous lui donneriez votre largeur, votre hauteur, vos coins arrondis et votre ombre portée avec des styles.
Maintenant, lorsque IE frappe votre page, il récupérera la condition css que vous aviez configurée. Pour ce même div # page_container, vous pouvez modifier la largeur un peu, la hauteur, peut-être un peu de remplissage, puis donnez-lui une image d'arrière-plan pour la faire ressembler à l'ombre portée, version à coins arrondis.
Ainsi, votre tête aura ceci:
<head>
<link rel="stylesheet" type="text/css" href="master.css" />
<!--[if lte IE 8]> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]-->
</head>
Dans le fichier master.css, vous auriez cette définition pour votre div principale:
div#page_container {
width: 960px;
height: auto;
padding: 10px 10px 10px 10px;
background: #ccc;
drop-shadow: whatever...
rounded-corner: whatever...
}
Maintenant, dans votre fichier ie.css, et parce qu'il est référencé dans votre second, la définition sera cascade vers le bas afin que vous puissiez la modifier un peu:
div#page_container {
width: 960px;
height: auto;
padding: 15px 15px 15px 15px; /* this is key */
background: #ccc url(/path/to/image.file) no-repeat top left;
}
Ajoutez juste assez de rembourrage supplémentaire pour que les ombres portées correspondent à votre image d'arrière-plan. Parce qu'il tombe en cascade, il remplacera le rembourrage 10px d'origine que vous aviez, élargissant le modèle de boîte pour s'adapter à vos graphiques d'ombre supplémentaires.
Les avantages du couple pour cette méthode comprennent:
- Seul IE verra cette définition et l'appel à l'image. S'il s'agit d'une application à volume élevé, cela permettra d'économiser sur la bande passante et les retards associés à l'appel.
- De même, parce que vous n'avez pas codé en dur dans les graphiques aux coins arrondis que chaque navigateur verrait, vos utilisateurs Firefox et Safari n'auront pas besoin de frapper le serveur avec des appels d'image supplémentaires.
- Pas besoin d'ajouter encore un autre plug-in javascript qui vérifie IE, crée un nouveau balisage, du temps, etc ...
Consultez cet article: http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-Explorer/
Il couvre les coins spécifiquement arrondis et l'ombre de la boîte pour CSS3 dans IE7/8.
Tout d'abord, j'aime mentionner qu'il n'y a pas de solution parfaite pour cela jusqu'à IE9, où le border-radius CSS va être implémenté.
Voici les différentes solutions que vous avez jusqu'alors:
Vous pouvez utiliser l'un des nombreux scripts JS qui simulent les coins arrondis. Mais aucun d'eux n'implémente l'ombre correctement. Voici la liste des scripts que j'ai essayés et mes conclusions. Tous ces scripts ont quelque chose en commun, ils placent des éléments supplémentaires dans votre code HTML pour vous donner l'illusion de coins arrondis.
DD Roundies : Ce script est très léger et fonctionne plutôt bien. Il fonctionne sans aucun cadre et joue Nice avec jQuery & Prototype (je suppose que cela fonctionne bien avec les autres, mais je ne peux pas en être sûr). Il utilise les propriétés CSS3 sur les navigateurs qui prennent en charge CSS3. Et utilise le même hack que tous les autres pour IE. L'antialiazing sur celui-ci fonctionne très bien. éditer je dois me corriger ici. Celui-ci fonctionne avec un fichier HTC. Il ne place pas d'éléments supplémentaires dans votre code HTML.
Curvy Corners et le jQuery Plugin Curvy Corners : J'aime celui-ci. L'antialiazing fonctionne très bien. Et il joue Nice avec des images de fond. Mais il ne joue pas Nice avec les ombres CSS3. Il ne vérifie pas si votre navigateur prend en charge CSS3 et utilise toujours la solution laide d'ajouter des éléments à votre dom.
- Nifty Corners & jquery Corner : Les deux ont un mauvais antialiazing et les coins sont très énervés. Les coins jQuery ont du mal à gérer les images d'arrière-plan.
Voici la raison pour laquelle aucun d'entre eux n'est une bonne solution à mon avis:
capture d'écran dom coins sinueux http://meodai.ch/stackoverflow/curvy.png désordre dom sinueux
nifty dom mess http://meodai.ch/stackoverflow/nifty.png nifty dom mess
Il y en a quelques autres mais je pense qu'ils ne sont pas mentionnables à cet endroit.
Comme vous pouvez le voir, ils ajoutent beaucoup d'éléments à votre dom. Cela peut causer des problèmes si vous souhaitez ajouter des coins arrondis à une énorme quantité d'éléments. Cela peut faire planter certains anciens navigateurs/ordinateurs. Pour les ombres, c'est à peu près le même problème. Il existe un plugin jQuery qui gère les ombres sur les boîtes et les polices: http://dropshadow.webvex.limebits.com/
Ma conclusion: Si je fais un travail à petit budget, IE les utilisateurs ont juste des bords et pas d'ombres. Si le client a de l'argent à dépenser, alors je Je le fais uniquement avec CSS et je crée des images pour chaque coin. Si elles doivent absolument être là mais il n'y a pas de temps ou d'argent pour le faire, j'utilise de préférence l'un des scripts JS Scripts DD_roundies mentionnés. Maintenant, c'est à vous .
PS: IE les utilisateurs sont habitués aux interfaces laides, ils ne verront pas que les coins et les ombres manquent de toute façon: P
Il vient d'être publié et il est en version bêta, mais vérifiez-le: http://css3pie.com/
J'ai commencé à utiliser le script .htc trouvé ici: Prise en charge CSS3 pour Internet Explorer 6, 7 et 8
C'est l'implémentation la plus simple de CSS3 pour IE6 + que j'ai vue.
.box {
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari and Chrome */
border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
-moz-box-shadow: 10px 10px 20px #000; /* Firefox */
-webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
}
J'utilise CSS3PIE, qui est assez facile à implémenter, il suffit d'ajouter un comportement: url (pie.htc); à la balise css et vous êtes prêt à partir .. fait tout pour vous, inclut également le support pour border-image, dégradés, box-shadow, rgba et quelques autres ... la source est à: http://css3pie.com/
pour l'ombre portée dans IE use:
.shadow {
background-color: #fff;
zoom: 1;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=3);
}
pour les coins ronds, utilisez DD_roundies comme mentionné ci-dessous, juste 9 Ko est un bon compromis pour avoir un coin rond en une seconde! ;-)
bien sûr pour programmatically IE-specific features use commentaires conditionnels ! ;-)
Pour permettre une dégradation gracieuse, je parie que vous devez utiliser ce script appelé CssUserAgent de http://www.cssuseragent.org/
Nifty Corners Cube produit de bons résultats et est censé être compatible vers le bas jusqu'à IE5.5.
Il existe un plugin jquery qui modifie le DOM pour produire des coins arrondis. Vérifiez le ici:
http://blue-anvil.com/jquerycurvycorners/test.html
Il page d'exemple rendu pour moi dans IE, Chrome et FF. En utilisant Firebug vous pouvez voir que le plugin introduit un tas de divs 1px par 1px qui créent l'effet.