Share
In de laatste zelfstudie hebben we onze "Snelstart" -sectie van deze serie ingepakt, en we zijn nu klaar om verder te gaan met PostCSS om stylesheets te genereren, waarbij verschillende soorten plug-ins voor verschillende doeleinden worden gebruikt.
In deze zelfstudie gebruiken we PostCSS om een stylesheet te maken die is ontworpen voor compatibiliteit met verschillende browsers. Wij zullen:
Accentsconagua
zal veranderen eigendomLaten we beginnen!
Het eerste dat u moet doen, is uw project instellen om Gulp of Grunt te gebruiken, afhankelijk van uw voorkeur. Als je nog geen voorkeur hebt voor een van de twee, raad ik Gulp aan, omdat je minder code nodig hebt om dezelfde doelen te bereiken.
U kunt lezen over het instellen van Gulp- of Grunt-projecten voor PostCSS in de vorige zelfstudies
respectievelijk.
Als u uw project echter niet helemaal opnieuw wilt instellen, kunt u de bronbestanden downloaden die aan deze zelfstudie zijn gekoppeld en het meegeleverde Gulp- of Grunt-startersproject uitpakken in een lege projectmap..
Voer vervolgens de opdracht uit met een terminal- of opdrachtprompt naar de map gericht npm installeren.
Nu u uw lege Gulp- of Grunt + PostCSS-project klaar hebt staan, moeten we de plug-ins installeren die u in deze zelfstudie zult gebruiken.
We zullen behoorlijk wat plug-ins installeren, dus in plaats van ze een voor een te installeren, zoals we deden in de "Quickstart-handleidingen" voor Gulp en Grunt, zullen we ze allemaal tegelijk installeren met een enkele opdracht.
Of je nu Gulp of Grunt gebruikt, voer de volgende opdracht in je projectmap uit om de plug-ins te installeren die we zullen gebruiken:
npm installeer autoprefixer postcss-color-rgba-fallback postcss-opacity postcss-pseudoelements postcss-vmin pixrem postcss-will-change --save-dev
Nu de plug-ins zijn geïnstalleerd, laten we doorgaan en ze in uw project laden.
Als u Gulp gebruikt, voegt u deze variabelen toe onder de variabelen die al in het bestand staan:
var autoprefixer = require ('autoprefixer'); var color_rgba_fallback = require ('postcss-color-rgba-fallback'); var opacity = require ('postcss-opacity'); var pseudoelements = require ('postcss-pseudoelements'); var vmin = require ('postcss-vmin'); var pixrem = require ('pixrem'); var will_change = require ('postcss-will-change');Voeg nu elk van die nieuwe variabelenamen toe aan uw processors array:
var processors = [will_change, autoprefixer, color_rgba_fallback, opacity, pseudoelements, vmin, pixrem];
Voer een snelle test uit dat alles werkt door de opdracht uit te voeren slok css controleer vervolgens of er een nieuw "style.css" -bestand is verschenen in de map "dest" van uw project.
Als u Grunt gebruikt, werk dan het processors object, dat is genest onder de opties object, naar het volgende:
processors: [require ('postcss-will-change') (), require ('autoprefixer') (), require ('postcss-color-rgba-fallback') (), require ('postcss-opacity') () , require ('postcss-pseudoelements') (), require ('postcss-vmin') (), require ('pixrem') ()]Voer een snelle test uit door het commando uit te voeren grunt postcss controleer vervolgens of de map "dest" van uw project nu een nieuw "style.css" -bestand bevat.
U hebt nu alle geïnstalleerde plug-ins die vereist zijn voor deze zelfstudie en u bent klaar om verder te gaan met hoe u ze kunt gebruiken om de compatibiliteit met uw cross-browser te verbeteren.
Sommige van de maatregelen voor cross-browser compatibiliteit die we zullen behandelen, zullen alleen nodig zijn voor specifieke use-cases. Geautomatiseerde prefixing van leveranciers, aan de andere kant, is iets waarvan ik zou willen voorstellen dat het moet worden gedaan elk project, via de plug-in Autoprefixer gemaakt door Andrey Sitnik.
Het kan moeilijk zijn om bij te houden welke eigenschappen op welk moment voorvoegsels van leveranciers vereisen, en met Autoprefixer hoeft dat niet. Gebruik Autoprefixer als onderdeel van elk project en het zal uw code controleren op basis van de gegevens van CanIUse.com en vervolgens indien nodig leveranciersprefixen toevoegen zonder dat u erover hoeft na te denken.
Laten we een kleine test doen om Autoprefixer in actie te zien. Voeg de volgende animatie- en flexboxcode toe aan het "src / style.css" -bestand van uw project:
@keyframes animationExample from width: 0; tot width: 100%; .animerenThis animation: animationExample 2s; weergave: flex;
Rennen slok css of grunt postcss om uw bestand te compileren, en uw "dest / style.css" zou nu de prefix van deze leverancier moeten bevatten:
@ -webkit-keyframes-animatieVoorbeeld from width: 0; tot width: 100%; @keyframes animationExample from width: 0; tot width: 100%; .animerenThis -webkit-animation: animationExample 2s; animatie: animatieVoorbeeld 2s; weergave: -webkit-box; weergave: -webkit-flex; weergave: -ms-flexbox; weergave: flex;
Zoals u kunt zien, zijn voorvoegsels van leveranciers automatisch toegevoegd, zoals bepaald door de gegevens die door CanIUse.com worden verstrekt over animatie en flexbox.
Autoprefixer gebruikt Browserlist om te bepalen voor welke browserversies het ondersteuning zal toevoegen. Bij standaardinstellingen worden voorvoegsels van leveranciers toegepast zoals vereist voor:
Het bovenstaande voorbeeld is gecompileerd onder de standaardinstellingen van Autoprefixer. Dit betekende dat ondersteuning voor IE10 en Safari 8 was inbegrepen, dus de -Mevrouw- en -webkit- voorvoegsels die ze nodig hebben voor animatie en flexbox werden automatisch ingevoegd.
Voor IE11 en Safari 9 zijn deze voorvoegsels echter niet vereist, dus als u uw browserlijstconfiguratie instelt om alleen IE11 + en Safari 9+ te ondersteunen, worden deze voorvoegsels niet meer toegevoegd.
Probeer dit uit door een browsers doorschakelen naar Autoprefixer in je Gulpfile of Gruntbestand zoals zo:
// In de array 'processors' van Gulpfile: autoprefixer (browsers: 'safari> = 9, ie> = 11'), // In de array 'processors' van gruntfile: require ('autoprefixer') (browsers: [ 'safari> = 9, ie> = 11']),Als u nu uw CSS opnieuw compileert, ziet u dat er geen verschil is tussen uw originele en gecompileerde code. Dit komt omdat zonder ondersteuning voor Safari 8 of IE10 geen leveranciersprefixen zijn toegevoegd die bij hen passen.
De zal veranderen property wordt gebruikt om een browser vooraf te laten weten dat bepaalde elementen van uw ontwerp geanimeerd zullen worden. Hierdoor kan de browser het weergaveproces optimaliseren en vertragingen en flikkeringen voorkomen. Momenteel wordt deze eigenschap echter niet ondersteund door IE / Edge, Safari of Opera Mini.
De postcss-will-change plug-in, ook gemaakt door Andrey Sitnik, voegt een fallback toe die deze browsers helpt bij het beter renderen, zelfs als ze niet de efficiëntie hebben die ze zouden kunnen bieden als ze zouden ondersteunen zal veranderen. Het doet dit door het toevoegen van de achtervlak-zichtbaarheid eigenschap, waarmee een compositor-laag wordt gemaakt die door de GPU wordt verwerkt.
Voeg deze code bijvoorbeeld toe aan uw "src / style.css" -bestand:
.thisWillChange will-change: transform;
Stel uw stylesheet samen en u zou de fallback in uw "dest / style.css" -bestand moeten zien verschijnen:
.thisWillChange backface-visibility: hidden; will change: transform;
Notitie: deze plug-in moet worden geladen voor Autoprefixer in uw Gulpfile / Grunt-bestand. Dit is om Autoprefixer toe te staan om voorvoegsels van leveranciers toe te voegen aan de achtervlak-zichtbaarheid eigendom, zoals zo:
/ * Terugval met voorvoegsels van leveranciers * / .thisWillChange -webkit-backface-visibility: hidden; backface-visibility: verborgen; will change: transform;
Dankzij de verbeterde browserversies van Microsoft en de grote groepen die toonaangevend zijn in het wegvallen van de ondersteuning van het oude IE, komen we geleidelijk dichter bij het niet voortdurend overwegen van fallbacks en oplossingen voor problematische oudere browsers. Microsoft zal zelf in 2016 de ondersteuning voor IE8 laten vallen. Bootstrap 4 alpha is onlangs uitgebracht en heeft ook de ondersteuning voor IE8 laten vallen. Google stopte met het ondersteunen van IE8 in 2012 en stopte IE9-ondersteuning in 2013.
Uiteindelijk moet elk project van geval tot geval worden beoordeeld en als u een demografische doelgroep met een hoge gebruikscapaciteit van oudere browsers target, heeft u misschien geen andere keuze dan uw best te doen om hen te ondersteunen. Als dat het geval is, kunnen de volgende plug-ins u helpen dat proces een beetje minder pijnlijk te maken.
RGBA () Color FallbacksIE8 heeft geen ondersteuning voor RGBA () kleuren, dus de postcss-color-rgba-fallback plugin van Guillaume Demesy voegt een platte hexadecimale kleur toe als een fallback.
Voeg deze code bijvoorbeeld toe aan uw "src / style.css" -bestand:
.rgbaFallback background: rgba (0,0,0,0.5);
Compileer en je zou moeten zien dat de hexcode terugvalt aan je "dest / style.css" bestand:
.rgbaFallback background: # 000000; achtergrond: rgba (0,0,0,0.5);
ondoorzichtigheid fallbacksIE8 kan het niet aan ondoorzichtigheid eigenschap, dus voegt de postcss-opacity-plug-in van Vincent De Oliveira een IE-specifiek filter toe om hetzelfde effect te bereiken.
Voeg deze code toe aan uw bronstijlblad:
.opacityFallback opacity: 0,5;
Na het compileren zou je het juiste moeten zien -ms-filter fallback toegevoegd:
.opacityFallback opacity: 0,5; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (Dekking = 50)";
:: in : op pseudo-elementenHet wordt als de beste methode beschouwd bij het genereren van pseudo-elementen zoals .element :: vóór om een dubbele dubbele punt notatie te gebruiken ::. Dit is om hen te helpen onderscheiden van pseudo-klassen zoals .element: hover die een enkele colon-notatie zou moeten gebruiken :.
IE8 ondersteunt echter niet de dubbele-dubbele puntnotatie :: om pseudo-elementen te maken, ondersteunt het slechts één dubbele punt :. Door de plug-in postcss-pseudoelements van Sven Tschui te gebruiken, kunt u coderen volgens de beste werkwijzen en de notatie automatisch laten wijzigen.
Voeg het volgende dubbel toe :: notatie code:
.pseudo-element :: before content: ";
Stel uw bestand samen en u zou moeten zien dat het teruggebracht is tot de single : notatie:
.pseudo-element: before content: ";
Door te coderen naar de beste werkwijzen en deze plug-in te gebruiken, kan IE8, nadat IE8 volledig met pensioen is, uw CSS opnieuw verwerken zonder de plug-in en de juiste syntaxis op zijn plaats hebben.
vm Fallback voor Vmin In IE9 de relatieve eenheid van het kijkvenster Vmin wordt niet ondersteund, maar gebruikt in plaats daarvan de equivalente eenheid vm. Als u op IE9 let, voegt de postcss-vmin-plugin van Vincent De Oliveira toe vm eenheden als een fallback.
Voeg deze code toe aan uw "src / style.css" bestand:
.vmFallback width: 50vmin;
Opnieuw compileren en de resulterende code moet de vm unit fallback toegevoegd in:
.vmFallback width: 50vm; breedte: 50vmin;
px Fallback voor rem eenhedenIE8 ondersteunt dit niet rem eenheden en in zowel IE9 als IE10 worden ze niet ondersteund pseudo-elementen en doopvont steno-verklaring. Met de node-pixrem plugin van Vincent De Oliveira en Rob Wierzbowski die je kunt hebben px gebaseerde fallbacks worden automatisch toegevoegd, waar je ook gebruikt rem units.
Voeg deze code toe aan uw bronstijlblad:
.remFallback height: 10rem; lettertype: 2rem Arial; .remFallback :: before content: "; line-height: 1rem;
Hercompileer en je zou al het juiste moeten zien px fallbacks toegevoegd:
.remFallback height: 160px; hoogte: 10rem; lettertype: 32px Arial; lettertype: 2rem Arial; .remFallback: vóór content: "; regelhoogte: 16px; regelhoogte: 1rem;
Om samen te vatten wat we in het bovenstaande hebben behandeld:
De volgende stap in onze PostCSS Deep Dive-serie is een tutorial over het gebruik van plug-ins om uw CSS te verkleinen en te optimaliseren. We zullen inlining behandelen @importeren bestanden, het combineren van mediaquery's, het verwijderen van witruimte en verschillende andere methoden om uw stylesheets zo gestroomlijnd mogelijk te maken. Zie je daar!
