De vises sten i CSS baseret layout?

Den bedste metode til layout af websider var indtil for få år siden brugen af tabeller. Man lavede et gitter af tabeller i tabeller, for at opnå et bestemt visuelt udseende på siden. Teknikken viger dog nu til fordel for CSS baserede layouts, blandt andet fordi tabelgitrene er meget lidt vedligeholdelsesvenlige.

Men tabellerne har imidlertid kunnet opbygge layoutgitre med kolonner i ens højde. En teknik, som indtil videre har været knapt så godt beskrevet i CSS. Det råder Alex Robinson nu bod på med en ganske omfattende beskrivelse af, hvordan problemet kan løses med CSS, uden brug af "falske" kolonner i form af baggrundsgrafik.

Robinson viser med flere eksempler, hvordan man får layoutmæssige fordele ved at opbygge et CSS gitter. Samtidig får man også mulighed for at ordne indholdet i kolonnerne logisk i kildekoden, mens de rent grafisk kan placeres i en hvilken som helst orden. Altså total adskillelse af præsentation og indhold.

Naturligvis kræver metoden en række hacks og work-arounds, for at få det til at fungere i Internet Explorer, men disse kommer forfatteren også omkring.

Har Alex Robinson hermed fundet de vises sten i CSS layout? Jeg skal i hvert fald have prøvet metoden af. Læs artiklen hos Positioniseverything.net

Denne artikel er seneste opdateret 24 maj 2024

Morten Brunbjerg Bech

Frontend webudvikler, designer, fritids-illustrator, bibliotekar og far til to.

Arbejder med udvikling, design og web-grafik hos TV MIDTVEST. Særligt interesseret i stramt struktureret og effektivt informationsdesign, der gør budskaber lette at forstå, serveret i en grafisk brugergrænseflade, der er nem at bruge.

Tools of the trade: Statamic, VueJS, Nuxt, Tailwind, HTML, CSS, SCSS, JavaScript, Photoshop, Illustrator, Adobe XD, etc.