Få et CSS-layout til at overleve ægte indhold

Fire samlinger af CSS-forklaringer til forståelse af layoutbegrænsninger, elastisk størrelse og de akavede tilfælde, som en perfekt mockup kan skjule.

Et layout er ikke færdigt, når det matcher et skærmbillede. Den rigtige test kommer med en længere titel, færre kort, en smal skærm eller en anden skrifttype. Disse skribenter forklarer CSS gennem eksempler og visuel ræsonnement. Brug dem til at undersøge en begrænsning, du kan gengive i stedet for at indsamle erklæringer uden at forstå, hvad de ændrer.

Prøv dette først

Byg et lille eksempel med en kort titel, en lang titel og en ubrudt streng. Tilpas størrelsen, før du ændrer CSS. Vælg en artikel, der forklarer fejlen, anvend den mindste relevante idé, og test igen med manglende billeder og zoomet tekst. Gem noter om begrænsningen, så den næste rettelse ikke fortryder den.

Husk

En artikels eksempler kan målrette mod en anden browserbaseline. Tjek understøttelse af den specifikke funktion og hold en passende reserve. Et kompakt kodestykke er ikke automatisk mere modstandsdygtig end en længere, klarere layoutregel.