Questo post mette in evidenza alcune potenti righe di CSS che svolgono un lavoro importante e ti aiutano a creare layout moderni e affidabili.
I layout CSS moderni consentono agli sviluppatori di scrivere regole di stile davvero significative e solide con poche battute. Il talk riportato sopra e questo post successivo esaminano 10 potenti righe di CSS che svolgono un lavoro molto impegnativo.
Per seguire la procedura o provare queste demo autonomamente, dai un'occhiata al codice Glitch incorporato sopra o visita la pagina 1linelayouts.glitch.me.
01. Super centrato: place-items: center
Per il primo layout "a riga singola", risolviamo il più grande mistero del mondo CSS: il centratura. Ti garantisco che è più facile di quanto pensi con place-items: center.
Specifica innanzitutto grid come metodo display, quindi scrivi place-items: center nello stesso elemento. place-items è una scorciatoia per impostare contemporaneamente align-items e justify-items. Se lo imposti su center, sia align-items che justify-items vengono impostati su center.
.parent {
display: grid;
place-items: center;
}
In questo modo, i contenuti vengono centrati perfettamente all'interno del contenitore principale, indipendentemente dalle dimensioni intrinseche.
02. The Deconstructed Pancake: flex: <grow> <shrink> <baseWidth>
A seguire, la frittella destrutturata. Si tratta di un layout comune per i siti di marketing, ad esempio, che possono avere una riga di 3 elementi, in genere con un'immagine, un titolo e un testo che descrivono alcune funzionalità di un prodotto. Sui dispositivi mobili, vogliamo che si impilino bene e si espandano man mano che aumentiamo le dimensioni dello schermo.
Se utilizzi Flexbox per questo effetto, non avrai bisogno di query sui media per regolare il posizionamento di questi elementi quando le dimensioni dello schermo cambiano.
La scorciatoia flex sta per: flex: <flex-grow> <flex-shrink> <flex-basis>.
Per questo motivo, se vuoi che le caselle vengano completate fino alle dimensioni <flex-basis>, si riducano per le dimensioni più piccole, ma non si allarghino per riempire eventuali spazi aggiuntivi, scrivi: flex: 0 1 <flex-basis>. In questo caso, <flex-basis> è 150px, quindi il codice sarà simile al seguente:
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}
Se vuoi che le caselle si allunghino e riempiano lo spazio quando si inseriscono nella riga successiva, imposta <flex-grow> su 1, in modo che il risultato sia il seguente:
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
Ora, quando aumenti o diminuisci le dimensioni dello schermo, questi elementi flessibili si riducono e si espandono.
03. La barra laterale indica: grid-template-columns: minmax(<min>, <max>) …)
Questa demo sfrutta la funzione minmax per i layout della griglia. Qui stiamo impostando le dimensioni minime della barra laterale su 150px, ma su schermi più grandi, consentendo di estenderla a 25%. La barra laterale occuperà sempre 25% dello spazio orizzontale del relativo elemento principale finché 25% non diventa inferiore a 150px.
Aggiungi questo valore come valore di grid-template-columns con il seguente valore:
minmax(150px, 25%) 1fr. L'elemento nella prima colonna (in questo caso la barra laterale) riceve un minmax di 150px in 25% e il secondo elemento (in questo caso la sezione main) occupa il resto dello spazio come un singolo canale 1fr.
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
04. Pancake Stack: grid-template-rows: auto 1fr auto
A differenza di Pancake destrutturato, questo esempio non inserisce un a capo nei suoi elementi secondari quando le dimensioni dello schermo cambiano. Comunemente noto come piè di pagina fisso, questo layout viene spesso utilizzato sia per i siti web che per le app, nelle applicazioni mobile (il piè di pagina è in genere una barra degli strumenti) e nei siti web (le applicazioni a pagina singola spesso utilizzano questo layout globale).
Se aggiungi display: grid al componente, otterrai una griglia a una colonna, ma l'area principale avrà l'altezza dei contenuti con il piè di pagina sottostante.
Per fare in modo che il piè di pagina rimanga in basso, aggiungi:
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
In questo modo, i contenuti dell'intestazione e del piè di pagina assumeranno automaticamente le dimensioni dei relativi elementi secondari e lo spazio rimanente (1fr) verrà applicato all'area principale, mentre la riga di dimensioni auto assumerà le dimensioni dei contenuti minimi dei relativi elementi secondari, quindi, man mano che le dimensioni dei contenuti aumentano, la riga stessa si adeguerà.
05. Layout del Santo Graal classico: grid-template: auto 1fr auto / auto 1fr auto
Questo layout classico include intestazione, piè di pagina, barra laterale sinistra, barra laterale destra e contenuti principali. È simile al layout precedente, ma ora con le barre laterali.
Per scrivere l'intera griglia utilizzando una singola riga di codice, utilizza la proprietà grid-template. In questo modo puoi impostare contemporaneamente sia le righe che le colonne.
La coppia proprietà e valore è: grid-template: auto 1fr auto / auto 1fr auto. La barra tra il primo e il secondo elenco separato da spazi indica la separazione tra righe e colonne.
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
Come nell'ultimo esempio, in cui l'intestazione e il piè di pagina avevano contenuti con dimensioni automatiche, qui le barre laterali sinistra e destra vengono ridimensionate automaticamente in base alle dimensioni intrinseche dei relativi elementi secondari. Tuttavia, questa volta si tratta di dimensioni orizzontali (larghezza) anziché verticali (altezza).
06. Griglia a 12 colonne: grid-template-columns: repeat(12, 1fr)
Ecco un'altra classica: la griglia a 12 campate. Puoi scrivere rapidamente griglie in CSS con la funzione repeat(). Se utilizzi repeat(12, 1fr); per le colonne del modello di griglia, ottieni 12 colonne ciascuna di 1fr.
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.child-span-12 {
grid-column: 1 / 13;
}
Ora che hai una griglia di canali con 12 colonne, possiamo posizionare i nostri elementi secondari nella griglia. Un modo per farlo è posizionarli utilizzando le linee della griglia. Ad esempio, grid-column: 1 / 13 si estende dalla prima riga all'ultima (la 13a) e occupa 12 colonne. grid-column: 1 / 5; includerebbe i primi quattro.
Un altro modo per scrivere questa query è utilizzare la parola chiave span. Con span, imposti la riga iniziale e il numero di colonne da includere a partire da quel punto di partenza. In questo caso, grid-column: 1 / span 12 sarebbe equivalente a grid-column: 1 / 13 e grid-column: 2 / span 6 a grid-column: 2 / 8.
.child-span-12 {
grid-column: 1 / span 12;
}
07. RAM (Ripeti, Auto, MinMax): grid-template-columns(auto-fit, minmax(<base>, 1fr))
Per questo settimo esempio, combina alcuni dei concetti che hai già appreso per creare un layout adattabile con elementi secondari flessibili e posizionati automaticamente. Molto interessante. I termini chiave da ricordare sono repeat, auto-(fit|fill) e minmax()', che puoi ricordare con l'acronimo RAM.
Il risultato sarà il seguente:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Utilizzi di nuovo l'istruzione repeat, ma questa volta con la parola chiave auto-fit anziché con un valore numerico esplicito. In questo modo viene attivato il posizionamento automatico di questi elementi secondari. Questi elementi secondari hanno anche un valore minimo di base di 150px con un valore massimo di 1fr, il che significa che su schermi più piccoli occuperanno l'intera larghezza di 1fr e, quando raggiungono ciascuno una larghezza di 150px, inizieranno a essere visualizzati nella stessa riga.
Con auto-fit, le caselle si allungheranno quando le dimensioni orizzontali superano i 150 px per riempire tutto lo spazio rimanente. Tuttavia, se lo imposti su auto-fill, non si estenderanno quando la dimensione di base nella funzione minmax viene superata:
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
08. Line Up: justify-content: space-between
Per il layout successivo, il punto principale da dimostrare è justify-content: space-between, che posiziona il primo e l'ultimo elemento secondario ai bordi della relativa area delimitata, con lo spazio rimanente distribuito uniformemente tra gli elementi. Per queste schede, vengono posizionate in una modalità di visualizzazione Flexbox, con l'orientamento impostato su colonna utilizzando flex-direction: column.
In questo modo, il titolo, la descrizione e il blocco di immagini vengono posizionati in una colonna verticale all'interno della scheda principale. L'applicazione di justify-content: space-between ancora gli elementi primo (titolo) e ultimo (blocco di immagini) ai bordi del flexbox e il testo descrittivo intermedio viene posizionato con una spaziatura uguale a ciascun endpoint.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
09. Clamping My Style: clamp(<min>, <actual>, <max>)
Qui passiamo ad alcune tecniche con minore supporto del browser, ma con implicazioni davvero interessanti per i layout e il design dell'interfaccia utente adattabile. In questa demo, imposti la larghezza utilizzando la funzione clamp come segue: width: clamp(<min>, <actual>, <max>).
Vengono impostate dimensioni minime e massime assolute e una dimensione effettiva. Con i valori, può avere il seguente aspetto:
.parent {
width: clamp(23ch, 60%, 46ch);
}
La dimensione minima è 23ch o 23 unità di carattere e la dimensione massima è 46ch, 46 caratteri. Le unità di larghezza dei caratteri si basano sulla dimensione del carattere dell'elemento (in particolare sulla larghezza del glifo 0). Le dimensioni "effettive" sono pari al 50%, ovvero il 50% della larghezza dell'elemento principale.
La funzione clamp() consente a questo elemento di mantenere una larghezza del 50% fino a quando il 50% non è maggiore di 46ch (in aree visibili più ampie) o minore di 23ch (in aree visibili più piccole). Puoi vedere che, man mano che allungo e rimpicciolisco le dimensioni principali, la larghezza di questa scheda aumenta fino al punto massimo e diminuisce fino al punto minimo. Rimane quindi centrato nell'elemento principale, poiché abbiamo applicato proprietà aggiuntive per centrarlo. In questo modo, i layout saranno più leggibili, perché il testo non sarà troppo largo (superiore a 46ch) o troppo compresso e stretto (inferiore a 23ch).
È anche un ottimo modo per implementare la tipografia adattabile. Ad esempio, potresti scrivere: font-size: clamp(1.5rem, 20vw, 3rem). In questo caso, il font-size di un titolo rimarrebbe sempre compreso tra 1.5rem e 3rem, ma aumenterebbe e diminuirebbe in base al valore effettivo di 20vw per adattarsi alla larghezza dell'area visibile.
Si tratta di un'ottima tecnica per garantire la leggibilità con un valore di dimensioni minime e massime, ma ricorda che non è supportata in tutti i browser moderni, quindi assicurati di avere soluzioni di riserva ed esegui i test.
10. Rispetta le proporzioni: aspect-ratio: <width> / <height>
Infine, questo ultimo strumento di layout è il più sperimentale del gruppo. Di recente è stata introdotta in Chrome Canary in Chromium 84 e Firefox sta lavorando attivamente per implementarla, ma al momento non è presente in nessuna versione stabile del browser.
Tuttavia, voglio menzionarlo perché si tratta di un problema molto comune. e questo significa semplicemente mantenere le proporzioni di un'immagine.
Con la proprietà aspect-ratio, quando rendo più grande la scheda, il blocco visivo verde mantiene queste proporzioni di 16 x 9. Rispettiamo le proporzioni con aspect-ratio: 16 / 9.
.video {
aspect-ratio: 16 / 9;
}
Per mantenere le proporzioni 16 x 9 senza questa proprietà, devi utilizzare un hack padding-top e aggiungere un padding di 56.25% per impostare un rapporto altezza/larghezza. A breve avremo una proprietà per evitare l'hack e la necessità di calcolare la percentuale. Puoi creare un'immagine quadrata con proporzioni 1 / 1, proporzioni 2:1 con 2 / 1 e qualsiasi altra immagine che ti serve per ridimensionare l'immagine con un rapporto di dimensioni impostato.
.square {
aspect-ratio: 1 / 1;
}
Anche se questa funzionalità è ancora in fase di sviluppo, è importante conoscerla perché risolve molti problemi che ho riscontrato personalmente come sviluppatore, in particolare per quanto riguarda i video e gli iframe.
Conclusione
Grazie per aver seguito questo percorso attraverso 10 potenti righe di CSS. Per saperne di più, guarda il video completo e prova le demo.