Niquelao » Archivio del weblog » Anch'io l'ho visto…

Non è che mi proponga di scriverlo a rovescio, ma inizierò citando (blockquote-ando) il consiglio con cui lo concluderò: A meno che non siamo originali e vogliamo mostrare quel riquadro generato dal campo nascosto (“quasi nascosto”), la soluzione è semplice. Applichiamo ” display: none ” e risolto.

Il mio consiglio è di non provare a contrassegnare i campi nascosti con una classe per poi applicargli la proprietà che ho appena scritto. Al suo posto si può sfruttare il fatto che Firefox comprende e interpreta i selettori di attributi : [css]input[type=hidden] { display: none; }[/css] Al dunque… No, non è che questo articolo tratti di come impaginare ciò che teoricamente dovrebbe andare nascosto (un campo tipo hidden ), e dico teoricamente perché accade che nel browser Firefox , quando abbiamo attiva la CSS e dichiariamo determinati valori per la proprietà ” display ” sui campi di formulario, i campi nascosti smettono di esserlo e vengono renderizzati dal browser (come si può notare se si osserva l’esempio con il browser Firefox o, se ti fidi di noi e credi a quello che diciamo, nei seguenti screenshot).

Arrivati a questo punto potrebbero sorgere delle domande: perché applicare un display su un campo ” hidden ”?; se la finalità di un campo nascosto è passare informazioni senza mostrarsi, perché si vorrebbe mostrarlo?;… La risposta è facile e forse si comprende meglio con un esempio: Abbiamo il seguente formulario: [html] [/html]…a cui applichiamo degli stili di base: [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] Abbiamo applicato un display: block ai campi di formulario affinché provochino il salto di riga permettendo che il testo che li etichetta rimanga sopra.

La disposizione immediatamente sopra i campi di testo delle etichette favorisce che la caja anonima di testo che generano abbia maggiore superficie di contatto sulla caja del campo, con cui visivamente trasmette meglio e in maniera più rapida l’associazione tra i due (inoltre, è il modo in cui mi piace metterlo, e basta). Forse si comprende meglio visivamente: Nell’immagine precedente si mostrano tre modi di impaginare lo stesso formulario. Nel primo si colloca il testo del label sopra il campo, con cui la sua superficie di contatto è maggiore.

Negli altri due si può notare come diminuisca tale superficie se il testo si situa accanto al campo che etichetta. Inoltre, il terzo mostra il problema di voler allineare i campi tra loro.

Inoltre, in questo modo si potrebbero allineare a sinistra tutti i campi di testo, cosa che può essere desiderabile in molte occasioni e che può creare conflitti quando l’etichetta precede il campo (dato che queste non sogliono avere la stessa lunghezza). La questione è che dando questa proprietà agli ” input ”, in Firefox, e unicamente in Firefox, si renderizza il campo nascosto, facendolo come un blocco vuoto. Comportamento corretto o bug? Se osserviamo il comportamento di IE si noterà che questo non accade.

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

A queste altezze, i detrattori di IE staranno già dicendo che Firefox fa la cosa corretta, poiché nei casting di solito lo selezionano per il ruolo del buono. In questo caso che ognuno tragga le sue conclusioni, non senza prima sollevare un paio di cose (beh, quattro, il “un paio” è un modo di dire): Forse qualche programmatore vuole mostrare la caja creata da un campo nascosto?

Forse il designer pensa di ignorare quello che fa il programmatore e pretende mostrarlo per conto suo? Forse non dice la specifica: 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 )? Quale finalità può avere il mostrare la caja vuota creata dal campo nascosto? Una soluzione A meno che non siamo originali e vogliamo mostrare quel riquadro generato dal campo nascosto (o meglio “quasi nascosto”), la soluzione è semplice.

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

Applichiamo “display: none” e risolto. Il mio consiglio è di non provare a contrassegnare i campi nascosti con una classe per poi applicargli la proprietà che ho appena scritto. Al suo posto si può sfruttare il fatto che Firefox comprende e interpreta i selettori di attributi : [css]input[type=hidden] { display: none; }[/css] …e una riflessione Si saranno posti gli sviluppatori di Firefox il problema di cercare di mostrare altre cose nascoste come l’aura, l’anima, fantasmi,…?

Aspetterò che ci riescano prima di inviare questo articolo a Iker Jiménez ? Categoria: CSS —> Puoi seguire i commenti grazie al feed RSS 2.0 . Potresti anche lasciare un commento , o inviare un trackback dal tuo sito.

Articolo precedente: Ma, sarà lista!! Articolo successivo: Non essendoci lombo, di tutto “no” come! Lascia il tuo commento I campi Nome ed Email sono obbligatori Aggiungici a… Tag che evidenziamo in generale accessibilità bert bos blockquote bug cañas citas cite comportamento conoscenza CSS escuas standard fieldset Firefox formato formulario font hidden ie IE 7 informazione javascript legend lista niquelando obbligatorio opera playa q squash vacanze w3c WCAG xhtml Quest’opera è sotto una licenza di Creative Commons .

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.