Questo post evidenzia alcune potenti linee di CSS che richiedono molto lavoro e ti aiutano a creare layout moderni e robusti.
I layout CSS moderni consentono agli sviluppatori di scrivere regole di stile davvero efficaci e affidabili con poche sequenze di tasti. L'intervento sopra e il post successivo esaminano 10 potenti linee di CSS che svolgono un grande lavoro.
Per seguire o giocare a queste demo in autonomia, guarda l'incorporamento di Glitch qui sopra o visita 1linelayouts.glitch.me.
01. Supercentrato: place-items: center
Per il primo layout a "riga singola", risolviamo il più grande mistero di tutti i CSS: centrare gli elementi. Voglio farti sapere che con place-items: center è più facile di quanto pensi.
Prima specifica grid come metodo display, quindi scrivi place-items: center sullo stesso elemento. place-items è un modo rapido per impostare align-items e justify-items contemporaneamente. Se lo imposti su center, sia align-items sia justify-items sono impostati su center.
.parent {
display: grid;
place-items: center;
}
Ciò permette che i contenuti siano perfettamente centrati rispetto al soggetto principale, a prescindere dalle dimensioni intrinseche.
02. Il pancake smontato: flex: <grow> <shrink> <baseWidth>
Poi abbiamo il pancake smontato! Si tratta di un layout comune per i siti di marketing, ad esempio, che può avere una riga di 3 articoli, di solito con un'immagine, un titolo e un po' di testo che descrive alcune caratteristiche di un prodotto. Sui dispositivi mobili, vogliamo che siano impilati correttamente e che si espandano man mano che aumentano le dimensioni dello schermo.
Se utilizzi Flexbox per questo effetto, non avrai bisogno di query supporti per regolare il posizionamento di questi elementi quando lo schermo viene ridimensionato.
La forma abbreviata flex significa: flex: <flex-grow> <flex-shrink> <flex-basis>.
Per questo motivo, se vuoi che le tue caselle si riempiano in base alle dimensioni di <flex-basis>, riducile in dimensioni inferiori, ma non allungarle per riempire qualsiasi spazio aggiuntivo, scrivi: flex: 0 1 <flex-basis>. In questo caso, il tuo <flex-basis> è 150px, quindi ha il seguente aspetto:
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}
Se vuoi che le caselle si allunghino e riempiano lo spazio mentre vanno a capo, imposta <flex-grow> su 1, così avrà il seguente aspetto:
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
Ora, man mano che aumenti o diminuisci le dimensioni dello schermo, gli elementi flessibili si riducono e si allungano.
03. La barra laterale dice: grid-template-columns: minmax(<min>, <max>) …)
Questa demo sfrutta la funzione minmax per i layout a griglia. Quello che stiamo facendo qui è impostare la dimensione minima della barra laterale su 150px, ma su schermi più grandi, in modo che si allunghi fino a 25%. La barra laterale occupa sempre 25% dello spazio orizzontale dell'unità principale fino a quando lo spazio 25% non diventa inferiore a 150px.
Aggiungi questo come un 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 valore di minmax pari a 150px in 25% e il secondo elemento (in questo caso la sezione main) occupa il resto dello spazio come un'unica traccia 1fr.
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
04. Pila di pancake: grid-template-rows: auto 1fr auto
A differenza del Pancake scomposto, in questo esempio non vengono applicati elementi secondari quando le dimensioni dello schermo cambiano. Chiamato comunemente piè di pagina fisso, questo layout viene spesso utilizzato sia per i siti web che per le app, nelle applicazioni mobile (in genere una barra degli strumenti) e nei siti web (le applicazioni a pagina singola utilizzano spesso questo layout globale).
L'aggiunta di display: grid al componente creerà una griglia a colonne singole, ma l'area principale sarà alta solo quanto i contenuti, con il piè di pagina sottostante.
Per far rimanere il piè di pagina in basso, aggiungi:
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
In questo modo i contenuti dell'intestazione e del piè di pagina vengono impostati automaticamente per le dimensioni degli elementi secondari e viene applicato lo spazio rimanente (1fr) all'area principale, mentre la riga auto prende le dimensioni dei contenuti minimi delle relative dimensioni secondarie. In questo modo, la riga stessa cresce per adattarsi all'aumento delle dimensioni dei contenuti.
05 Layout classico del Santo Graal: grid-template: auto 1fr auto / auto 1fr auto
Nel layout classico del Santo Graal ci sono 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 con una sola riga di codice, usa la proprietà grid-template. In questo modo puoi impostare le righe e le colonne contemporaneamente.
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 è l'interruzione tra righe e colonne.
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
Come nell'ultimo esempio, dove intestazione e piè di pagina avevano contenuti con dimensioni automatiche, qui le barre laterali sinistra e destra vengono ridimensionate automaticamente in base alle dimensioni intrinseche dei bambini. Questa volta, però, si tratta di dimensioni orizzontali (larghezza) e non verticali (altezza).
06 Griglia a 12 intervalli: grid-template-columns: repeat(12, 1fr)
Poi c'è un altro classico: la griglia a 12 intervalli. Puoi scrivere rapidamente le griglie in CSS con la funzione repeat(). L'utilizzo di repeat(12, 1fr); per le colonne dei modelli di griglia offre 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 delle tracce a 12 colonne, possiamo posizionare i nostri elementi secondari all'interno della griglia. Un modo per farlo è posizionarle utilizzando le linee della griglia. Ad esempio, grid-column: 1 / 13 si estenderebbe dalla prima riga all'ultima (13°) e si estenderebbe a 12 colonne. grid-column: 1 / 5; copre i primi quattro.
Un altro modo per scriverlo consiste nell'utilizzare la parola chiave span. Con span, puoi impostare la linea iniziale e poi quante colonne includere da quel punto di partenza. In questo caso, grid-column: 1 / span 12 equivale a grid-column: 1 / 13, mentre grid-column: 2 / span 6 corrisponde a grid-column: 2 / 8.
.child-span-12 {
grid-column: 1 / span 12;
}
07 RAM (Ripeti, automatica, 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. Piuttosto comodo. I termini chiave da ricordare qui sono repeat, auto-(fit|fill) e minmax()', che ricordi con l'acronimo RAM.
Il risultato è:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Stai utilizzando la ripetizione, ma questa volta utilizzando la parola chiave auto-fit anziché un valore numerico esplicito. Questa opzione consente il posizionamento automatico di questi elementi secondari. Questi bambini e ragazzi hanno anche un valore minimo di base di 150px con un valore massimo di 1fr, il che significa che sugli schermi più piccoli occuperanno l'intera larghezza di 1fr e, quando raggiungono 150px di larghezza ciascuno, inizieranno a scorrere sulla stessa linea.
Con auto-fit, i riquadri si allungheranno in quanto le loro dimensioni orizzontali superano i 150 px per riempire l'intero spazio rimanente. Tuttavia, se modifichi questo valore in auto-fill, non si estenderanno quando viene superata la dimensione di base nella funzione minmax:
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
08 Allineamento: justify-content: space-between
Per il layout successivo, l'elemento principale da dimostrare qui è justify-content: space-between, che posiziona il primo e l'ultimo elemento secondario ai bordi del riquadro di delimitazione, con lo spazio rimanente distribuito uniformemente tra gli elementi. Per queste schede, vengono posizionate in modalità di visualizzazione Flexbox, con la direzione impostata su colonna utilizzando flex-direction: column.
In questo modo, il titolo, la descrizione e il blocco dell'immagine verranno inseriti in una colonna verticale all'interno della scheda principale. Dopodiché, l'applicazione di justify-content: space-between ancorare il primo (title) e l'ultimo (image block) ai bordi di Flexbox e il testo descrittivo tra questi viene posizionato con la stessa spaziatura tra i punti finali.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
09 Bloccare il mio stile: clamp(<min>, <actual>, <max>)
Ecco dove entreremo in alcune tecniche con supporto ridotto dei browser, ma che hanno implicazioni davvero entusiasmanti per i layout e il design reattivo dell'interfaccia utente. In questa demo, imposti la larghezza usando un morsetto in questo modo: width: clamp(<min>, <actual>, <max>).
Imposta la dimensione minima e massima assolute e la dimensione effettiva. Con i valori, possono avere:
.parent {
width: clamp(23ch, 60%, 46ch);
}
La dimensione minima qui è 23ch o 23 unità di caratteri, mentre la dimensione massima è 46ch (46 caratteri). Le unità di larghezza del carattere si basano sulle dimensioni del carattere dell'elemento (in particolare sulla larghezza del glifo 0). Le dimensioni "effettive" sono al 50%, che rappresentano il 50% della larghezza principale di questo elemento.
La funzione clamp() in questo caso consente a questo elemento di mantenere una larghezza del 50% fino a quando il 50% non è superiore a 46ch (nelle aree visibili più larghe) o inferiore a 23ch (nelle aree visibili più piccole). Puoi vedere che quando allungo e restringo la dimensione principale, la larghezza di questa scheda aumenta fino al punto massimo bloccato e diminuisce fino al valore minimo bloccato. In questo modo rimane centrato nell'elemento principale poiché abbiamo applicato ulteriori proprietà per centrarlo. Ciò consente layout più leggibili, poiché il testo non sarà troppo largo (sopra 46ch) o troppo stretto e schiacciato (meno di 23ch).
Questo è anche un ottimo modo per implementare la tipografia reattiva. Ad esempio, potresti scrivere: font-size: clamp(1.5rem, 20vw, 3rem). In questo caso, la dimensione del carattere di un titolo rimane sempre bloccata tra 1.5rem e 3rem, ma aumenta e si riduce 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 dimensione minimo e massimo, ma ricorda che non è supportata in tutti i browser moderni, quindi assicurati di avere dei fallback ed esegui i test.
10. Rispetto dell'aspetto: aspect-ratio: <width> / <height>
Infine, quest'ultimo strumento di layout è il più sperimentale del gruppo. Recentemente è stato introdotto Chrome Canary in Chromium 84 e Firefox si sta impegnando attivamente per implementarla, ma al momento non è disponibile in nessuna versione stabile del browser.
Voglio comunque menzionarlo, perché è un problema che si verifica di frequente. E questo significa semplicemente conservare le proporzioni di un'immagine.
Con la proprietà aspect-ratio, mentre ridimensiono la scheda, il blocco visivo verde mantiene queste proporzioni 16 x 9. Stiamo rispettando le proporzioni con aspect-ratio: 16 / 9.
.video {
aspect-ratio: 16 / 9;
}
Per mantenere le proporzioni 16 x 9 senza questa proprietà, devi utilizzare una compromissione padding-top e assegnare una spaziatura interna pari a 56.25% per impostare un rapporto alto-larghezza. Presto avremo una proprietà per evitare la compromissione e il bisogno di calcolare la percentuale. Puoi creare un quadrato con proporzioni 1 / 1, 2 a 1 con 2 / 1 e qualsiasi cosa ti serva per far sì che questa immagine venga ridimensionata con un rapporto dimensioni impostato.
.square {
aspect-ratio: 1 / 1;
}
Questa funzionalità è ancora in arrivo, ma è bene esserne a conoscenza, in quanto risolve molti problemi degli sviluppatori che ho dovuto affrontare tante volte, soprattutto quando si tratta di video e iframe.
Conclusione
Grazie per aver seguito questo percorso attraverso 10 potenti linee di CSS. Per saperne di più, guarda l'intero video e prova in prima persona le demo.