Prefissatore CSS
Aggiungi automaticamente i prefissi vendor al tuo CSS
CSS di input
CSS con prefissi
Przyklady prefissazione CSS
I prefissi vendor assicurano la compatibilità cross-browser. Przyklad:
Flexbox e trasformazioni
Input (senza prefissi):
Output con prefissi:
Usa Przyklad in alto per caricare altri dane di esempio.
Cos'è un Prefissatore CSS?
I browser a volte implementano le funzionalità CSS con prefissi vendor prima che vengano standardizzate: -webkit- (Chrome, Safari), -moz- (Firefox), -ms- (IE/Edge legacy). Un prefissatore CSS aggiunge automaticamente questi prefissi in modo che i tuoi stili funzionino su tutti i browser. Le specifiche W3C CSS definiscono il linguaggio; Can I Use traccia il supporto dei browser.
Questo narzedzie analizza il tuo CSS e aggiunge i prefissi vendor dove necessario. Funziona interamente nel tuo browser. Nulla viene inviato a un server. I browser moderni necessitano di meno prefissi rispetto al passato, ma alcune proprietà (es. user-select, display: flex in Safari più vecchio) ne beneficiano ancora. Per la formattazione, usa il Formater CSS. Per la minificazione, usa il Minifikator CSS.
Come usare questo narzedzie
Incolla o carica CSS
Kopiuj il tuo CSS e incollalo nell'editor di sinistra. Puoi anche cliccare su Wczytaj per caricare un plik .css. Il pulsante Przyklad carica dane di esempio. Il CSS nieprawidlowy mostrerà un errore.
Controlla l'output con prefissi
Il pannello di destra mostra il CSS con i prefissi vendor aggiunti. Proprietà come display: flex, user-select e transform ottengono i prefissi corretti per i browser più vecchi.
Kopiuj o scarica
Usa Kopiuj o Pobierz. Per SCSS o Less compila prima con SCSS in CSS o Less in CSS, poi aggiungi i prefissi. Per la validazione, usa il Walidator CSS.
Quando la prefissazione CSS è utile
Quando si supportano browser più vecchi (Safari, Chrome più vecchio, IE legacy) o si usano funzionalità CSS più recenti non ancora completamente standardizzate, l'aggiunta di prefissi garantisce la compatibilità. Narzedzia di build come Autoprefixer o PostCSS spesso gestiscono questo in produzione, ma questo narzedzie è utile per plik singoli, controlli rapidi o quando non è disponibile un passaggio di build.
Il CSS per email, gli stili incorporati o il CSS ospitato su CDN possono necessitare di prefissazione manuale. Passare il tuo foglio di stile qui produce un output compatibile con i browser. Per convertire in stili inline (es. email) usa CSS a Inline dopo la prefissazione.
Czesto zadawane pytania
Ho ancora bisogno dei prefissi nel 2024?
Molte proprietà ora hanno supporto senza prefissi. Per Safari più vecchio, iOS o browser legacy, alcune proprietà (es. -webkit-backdrop-filter) hanno ancora bisogno di prefissi. Controlla Can I Use per i tuoi browser target.
I miei dane sono privati?
Sì. La prefissazione avviene interamente nel tuo browser. Nessun dato viene inviato a un server.
Perché usare questo invece di Autoprefixer?
Autoprefixer funziona in una pipeline di build. Questo narzedzie funziona nel browser—non serve Node.js o un passaggio di build. Usalo per controlli rapidi, plik singoli o quando non puoi eseguire una build.
Supporta tutte le proprietà?
Lo narzedzie aggiunge prefissi per le proprietà più comuni. Per una copertura completa, usa Autoprefixer nella tua build. Per la maggior parte dei casi, questo narzedzie copre l'essenziale.
E @keyframes?
I nomi dei keyframe potrebbero necessitare di prefissi in alcuni contesti. Lo narzedzie gestisce i casi più comuni. Per animazioni complesse, verifica nei tuoi browser target.
Powiazane narzedzia
Per la specifica CSS: W3C CSS. MDN CSS è il riferimento. Can I Use per il supporto dei browser. Autoprefixer per le pipeline di build.