Registrer deg
Script • CSS3 layout og frontend

CSS3 tydelig fokusmarkering

Gjør lenker og kontroller enklere å bruke med tastatur.

Les gjennomFlere scripts
.focus-list a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: .6rem;
  text-decoration-thickness: .12em;
  text-underline-offset: .2em;
}

.focus-list a:focus-visible {
  outline: .2rem so
Weboracle
18.07.20260 visningerCSS3

Gjør lenker og kontroller enklere å bruke med tastatur.

CSS3 tydelig fokusmarkering er et praktisk script/eksempel for CSS3. Det er skrevet for å være kopierbart, men også forklart slik at leseren forstår bruksområde, krav og begrensninger.

Illustrasjon: CSS3 tydelig fokusmarkering
Bildet viser ressursens plass i arbeidsflyten: input, kontroll, resultat og publisering.

Når bør du bruke dette?

Bruk eksempelet når du trenger en liten, tydelig byggekloss som kan testes isolert før den kobles til et større nettsted. Det er særlig nyttig når samme oppgave gjentas, når innhold må kontrolleres før publisering, eller når layout og markup må tåle ukjent redaksjonelt innhold.

Krav og forutsetninger

Moderne nettleser. Test med tastatur og skjermleser ved behov. Test alltid i en kopi før du legger løsningen inn i produksjon. Tilpass filstier, klassenavn, meldinger og sikkerhetsnivå til ditt eget miljø.

Slik tilpasser du scriptet

  1. Les gjennom beskrivelse og krav før du kopierer kode.
  2. Bytt navn, stier og selektorer til lokale verdier.
  3. Kjør et lite testsett med både gyldig og ugyldig input.
  4. Dokumenter hva scriptet gjør når noe feiler.

Sikkerhet og kvalitet

Ikke stol på klientdata alene. Data som skal lagres eller brukes i filsystem, database eller publisert HTML må kontrolleres på server eller i en tilsvarende trygg rutine. Feilmeldinger bør være tydelige uten å lekke sensitive detaljer.

Kontroll før publisering

  • Koden er syntaktisk kontrollert.
  • Eksempelet har et konkret bruksområde.
  • Det finnes kravfelt og forklaring.
  • Det er tydelig hva som må endres lokalt.
  • Illustrasjon og tekst støtter samme tema.

Kilder og videre lesning