CSS-input

CSS med præfikser

Hvad er en CSS Prefixer?

Browserleverandører tilføjer eksperimentelle CSS-funktioner med præfikser som -webkit-, -moz-, -ms- og -o-. Uden disse præfikser fungerer moderne CSS ikke i ældre browsere. Denne CSS prefixer tilføjer automatisk alle nødvendige vendor-præfikser så din CSS (Cascading Style Sheets) fungerer i forskellige browsere og versioner.

Ifølge MDN Web Docs er vendor-præfikser afgørende for kompatibilitet på tværs af browsere. Vores værktøj bruger Can I Use-databasen til at bestemme hvilke egenskaber der har brug for præfikser og sikrer at stilarter fungerer i Chrome, Firefox, Safari, Edge og ældre versioner.

Alt kører lokalt i browseren. Ingen upload, ingen servere — indsæt CSS og få øjeblikkeligt præfikset output.

Sådan bruger du CSS Prefixer

Følg disse trin for at tilføje vendor-præfikser til CSS.

Indsæt, upload eller indlæs eksempeldata

Indsæt CSS i det venstre CSS-input-felt eller klik på Upload for at indlæse en .css-fil. Klik på Eksempeldata for at se eksempelformatering med egenskaber der har brug for præfikser. Eksempel:

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

Se præfikset output

Det højre CSS med præfikser-felt viser output med -webkit-, -moz-, -ms- og -o-præfikser hvor det er nødvendigt. Egenskaber som flex, transform og transition får alle nødvendige præfikserede versioner.

Kopier eller download

Klik på Kopier for at kopiere til udklipsholder, eller Download for at gemme som .css. Brug Ryd for at starte forfra. Al behandling sker i browseren.

Hvornår du skal bruge dette

Kompatibilitet på tværs af browsere

Bygger du en side der skal fungere i ældre browsere? Tilføj vendor-præfikser så moderne CSS-funktioner som Flexbox og Grid fungerer overalt. Nødvendigt for enterprise-projekter med support til ældre browsere.

Hurtig prototypning

Tester du CSS-animationer eller transformationer i forskellige browsere? Tilføj præfikser i koden først for at undgå browserspecifikke problemer. Sparer tid under hurtige designiterationer.

Legacy-projekter

Vedligeholder du ældre projekter der stadig understøtter IE11 eller tidligere Chrome-versioner? Tilføj præfikser på nye CSS-funktioner inden deployment. Forhindrer at eksisterende browsersupport brydes.

Lær CSS

Vil du forstå hvilke CSS-egenskaber der kræver vendor-præfikser? Brug dette værktøj til at se hvilke funktioner der har brug for præfikser. Lærerigt for udviklere der lærer browserkompatibilitet.

Ofte stillede spørgsmål

Hvad er vendor-præfikser?

Vendor-præfikser er browserspecifikke CSS-egenskabspræfikser som -webkit-, -moz-, -ms- og -o-. Browsere bruger dem til at implementere eksperimentelle eller ikke-standardiserede CSS-funktioner inden de bliver officielle standarder.

Har jeg stadig brug for præfikser i moderne browsere?

For de nyeste funktioner, ja. Selvom moderne browsere understøtter de fleste standard-CSS kræver visse nyere egenskaber og ældre browserversioner stadig præfikser. Kontroller Can I Use for specifik egenskabssupport.

Hvilke egenskaber har brug for præfikser?

Almindelige er transform, transition, animation, flex-egenskaber, border-radius (ældre browsere), box-shadow og mange flere. Vores værktøj detekterer dem automatisk baseret på MDN-standarder.

Hvad er rækkefølgen for præfikserede egenskaber?

Præfikserede egenskaber skal stå før standardegenskaben. Vores værktøj anvender denne konvention: vendor-præfikser (-webkit-, -moz-, -ms-, -o-) først, derefter standardegenskaben uden præfiks sidst.

Øger dette min CSS-filstørrelse?

Ja, at tilføje vendor-præfikser øger filstørrelsen. Afvejningen er dog browserkompatibilitet. I produktion brug dette med minificering og overvej at bruge Autoprefixer i byggeprocessen.

Er mine CSS-data sikre?

Absolut. Al behandling sker i browseren med JavaScript. Din CSS forlader aldrig computeren — ingen serverupload, ingen datalagring, fuldstændig privat.

Relaterede CSS-værktøjer

Præfiksering er kun en del af CSS-programmering. Her er andre værktøjer der kan hjælpe: