CSS-indata

CSS med prefix

Vad är en CSS Prefixer?

Webbläsarleverantörer lägger till experimentella CSS-funktioner med prefix som -webkit-, -moz-, -ms- och -o-. Utan dessa prefix fungerar inte modern CSS i äldre webbläsare. Den här CSS prefixern lägger automatiskt till alla nödvändiga vendor-prefix så att din CSS (Cascading Style Sheets) fungerar i olika webbläsare och versioner.

Enligt MDN Web Docs är vendor-prefix avgörande för kompatibilitet mellan webbläsare. Vårt verktyg använder Can I Use-databasen för att avgöra vilka egenskaper som behöver prefix och säkerställer att stilar fungerar i Chrome, Firefox, Safari, Edge och äldre versioner.

Allt körs lokalt i webbläsaren. Ingen uppladdning, inga servrar – klistra in CSS och få omedelbart prefixad utdata.

Hur du använder CSS Prefixern

Följ dessa steg för att lägga till vendor-prefix i CSS.

Klistra in, ladda upp eller ladda exempeldata

Klistra in CSS i det vänstra CSS-indata-fältet eller klicka på Ladda upp för att ladda en .css-fil. Klicka på Exempeldata för att se exempelformatering med egenskaper som behöver prefix. Exempel:

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

Visa prefixad utdata

Det högra CSS med prefix-fältet visar utdata med -webkit-, -moz-, -ms- och -o-prefix där det behövs. Egenskaper som flex, transform och transition får alla nödvändiga prefixade versioner.

Kopiera eller ladda ned

Klicka på Kopiera för att kopiera till urklipp, eller Ladda ned för att spara som .css. Använd Rensa för att börja om. All bearbetning sker i webbläsaren.

När du ska använda detta

Kompatibilitet mellan webbläsare

Bygger du en sida som måste fungera i äldre webbläsare? Lägg till vendor-prefix så att moderna CSS-funktioner som Flexbox och Grid fungerar överallt. Nödvändigt för enterpriseprojekt med stöd för äldre webbläsare.

Snabb prototypning

Testar du CSS-animationer eller transformationer i olika webbläsare? Lägg till prefix i koden först för att undvika webbläsarspecifika problem. Sparar tid under snabba designiterationer.

Legacy-projekt

Underhåller du äldre projekt som fortfarande stöder IE11 eller tidigare Chrome-versioner? Lägg till prefix på nya CSS-funktioner innan driftsättning. Förhindrar att befintligt webbläsarstöd bryts.

Lär dig CSS

Vill du förstå vilka CSS-egenskaper som kräver vendor-prefix? Använd det här verktyget för att se vilka funktioner som behöver prefix. Lärorikt för utvecklare som lär sig webbläsarkompatibilitet.

Vanliga frågor

Vad är vendor-prefix?

Vendor-prefix är webbläsarspecifika CSS-egenskapsprefixer som -webkit-, -moz-, -ms- och -o-. Webbläsare använder dem för att implementera experimentella eller icke-standardiserade CSS-funktioner innan de blir officiella standarder.

Behöver jag fortfarande prefix i moderna webbläsare?

För de senaste funktionerna, ja. Även om moderna webbläsare stöder de flesta standard-CSS kräver vissa nyare egenskaper och äldre webbläsarversioner fortfarande prefix. Kontrollera Can I Use för specifikt stöd för egenskaper.

Vilka egenskaper behöver prefix?

Vanliga är transform, transition, animation, flex-egenskaper, border-radius (äldre webbläsare), box-shadow och många fler. Vårt verktyg detekterar dem automatiskt baserat på MDN-standarder.

Vad är ordningen för prefixade egenskaper?

Prefixade egenskaper ska visas före standardegenskapen. Vårt verktyg tillämpar denna konvention: vendor-prefix (-webkit-, -moz-, -ms-, -o-) först, sedan standardegenskapen utan prefix sist.

Ökar detta min CSS-filstorlek?

Ja, att lägga till vendor-prefix ökar filstorleken. Avvägningen är dock webbläsarkompatibilitet. I produktion använd detta med minifiering och överväg att använda Autoprefixer i byggprocessen.

Är mina CSS-data säkra?

Absolut. All bearbetning sker i webbläsaren med JavaScript. Din CSS lämnar aldrig datorn – ingen serveruppladdning, ingen datalagring, fullständigt privat.

Relaterade CSS-verktyg

Prefixning är bara en del av CSS-programmering. Här är andra verktyg som kan hjälpa: