Ilmainen CSS-poimija Verkossa
Poimi kaikki CSS mistä tahansa HTML-tiedostosta välittömästi selaimessasi.
HTML-syöte
Poimittu CSS
Esimerkkejä CSS:n poiminnasta
Poimi CSS <style>-tageista ja inline-tyyleistä. Esimerkki:
HTML upotetuilla tyyleillä
HTML-syöte:
Poimittu CSS:
Käytä yllä olevaa Esimerkki-painiketta ladataksesi lisää esimerkkidataa.
Mikä on CSS-poimija?
Olet raaputtanut sivun, vienyt CMS:stä tai perinyt legacy-koodipohjan, jossa kaikki CSS on <style>-tageissa ja inline style-attribuuteissa. Näiden sääntöjen manuaalinen kopiointi on työlästä ja virhealtista. CSS-poimija jäsentää HTML:n ja vetää jokaisen tyylin siistiin, itsenäiseen tyylitiedostoon. MDN <style>-elementtidokumentaatio ja W3C CSS -spesifikaatio määrittelevät, miten selaimet tulkitsevat näitä upotettuja tyylejä.
Työkalu toimii selaimessasi. Liitä HTML tai lataa .html-tiedosto. Se poimii <style>-lohkojen sisällön ja inline-tyylit. Mitään ei lähetetä palvelimelle. Tuloksen muotoiluun CSS-muotoilija. Useiden CSS-tiedostojen yhdistämiseen CSS-yhdistäjä.
Miten työkalua käytetään
Liitä tai lataa HTML
Liitä HTML vasempaan editoriin tai napsauta Lataa avataksesi .html- tai .htm-tiedoston. Käytä Esimerkki ladataksesi esimerkki-HTML:ää upotetuilla tyyleillä.
Tarkista poimittu CSS
Oikea paneeli näyttää poimitun CSS:n <style>-tageista ja inline-tyyleistä. Validointiin CSS-tarkistin. Tiivistämiseen CSS-tiivistin.
Kopioi tai lataa
Käytä Kopioi tai Lataa tiedostona tallentaaksesi CSS:n. HTML Markdowniksi: HTML Markdowniksi. CSS inliniksi (sähköposti): CSS inliniksi.
Milloin CSS:n poiminta auttaa
Vanhan sivuston siirrossa tai yhden HTML-tiedoston muuntamisessa rakenteiseksi projektiksi CSS:n poiminta on ensimmäinen askel. Sähköpostipohjat, CMS-viennit tai scrapeatut sivut sisältävät usein upotettuja tyylejä. Työkalu antaa lähtökohdan refaktorointiin. MDN HTML ja MDN CSS kuvaavat standardit.
Poimitun CSS:n yhdistämiseen muihin tyylitiedostoihin CSS-yhdistäjä. Vendor-etuliitteisiin CSS-etuliite. Esikäsittelijöihin SCSS CSS:ksi tai Stylus CSS:ksi.
Usein kysyttyä
Onko datani yksityinen?
Kyllä. Poiminta tapahtuu kokonaan selaimessasi. Mitään ei lähetetä palvelimelle.
Poimiiko se @importin tai linkitetyn CSS:n?
Ei. Se poimii vain <style>-lohkojen sisällön ja inline-style-attribuutit. Ulkoisia tyylitiedostoja (@import tai <link>) ei haeta eikä sisällytetä.
Entä inline-tyylit?
Inline-tyylit poimitaan ja kääritään kommenttiin viitteeksi. Ne kohdistuvat tiettyihin elementteihin, joten tulosta voi joutua säätämään käsin uudelleenkäyttöä varten.
Käsitteleekö se scoped-tyylit?
Scoped-tyylit (esim. Vue scoped, Angular-näkymän kapselointi) poimitaan sellaisenaan. Laajuusattribuutit on ehkä huomioitava käytettäessä CSS:ää muualla.
Voinko poimia URL-osoitteesta?
Työkalu toimii liitetyn tai ladatun HTML:n kanssa. Poimiaksesi URL:sta, hae HTML muualla ja liitä se tähän.