Cosa non sai sul calcolo dei margini percentuali nei CSS
La maggior parte dei web designer pensa di conoscere bene i CSS. Dopo tutto, non c'è molto - alcuni tipi di selettori, poche decine di proprietà e alcune regole a cascata che hai a malapena bisogno di ricordare da quando si riducono al buon senso. Ma quando si arriva al livello nitido, ci sono molti dettagli oscuri che pochi designer comprendono veramente.
Quando ho esaminato i risultati di un test CSS gratuito che ho offerto online negli ultimi sei mesi, ho scoperto una domanda che quasi nessuno ho ragione. Delle migliaia di persone che hanno fatto il test, meno del 14% ha ragione.
La domanda si riduce a questo: Come si calcolano i margini percentuali?
La domanda
Supponi che il tuo sito abbia un contenitore div, e al suo interno, un contenuto div:
Ora, diamo quel contenuto div un margine superiore:
.contenuto margin-top: 10%;
Va bene, quindi è del 10% ... ma il 10% di che cosa? Questa è la domanda che solo il 13,8% delle persone può rispondere correttamente. E ricorda: queste persone hanno accesso a Google!
Quello che amo di questa domanda è quello sembra che la risposta dovrebbe essere ovvia. Tanto che sospetto che molte persone si limitino a indovinare (e indovina male). Ma forse è così non lo fa sembra ovvio per te. Voglio dire, se usi davvero la tua immaginazione, ci sono molti modi in cui il browser potrebbe teoricamente calcolare un margine come questo.
Che ne dici se la ristretto per te dal momento che la domanda nel test è in realtà una scelta multipla. Ecco le tue opzioni:
- 10% dell'altezza del contenuto div
- 10% dell'altezza del div contenitore
- 10% della larghezza del contenuto div
- 10% della larghezza del contenitore div
Ricorda, solo il 13,8% delle persone può scegliere la risposta giusta da questo elenco. È peggio del caso!
Guarda attentamente le risposte; vedrai che ci sono solo due cose che devi sapere:
Contenitore o contenuto?
Primo, lo è la dimensione del margine in base alle dimensioni del contenuto div stesso o alla dimensione del contenitore div?
Questo non è un vero orgoglio, ma probabilmente puoi fidarti del tuo istinto. Se imposto un div per il 50% della larghezza del suo contenitore, e quindi voglio i suoi margini sinistro e destro per riempire il resto dello spazio, li imposterò naturalmente al 25% ciascuno (quindi le percentuali si sommano in 100%). Affinché funzioni, i margini percentuali devono essere basati sulle dimensioni del contenitore.
Abbastanza sicuro, due terzi delle persone che fanno il test ottengono questa parte della risposta giusta.
Larghezza o altezza?
Secondo, è la dimensione di margin-top in base alla larghezza o all'altezza di quell'elemento?
Se hai prestato attenzione, probabilmente stai già in guardia. Per così poche persone a scegliere la risposta giusta, questa deve essere una domanda trabocchetto, giusto?
Eppure scommetto che riesci a malapena a crederlo la risposta non è altezza. Bene, non lo è.
Sì, stiamo parlando di un margine superiore qui. Sì, la dimensione di quel margine è una misura verticale. Sì, se un blocco è il 50% dell'altezza del suo contenitore e gli hai dato un margine superiore del 25%, ti aspetteresti che sia il 25% dell'altezza del contenitore. E ti sbaglieresti.
Non sentirti male se pensavi che fosse altezza. Quasi l'80% delle persone che prendono il test sono d'accordo con te:
Ha senso ... No, davvero!
Ancora non ci credi? Ecco una citazione dalla specifica CSS del W3C:
La percentuale viene calcolata rispetto alla larghezza del blocco contenitore della casella generata. Notare che questo è vero anche per margin-top e margin-bottom.
Lo stesso vale per l'imbottitura superiore e inferiore, nel caso ve lo stiate chiedendo. Per quanto riguarda i bordi, è illegale specificare la loro larghezza in percentuale.
Quindi, a questo punto, probabilmente stai pensando anche ai creatori di CSS fuori di testa, o hanno appena fatto un errore davvero stupido. Ma sono qui per dirvi, ci sono due buoni motivi per basare i margini verticali sulla larghezza del blocco contenitore:
Coerenza orizzontale e verticale
Esiste, naturalmente, una proprietà abbreviata che ti consente di specificare il margine per tutti e quattro i lati di un blocco:
margine: 10%;
Questo si espande a:
margin-top: 10%; margine-destra: 10%; margin-bottom: 10%; margin-left: 10%;
Ora, se hai scritto uno dei due precedenti, probabilmente ti aspetteresti che i margini su tutti e quattro i lati del blocco siano uguali, vero? Ma se margin-left e margin-right erano basati sulla larghezza del contenitore, e margin-top e margin-bottom erano basati sulla sua altezza, allora sarebbero di solito diversi!
Evitare la dipendenza circolare
Il CSS espone il contenuto in blocchi impilati verticalmente lungo la pagina, quindi la larghezza di un blocco è solitamente dettata interamente dalla larghezza del suo genitore. In altre parole, puoi calcola la larghezza di un blocco senza preoccuparti di cosa sia dentro quel blocco.
L'altezza di un blocco è diversa. Di solito, l'altezza dipende dall'altezza combinata dei suoi contenuti. Modificare l'altezza del contenuto e modificare l'altezza del blocco. Vedere il problema?
Per ottenere l'altezza del contenuto, è necessario conoscere i margini superiore e inferiore applicati. E se questi margini dipendono dall'altezza del blocco genitore, sei nei guai, perché non puoi calcolarne uno senza conoscere l'altro!
Basando i margini verticali sul larghezza del contenitore interrompe tale dipendenza circolare e rende possibile la disposizione della pagina.
Asso della classe
Quindi ecco qua: la domanda più difficile del test, e ora puoi rispondere. Vuoi sapere come faresti nel resto del test? Prova tu stesso. Prometto, la maggior parte delle domande sono molto più semplici di questa.
Nel frattempo, sono alla ricerca di una nuova domanda più difficile! Quale dettaglio di CSS pensi che nessuno sappia?
Nota dell'editore: Questo è scritto per Hongkiat.com da Kevin Yank. Kevin ha scritto sul web dal 1999, con libri su PHP, CSS e JavaScript al suo nome. Ha anche ospitato podcast, parlato a conferenze e prodotto video training, tutto sul web. Ora è a capo del team di sviluppo di Sit the Test, un'applicazione web per la creazione e l'esecuzione di test online.
Altro su Hongkiat:
- Web design: altezza colonna uguale con CSS
- 6 trucchi CSS per allineare il contenuto verticalmente
- Un'occhiata alle unità CSS: pixel, EM e percentuale
- A Look Into: dimensionamento della scatola CSS3
Ora Leggi: 10 proprietà CSS3 nascoste che dovresti sapere
