Moderne CSS som gjør nettsiden enklere å bruke
Nye CSS-funksjoner er mest verdifulle når de løser reelle problemer. Bruk dem til bedre tilpasning, tydeligere struktur og mindre ekstra kode.
Dette tar du med deg
- La innholdet styre layouten.
- Bruk nye funksjoner med en fungerende grunnversjon.
- Test lange ord, zoom og redusert bevegelse.
Begynn med det som skal leses
En fin skisse er ikke nok hvis teksten bare passer med nøyaktig tre korte linjer. Start med ekte overskrifter, priser og knapper. Se hva som skjer når en tittel blir lengre eller noen forstørrer teksten i nettleseren.
Bruk enkle avstander og et begrenset sett tekststørrelser. Det gjør siden lettere å justere som en helhet. Hvis hvert kort har egne unntak, blir en liten innholdsendring fort en ny designjobb.
La komponenten tilpasse seg plassen
Med container queries kan en komponent endre layout etter størrelsen på beholderen sin. Det er nyttig for et kort som brukes både i en bred liste og i en smal kolonne. Kortet trenger ikke anta at skjermbredden er den samme som den tilgjengelige plassen.
Lag først en enkel, lesbar grunnversjon. Legg deretter på en mer romslig utgave der det er plass. Et priskort bør for eksempel ikke kreve tre kolonner for at pris og beskrivelse skal være forståelige.
Forbedre gradvis
CSS-regelen @supports lar deg legge til stiler når nettleseren støtter en bestemt egenskap. Bruk dette når en nyere funksjon forbedrer uttrykket, mens grunnversjonen fortsatt må fungere. Det gir rom for utvikling uten å gjøre innhold avhengig av én bestemt nettleser.
Spør samtidig om funksjonen faktisk trengs. En vanlig grid-layout er ofte lettere å vedlikeholde enn en komplisert animert løsning. Det mest avanserte arbeidet kan være å gjøre opplevelsen enkel.
Test mer enn normalvisningen
Prøv en liten mobil, stor tekst, tastaturnavigasjon og lange norske sammensatte ord. Kontroller at knapper beholder forståelige navn, og at innhold ikke klippes av skjulte overløp. Å skjule problemet med overflow er sjelden en fullgod rettelse.
Bevegelse bør støtte handlingen. Gi en roligere opplevelse når brukeren har bedt om redusert bevegelse, og unngå at viktige tekster må vente på en animasjon. Les også om et lite designsystem som holder sidene samlet.