Spraw, aby układ CSS przetrwał prawdziwą treść

Selektory CSS i reguły układu na ciemnym ekranie edytora

Giới thiệu tuyển tập này

Cztery zbiory wyjaśnień CSS pozwalających zrozumieć ograniczenia układu, elastyczne rozmiary i niewygodne przypadki, które może ukryć idealna makieta.

Układ nie jest ukończony, jeśli pasuje do jednego zrzutu ekranu. Prawdziwy test pojawia się z dłuższym tytułem, mniejszą liczbą kart, wąskim ekranem lub inną czcionką. Ci autorzy wyjaśniają CSS za pomocą przykładów i rozumowania wizualnego. Użyj ich, aby zbadać ograniczenie, które możesz odtworzyć zamiast zbierać deklaracje bez zrozumienia, co one zmieniają.

Spróbuj najpierw tego

Utwórz mały przykład z krótkim, długim tytułem i nieprzerwanym ciągiem znaków. Zmień jego rozmiar przed zmianą CSS. Wybierz jeden artykuł wyjaśniający awarię, zastosuj najmniejszy odpowiedni pomysł i przetestuj ponownie z brakującymi obrazami i powiększonym tekstem. Zachowaj notatki na temat ograniczenia, aby następna poprawka go nie cofnęła.

Pamiętaj

Przykłady artykułów mogą być przeznaczone dla innej przeglądarki bazowej. Sprawdź obsługę konkretnej funkcji i zachowaj odpowiednią opcję zastępczą. Kompaktowy fragment kodu nie jest automatycznie bardziej odporny niż dłuższa i bardziej przejrzysta reguła układu.

4 liên kết/Theo thứ tự người tuyển chọn đã chọn

Liên kết 1Tiếng Anh

Nowoczesne rozwiązania CSS

Zapoznaj się z wyjaśnieniami Stephanie Eckles na temat nowoczesnych rozwiązań typowych problemów CSS. Wypróbuj jedną technikę przeciwko przypadku Edge, który cię tam sprowadził.

moderncss.dev

Liên kết 2Tiếng Anh

Ahmada Shadeeda

Przeczytaj wizualne wyjaśnienia układu i zachowania interfejsu. Obserwuj, jak treść i dostępna przestrzeń wpływają na wybrane podejście CSS.

ishadeed.com

Liên kết 3Tiếng Anh

Josh W. Comeau — CSS

Użyj interaktywnych wyjaśnień, aby zbudować mentalny model zachowania CSS. Zatrzymaj się na przykładzie i przewiduj jego wynik przed zmianą kontrolki.

joshwcomeau.com

Liên kết 4Tiếng Anh

Sztuczki CSS

Wyszukaj przewodniki i odniesienia do właściwości, aby uzyskać konkretne pytanie dotyczące implementacji. Wybierając technikę, przeczytaj datę publikacji i kontekst wsparcia.