CSS-validaattori
Tarkista CSS-koodisi syntaksivirheet
CSS-syöte
Validointitulos
Esimerkkejä CSS-validoinnista
Kelvollisella CSS:llä on oikea syntaksi; virheellisessä on virheitä. Esimerkkejä:
Kelvollinen CSS
Virheellinen CSS – puuttuva puolipiste
Ensimmäisestä säännöstä puuttuu puolipiste arvon 1200px jälkeen.
Liitä jompikumpi esimerkki yllä olevaan editoriin nähdäksesi validointituloksen. Käytä Esimerkki-painiketta ladataksesi lisää dataa.
Mikä on CSS-validaattori?
CSS:llä (Cascading Style Sheets) on syntaksisäännöt. Puuttuvat puolipisteet, sulkeutumattomat aaltosulkeet, virheelliset ominaisuusnimet tai vääristyneet valitsimet aiheuttavat jäsennysvirheitä. CSS-validaattori tarkistaa, onko tyylitiedosto oikein muotoiltu, ja raportoi virheet rivillä ja sarakkeella. W3C:n CSS-määrittelyt määrittävät kielen.
Työkalu jäsentää CSS:si ja raportoi syntaksivirheet. Se toimii kokonaan selaimessasi. Mitään ei lähetetä palvelimelle. Kelvollisen CSS:n muotoiluun: CSS-muotoilija. Tiivistykseen: CSS-tiivistin.
Miten työkalua käytetään
Liitä tai lataa CSS
Kopioi CSS ja liitä se vasempaan editoriin. Voit myös napsauttaa Lataa ja avata .css-tiedoston. Esimerkki lataa esimerkkidataa.
Tarkista validointitulos
Oikea paneeli näyttää kelvollinen tai virheellinen. Virheellisessä tapauksessa virheet listataan rivillä ja sarakkeella. Yleisiä ongelmia: sulkeutumattomat aaltosulkeet, puuttuvat puolipisteet, virheelliset ominaisuusarvot tai vääristyneet media-kyselyt.
Korjaa ja validoi uudelleen
Korjaa syötteen virheet ja validoi uudelleen. Muotoiluun: CSS-muotoilija. SCSS:lle tai Lessille käänä ensin SCSS CSS:ksi tai Less CSS:ksi.
Yleisiä CSS-virheitä
Sulkeutumattomat aaltosulkeet } tai hakasulkeet ] ovat yleisiä. Puuttuvat puolipisteet ominaisuuksien välillä voivat aiheuttaa ketjureaktioita jäsennysvirheissä. Virheelliset ominaisuusnimet tai -arvot (esim. kirjoitusvirhe dispaly sanan display sijaan) rikkovat sääntöjä. Vääristyneet @media- tai @keyframes-lohkot aiheuttavat myös virheitä. W3C:n CSS-määrittely määrittää kelvollisen syntaksin. W3C CSS Validator tarjoaa palvelinpuolen validointia kattavampiin tarkistuksiin.
Milloin CSS-validointi auttaa
Kehittäjät tarvitsevat usein validointia kun debuggaavat tyylejä jotka eivät toimi, integroivat kolmannen osapuolen CSS:ää tai ennen tuotantoon viemistä. Yksi syntaksivirhe voi rikkoa koko tyylitiedoston. CSS:n ajaminen täällä löytää ongelmat ennen kuin ne aiheuttavat asettelu- tai renderöintivikoja. Build-työkalut kuten Vite tai Webpack eivät aina raportoi CSS-virheitä selkeästi—validointi antaa tarkat rivinumerot.
Hyödyllinen myös ennen tyylitiedostojen jakamista tiimin kanssa tai pull requesteja. Selainyhteensopivuuteen validoinnin jälkeen: CSS-etuliite. Kelvollisen CSS:n muotoiluun: CSS-muotoilija. SCSS:lle tai Lessille käänä ensin SCSS CSS:ksi tai Less CSS:ksi.
Usein kysyttyä
Mikä tekee CSS:stä virheellisen?
Sulkeutumattomat aaltosulkeet tai hakasulkeet, puuttuvat puolipisteet, virheelliset ominaisuusnimet tai -arvot, vääristyneet valitsimet tai syntaksivirheet @media- tai @keyframes-lohkoissa. Validaattori osoittaa kohdan.
Tarkistaako se selaintuen?
Työkalu validoi vain syntaksin—onko CSS oikein muotoiltu. Se ei tarkista selainyhteensopivuutta. Siihen: Can I Use.
Onko datani yksityinen?
Kyllä. Validointi tapahtuu kokonaan selaimessasi. Mitään ei lähetetä palvelimelle.
Tukeeko se SCSS:ää tai Lessiä?
Työkalu validoi pelkkää CSS:ää. SCSS:lle tai Lessille käänä ensin SCSS CSS:ksi tai Less CSS:ksi, sitten validoi tuloste.
Entä vendor-etuliitteet?
Vendor-etuliitteiset ominaisuudet (esim. -webkit-, -moz-) ovat kelvollisia. Validaattori hyväksyy ne. Automaattiseen etuliitteiden lisäykseen: CSS-etuliite.
Liittyvät työkalut
CSS-määrittely: W3C CSS. Viite: MDN CSS. W3C CSS Validator tarjoaa palvelinpuolen validointia. Can I Use selaintuesta.