CSS Autoprefixer
CSS Autoprefixer voegt automatisch de benodigde vendor-prefixes toe aan je CSS. Plak je stijlregels in het invoerveld en zie direct de verwerkte code verschijnen voor optimale cross-browser ondersteuning. De verwerking gebeurt volledig lokaal in je browser, waardoor je code nooit naar een externe server wordt gestuurd.
Hoe gebruik je deze CSS Autoprefixer?
Met deze online tool voeg je snel vendor-prefixes toe aan je CSS zonder dat je een npm-installatie, build-step of configuratiebestand nodig hebt. Je plakt je code direct in het veld.
- Plak of typ je CSS in het invoerveld.
- De verwerkte code verschijnt automatisch zodra je stopt met typen.
- Klik op Kopiëren boven het uitvoerveld om de verwerkte CSS naar je klembord te kopiëren.
Als je CSS een syntactische fout bevat, verschijnt er een korte melding en blijft de laatst geldige code zichtbaar tot je de fout herstelt.
Aangepast browserdoel met browserslist
Standaard richt deze tool zich op een brede selectie van moderne browsers via de standaard query > 0,5%, last 2 versions. Als je project een specifiekere ondersteuning vereist, kun je een eigen query invoeren in het veld Browserslist-query (optioneel).
De syntaxis is identiek aan die in een .browserslistrc-bestand of package.json. Enkele voorbeelden van ondersteunde zoekopdrachten:
last 2 versions: de laatste twee versies van elke grote browser.> 1%: browsers met meer dan 1% wereldwijd gebruik.Safari >= 9: Safari versie 9 en alle nieuwere versies.defaults: de standaard brede selectie van Autoprefixer.
Waarom vendor-prefixes nog steeds nodig zijn
Browsers gebruiken prefixes zoals -webkit-, -moz-, -ms- en -o- om experimentele of specifieke CSS-eigenschappen te ondersteunen. Hoewel de meeste moderne CSS geen prefixes meer vereist, blijven eigenschappen zoals user-select en backdrop-filter in bepaalde browsers afhankelijk van een prefix voor een correcte weergave.
De tool controleert elke eigenschap aan de hand van actuele ondersteuningsgegevens en voegt alleen de prefixes toe die daadwerkelijk nodig zijn. Eigenschappen die in alle doelbrowsers standaard worden ondersteund, blijven ongewijzigd om overtollige code te voorkomen.
Lokale verwerking in je browser
Onder de motorkap draait exact dezelfde PostCSS- en Autoprefixer-engine die ook wordt gebruikt in populaire build-tools zoals Webpack en Vite. Het verschil is dat de verwerking hier volledig in je browser plaatsvindt.
Er worden geen gegevens geüpload naar een externe server. Dit maakt de tool uitermate geschikt voor het snel valideren en kopiëren van losse CSS-snippets tijdens het ontwikkelen of testen.
Veelgestelde vragen
Waarvoor wordt CSS Autoprefixer gebruikt?
CSS Autoprefixer voegt automatisch de benodigde vendor-prefixes zoals -webkit-, -moz-, -ms- en -o- toe aan je CSS op basis van actuele browserondersteuning. Dit zorgt voor een consistente weergave in verschillende browsers zonder dat je handmatig hoeft te onthouden welke eigenschappen een prefix vereisen.
Wat zijn CSS vendor prefixes en welke browsers gebruiken ze?
Vendor prefixes zijn korte voorvoegsels die browserfabrikanten toevoegen aan CSS-eigenschappen tijdens hun ontwikkelingsfase. De belangrijkste zijn -webkit- voor Chrome, Safari en iOS-browsers, -moz- voor Firefox, -ms- voor Internet Explorer en oude Edge, en -o- voor oude Opera-versies.
Is Autoprefixer tegenwoordig nog steeds nodig voor moderne CSS?
Ja, voor een beperkt maar essentieel aantal eigenschappen blijft het nodig. Hoewel de meeste CSS tegenwoordig zonder prefixes werkt, hebben regels zoals user-select en backdrop-filter in specifieke browsers nog steeds een prefix nodig om goed te functioneren.
Wat is een browserslist query en hoe stel ik deze in?
Een browserslist query is een korte tekstregel zoals "> 1%, last 2 versions" die specificeert welke browsers je wilt ondersteunen. Autoprefixer leest deze regel om te bepalen welke prefixes noodzakelijk zijn voor jouw gekozen browser-target.
Wat is het verschil tussen deze tool en de officiële Autoprefixer demo?
Beide tools maken gebruik van dezelfde PostCSS- en Autoprefixer-engine en leveren hetzelfde resultaat. Deze tool biedt daarnaast een mobielvriendelijke interface, een automatische live preview tijdens het typen en een snelle knop "Kopiëren", waarbij al je data lokaal in je browser blijft.
Hoe verwerk ik CSS met Autoprefixer?
Je plakt je CSS-code simpelweg in het invoerveld. De tool verwerkt de code direct en voegt de benodigde prefixes toe, waarna je het resultaat via de knop "Kopiëren" naar je klembord overzet.
Blijft mijn ingevoerde CSS privé wanneer ik deze online tool gebruik?
Ja, alle verwerking vindt volledig lokaal plaats binnen je eigen webbrowser. Er wordt niets geüpload naar een externe server of opgeslagen.
Wat gebeurt er als ik een typfout of syntactische fout in mijn CSS maak?
Bij een syntactische fout verschijnt er een kleine melding en blijft de laatst geldige uitvoer zichtbaar op het scherm. Zodra je de fout in je invoer herstelt, wordt de verwerking automatisch hervat.
Aanbevolen
-
CSS Pocket Reference (Eric Meyer)Elke eigenschap en selector in één klein boekje, inclusief vendor-prefixes.
-
CSS: The Definitive Guide (Meyer & Weyl)Het complete CSS-naslagwerk: grid, flexbox, animaties en waarom browserweergaves verschillen.
-
Amazon Fire HD 10 TabletTest je layout met prefixes op een echt touchscreen, niet alleen in een verkleind venster.
Help de tools gratis te houden. ✨
Afbeeldingen dienen ter illustratie. Als Amazon-Partner verdien ik aan in aanmerking komende aankopen.
