Nowoczesny CSS reset z objaśnieniami i kreatorem reguł | We.Inc
Krótki, nowoczesny CSS reset z objaśnieniem każdej reguły. Włączaj i wyłączaj reguły, owiń wynik w warstwę kaskady i skopiuj. Zawiera porównanie resetu z normalize.css.
Nowoczesny CSS reset to kilkanaście krótkich reguł umieszczonych przed Twoimi własnymi stylami: wymiarowanie border-box dla każdego elementu, zerowe domyślne marginesy, czytelna wysokość linii, obrazy blokowe ograniczone do szerokości kontenera oraz kontrolki formularzy dziedziczące Twoją czcionkę. Wybierz poniżej reguły, których potrzebujesz, a potem skopiuj wynik.
Co naprawiają podstawowe reguły
Reguła
Domyślne ustawienie przeglądarki, które zastępuje
Dlaczego to zmieniać
box-sizing: border-box
Szerokość obejmuje wtedy padding i obramowanie
margin: 0
Marginesy na body, nagłówkach, p i listach
Odstępy pochodzą wyłącznie z Twojego CSS
line-height: 1.5 na body
normal (około 1.2)
Akapity czyta się łatwiej
img { display: block; max-width: 100% }
Element liniowy, naturalna szerokość
Brak przerwy pod obrazami, brak wylewania się
font: inherit na polach i przyciskach
Czcionka systemowa w małym rozmiarze
Formularze pasują do reszty strony
Kopiowanie resetu, którego nie rozumiesz, oznacza debugowanie reguł, których nigdy nie wybrałeś. Ta strona wyjaśnia każdą linię prostymi słowami i pozwala zbudować własną wersję za pomocą przełączników, więc wklejany plik jest krótki, a każda linia ma swój powód.
Przeczytaj notkę obok każdej reguły, a potem ją włącz lub wyłącz.
Zdecyduj, czy owinąć wynik w @layer reset, aby każda Twoja reguła wygrywała z nim bez walki.
Skopiuj wygenerowany CSS i wczytaj go przed pozostałymi arkuszami stylów.
Umieść reset w warstwie kaskady. Style spoza warstw wygrywają ze stylami w warstwach niezależnie od specyficzności.
Nie resetuj list-style na każdym ul. Dokumentacja Tailwind ostrzega, że VoiceOver może nie ogłaszać list bez stylów jako list, więc dodaj role="list" do każdej listy, z której usuwasz style.
Nie ruszaj obrysu fokusu w resecie. Zmieniaj jego wygląd w poszczególnych komponentach zamiast usuwać go globalnie.
Jeśli używasz Tailwind, masz już reset o nazwie Preflight, więc drugi zwykle tylko dodaje szumu.
Najczęściej zadawane pytania
Czym różni się CSS reset od normalize.css?
Reset usuwa domyślne style przeglądarki, więc zaczynasz od niemal pustej strony. normalize.css zachowuje przydatne ustawienia domyślne i poprawia tylko miejsca, w których przeglądarki się różnią. Wiele obecnych resetów leży pośrodku: zostawiają pogrubione nagłówki i nienaruszone listy, ale usuwają marginesy i poprawiają wymiarowanie.
Czy w 2026 roku nadal potrzebuję CSS resetu?
Przeglądarki są dziś znacznie bardziej zgodne niż kiedyś, więc dawne ogromne resety są zbędne. Krótki reset nadal się opłaca, bo ustawienia domyślne, takie jak wymiarowanie content-box, margines body i obrazy liniowe, rzadko są tym, czego potrzebuje układ.
Po co używać :where() w resecie?
:where() ma zerową specyficzność, więc każdy późniejszy selektor, nawet sam selektor elementu, nadpisuje reset. Dzięki temu reguły resetu nie wygrywają po cichu ze stylami komponentów.
Gdzie umieścić reset?
Wczytaj go jako pierwszy, przed każdym innym arkuszem stylów, albo zaimportuj go wewnątrz @layer reset na początku głównego pliku CSS i raz zadeklaruj kolejność warstw za pomocą @layer reset, base, components.
Dlaczego box-sizing jest pierwszy
Przy domyślnym content-box karta o szerokości 300px z paddingiem 20px ma w efekcie 340px szerokości. border-box wlicza padding i obramowanie w zapisaną szerokość, a tak właśnie większość osób oczekuje, że działa wymiarowanie.
Zastosowanie go także do pseudoelementów ::before i ::after sprawia, że ozdobne kształty zachowują się spójnie z elementami, które ozdabiają.
Reguły tekstowe, które dobrze się starzeją
text-wrap: balance wyrównuje długość linii w krótkich nagłówkach, a text-wrap: pretty zapobiega pozostawieniu pojedynczego słowa w ostatniej linii akapitu. Przeglądarki, które nie znają tych wartości, po prostu je ignorują, więc można je bezpiecznie dodać.
overflow-wrap: break-word pozwala złamać długi URL lub fragment kodu zamiast przesuwać stronę w bok na telefonie.
Czego reset nie powinien robić
Reset to nie design system. Kolory, rodziny czcionek i skale odstępów należą do Twojej własnej warstwy bazowej, gdzie można je zmieniać bez dotykania resetu.
Unikaj reguł szkodzących dostępności, takich jak outline: none na wszystkim albo wyłączanie wszystkich animacji każdemu odwiedzającemu. Ustawienia ruchu należą do zapytania prefers-reduced-motion.
Reset, normalize czy nic
Trzy sposoby radzenia sobie z domyślnymi stylami przeglądarki
Podejście
Co robi
Do czego się nadaje
Klasyczny twardy reset
Usuwa niemal wszystkie ustawienia domyślne, w tym rozmiary nagłówków
Dziś rzadko potrzebny
Zachowuje ustawienia domyślne, poprawia różnice między przeglądarkami
Strony z treścią, którym odpowiada domyślna typografia
Krótki nowoczesny reset
Poprawia tylko wymiarowanie, marginesy, multimedia i formularze
Większość nowych stron i aplikacji
Reset frameworka (Tailwind Preflight)
Jest dostarczany z frameworkiem
Projekty, które już korzystają z tego frameworka
Przed i po
Karta z border-box i bez niego
Oba pudełka mają width: 200px. Tylko drugie zachowuje tę szerokość po dodaniu paddingu i obramowania.
Wymiarowanie border-box
Szerokość i wysokość obejmują padding i obramowanie.
Usuń domyślne marginesy
Odstępy pochodzą wyłącznie z Twoich reguł.
Czytelny tekst body
Większa wysokość linii i body na pełną wysokość.
Blokowe, responsywne multimedia
Brak przerwy linii bazowej pod obrazami i brak wylewania się.
Formularze dziedziczą czcionkę
Pola i przyciski pasują do otaczającego tekstu.
Łam długie słowa
Długie adresy URL zawijają się zamiast wychodzić poza kontener.
Wyważone nagłówki
Równe długości linii w krótkich nagłówkach.
Bez osieroconych słów
Zapobiega pozostawieniu jednego słowa w ostatniej linii akapitu.
Izoluj korzeń aplikacji
Nowy kontekst nakładania, dzięki któremu z-index w aplikacji nie koliduje z portalami.
Płynne przewijanie do kotwic
Tylko dla odwiedzających, którzy nie prosili o ograniczenie ruchu.