WeboracleArtikkelen forklarer hvordan moderne CSS3 kan brukes til å bygge robuste kortbaserte grensesnitt for databasedrevet innhold. Den tar for seg CSS Grid, Flexbox, tekstbryting, responsiv oppførsel, tilgjengelighet og sikker visning av data fra database.
Kortbasert design er blitt en vanlig måte å vise artikler, scripts, tutorials og foruminnhold på. For en databasebasert nettside som WEBoracle.no er kortet ikke bare en visuell boks. Det er et grensesnitt mellom data, kode og brukeropplevelse.
Når innhold hentes fra en database, vet man aldri helt hvor langt et navn, en tittel, en beskrivelse eller en tagg blir. En artikkel kan ha en kort tittel, mens et script kan ha et teknisk navn uten mellomrom. En kategori kan være enkel, mens en URL, slug eller kodebeskrivelse kan være lang og sammenhengende. Derfor må kortdesignet bygges for virkelige data, ikke bare for ideelle skjermbilder.
Hva er databasedrevet kortdesign?
Databasedrevet kortdesign betyr at innholdet i et kort kommer fra databasefelt som title, excerpt, summary, category_name, created_at og main_image_url. PHP-malen bestemmer hvilke felt som hentes, mens CSS bestemmer hvordan feltene oppfører seg visuelt. Feil i den ene delen kan se ut som feil i den andre: en lang tittel kan ligne et databaseproblem, selv om det egentlig er en manglende tekstbrytingsregel i CSS.
Et godt kort bør tåle variasjon. Det bør fungere med korte og lange titler, med og uten bilde, med få og mange tagger, og på både stor skjerm, nettbrett og mobil. Moderne CSS gir gode verktøy for dette, men de må brukes bevisst.
Grid for oversikten, Flexbox inni kortet
CSS Grid egner seg godt når kortene skal ligge i et todimensjonalt system med rader og kolonner. På en oversiktsside kan man for eksempel vise tre kort i bredden på desktop, to på nettbrett og ett på mobil. Grid gjør dette ryddigere enn gamle løsninger basert på floats eller faste bredder. MDN beskriver Grid som særlig egnet til å dele en side i større regioner og kontrollere forholdet mellom størrelse, plassering og lagdeling.
.article-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}Flexbox passer bedre inne i hvert kort. Et kort har ofte ikon, tittel, ingress, tags, metadata og knapper. Med display: flex og flex-direction: column kan innholdet stables, mens knappene kan holdes nederst uten at kortet mister balansen.
Lange titler må brytes kontrollert
En av de vanligste feilene i kortbasert design er at lange ord eller tekniske titler går utenfor kortet. Dette skjer ofte med filnavn, API-navn, sluger, klassenavn eller sammenhengende tekst uten mellomrom. For databasedrevet innhold bør designet derfor ha en global tekstbrytingsregel.
.content-card,
.content-card * {
min-width: 0;
overflow-wrap: anywhere;
word-break: break-word;
}min-width: 0 er særlig viktig i grid- og flex-layout. Uten den kan et internt element nekte å krympe, selv om kortet rundt har begrenset bredde. overflow-wrap: anywhere gjør at nettleseren kan bryte lange tekststrenger der det trengs, også når teksten ikke har naturlige mellomrom.
Knapper skal ikke presse layouten
To knapper på samme linje kan se fint ut i en mockup, men skape problemer i virkelige data. Teksten «Vis detaljer» og «Last ned» har begrenset plass, og hvis kortet blir smalt, kan knappene presse seg utenfor. En mer robust løsning er å stable handlingene når kortbredden er begrenset.
.card-actions {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}Dette er ikke bare en mobiltilpasning. Det er en strategi for å hindre at UI-elementer konkurrerer med innholdet. Kortet skal være lesbart først, dekorativt etterpå.
Databaseinnhold må vises trygt
Et databasedrevet kortdesign handler ikke bare om CSS. Når titler, beskrivelser og metadata hentes fra databasen, må innholdet vises trygt i HTML. Tekst som ikke skal tolkes som HTML, bør escapes før visning. I PHP er htmlspecialchars() et vanlig verktøy for dette.
For brødtekst der man tillater begrenset HTML, bør systemet ha tydelige regler for hvilke tagger som er tillatt. Ellers kan en artikkel, kommentar eller scriptbeskrivelse bli en sikkerhetsrisiko. OWASP anbefaler kontekstbasert output encoding som en sentral del av XSS-forebygging.
Tilgjengelighet og reflow
Et godt kortdesign må fungere når brukeren zoomer, bruker liten skjerm eller trenger større tekst. Horisontal scrolling i vanlig artikkel- og kortinnhold bør unngås. Innholdet bør heller bryte om, flyte nedover og beholde lesbar struktur. WCAG-kriteriet om reflow bygger på nettopp dette prinsippet: innhold skal kunne presenteres uten at brukeren må scrolle i to retninger for å lese vanlig tekst.
WEBoracle-vurdering
For WEBoracle bør kortdesignet behandles som et lite designsystem. Scripts, artikler, tutorials og forumtråder kan ha ulike detaljer, men de bør dele samme grunnregler: tydelig typografi, trygg tekstbryting, stabile knapper, forutsigbar spacing og forsvarlig behandling av databaseinnhold.
Det beste kortdesignet er derfor ikke det mest dekorative. Det beste kortdesignet er det som gjør innholdet lesbart, trygt, tilgjengelig og stabilt over tid.