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

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

À propos de cette sélection

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 liens/Dans l’ordre choisi par le curateur

Lien 1anglais

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

Lien 2anglais

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

Lien 3anglais

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

Lien 4anglais

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.