Dag 25: Bruke ekte horisontale linjer (eller etterlikne dem skikkelig)

Sett at du ønsker et skille mellom dine poster. Regulære horisontale linjer (<hr>-tagger) er kjedelige, så du ønsker å bruke et bilde i stedet. Det virker, og kan enkelt gjøres mer tilgjengelig med passende alt-tekster i tillegg.

Imidlertid kan du også gå videre og bruke ekte horisontale linjer, deretter bruke et lite CSS-triks til å vise det som et bilde i moderne nettlesere. Eldre nettlesere og tekstbaserte nettlesere vil ignorere CSS-en og kun gjengi den horisontale linjen i dens opprinnelige stil. (Generelt bruker tekstbaserte nettlesere en rad med understreker eller stiplete streker, utvidet til å passe den enkeltes skjermbredde.)

Jeg vil gi eksempler på begge teknikkene om et øyeblikk.

Hvem har nytte av det?

Anne har nytte av det. Som vi allerede har sett leser JAWS filnavn til ethvert bilde uten et alt-attributt.
Marius har nytte av det. Lynx viser filnavnet til ethvert bilde uten alt-attributtet. Hvis du bruker en ekte horisontal linje, vil Lynx gjengi den som en serie med understreker tilpasset den enkeltes skjermbredde.
Jørgen har nytte av det. Links viser ikke noen ting for bilder uten en alt-tekst, så Jørgen har ikke noen indikasjoner på at det er et skille. Vi trenger den alt-teksten, eller enda bedre, en ekte <hr>;-tagg, den vil Links gjengi som en serie stiplete streker i samme bredde som bredden til den enkeltes skjerm.

Hvordan gjøre det

Hvis du bruker bilder til horisontale linjer, så er den enkleste måten å gjøre dem tilgjengelige på, ved å bruke et alt-attributt til din <img>-tagg. I tillegg burde du legge til et tomt title-attributt, dette for å skjule verktøytipset i visuelle nettlesere. Så hvis du har dette:

<img src="/images/stiliglinje.gif" width="442" height="25">

Endrer du det til dette:

<img alt="--" title="" src="/images/stiliglinje.gif" width="442" height="25">

Ikke overdriv og spesifiser 80 bindestreker i alt-teksten, to eller tre stykker vil være nok.

Hvordan gjøre det: Avansert

Den avanserte (og foretrukne) teknikken bruker faktisk en <hr>-tagg. Dog, fordi nettleserstøtten til stilsetting av <hr>-tagger er så mangelfull, skal vi bruke en statistisk (stum) <div>-tagg til å vise bildet. Legg følgende CSS i din <style>-seksjon i toppen av malen. (Hvis du bruker et eksternt stilark som style-sites.css, kan du legge det inn hvor som helst. Hvis du bruker mer enn ett stilark så legger du det i inn i det Netscape 4-vennlige stilarket.)

div.hr {display: none}
/*/*/a{}
div.hr {
  display: block;
  height: 25px;
  background-image: url(/images/stiliglinje.gif);
  background-repeat: no-repeat;
  background-position: center center;
  margin: 1em 0 1em 0;
}
hr {display:none}
/* */

(I height setter du inn høyden til ditt eget bilde. I background-image setter du inn adressen til ditt eget bilde.)

Så, i din mal der du ønsker en stilig linje, gjør du dette:

<div class="hr"></div><hr />

Resultat:

Alle moderne nettlesere vil vise bildet i stedet for den vanlige enkle horisontale linjen.
Netscape 4 vil vise en enkel horisontal linje.
Tekstbaserte nettlesere ignorerer alltid CSS, så de vil vise en enkel horisontal linje (vanligvis presentert som en rekke med understreker eller stipler).

Les mer

Hiding CSS From Netscape 4 uten å bruke ekstra stilark. Dette er teknikken vi brukte ovenfor i det avanserte eksempelet.
CSS1 and the Decorative HR, hvis du føler deg spesielt modig og ønsker å stilsette dekorative horisontale linjer med CSS i Netscape 4. Lykke til med dét!

<< Dag 24: Tilby alternativ tekst til bildekart | Innholdsfortegnelse | Dag 26: Bruke relative fontstørrelser >>

Kast deg ut i tilgjengelighet