Share
Lo scorso fine settimana ho scaricato la lastra di Skeleton di Dave Gamache con cui suonare; buon divertimento, pulito, reattivo. Quando si è trattato del design del modulo, mi è stato ricordato un problema che può influenzare gli input nei layout flessibili: larghezze anomale. Se hai mai avuto lo stesso problema, o non ne sei mai stato a conoscenza, continua a leggere ...
Diciamo che abbiamo un layout con un elemento contenente, che ha una larghezza flessibile (allunga il tuo browser e allungerai il contenitore). All'interno del nostro contenitore abbiamo una varietà di elementi (intestazioni, paragrafi, regole orizzontali, div) e abbiamo anche una forma semplice che ospita alcuni tipi di bit e bob tipici.
I contenuti crescono e si riducono a seconda della larghezza del contenitore. Gli elementi a livello di blocco (come i div) corrispondono esattamente alla larghezza. Riempiono automaticamente il 100% della larghezza del contenitore e, indipendentemente da eventuali spaziature o bordi, restano ordinatamente entro i limiti del genitore.
Gli input del modulo non lo fanno.
Per loro per riempire la larghezza del contenitore dobbiamo applicare a larghezza: 100%;. Tuttavia, aggiungendo padding, bordi o margini, i nostri input scoppieranno dai vincoli del contenitore. Bummer.
Beh, non proprio. Il CSS Box Model determina il modo in cui le dimensioni degli elementi si comportano, e dal momento che gli standard web sono stati introdotti, siamo arrivati ad accettare il riempimento, i margini e i bordi Inserisci alle dimensioni di un elemento.
Quindi, discutibilmente, il nostro div in questo caso è quello che si comporta in modo imprevisto, ma è solo perché non abbiamo effettivamente definito la sua larghezza.
Sembra che gestisca le cose come tradizionalmente utilizzato da Internet Explorer. L'approccio in modalità Quirks significava che hai definito la larghezza e l'altezza di un elemento e che eventuali padding o bordi sarebbero stati presi in considerazione entro quelle dimensioni. Se hai specificato che un div è largo 600px, anche se hai aggiunto 10px di padding, sarebbe comunque largo 600px. Sapresti categoricamente quanto erano grandi i tuoi elementi.
Finché eravamo consapevoli di come si stavano comportando i nostri elementi, potremmo tenere conto delle differenze e specificare di conseguenza le dimensioni fisse. Ma in questa epoca di layout fluidi, non sappiamo necessariamente quanto siano ampi gli elementi contenenti. Sicuramente c'è un modo per far sì che i nostri input e le aree di testo si comportino allo stesso modo di tutto il resto? Fortunatamente c'è. E costruiremo una demo rapida per illustrarlo.
Dato che è stato il boilerplate di Skeleton a ricordarmi di questo problema, andremo a prenderlo per costruirci rapidamente una demo.
Nota: Qualsiasi styling all'interno della caldaia Skeleton è a scopo di layout e di estetica di base - la mia aggiunta al suo css non è una critica!
Spacchetta i file e vedrai qualcosa di simile a questo:
Il primo cambiamento che farò è index.html. Nell'ultima colonna, sostituiremo il contenuto per un modulo:
e quindi aggiungeremo un paio di righe a stylesheets / layout.css:
.column background: # f7f7f7; input [type = 'text'], selezionare, textarea width: 100%;
Tutto ciò che abbiamo fatto è dato alle colonne uno sfondo grigio (così possiamo vedere dove si trovano i confini) e abbiamo reso i nostri elementi del modulo larghi al 100%. Controlla il risultato finora. Il problema degli input anomali è illustrato chiaramente, quindi ora la soluzione ...
Possiamo fare in modo che i nostri elementi del modulo si comportino in base al modello di casella in modalità Quirks con una sola riga di css ...
input [type = 'text'], textarea dimensionamento della casella: border-box; -moz-box-dimensionamento: border-box; -webkit-box-dimensionamento: border-box;
Bene, sei righe, ma l'importante è dimensionamento della scatola: border-box;, insieme con i suoi fratelli prefissi venditore. Abbiamo applicato questa regola ai nostri input di testo e ai nostri textareas, dicendo al browser di rendere le loro dimensioni con padding e bordi dentro. Dai un'occhiata alla demo risultante, perfecto! Ridimensiona il browser e vedrai gli elementi del modulo giocare come i loro amici a livello di blocco.
Anche in termini di supporto del browser sei ben coperto. Ironia della sorte, IE7 non riconosce la proprietà di ridimensionamento della casella, ma è l'unico browser con cui avrai problemi.
Accentsconagua