Share
Vous l'avez vu maintes et maintes fois sur Webdesigntuts +; un tutoriel CSS3 que vous êtes tenté de suivre, mais le manque de support dans les anciens navigateurs vous empêche de chercher plus loin. Il existe cependant un certain nombre d’outils pour aider dans de telles situations. Aujourd'hui, nous allons trouver comment conquérir CSS3 dans les anciens navigateurs, comprenant Internet Explorer?
Examinons diverses techniques pour restituer les propriétés les plus importantes de CSS3 dans les anciennes versions de navigateur..
Pour commencer, téléchargez et incluez tous les scripts nécessaires à ce tutoriel. Pour les besoins de cet exercice, placez tous les scripts dans le même dossier que vos fichiers CSS. Voici les outils dont nous aurons besoin:
CSS3PIE est notre assistant IE. PIE signifie Internet Explorer progressif, et étend le comportement d'Internet Explorer pour l'aider à reconnaître et à afficher les propriétés CSS3.
Consultez le dossier de téléchargement CSS3PIE où vous trouverez divers fichiers. Nous allons utiliser PIE.htc, et nous l'appellerons de notre CSS, donc je vous suggère de le mettre dans le même dossier que notre feuille de style.
Selectivizr est utilisé pour gérer les sélecteurs CSS3. Il est utilisé avec une bibliothèque JavaScript, telle que jQuery ou Mootools. Je recommande d’utiliser Mootools car il prend en charge toutes les fonctions de Selectivizr (sélecteurs CSS).
Pour ce tutoriel, je vais utiliser la bibliothèque Mootools hébergée par Google. Nous l'incluons donc tout simplement dans notre tête:
Nous pouvons utiliser jQuery pour afficher une alternative à la propriété text-shadow de CSS3. Nous avons simplement besoin de télécharger le plugin jQuery text-shadow, puis de l’inclure avec jQuery:
OK, c'est couvert dans notre boîte à outils, voyons maintenant comment nous utilisons ces outils pour résoudre nos maux de tête CSS3?
Border-radius est probablement la plus connue des propriétés CSS3. Heureusement, le rendu dans Internet Explorer est simplement un cas d'utilisation de CSS3PIE.
.box border-radius: 10px; comportement: url (PIE.htc);
Comme vous pouvez le constater, nous n'avons qu'à "appeler" le script PIE, après avoir défini notre règle border-radius.
De la même manière que border-radius, pour qu'Internet Explorer reconnaisse Box-shadow, il suffit d'inclure le script PIE. Notez que nous pouvons également déclarer la couleur de l'ombre en utilisant les valeurs RGBA.
.box box-shadow: 5px 5px 5px rgba (0, 0, 0, 0,75); comportement: url (PIE.htc);
Vous pouvez également utiliser les couleurs RGBA lorsque vous déclarez une couleur de fond.
Pour permettre à CSS3 PIE de restituer les dégradés d’arrière-plan, nous ajoutons Contexte: de la manière suivante:
-pie-background: linear-gradient ([|| ,]? , [, ] *);
En fait, cela ressemble beaucoup aux différentes règles des autres fournisseurs de navigateurs. N'oubliez pas d'appeler le comportement CSS3 PIE par la suite!
.box background: -webkit-linear-gradient (haut, # 0072bc, # 00bff3); / * Safari, Chrome * / background: -moz-linear-gradient (haut, # 0072bc, # 00bff3); / * Firefox * / background: -o-linear-gradient (haut, # 0072bc, # 00bff3); / * Opera * / background: -ms-linear-gradient (haut, # 0072bc, # 00bff3); / * IE10 * / -pie-background: linear-gradient (# 0072bc, # 00bff3); / * IE6 + * / behavior: url (PIE.htc);
Encore une fois, dans ce cas, nous devons utiliser le -tarte- préfixe:
.box background: url (img / flash.png) 20px 20px non répété, url (img / airplane.png) 90px 50px non répété, # 00BFF3; / * Navigateurs modernes * / -pie-background: url (img / flash.png) 20px 20px non répété, url (img / airplane.png) 90px 50px non répété, # 00BFF3; / * IE6 + * / behavior: url (PIE.htc);
La dernière propriété que CSS3 PIE prend en compte est border-image:
.box border-image: url (border.png) 27 27 27 27 rond rond; comportement: url (PIE.htc);
Il est maintenant temps de vous salir avec Selectivizr. Incluez la bibliothèque JavaScript comme indiqué au début de la tâche. Tous les sélecteurs CSS3 seront reconnus par IE6.+!
table tr: premier enfant arrière plan: # 252525; table tr: nième enfant (2n + 1) background: #ebebeb;
Cet effet peut être rendu plus facilement entre navigateurs à l’aide de la bibliothèque jQuery. Après l'avoir inclus, appelez simplement le ombre de texte() fonction, en pointant sur votre sélecteur:
Pour compléter l'effet, ajoutez simplement l'ombre du texte à votre CSS.
.txt text-shadow: 2px 2px 2px noir;
Pour remplacer certaines propriétés CSS3, vous pouvez également utiliser des filtres IE. Ce premier exemple concerne les dégradés d’arrière-plan:
.box background: #FFFFFF; filter: progid: DXImageTransform.Microsoft.gradient (startColorStr = '# 444444', EndColorStr = "# 999999"); / * IE6-IE9 * /
Ce second est l’équivalent de la propriété de transformation. Cependant, la syntaxe est un casse-tête tel qu'il vous est conseillé d'utiliser un générateur pour le calculer.
.La boîte / * IE8 + - doit obligatoirement figurer sur une ligne, malheureusement * / -ms-filter: "progid: DXImageTransform.Microsoft.Matrix (M11 = 0.9848077530122079, M12 = -0.17364817766693127, M21 = 0.1736481776 6121230, 7022), mais M22 = 0.1736481776612730, une fois que vous vous êtes assis. développer")"; / * IE6 et 7 * / filter: progid: DXImageTransform.Microsoft.Matrix (M11 = 0,9848077530122079, M12 = -0,17364817766693127, M21 = 0,17364817766693127, M22 = 0,9368077530121279, Mizing = 0 "," ",", ",", ",", ",", ",", ",", ",", "," " marge gauche: -14px; marge supérieure: -21px;
Comme vous l'avez vu, avec divers outils, nous pouvons assurer un rendu raisonnable de CSS3 dans les navigateurs plus anciens. J'espère que cela vous encourage à prendre le taureau par les cornes et à pratiquer de nombreux effets réalisables avec CSS3! Merci d'avoir lu.
Accentsconagua