CSS invoer

CSS met prefixen

Wat is een CSS Prefixer?

Browserleveranciers voegen experimentele CSS-functies toe met prefixen zoals -webkit-, -moz-, -ms- en -o-. Zonder deze prefixen werkt je moderne CSS niet in oudere browsers. Deze CSS prefixer voegt automatisch alle benodigde vendor-prefixen toe zodat je CSS (Cascading Style Sheets) in verschillende browsers en versies werkt.

Volgens MDN Web Docs zijn vendor-prefixen essentieel voor cross-browser compatibiliteit. Onze tool volgt de Can I Use database om te bepalen welke eigenschappen prefixen nodig hebben, zodat je stijlen werken in Chrome, Firefox, Safari, Edge en oudere versies.

Alles wordt lokaal in je browser verwerkt. Geen uploads, geen servers – plak je CSS en ontvang direct uitvoer met prefixen.

Hoe gebruik je de CSS Prefixer

Volg deze stappen om vendor-prefixen toe te voegen aan je CSS. Elke stap gebruikt de knoppen en panelen op deze pagina.

Plakken, uploaden of voorbeeld laden

Plak CSS in het linker CSS invoer paneel, of klik Uploaden om een .css-bestand te laden. Klik Voorbeeld voor voorbeeldstijlen met eigenschappen die prefixen nodig hebben. Voorbeeld:

.subscriber-card {
  display: flex;
  transform: translateY(-2px);
  transition: all 0.3s ease;
}

Uitvoer met prefixen bekijken

Het rechter CSS met prefixen paneel toont uitvoer met -webkit-, -moz-, -ms- en -o- prefixen waar nodig. Eigenschappen zoals flex, transform en transition krijgen alle benodigde versies met prefixen voor cross-browser ondersteuning.

Kopiëren of downloaden

Klik Kopiëren om naar het klembord te kopiëren, of Downloaden om op te slaan als .css. Gebruik Wissen om opnieuw te beginnen. Alle verwerking verloopt in je browser.

Wanneer je dit gebruikt

Cross-browser compatibiliteit

Bouw je een site die op oudere browsers moet werken? Voeg vendor-prefixen toe zodat moderne CSS-functies zoals Flexbox en Grid overal werken. Onmisbaar voor zakelijke projecten met legacy-browserondersteuning.

Snel prototypen

Test je CSS-animaties of transforms in verschillende browsers? Prefix je code eerst om browserspecifieke problemen te vermijden. Bespaart tijd als je snel iteraties maakt op ontwerpen.

Legacy-projecten

Onderhoud je oudere projecten die nog IE11 of oudere Chrome-versies ondersteunen? Voeg prefixen toe aan nieuwe CSS-functies vóór het deployen. Voorkomt dat bestaande browserondersteuning stukgaat.

CSS leren

Wil je begrijpen welke CSS-eigenschappen vendor-prefixen nodig hebben? Gebruik deze tool om te zien welke functies prefixing vereisen. Educatief voor ontwikkelaars die browser compatibiliteit leren.

Veelgestelde vragen

Wat zijn vendor-prefixen?

Vendor-prefixen zijn browserspecifieke CSS-eigenschapsprefixen zoals -webkit-, -moz-, -ms- en -o-. Browsers gebruiken ze om experimentele of niet-standaard CSS-functies te implementeren voordat ze officiële standaarden worden.

Heb ik nog steeds prefixen nodig in moderne browsers?

Voor geavanceerde functies, ja. Hoewel moderne browsers de meeste standaard CSS ondersteunen, vereisen sommige nieuwere eigenschappen en oudere browserversies nog steeds prefixen. Controleer Can I Use voor specifieke eigendomsondersteuning.

Welke eigenschappen hebben prefixing nodig?

Veelvoorkomende zijn transform, transition, animation, flex-eigenschappen, border-radius (oudere browsers), box-shadow en vele anderen. Onze tool detecteert deze automatisch op basis van MDN-standaarden.

Wat is de volgorde van eigenschappen met prefixen?

Eigenschappen met prefixen moeten vóór de standaardeigenschap komen. Onze tool volgt deze conventie: vendor-prefixen eerst (-webkit-, -moz-, -ms-, -o-), daarna de standaardeigenschap zonder prefix als laatste.

Wordt mijn CSS-bestand groter?

Ja, het toevoegen van vendor-prefixen vergroot de bestandsgrootte. De afweging is echter browser compatibiliteit. Gebruik dit voor productie samen met minificatie en overweeg Autoprefixer in je bouwproces.

Is mijn CSS-data veilig?

Absoluut. Alle verwerking vindt plaats in je browser met JavaScript. Je CSS verlaat je computer nooit – geen server-uploads, geen dataopslag, volledig privé.

Gerelateerde CSS-tools

Prefixing is slechts één onderdeel van CSS-ontwikkeling. Hier zijn andere tools die kunnen helpen: