Gratis CSS-prefiks Online
Legg til vendor-prefikser i CSS automatisk i nettleseren din.
CSS-inndata
CSS med prefiks
Eksempler på CSS-prefiks
Leverandørprefiks sikrer støtte på tvers av nettlesere. Eksempel:
Flexbox og transformasjoner
Inndata (uten prefiks):
Utdata med prefiks:
Bruk Eksempel over for å laste mer eksempeldata.
Hva er CSS-prefiks?
Nettlesere implementerer noen ganger CSS-funksjoner med leverandørprefiks før de standardiseres: -webkit- (Chrome, Safari), -moz- (Firefox), -ms- (eldre IE/Edge). Et CSS-prefiksverktøy legger til disse automatisk slik at stilene dine fungerer på tvers av nettlesere. W3C CSS-spesifikasjonene definerer språket; Can I Use følger nettleserstøtte.
Verktøyet parser CSS-en din og legger til leverandørprefiks der det trengs. Det kjører helt i nettleseren din. Ingenting sendes til server. Moderne nettlesere trenger færre prefiks enn før, men noen egenskaper (f.eks. user-select, display: flex i eldre Safari) trenger fortsatt hjelp. For formatering, bruk CSS-formaterer. For minifisering, CSS-minifiserer.
Slik bruker du verktøyet
Lim inn eller last opp CSS
Kopier CSS og lim inn i venstre editor. Du kan også klikke Last opp for å åpne en .css-fil. Eksempel laster eksempeldata. Ugyldig CSS viser feil.
Se utdata med prefiks
Høyre panel viser CSS med leverandørprefiks. Egenskaper som display: flex, user-select og transform får passende prefiks for eldre nettlesere.
Kopier eller last ned
Bruk Kopier eller Last ned. For SCSS eller Less, kompiler først med SCSS til CSS eller Less til CSS, deretter prefiks. For validering, CSS-validator.
Når CSS-prefiks hjelper
Ved støtte for eldre nettlesere (Safari, eldre Chrome, legacy IE) eller nyere CSS-funksjoner som ikke er fullt standardisert, sikrer prefiksing kompatibilitet. Byggeverktøy som Autoprefixer eller PostCSS håndterer dette ofte i produksjon, men dette verktøyet er nyttig for enkeltfiler, raske sjekker eller når du ikke har build-steg.
E-post-CSS, innebygde stiler eller CDN-hostet CSS kan trenge manuell prefiksing. Å kjøre stilarket her gir nettleserklar utdata. For inline-stiler (f.eks. e-post), bruk CSS til inline etter prefiksing.
Ofte stilte spørsmål
Trenger jeg fortsatt prefiks i 2024?
Mange egenskaper har nå støtte uten prefiks. For eldre Safari, iOS eller legacy-nettlesere trenger noen egenskaper (f.eks. -webkit-backdrop-filter) fortsatt prefiks. Sjekk Can I Use for målnettleserne dine.
Er dataene mine private?
Ja. Prefiksing skjer helt i nettleseren din. Ingen data sendes til server.
Hvorfor dette i stedet for Autoprefixer?
Autoprefixer kjører i en build-pipeline. Dette verktøyet kjører i nettleseren — ingen Node.js eller build-steg. Bruk det til raske sjekker, enkeltfiler eller når du ikke kan kjøre build.
Støtter det alle egenskaper?
Verktøyet legger til prefiks for vanlige egenskaper. For full dekning, bruk Autoprefixer med bygget ditt. For de fleste bruksområder dekker dette verktøyet det viktigste.
Hva med @keyframes?
Keyframe-navn kan trenge prefiks i noen sammenhenger. Verktøyet håndterer vanlige tilfeller. For komplekse animasjoner, verifiser i målnettleserne.
Relaterte verktøy
CSS-spesifikasjon: W3C CSS. Referanse: MDN CSS. Can I Use for nettleserstøtte. Autoprefixer for build-pipelines.