GratisEstensione per Chrome e Firefox
Copia HTML e CSS di qualsiasi elemento
HTML/CSS Extractor aggiunge un riquadro al pannello Elementi dei DevTools. Seleziona un elemento e vedrai il suo HTML e le regole CSS che gli danno stile, pronti da modificare, provare in anteprima e copiare.
Screenshot
Come funziona
Apri i DevTools su qualsiasi sito: premi F12, o Cmd+Option+I su Mac.
Seleziona un elemento nel pannello “Elementi” (“Analisi pagina” in Firefox), oppure fai clic destro sulla pagina e scegli “Ispeziona”.
Apri la scheda “HTML/CSS Extractor” nella barra laterale del pannello, accanto a “Calcolato”.
Controlla l’anteprima dal vivo, modifica il codice se vuoi e fai clic su “Copy CSS” o “Copy HTML”.
Cosa fa
Le regole che si applicano
Le regole CSS dei fogli di stile della pagina che corrispondono all’elemento e a tutto ciò che contiene, comprese le regole :hover, ::before e ::after e le media query nel loro ordine originale.
Selettori più corti
I selettori lunghi vengono ridotti alla forma più breve che corrisponde ancora, con un commento che mostra il selettore originale e la sua specificità.
Anteprima dal vivo
Guarda il codice estratto alla larghezza di uno smartphone (375 px), di un tablet (768 px) o di un desktop (1240 px). I link nell’anteprima non portano altrove.
Modifica, poi copia
CSS e HTML si aprono in editor separati con evidenziazione della sintassi, numeri di riga e compressione del codice. Copia l’uno o l’altro con un clic.
URL completi
Gli indirizzi relativi di immagini, font e link diventano URL completi, così il codice funziona ancora quando lo incolli altrove.
Font e variabili
Se vuoi, includi le regole @font-face della pagina e segna le variabili CSS che il codice estratto non usa mai.
Stili ereditati
Se vuoi, aggiungi gli stili di testo che l’elemento eredita dai genitori, come font e colore, su un contenitore attorno all’HTML.
Segue la tua selezione
Il riquadro si aggiorna ogni volta che selezioni un altro elemento. Sei interruttori decidono cosa includere, e le tue scelte vengono ricordate.
Privacy by design
- Nessun account e nessuna registrazione.
- Funziona solo dentro i DevTools, sull’elemento che selezioni.
- Le impostazioni sono salvate solo nel tuo browser. Il codice che estrai non viene salvato.
- Niente analytics, niente tracciamento e niente pubblicità. Niente di ciò che estrai viene inviato altrove.
Gratis, senza account
Tutto incluso
- HTML e CSS di qualsiasi elemento
- Semplificazione dei selettori
- Anteprima dal vivo a tre larghezze dello schermo
- Editor di codice con copia in un clic
- Sei impostazioni di estrazione, ricordate tra una sessione e l’altra