Share
De geweldige Jeffrey Way heeft een tijd geleden een tool gemaakt genaamd Prefixr, die bedoeld was om te helpen bij de zware taak om prefixen van leveranciers in uw stylesheets te beheren. Het werkte door uw stylesheet te analyseren en automatisch de voorgedefinieerde versie van verschillende regels toe te voegen aan een uitvoer die u vervolgens in uw bestand kon plakken. Het was een mooie, gladde tool.
Helaas wilden we, nu de site de weg is gegaan van de dodo-vogel en nadat verschillende gebruikers ons erover hebben verteld, een aantal alternatieven bieden die kunnen helpen vergelijkbare mogelijkheden te bieden.
De eerste optie die het dichtst bij de functionaliteit van Prefixr staat, is een site genaamd Express Prefixr. Dit is gemaakt door de geweldige TJ Holowaychuk die behalve expert op het gebied van de ontwikkeling van Node.js ook het Express-webtoepassingsraamwerk voor Node.js heeft gemaakt.
Met Express Prefixr krijgt u er twee te zien textarea velden, een voor het invoeren van uw stijlen en de tweede voor het ontvangen van de vooraf ingestelde uitvoer van de service. Dit lijkt erg op de manier waarop Prefixr werkte:
Om dit uit te testen, neem ik dezelfde codevoorbeeld dat Jeffrey gebruikte in zijn originele artikel:
.vak ondoorzichtigheid: .5; .container vakschaduw: 20px; -moz-overgang: doosschaduw 2s; -webkit-border-radius: 4px; animatie: dia 1s alternatief; achtergrond: lineair verloop (bovenaan, # e3e3e3 10%, wit); @ -webkit-keyframes "dia" 0% links: 0; 100% left: 50px;
Druk vervolgens op de "Voorvoegsel het!"knop, kan ik meteen mijn prefix stijlen naar mij laten verzenden:
Dit is het volledige resultaat:
.box -webkit-opacity: .5; -moz-opacity: .5; -ms-opacity: .5; -o-opacity: .5; .container -webkit-box-shadow: 20px; -moz-box-shadow: 20px; -ms-box-shadow: 20px; -o-box-shadow: 20px; -moz - webkit-overgang: box-shadow 2s; -moz-overgang: doosschaduw 2s; -ms-overgang: box-shadow 2s; -o-transition: box-shadow 2s; -webkit - webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; -webkit-animatie: dia 1s alternatief; -moz-animatie: slide 1s alternatief; -ms-animatie: slide 1s alternatief; -o-animatie: dia 1s alternatief; achtergrond: lineair verloop (bovenaan, # e3e3e3 10%, wit); achtergrond: -webkit-lineair verloop (bovenaan, # e3e3e3 10%, wit); achtergrond: -moz-linear-gradient (bovenaan, # e3e3e3 10%, wit); achtergrond: -ms-lineaire gradiënt (bovenkant, # e3e3e3 10%, wit); achtergrond: -o-lineaire gradiënt (boven, # e3e3e3 10%, wit); @ -webkit-keyframes "dia" 0% links: 0; 100% left: 50px;
Als u dit verder wilt, biedt Express Prefixr ook een API die u kunt gebruiken om te integreren in uw toepassingen of om tools van derden te gebruiken zoals Krul. Dus het volgende fragment nemen:
krul http://expressprefixr.herokuapp.com/api/processor -d css = "body border-radius: 10px"
En plak het in mijn terminal venster geeft me de volgende resultaten:
reys-mbp: ~ rey $ curl http://expressprefixr.herokuapp.com/api/processor -d css = "body border-radius: 10px" body -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px;
Een laatste groot voordeel van Express Prefixr is dat de code beschikbaar is op GitHub, zodat u deze gemakkelijk kunt doorzoeken en de software kunt aanpassen aan uw behoeften.
De volgende optie is eigenlijk ontworpen om meer te integreren in uw workflow, in plaats van een visuele UI-tool te zijn. Autoprefixer voegt in feite in voorkomend geval voorvoegsels toe met behulp van de regels van de populaire site Can I Use. De slogan van Autoprefixer is:
"Schrijf uw CSS-regels zonder voorvoegsels van leveranciers (vergeet ze in feite helemaal niet)"
En het klopt. Wat dit betekent, is dat u in uw stylesheets kunt focussen op het gebruik van de op standaarden gebaseerde syntaxis en dat Autoprefixer indien nodig de vooraf vastgestelde regels zal toevoegen.
Laten we naar een code kijken:
: volledig scherm een transition: transform 1s
De bovenstaande code wordt door Autoprefixer bijgewerkt naar het volgende:
: -webkit-full-screen een -webkit-overgang: -webkit-transform 1s; transition: transform 1s: - moz-full-screen a transition: transform 1s: - ms-fullscreen a transition: transform 1s: fullscreen een -webkit-transition: -webkit-transform 1s; overgang: transform 1s
Bekijk de syntaxis van dichtbij. Merk op dat de overgang regel was vrijwel alleen gelaten, behalve voor de toevoeging van de twee Webkit-specifieke vermeldingen. Dat komt omdat Autoprefixer alleen voorvoegsels van leveranciers toepast als dat gepast is. In dit geval, overgang wordt breed ondersteund in moderne browsers en hoeft niet echt vooraf te worden gebruikt.
Maar de :volledig scherm pseudo-klasse evolueert nog steeds en moet correct worden voorafgegaan. Autoprefixer, met behulp van de Can I Use-gegevens, is slim genoeg om te bepalen wanneer een item moet worden voorafgegaan door een prefix op basis van het ondersteuningsniveau van een browser voor een functie. Heel cool!
Het ding om op te merken is dat Autoprefixer bedoeld is om te worden opgenomen in uw normale implementatieworkflow. Het is geen bibliotheek aan de clientzijde en u gebruikt het via een aantal integraties van derden. Dit bevat:
Accentsconagua
autoprefixer-rails edelsteenEn zo veel meer opties. Zelfs de nieuwe Atom Editor heeft nu het atom-autoprefixer-pakket dat laat zien dat Autoprefixer goed onderhouden is.
Als u Autoprefixer in actie wilt zien, kunt u doorgaan naar de volgende demo en een aantal CSS-regels toevoegen die u van oudsher voor prefix van leveranciers moet hebben en bekijken hoe dit voor u werkt.
De laatste optie is een geweldige client-side library van Lea Verou, genaamd -prefix-free. Lea is al lange tijd voorstander van cross-browser ontwikkeling en heeft deze bibliotheek gebouwd om er als een beetje een shim voor te zorgen dat uw site alle juiste leveranciersprefixen gebruikt. Ze heeft het gebouwd in een tijd waarin helaas veel webontwikkelaars gewoon alle benodigde voorvoegsels zijn vergeten, waardoor sites niet correct worden weergegeven in alle moderne browsers..
Het belangrijkste verschil tussen dit en de twee andere die ik eerder noemde, is dat -prefix-vrij een JavaScript-bibliotheek is die uw stylesheets in runtime bekijkt en de leveranciersprefixes toevoegt wanneer dat nodig is.
Het gebruik van de bibliotheek is net zo eenvoudig als het toevoegen van de volgende regel aan de hoofd van uw pagina:
Nee serieus. Dat is het. De bibliotheek verwerkt de verwerking van elk stylesheet link of stijl elementen en voegt een leveranciersprefix toe waar nodig. Dit is met name handig voor sites die al zijn geïmplementeerd en mogelijk niet meer kunnen worden teruggezet en bijgewerkt.
Het heeft ook solide browser-ondersteuning die compatibel is met IE9 +, Opera 10+, Firefox 3.5+, Safari 4+ en Chrome op desktop en Mobile Safari, Android-browser, Chrome en Opera Mobile op mobiele apparaten.
Het is geweldig om alternatieven voor Prefixr te hebben en deze oplossingen zijn zeker geschikt. Uiteindelijk zijn voorvoegsels van leveranciers ingewikkelder dan ze waard zijn en met veel ontwikkelaars die de oorspronkelijke bedoeling van hen niet respecteren (bijvoorbeeld om aan te duiden experimenteel functies) en gebruik maken van deze in productiesystemen, hopelijk zullen ze in de nabije toekomst verdwijnen.
Gelukkig meldde Google toen ze hun Blink rendering-engine aankondigden, dat ze zouden overschakelen naar een feature-vlagmodel dat experimentele functies achter moeilijk te plaatsen vlaggen zou verbergen die niet toegankelijk zijn via code. Godzijdank!
