Prefissatore CSS
Aggiungi automaticamente i prefissi vendor al tuo CSS
CSS di input
CSS con prefissi
Esempi di prefissazione CSS
I prefissi vendor assicurano la compatibilità cross-browser. Esempio:
Flexbox e trasformazioni
Input (senza prefissi):
Output con prefissi:
Usa Esempio in alto per caricare altri dati 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 strumento 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 Formattatore CSS. Per la minificazione, usa il Minificatore CSS.
Come usare questo strumento
Incolla o carica CSS
Copia il tuo CSS e incollalo nell'editor di sinistra. Puoi anche cliccare su Carica per caricare un file .css. Il pulsante Esempio carica dati di esempio. Il CSS non valido 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.
Copia o scarica
Usa Copia o Scarica. Per SCSS o Less compila prima con SCSS in CSS o Less in CSS, poi aggiungi i prefissi. Per la validazione, usa il Validatore 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à. Strumenti di build come Autoprefixer o PostCSS spesso gestiscono questo in produzione, ma questo strumento è utile per file 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.
Domande Frequenti
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 dati 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 strumento funziona nel browser—non serve Node.js o un passaggio di build. Usalo per controlli rapidi, file singoli o quando non puoi eseguire una build.
Supporta tutte le proprietà?
Lo strumento aggiunge prefissi per le proprietà più comuni. Per una copertura completa, usa Autoprefixer nella tua build. Per la maggior parte dei casi, questo strumento copre l'essenziale.
E @keyframes?
I nomi dei keyframe potrebbero necessitare di prefissi in alcuni contesti. Lo strumento gestisce i casi più comuni. Per animazioni complesse, verifica nei tuoi browser target.
Strumenti Correlati
Per la specifica CSS: W3C CSS. MDN CSS è il riferimento. Can I Use per il supporto dei browser. Autoprefixer per le pipeline di build.