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

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.