Niquelao » Bloggarkiv » Jeg har også sett det…

» Arkiv for webloggen » Jeg har også sett det… Niquelao - CSS Jeg har også sett det… 11. november 2006 av Rumoroso Denne artikkelen starter jeg baklengs. Det betyr ikke at jeg har tenkt å skrive den med ryggen vendt mot deg, men jeg begynner med å sitere (eller rettere sagt: bruke blockquote på) rådet som jeg vil avslutte med: Med mindre vi ønsker å være originale og vise frem den boksen som genereres av et skjult felt (et «nesten skjult» felt), er løsningen enkel.

Vi bruker « display: none », så er saken løst. Mitt råd er at du ikke prøver å gi de skjulte feltene en egen klasse for deretter å bruke egenskapen jeg nettopp nevnte. I stedet kan du dra nytte av at Firefox forstår og tolker attributtselektorer: [css]input[type=hidden] { display: none; }[/css] Til sakens kjerne… Nei, denne artikkelen handler ikke om hvordan man skal sette opp layouten for noe som teoretisk sett bør være skjult (et felt av typen hidden ). Jeg sier «teoretisk sett» fordi det i nettleseren Firefox , når CSS er aktivert og bestemte verdier er angitt for egenskapen « display » på skjemafelter, skjer det at skjulte felter slutter å være skjulte og i stedet blir gjengitt av nettleseren (slik du kan se hvis du sjekker eksemplet i Firefox, eller hvis du stoler på oss og tror det vi sier, på skjermbildene nedenfor).

På dette punktet kan det dukke opp spørsmål: Hvorfor skulle man i det hele tatt anvende display på et « hidden »-felt? Hvis hensikten med et skjult felt er å overføre informasjon uten å vise det, hvorfor skulle man da ønske å vise det frem? Svaret er enkelt, og kanskje blir det tydeligere med et eksempel: Vi har følgende skjema: [html] [/html]…som vi gir noen grunnleggende stiler: [css]form { border: 2px outset; background-color: #CCCCCC; } fieldset { margin: 20px auto; width: 500px; border: 1px solid; padding: 10px; } legend { font-size: 1.5em; color: #000; } label { font-weight: bold; font-size: 1.1em; } fieldset input { display: block; width: 90%; height: 1.3em; line-height: 1.3em; margin-left: 5%; font-size: 1em; } p { text-align: center; margin: 1em 0; } fieldset p { text-align: left }[/css] Vi har brukt display: block på skjemafeltene for å fremtvinge linjeskift, slik at teksten som fungerer som etikett havner ovenfor feltet.

Plasseringen av etikettene rett over tekstfeltene gjør at den usynlige tekstboksen de genererer får større kontaktflate med selve feltboksen. Dette formidler visuelt bedre og raskere sammenhengen mellom de to elementene (dessuten er det slik jeg liker å gjøre det, punktum). Kanskje blir det enda klarere visuelt: Bildet over viser tre måter å sette opp layouten for det samme skjemaet på.

I den første plasseres label-teksten over feltet, noe som gir større kontaktflate. I de to andre ser du hvordan denne flaten minker hvis teksten plasseres ved siden av feltet den beskriver.

Den tredje varianten viser dessuten problemet med å forsøke å justere feltene i forhold til hverandre. På denne måten kunne man dessuten venstrejustert alle tekstfeltene, noe som kan være ønskelig i mange tilfeller, men som kan skape konflikter når etiketten kommer før feltet (siden disse sjelden har samme lengde). Poenget er at når man gir denne egenskapen til « input »-elementene, vil Firefox – og kun Firefox – gjengi det skjulte feltet som en tom blokk. Er dette korrekt oppførsel eller en feil (bug)?

Related: accessiBe — Superposición de IA que promete cumplimiento WCAG en 48 horas.

Hvis vi ser på hvordan IE oppfører seg, vil vi merke at dette ikke skjer. På dette tidspunktet vil IE-kritikerne allerede si at Firefox gjør det rette, siden de i castingen ofte blir valgt til rollen som den gode gutten.

I dette tilfellet får hver og en trekke sine egne konklusjoner, men ikke før vi har tatt opp et par ting (vel egentlig fire; «et par» er bare en måte å snakke på): Er det noen utvikler som faktisk ønsker å vise boksen som et skjult felt lager? Kommer designeren til å ignorere det utvikleren har gjort, og i stedet selv velge å vise det frem? Sier ikke spesifikasjonen eksplisitt: «hidden controls: Authors may create controls that are not rendered but whose values are submitted with a form. Authors generally use this control type to store information between client/server exchanges that would otherwise be lost due to the stateless nature of HTTP.

The INPUT element is used to create a hidden control . ( hidden control )»? Hvilken hensikt kan det overhodet ha å vise den tomme boksen som et skjult felt genererer?

Worth a look: AudioEye — Accesibilidad gestionada: automatización combinada con revisión humana.

En løsning Med mindre vi ønsker å være originale og vise frem den boksen som genereres av et skjult felt (eller rettere sagt: et «nesten skjult» felt), er løsningen enkel. Vi bruker «display: none», så er saken løst. Mitt råd er at du ikke prøver å gi de skjulte feltene en egen klasse for deretter å bruke egenskapen jeg nettopp nevnte.

I stedet kan du dra nytte av at Firefox forstår og tolker attributtselektorer: [css]input[type=hidden] { display: none; }[/css] …og en refleksjon Har utviklerne bak Firefox vurdert å forsøke å vise frem andre skjulte ting, som auraen, sjelen, spøkelser…? Skal jeg vente til de får det til før jeg sender denne artikkelen til Iker Jiménez ?

Kategori: CSS —> Du kan følge kommentarene via RSS 2.0-strømmen . Du kan også legge igjen en kommentar , eller sende en trackback fra ditt eget nettsted. Forrige artikkel: Men, hun er jo smart!! Neste artikkel: Når det ikke finnes ryggstykke, får man si «nei» til alt!

Legg igjen din kommentar Feltene Navn og E-post er obligatoriske Følg oss på… Tags vi gjerne fremhever generelt tilgjengelighet bert bos blockquote bug cañas sitater cite oppførsel kunnskap CSS escuas standarder fieldset Firefox format skjema skrifter hidden ie IE 7 informasjon javascript legend liste niquelando obligatorisk opera strand q squash ferie w3c WCAG xhtml Dette verket er lisensiert under en Creative Commons-lisens .

P.S. A few readers have asked which widget de accesibilidad we actually reach for — it's UserWay; take a look here if you want the current details.