Niquelao » Blogiarkisto » Minäkin olen nähnyt sen…

» Blogiarkisto » Minäkin olen nähnyt sen… Niquelao - CSS Minäkin olen nähnyt sen… 11. marraskuuta 2006, kirjoittaja Rumoroso Aloitan tämän artikkelin takaperoisesti. En aio kirjoittaa sitä selkä edellä, vaan aloitan lainaamalla (blockquotena) sen neuvon, johon päätän artikkelin: Ellemme halua olla omaperäisiä ja näyttää sitä piilotetun kentän (”lähes piilotetun”) tuottamaa laatikkoa, ratkaisu on yksinkertainen.

Sovellamme siihen ” display: none ” ja homma on hoidettu. Neuvoni on, ettei piilotettuja kenttiä kannata merkitä luokalla ja soveltaa siihen juuri kirjoittamaani ominaisuutta. Sen sijaan voi hyödyntää sitä, että Firefox ymmärtää ja tulkitsee attribuuttivalitsimia : [css]input[type=hidden] { display: none; }[/css] Asiaan… Ei, tämä artikkeli ei kerro siitä, miten muotoillaan se, mikä teoriassa pitäisi olla piilossa ( hidden -tyyppinen kenttä), ja sanon teoriassa, koska käy niin, että Firefox -selaimessa, kun CSS on aktiivinen ja määrittelemme tiettyjä arvoja ” display ”-ominaisuudelle lomakekentille, piilotetut kentät lakkaavat olemasta piilotettuja ja selain alkaa renderöidä ne (kuten voi havaita, jos katsoo esimerkkiä Firefox-selaimella tai, jos luottaa meihin ja uskoo mitä sanomme, seuraavista kuvakaappauksista).

Tässä vaiheessa voi herätä kysymyksiä: miksi soveltaa display-arvoa ” hidden ”-kenttään?; jos piilotetun kentän tarkoitus on välittää tietoa näkymättä, miksi se haluttaisiin näyttää?;… Vastaus on helppo ja ehkä se ymmärretään paremmin esimerkin avulla: Meillä on seuraava lomake: [html] [/html]…johon sovellamme perustyylejä: [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] Olemme soveltaneet lomakekenttiin display: block -arvon, jotta ne aiheuttavat rivinvaihdon ja niiden tekstin, joka merkitsee ne, jää yläpuolelle.

Se, että merkinnät ovat välittömästi tekstikenttien yläpuolella, edistää sitä, että niiden tuottamalla anonyymillä tekstilaatikolla on suurempi kosketuspinta kentän laatikkoon, mikä välittää visuaalisesti paremmin ja nopeammin molempien välisen yhteyden (lisäksi se on tapa, jolla haluan sen tehdä, ja piste). Ehkä se ymmärretään paremmin visuaalisesti: Edellisessä kuvassa näytetään kolme tapaa muotoilla sama lomake. Ensimmäisessä label-teksti sijoitetaan kentän yläpuolelle, jolloin sen kosketuspinta on suurempi.

Kahdessa muussa voi havaita, miten kyseinen pinta pienenee, jos teksti sijoitetaan merkitsemänsä kentän viereen. Lisäksi kolmas näyttää ongelman, joka syntyy halusta kohdistaa kentät keskenään.

Lisäksi tällä tavalla voitaisiin kohdistaa vasemmalle kaikki tekstikentät, mikä voi olla toivottavaa monissa tilanteissa ja mikä voi aiheuttaa ristiriitoja, kun merkintä edeltää kenttää (koska niillä ei yleensä ole sama pituus). Asia on niin, että kun annamme tämän ominaisuuden ” input ”-kentille, Firefoxissa, ja ainoastaan Firefoxissa, piilotettu kenttä renderöidään tyhjänä lohkona. Onko käyttäytyminen oikein vai bugi? Jos tarkkaillaan IE:n käyttäytymistä, huomataan, ettei näin tapahdu.

Related: UserWay — Widget de accesibilidad con plan gratuito para empezar hoy mismo.

Tässä vaiheessa IE:n vastustajat sanovat jo, että Firefox tekee oikein, sillä roolituksissa se valitaan yleensä hyviksen rooliin. Tässä tapauksessa jokainen tehköön omat johtopäätöksensä, mutta ennen sitä esitän pari asiaa (no, neljä, ”pari” on tapa puhua): Haluaako joku ohjelmoija näyttää piilotetun kentän luoman laatikon?

Ajatteleeko suunnittelija jättävänsä huomiotta sen, mitä ohjelmoija tekee, ja aikoo näyttää sen omalla tavallaan? Eikö spesifikaatio sano: 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 )? Mitä tarkoitusta piilotetun kentän luoman tyhjän laatikon näyttämisellä voi olla? Ratkaisu Ellemme halua olla omaperäisiä ja näyttää sitä piilotetun kentän (tai paremminkin ”lähes piilotetun”) tuottamaa laatikkoa, ratkaisu on yksinkertainen.

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

Sovellamme siihen ”display: none” ja homma on hoidettu. Neuvoni on, ettei piilotettuja kenttiä kannata merkitä luokalla ja soveltaa siihen juuri kirjoittamaani ominaisuutta. Sen sijaan voi hyödyntää sitä, että Firefox ymmärtää ja tulkitsee attribuuttivalitsimia : [css]input[type=hidden] { display: none; }[/css] …ja pohdinta Ovatkohan Firefoxin kehittäjät harkinneet muiden piilotettujen asioiden, kuten auran, sielun, aaveiden,… näyttämistä?

Odotanko, että he onnistuvat siinä ennen kuin lähetän tämän artikkelin Iker Jiménezille ? Kategoria: CSS —> Voit seurata kommentteja RSS 2.0 -syötteen kautta .

Voit myös jättää kommentin , tai lähettää trackbackin sivustoltasi. Edellinen artikkeli: Mutta onpa se fiksu!! Seuraava artikkeli: Kun ei ole lihaa, kaikkea ”ei” syödään! Jätä kommenttisi Kentät Nimi ja Sähköposti ovat pakollisia Lisää meidät…

Tagit, joita korostamme yleisesti saavutettavuus bert bos blockquote bugi cañas lainaukset cite käyttäytyminen tietämys CSS escuas standardit fieldset Firefox muoto lomake fontit hidden ie IE 7 tieto javascript legend lista niquelando pakollinen opera ranta q squash loma w3c WCAG xhtml Tämä teos on lisensoitu Creative Commons -lisenssillä .

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; take a look here if you want the current details.