CSS-invoer

Geprefixte CSS

CSS-prefixing voorbeelden

Vendor-prefixes zorgen voor cross-browser ondersteuning. Voorbeeld:

Flexbox en transforms

Invoer (zonder prefixes):

Invoer

Geprefixte uitvoer:

Uitvoer

Gebruik Voorbeeld hierboven om meer voorbeeldgegevens te laden.

Wat is een CSS Prefixer?

Browsers implementeren soms CSS-functies met vendor-prefixes voordat ze gestandaardiseerd zijn: -webkit- (Chrome, Safari), -moz- (Firefox), -ms- (legacy IE/Edge). Een CSS Prefixer voegt deze prefixes automatisch toe zodat uw stijlen cross-browser werken. De W3C CSS-specificaties definiëren de taal; Can I Use volgt browserondersteuning.

Dit hulpmiddel parseert uw CSS en voegt vendor-prefixes toe waar nodig. Het draait volledig in uw browser. Er wordt niets naar een server gestuurd. Moderne browsers hebben minder prefixes nodig dan vroeger, maar sommige eigenschappen (bijv. user-select, display: flex in oudere Safari) profiteren nog steeds. Voor formatteren de CSS Formatter. Voor minificeren de CSS Minificeerder.

Hoe dit hulpmiddel te gebruiken

Plak of upload CSS

Kopieer uw CSS en plak het in de linker editor. U kunt ook op Uploaden klikken om een .css-bestand te laden. De knop Voorbeeld laadt voorbeeldgegevens. Ongeldige CSS toont een fout.

Bekijk de geprefixte uitvoer

Het rechterpaneel toont CSS met toegevoegde vendor-prefixes. Eigenschappen zoals display: flex, user-select en transform krijgen de juiste prefixes voor oudere browsers.

Kopiëren of downloaden

Gebruik Kopiëren of Downloaden. Voor SCSS of Less compileer eerst met SCSS naar CSS of Less naar CSS, dan prefixen. Voor validatie de CSS Validator.

Wanneer CSS-prefixing helpt

Bij ondersteuning van oudere browsers (Safari, oudere Chrome, legacy IE) of bij gebruik van nieuwere CSS-functies die nog niet volledig gestandaardiseerd zijn, zorgt prefixing voor compatibiliteit. Build-tools zoals Autoprefixer of PostCSS handelen dit vaak af in productie, maar dit hulpmiddel is nuttig voor eenmalige bestanden, snelle controles of wanneer geen build-stap beschikbaar is.

E-mail-CSS, ingesloten stijlen of CDN-gehoste CSS kan handmatige prefixing nodig hebben. Uw stylesheet hier doorlaten levert browserklare uitvoer. Voor converteren naar inline-stijlen (bijv. e-mail) gebruikt u CSS naar Inline na prefixing.

Veelgestelde vragen

Heb ik in 2024 nog prefixes nodig?

Veel eigenschappen hebben nu unprefixed ondersteuning. Voor oudere Safari, iOS of legacy-browsers hebben sommige eigenschappen (bijv. -webkit-backdrop-filter) nog steeds prefixes nodig. Controleer Can I Use voor uw doelbrowsers.

Zijn mijn gegevens privé?

Ja. Prefixing draait volledig in uw browser. Er worden geen gegevens naar een server gestuurd.

Waarom dit in plaats van Autoprefixer?

Autoprefixer draait in een build-pipeline. Dit hulpmiddel draait in de browser—geen Node.js of build-stap. Gebruik het voor snelle controles, eenmalige bestanden of wanneer u geen build kunt uitvoeren.

Ondersteunt het alle eigenschappen?

Het hulpmiddel voegt prefixes toe voor veelvoorkomende eigenschappen. Voor uitgebreide dekking gebruikt u Autoprefixer met uw build. Voor de meeste gevallen dekt dit hulpmiddel het essentiële.

Hoe zit het met @keyframes?

Keyframe-namen kunnen in sommige contexten prefixes nodig hebben. Het hulpmiddel behandelt veelvoorkomende gevallen. Voor complexe animaties verifieer in uw doelbrowsers.

Gerelateerde hulpmiddelen

Voor de CSS-specificatie: W3C CSS. MDN CSS is de referentie. Can I Use voor browserondersteuning. Autoprefixer voor build-pipelines.

CSS Prefixer