HTML e CSS. Lezioni 9-10

9. Advanced Positioning

Il 'posizionamento statico' si riferisce al normale flusso della pagina con cui abbiamo lavorato fino a questo punto. Gli schemi di layout CSS Box Model, float e flexbox operano tutti in questo flusso 'statico' ma questo non è l'unico schema di posizionamento disponibile in CSS.

Gli altri tre tipi di posizionamento sono “relativo”, “assoluto” e “fisso”. Ciascuno di essi consente di posizionare manualmente gli elementi utilizzando coordinate specifiche, contrariamente alle opzioni più semantiche in flexbox e float. Invece di dire 'Attacca questa casella al centro del suo contenitore', il posizionamento avanzato ti consente di dire cose come 'Metti quella casella 20 pixel sopra e 50 pixel a destra dell'origine del genitore'.

Il 'posizionamento relativo' sposta gli elementi rispetto a dove apparirebbero normalmente nel flusso statico della pagina. Questo è utile per spostare i riquadri quando il flusso predefinito è leggermente disattivato.

position: relative;  rende un elemento posizionato e le proprietà in alto e a sinistra ti consentono di definire quanto è sfalsato dalla sua posizione statica. È un po' come impostare una coordinata (x, y) per l'elemento.

Il 'posizionamento assoluto' è proprio come il posizionamento relativo, ma l'offset è relativo all'intera finestra del browser anziché alla posizione originale dell'elemento. Poiché non esiste più alcuna relazione con il flusso statico della pagina, considera questo il modo più manuale per disporre un elemento.

Le coordinate per gli elementi assoluti sono sempre relative al contenitore più vicino che è un elemento posizionato. Torna ad essere relativo al browser solo quando nessuno dei suoi antenati è posizionato. Quindi, se cambiamo l'elemento padre .item-absolute in modo che sia posizionato relativamente, dovrebbe apparire nell'angolo in alto a sinistra di quell'elemento invece della finestra del browser.

Il 'posizionamento fisso' ha molto in comune con il posizionamento assoluto: è molto manuale, l'elemento viene rimosso dal normale flusso della pagina e il sistema di coordinate è relativo all'intera finestra del browser. La differenza fondamentale è che gli elementi fissi non scorrono con il resto della pagina.

Questo è un po' fuori portata, dal momento che questo tutorial riguarda HTML e CSS, non JavaScript. Tuttavia, l'animazione è uno dei principali casi d'uso per il posizionamento relativo e assoluto, quindi diamo un'occhiata al futuro animando uno dei nostri elementi.

Elementi posizionati per menu

Il posizionamento fisso ci consentirà di far aderire il menu alla parte superiore della pagina e il posizionamento relativo ci darà un'ancora per il menu a discesa posizionato in modo assoluto. Avremo anche la possibilità di parlare delle migliori pratiche del menu di navigazione e vedere alcune applicazioni pratiche delle pseudo-classi di cui abbiamo parlato in CSS Selectors.

La proprietà z-index ti consente di controllare la profondità degli elementi nella pagina. Se pensi al tuo schermo come uno spazio 3D, i valori z-index negativi vanno più avanti nella pagina e quelli positivi escono dalla pagina.

10. Responsive design

'Responsive design' si riferisce all'idea che il tuo sito web dovrebbe essere visualizzato ugualmente bene in qualsiasi cosa, dai monitor widescreen ai telefoni cellulari. È un approccio al web design e allo sviluppo che elimina la distinzione tra la versione ottimizzata per dispositivi mobili del tuo sito Web e la sua controparte desktop. Con il design reattivo, sono la stessa cosa.

Le query multimediali consentono di presentare lo stesso contenuto HTML come layout CSS distinti. Quindi, invece di mantenere un sito Web per smartphone e un sito completamente non correlato per laptop/desktop, possiamo utilizzare lo stesso markup HTML (e server Web) per entrambi.

Ci sono alcuni modelli ben definiti su come un layout desktop si comprime in un layout mobile (stiamo usando 'layout shifter'). Molte di queste decisioni sono nel regno del design, che è al di fuori dello scopo di questo tutorial orientato al codice; tuttavia, ci sono due concetti che devi capire come sviluppatore: un layout 'fluido' è quello che si allunga e si restringe per riempire la larghezza dello schermo, proprio come le scatole flessibili di cui abbiamo parlato alcuni capitoli fa. Un layout “a larghezza fissa” è l'opposto: ha la stessa larghezza indipendentemente dalle dimensioni dello schermo (ne abbiamo creato uno nel capitolo Selettori CSS).

Questo era solo un esempio di layout di un sito reattivo. Puoi usare queste stesse identiche tecniche per implementare tutti i tipi di altri progetti. Inizia con gli stili di base che si applicano all'intero sito, quindi modificali per varie larghezze di dispositivo applicando selettivamente le regole CSS con @media. Potresti anche aggiungere un'altra query multimediale per, ad esempio, creare un layout dedicato per i monitor ultra-widescreen.

Abbiamo iniziato questo capitolo imparando la differenza tra layout fluidi e layout a larghezza fissa. Quindi, siamo passati alla creazione di un foglio di stile mobile-first che utilizzava le query multimediali per creare layout per tablet e desktop su un set condiviso di stili di base. Infine, abbiamo disabilitato il comportamento di zoom predefinito della vista dei browser mobili.