Få en CSS-layout att överleva verkligt innehåll

CSS-väljare och layoutregler på en mörk redigeringsskärm

Om det här urvalet

Fyra samlingar av CSS-förklaringar för att förstå layoutbegränsningar, elastisk storlek och de besvärliga fallen som en perfekt mockup kan dölja.

En layout är inte klar när den matchar en skärmdump. Det riktiga testet kommer med en längre titel, färre kort, en smal skärm eller ett annat typsnitt. Dessa skribenter förklarar CSS genom exempel och visuella resonemang. Använd dem för att undersöka en begränsning du kan reproducera istället för att samla in deklarationer utan att förstå vad de ändrar.

Prova detta först

Bygg ett litet exempel med en kort titel, en lång titel och en obruten sträng. Ändra storlek på den innan du ändrar CSS. Välj en artikel som förklarar misslyckandet, använd den minsta relevanta idén och testa igen med saknade bilder och zoomad text. Håll anteckningar om begränsningen så att nästa korrigering inte ångrar den.

Kom ihåg

En artikels exempel kan rikta in sig på en annan webbläsarbaslinje. Kontrollera stödet för den specifika funktionen och behåll en lämplig reserv. Ett kompakt kodavsnitt är inte automatiskt mer motståndskraftigt än en längre, tydligare layoutregel.

4 länkar/I kuratorns valda ordning

Länk 1engelska

Moderna CSS-lösningar

Utforska Stephanie Eckles förklaringar av moderna lösningar på vanliga CSS-problem. Prova en teknik mot kantfallet som tog dig dit.

moderncss.dev

Länk 2engelska

Ahmad Shadeed

Läs visuella förklaringar av layout och gränssnittsbeteende. Följ hur innehåll och tillgängligt utrymme påverkar den valda CSS-metoden.

ishadeed.com

Länk 3engelska

Josh W. Comeau – CSS

Använd interaktiva förklaringar för att bygga en mental modell av CSS-beteende. Pausa vid ett exempel och förutsäg resultatet innan du ändrar en kontroll.