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

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

Acerca de esta selección

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 enlaces/En el orden elegido por el curador

Enlace 1inglés

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

Enlace 2inglés

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

Enlace 3inglés

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

Enlace 4inglés

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.