Walidator CSS
Sprawdzaj kod CSS pod kątem błędów składni
Wejściowy CSS
Wynik walidacji
Przykłady walidacji CSS
Prawidłowy CSS ma poprawną składnię; nieprawidłowy CSS zawiera błędy. Przykłady:
Prawidłowy CSS
Nieprawidłowy CSS – brakujący średnik
W pierwszej regule brakuje średnika po 1200px.
Wklej dowolny przykład do edytora powyżej, aby zobaczyć wynik walidacji. Użyj Przykład, aby załadować więcej danych.
Czym jest Walidator CSS?
CSS (Cascading Style Sheets) ma reguły składni. Brakujące średniki, niezamknięte nawiasy klamrowe, nieprawidłowe nazwy właściwości lub zniekształcone selektory powodują błędy parsowania. Walidator CSS sprawdza, czy arkusz stylów jest poprawnie sformułowany i raportuje błędy z numerem linii i pozycją. Specyfikacje W3C CSS definiują język.
To narzędzie analizuje CSS i raportuje wszelkie błędy składni. Działa całkowicie w przeglądarce. Nic nie jest wysyłane na serwer. Do formatowania prawidłowego CSS użyj Formatera CSS. Do minifikacji użyj Minifikatora CSS.
Jak używać tego narzędzia
Wklej lub wczytaj CSS
Skopiuj CSS i wklej go do lewego edytora. Możesz też kliknąć Wczytaj, aby załadować plik .css. Przycisk Przykład ładuje przykładowe dane.
Sprawdź wynik walidacji
Prawy panel pokazuje Prawidłowy lub Nieprawidłowy. Jeśli nieprawidłowy, wyświetla błędy z numerem linii i pozycją. Częste problemy to niezamknięte nawiasy klamrowe, brakujące średniki, nieprawidłowe wartości właściwości lub zniekształcone zapytania mediów.
Popraw i zwaliduj ponownie
Popraw błędy w wejściu i zwaliduj ponownie. Do formatowania użyj Formatera CSS. Dla SCSS lub Less skompiluj najpierw za pomocą SCSS do CSS lub Less do CSS.
Częste błędy CSS
Niezamknięte nawiasy klamrowe } lub kwadratowe ] są częste. Brakujące średniki między właściwościami mogą powodować kaskadowe błędy parsowania. Nieprawidłowe nazwy lub wartości właściwości (np. literówki jak dispaly zamiast display) przerywają reguły. Zniekształcone bloki @media lub @keyframes również powodują błędy. Specyfikacja W3C CSS definiuje prawidłową składnię. Walidator W3C CSS oferuje walidację po stronie serwera dla pełnych sprawdzeń.
Kiedy walidacja CSS pomaga
Większość deweloperów potrzebuje walidacji podczas debugowania stylów, które nie są stosowane, integrowania CSS firm trzecich lub przed wdrożeniem do produkcji. Pojedynczy błąd składni może zepsuć cały arkusz stylów. Przepuszczenie CSS przez to narzędzie wychwytuje problemy zanim spowodują problemy z układem lub renderowaniem. Narzędzia do budowania takie jak Vite czy Webpack nie zawsze jasno raportują błędy CSS – walidacja tutaj daje precyzyjne numery linii.
Przydatne jest też przed udostępnianiem stylów współpracownikom lub wysyłaniem pull requestów. Do kompatybilności z przeglądarkami po walidacji użyj Prefiksera CSS. Do formatowania prawidłowego CSS użyj Formatera CSS. Dla SCSS lub Less skompiluj najpierw za pomocą SCSS do CSS lub Less do CSS.
Często zadawane pytania
Co sprawia, że CSS jest nieprawidłowy?
Niezamknięte nawiasy klamrowe lub kwadratowe, brakujące średniki, nieprawidłowe nazwy lub wartości właściwości, zniekształcone selektory lub błędy składni w @media lub @keyframes. Walidator wskazuje problem.
Czy sprawdza obsługę przeglądarek?
To narzędzie sprawdza tylko składnię – czy CSS jest poprawnie sformułowany. Nie sprawdza kompatybilności z przeglądarkami. Użyj do tego Can I Use.
Czy moje dane są prywatne?
Tak. Walidacja odbywa się całkowicie w przeglądarce. Żadne dane nie są wysyłane na żaden serwer.
Czy obsługuje SCSS lub Less?
To narzędzie sprawdza zwykły CSS. Dla SCSS lub Less skompiluj najpierw za pomocą SCSS do CSS lub Less do CSS, a następnie zwaliduj wyjście.
Co z prefiksami vendor?
Właściwości z prefiksami vendor (np. -webkit-, -moz-) są prawidłowe. Walidator je akceptuje. Do automatycznego dodawania prefiksów użyj Prefiksera CSS.
Powiązane narzędzia
Specyfikacja CSS: W3C CSS. MDN CSS to punkt odniesienia. Walidator W3C CSS oferuje walidację po stronie serwera. Can I Use do obsługi przeglądarek.