CSS-inndata

CSS med prefikser

Hva er en CSS Prefixer?

Nettleserleverandører legger til eksperimentelle CSS-funksjoner med prefikser som -webkit-, -moz-, -ms- og -o-. Uten disse prefiksene fungerer ikke moderne CSS i eldre nettlesere. Denne CSS prefixeren legger automatisk til alle nødvendige vendor-prefikser slik at CSS-en (Cascading Style Sheets) din fungerer i ulike nettlesere og versjoner.

Ifølge MDN Web Docs er vendor-prefikser avgjørende for kompatibilitet på tvers av nettlesere. Verktøyet vårt bruker Can I Use-databasen for å avgjøre hvilke egenskaper som trenger prefikser og sikrer at stiler fungerer i Chrome, Firefox, Safari, Edge og eldre versjoner.

Alt kjører lokalt i nettleseren. Ingen opplasting, ingen servere — lim inn CSS og få umiddelbart prefikset utdata.

Slik bruker du CSS Prefixer

Følg disse trinnene for å legge til vendor-prefikser i CSS.

Lim inn, last opp eller last inn eksempeldata

Lim inn CSS i det venstre CSS-inndata-feltet eller klikk på Last opp for å laste inn en .css-fil. Klikk på Eksempeldata for å se eksempelformatering med egenskaper som trenger prefikser. Eksempel:

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

Se prefikset utdata

Det høyre CSS med prefikser-feltet viser utdata med -webkit-, -moz-, -ms- og -o-prefikser der det trengs. Egenskaper som flex, transform og transition får alle nødvendige prefikserte versjoner.

Kopier eller last ned

Klikk på Kopier for å kopiere til utklippstavlen, eller Last ned for å lagre som .css. Bruk Tøm for å starte på nytt. All behandling skjer i nettleseren.

Når du bør bruke dette

Kompatibilitet på tvers av nettlesere

Bygger du en side som må fungere i eldre nettlesere? Legg til vendor-prefikser slik at moderne CSS-funksjoner som Flexbox og Grid fungerer overalt. Nødvendig for enterprise-prosjekter med støtte for eldre nettlesere.

Rask prototyping

Tester du CSS-animasjoner eller transformasjoner i ulike nettlesere? Legg til prefikser i koden først for å unngå nettleserspesifikke problemer. Sparer tid under raske designiterasjoner.

Legacy-prosjekter

Vedlikeholder du eldre prosjekter som fortsatt støtter IE11 eller tidligere Chrome-versjoner? Legg til prefikser på nye CSS-funksjoner før utrulling. Forhindrer at eksisterende nettleserstøtte brytes.

Lær CSS

Vil du forstå hvilke CSS-egenskaper som krever vendor-prefikser? Bruk dette verktøyet for å se hvilke funksjoner som trenger prefikser. Lærerikt for utviklere som lærer nettleserkompatibilitet.

Ofte stilte spørsmål

Hva er vendor-prefikser?

Vendor-prefikser er nettleserspesifikke CSS-egenskapsprefikser som -webkit-, -moz-, -ms- og -o-. Nettlesere bruker dem for å implementere eksperimentelle eller ikke-standardiserte CSS-funksjoner før de blir offisielle standarder.

Trenger jeg fortsatt prefikser i moderne nettlesere?

For de nyeste funksjonene, ja. Selv om moderne nettlesere støtter de fleste standard-CSS krever visse nyere egenskaper og eldre nettleserversjoner fortsatt prefikser. Sjekk Can I Use for spesifikk egenskapsstøtte.

Hvilke egenskaper trenger prefikser?

Vanlige er transform, transition, animation, flex-egenskaper, border-radius (eldre nettlesere), box-shadow og mange flere. Verktøyet vårt oppdager dem automatisk basert på MDN-standarder.

Hva er rekkefølgen for prefikserte egenskaper?

Prefikserte egenskaper bør stå før standardegenskapen. Verktøyet vårt anvender denne konvensjonen: vendor-prefikser (-webkit-, -moz-, -ms-, -o-) først, deretter standardegenskapen uten prefiks sist.

Øker dette CSS-filstørrelsen min?

Ja, å legge til vendor-prefikser øker filstørrelsen. Avveiningen er imidlertid nettleserkompatibilitet. I produksjon bruk dette med minifisering og vurder å bruke Autoprefixer i byggeprosessen.

Er CSS-dataene mine trygge?

Absolutt. All behandling skjer i nettleseren med JavaScript. CSS-en din forlater aldri datamaskinen — ingen serveropplasting, ingen datalagring, fullstendig privat.

Relaterte CSS-verktøy

Prefiksering er bare en del av CSS-programmering. Her er andre verktøy som kan hjelpe: