Niquelao » Blog-arkiv » Jeg har også set det…

Det er ikke, fordi jeg agter at skrive den med ryggen til, men jeg vil begynde med at citere (blockquote-e) det råd, som jeg vil afslutte med: Medmindre vi ønsker at være originale og gerne vil vise den boks, der genereres af det skjulte felt (“næsten skjult”), er løsningen enkel. Vi anvender “display: none”, så er sagen løst.

Mit råd er, at man ikke forsøger at markere de skjulte felter med en klasse for derefter at anvende den egenskab, jeg netop har nævnt. I stedet kan man udnytte, at Firefox forstår og fortolker attributselektorer: [css]input[type=hidden] { display: none; }[/css] Så til selve sagen… Nej, denne artikel handler ikke om, hvordan man laver layout af noget, der teoretisk set bør være skjult (et felt af typen hidden), og jeg siger teoretisk, fordi det i browseren Firefox sker, at når vi har aktiveret CSS og definerer bestemte værdier for egenskaben “display” på formularfelter, ophører de skjulte felter med at være skjulte og bliver i stedet gengivet af browseren (som det kan ses, hvis man eksemplet i browseren Firefox, eller hvis du stoler på os og tror på, hvad vi siger, på de følgende skærmbilleder).

På dette punkt kunne der opstå spørgsmål: Hvorfor anvende display på et “hidden”-felt? Hvis formålet med et skjult felt er at sende information uden at vise det, hvorfor skulle man så ønske at vise det? Svaret er enkelt og forstås måske bedre med et eksempel: Vi har følgende formular: [html] [/html]…hvortil vi anvender nogle basale stile: [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 anvendt display: block på formularfelterne for at fremkalde et linjeskift, så teksten, der mærker dem, havner ovenover.

Placeringen umiddelbart over tekstfelterne favoriserer, at den anonyme tekstboks, de genererer, får en større kontaktflade med selve feltets boks, hvilket visuelt transmitterer associationen mellem de to bedre og hurtigere (desuden er det måden, jeg kan lide at gøre det på, punktum). Måske forstås det bedre visuelt: På billedet ovenfor vises tre måder at lave layout af den samme formular på. I den første placeres label-teksten ovenover feltet, hvilket giver en større kontaktflade.

I de to andre kan man se, hvordan denne flade mindskes, hvis teksten placeres ved siden af det felt, den mærker. Desuden viser den tredje problemet med at ville justere felterne i forhold til hinanden.

På denne måde kunne man desuden venstrejustere alle tekstfelter, hvilket kan være ønskværdigt i mange tilfælde, men som kan skabe konflikter, når label’en kommer før feltet (da disse sjældent har samme længde). Pointen er, at når man giver denne egenskab til “input”-felterne, bliver det skjulte felt i Firefox – og kun i Firefox – gengivet som en tom boks. Korrekt adfærd eller en fejl? Hvis man observerer adfærden i IE, vil man kunne se, at dette ikke sker.

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

På dette tidspunkt vil modstanderne af IE allerede sige, at Firefox gør det rigtige, da de i castingen ofte bliver valgt til rollen som den gode. I dette tilfælde må hver især drage sine egne konklusioner, dog ikke uden først at rejse et par ting (okay, fire; “et par” er blot en talemåde): Er der nogen programmør, der ønsker at vise boksen skabt af et skjult felt?

Tænker designeren mon at ignorere det, programmøren gør, og i stedet selv vælge at vise det? Siges der ikke i specifikationen: 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 )? Hvilket formål kan det have at vise den tomme boks, der skabes af det skjulte felt? En løsning Medmindre vi ønsker at være originale og gerne vil vise den boks, der genereres af det skjulte felt (eller rettere “næsten skjulte”), er løsningen enkel.

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

Vi anvender “display: none”, så er sagen løst. Mit råd er, at man ikke forsøger at markere de skjulte felter med en klasse for derefter at anvende den egenskab, jeg netop har nævnt. I stedet kan man udnytte, at Firefox forstår og fortolker attributselektorer: [css]input[type=hidden] { display: none; }[/css] …og en refleksion Mon udviklerne af Firefox har overvejet at forsøge at vise andre skjulte ting såsom auraen, sjælen, spøgelser…?

Skal jeg vente med at sende denne artikel til Iker Jiménez, indtil de får det til at virke? Kategori: CSS —> Du kan følge kommentarerne via RSS 2.0-feedet. Du kan også efterlade en kommentar eller sende en trackback fra dit eget websted.

Forrige artikel: Men, hvor er hun dog kvik!! Næste artikel: Når der ikke er mørbrad, må man tage til takke med alt andet “nej”! Efterlad din kommentar Felterne Navn og E-mail er obligatoriske Føj os til… Tags vi fremhæver generelt accesibilidad bert bos blockquote bug cañas citas cite comportamiento conocimiento CSS escuas estándares fieldset Firefox formato formulario fuentes hidden ie IE 7 información javascript legend lista niquelando obligatorio opera playa q squash vacaciones w3c WCAG xhtml Dette værk er licenseret under en Creative Commons-licens.

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.