Share
Je hebt het keer op keer gezien op Webdesigntuts +; een CSS3-zelfstudie die je in de verleiding kunt brengen om te volgen, maar een gebrek aan ondersteuning in oudere browsers zorgt ervoor dat je niet verder kunt zoeken. Er zijn echter een aantal hulpmiddelen om te helpen in situaties zoals deze. Vandaag gaan we ontdekken hoe CSS3 te verslaan in oudere browsers, inclusief Internet Explorer?
Laten we een aantal technieken bekijken om de belangrijkste CSS3-eigenschappen in oudere browserversies weer te geven.
Download om te beginnen alle benodigde scripts voor deze zelfstudie en neem deze op. Plaats voor de toepassing van deze oefening alle scripts in dezelfde map als uw CSS-bestanden. Dit zijn de tools die we nodig hebben:
CSS3PIE is onze IE-assistent. PIE staat voor Progressive Internet Explorer, en het breidt het gedrag van Internet Explorer uit om CSS3-eigenschappen te herkennen en weer te geven.
Bekijk de CSS3PIE-downloadmap waar je verschillende bestanden kunt vinden. We gaan gebruiken PIE.htc, en we zullen het van onze CSS noemen, dus ik stel voor dat je het in dezelfde map plaatst als onze stylesheet.
Selectivizr wordt gebruikt om CSS3 Selectoren af te handelen. Het wordt gebruikt in combinatie met een JavaScript-bibliotheek, zoals jQuery of Mootools. Ik raad aan te kiezen voor Mootools omdat het alle Selectivizr-functies ondersteunt (CSS-selectors).
Voor deze zelfstudie ga ik de door Google gehoste Mootools-bibliotheek gebruiken, dus we nemen het gewoon in ons op:
We kunnen jQuery gebruiken om een alternatief te bieden voor de text-shadow eigenschap van CSS3. We hoeven alleen de plug-in jQuery-tekstschaduw te downloaden en deze vervolgens in jQuery opnemen:
OK, dat is onze toolkit, laten we nu kijken hoe we deze tools gebruiken om onze CSS3-hoofdpijn op te lossen?
Randradius is waarschijnlijk de meest bekende CSS3-eigenschappen. Gelukkig is het renderen in Internet Explorer gewoon een kwestie van CSS3PIE gebruiken.
.vak border-radius: 10px; gedrag: url (PIE.htc);
Zoals je kunt zien, hoeven we alleen het PIE-script te "roepen" nadat we onze grensradiusregel hebben gedefinieerd.
Op een vergelijkbare manier als grens-straal, voor Internet Explorer om box-shadow te herkennen, hoeven we alleen maar het PIE-script op te nemen. Merk op dat we de schaduwkleur ook kunnen declareren met behulp van RGBA-waarden.
.vak box-shadow: 5px 5px 5px rgba (0, 0, 0, .75); gedrag: url (PIE.htc);
U kunt ook RGBA-kleuren gebruiken bij het declareren van een achtergrondkleur.
Om CSS3 PIE toe te staan om achtergrondgradiënten weer te geven, gaan we verder achtergrond: op de volgende manier:
-taart-achtergrond: lineair verloop ([|| ,]? , [, ] *);
Eigenlijk is het erg vergelijkbaar met de verschillende andere regels voor browserleveranciers. Vergeet niet om het CSS3 PIE-gedrag naderhand te noemen!
.box background: -webkit-linear-gradient (top, # 0072bc, # 00bff3); / * Safari, Chrome * / achtergrond: -moz-linear-gradient (boven, # 0072bc, # 00bff3); / * Firefox * / achtergrond: -o-lineaire gradiënt (boven, # 0072bc, # 00bff3); / * Opera * / achtergrond: -ms-linear-gradient (bovenaan, # 0072bc, # 00bff3); / * IE10 * / -pie-achtergrond: lineaire gradiënt (# 0072bc, # 00bff3); / * IE6 + * / behaviour: url (PIE.htc);
Nogmaals, in dit geval moeten we de -taart- voorvoegsel:
.box background: url (img / flash.png) 20px 20px no-repeat, url (img / airplane.png) 90px 50px geen herhaling, # 00BFF3; / * Moderne browsers * / -pie-achtergrond: url (img / flash.png) 20px 20px geen herhaling, url (img / airplane.png) 90px 50px geen herhaling, # 00BFF3; / * IE6 + * / behaviour: url (PIE.htc);
De laatste eigenschap CSS3 PIE is geschikt voor de randafbeelding:
.box border-image: url (border.png) 27 27 27 27 ronde rond; gedrag: url (PIE.htc);
Nu is het tijd om vies te worden met Selectivizr. Neem de JavaScript-bibliotheek op zoals aangetoond aan het begin van de tut, en vervolgens worden alle CSS3-kiezers herkend door IE6+!
table tr: first-child background: # 252525; table tr: nth-child (2n + 1) background: #ebebeb;
Dit effect kan het gemakkelijkst in de browser worden omgezet met behulp van de jQuery-bibliotheek. Als je het hebt opgenomen, bel je gewoon de schaduw tekst() functie, wijzend naar uw selector:
Om het effect te voltooien, voegt u gewoon de tekst-schaduw toe aan uw CSS.
.txt text-shadow: 2px 2px 2px zwart;
Om sommige CSS3-eigenschappen te vervangen, kunt u ook IE-filters gebruiken. Dit eerste voorbeeld is voor achtergrondgradiënten:
.vak achtergrond: #FFFFFF; filter: progid: DXImageTransform.Microsoft.gradient (startColorStr = '# 444444', EndColorStr = "# 999999"); / * IE6-IE9 * /
Deze tweede is het equivalent van de eigenschap transform. De syntaxis is echter zo'n hoofdpijn dat u wordt geadviseerd om een generator te gebruiken om deze te berekenen.
.box / * IE8 + - moet op één regel staan, helaas * / -ms-filter: "progid: DXImageTransform.Microsoft.Matrix (M11 = 0.9848077530122079, M12 = -0.17364817766693127, M21 = 0.17364817766693127, M22 = 0.9848077530122079, SizingMethod =" auto uitbreiden")"; / * IE6 en 7 * / filter: progid: DXImageTransform.Microsoft.Matrix (M11 = 0.9848077530122079, M12 = -0.17364817766693127, M21 = 0.17364817766693127, M22 = 0.9848077530122079, SizingMethod = "auto expand"); marge links: -14 px; margin-top: -21px;
Zoals u hebt gezien, kunnen we met verschillende hulpprogramma's zorgen voor een redelijke weergave van CSS3 in oudere browsers. Ik hoop dat dit je aanmoedigt om de stier bij de horens te pakken en veel van de effecten te oefenen die haalbaar zijn met CSS3! Bedankt voor het lezen.
Accentsconagua