Questo post evidenzia alcune efficaci linee di CSS che svolgono alcune attività molto impegnative e ti aiutano a creare layout moderni e solidi.
I moderni layout CSS consentono agli sviluppatori di scrivere regole di stile davvero significative e solide con pochi tasti. La presentazione precedente e il post successivo esaminano 10 potenti linee di CSS che svolgono un lavoro pesante.
Per seguire o provare queste demo in autonomia, dai un'occhiata all'incorporamento Glitch sopra o visita 1linelayouts.glitch.me.
01. Super centrato: place-items: center
Per la prima riga "a riga singola" risolveremo il più grande mistero in tutto il mondo dei CSS: centrare le cose. Voglio che tu sappia 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 breve per impostare align-items e justify-items contemporaneamente. Se il criterio viene impostato su center, align-items e justify-items sono entrambi impostati su center.
.parent {
display: grid;
place-items: center;
}
In questo modo i contenuti possono essere perfettamente centrati all'interno del livello principale, a prescindere dalle dimensioni intrinseche.
02. Il pancake smontato: flex: <grow> <shrink> <baseWidth>
Poi abbiamo il pancake smontato! Questo è un layout comune per i siti di marketing, ad esempio, che può avere una riga di 3 articoli, in genere con un'immagine, un titolo e del testo, che descrive alcune caratteristiche di un prodotto. Sui dispositivi mobili, vogliamo che questi asset si sovrappongano e si espandono man mano che aumentino 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 sta per: flex: <flex-grow> <flex-shrink> <flex-basis>.
Per questo motivo, se vuoi che le caselle si riempiano di dimensioni pari a <flex-basis>, riducile alle dimensioni più piccole, ma non allunga lo spazio in modo da riempire lo 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 invece vuoi che le scatole si allunghino e riempiano lo spazio mentre si avvolgono nella riga successiva, imposta <flex-grow> su 1. L'opzione avrà il seguente aspetto:
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
Man mano che aumenti o diminuisci le dimensioni dello schermo, questi elementi flessibili si restringono e aumentano.
03. La barra laterale dice: grid-template-columns: minmax(<min>, <max>) …)
Questa demo sfrutta la funzione minmax per i layout a griglia. Qui stiamo impostando la dimensione minima della barra laterale su 150px, ma su schermi più grandi, in modo da estenderla a 25%. La barra laterale occuperà sempre 25% dello spazio orizzontale dell'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 (la barra laterale in questo caso) ottiene un valore minmax di 150px in 25% e il secondo elemento (la sezione main qui) occupa il resto dello spazio come una singola 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 deconstructed, questo esempio non esegue il wrapping dei relativi 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 colonne singole, ma l'area principale sarà alta solo quanto i contenuti con il piè di pagina sotto.
Per fare in modo che il piè di pagina si fermi in fondo, aggiungi:
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
Questa operazione consente di impostare i contenuti di intestazione e piè di pagina in modo che prendano automaticamente le dimensioni dei contenuti secondari e applichi lo spazio rimanente (1fr) all'area principale, mentre la riga delle dimensioni auto prenderà le dimensioni dei contenuti minimi dei contenuti secondari. Di conseguenza, la riga stessa aumenterà per adattarsi all'aumento di dimensione dei contenuti.
05. Layout classico del Santo Graal: grid-template: auto 1fr auto / auto 1fr auto
Per questo layout classico di Santo Graal, sono presenti 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 righe e colonne contemporaneamente.
La coppia di 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, in cui l'intestazione e il piè di pagina avevano contenuti ridimensionati automaticamente, in questo caso le dimensioni della barra laterale sinistra e destra vengono ridimensionate automaticamente in base alle dimensioni intrinseche degli elementi secondari. Tuttavia, questa volta è in formato orizzontale (larghezza) anziché verticale (altezza).
06. Griglia a 12 intervalli: grid-template-columns: repeat(12, 1fr)
Poi abbiamo un altro classico: la griglia a 12 intervalli. Puoi scrivere rapidamente griglie in CSS con la funzione repeat(). Utilizzando: 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 monitoraggio a 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 estenderà completamente dalla prima riga all'ultima (13°) e coprirà 12 colonne. grid-column: 1 / 5; copre i primi quattro.
In alternativa, puoi utilizzare la parola chiave span. Con span, puoi impostare la linea iniziale e il numero di colonne da cui estendersi a partire da quel punto di partenza. In questo caso, grid-column: 1 / span 12 equivale 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, 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 posizionati automaticamente. Piuttosto comodo. I termini chiave da ricordare in questo caso sono repeat, auto-(fit|fill) e minmax()', che ricordi con l'acronimo RAM.
Insieme hanno un aspetto simile a questo:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Stai usando la ripetizione di nuovo, ma questa volta stai utilizzando la parola chiave auto-fit anziché un valore numerico esplicito. Ciò consente 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. Ciò significa che, su schermi più piccoli, occuperanno l'intera larghezza di 1fr e, man mano che raggiungono la larghezza di 150px ciascuno, inizieranno a scorrere sulla stessa linea.
Con auto-fit, le caselle si allungheranno quando la loro dimensione orizzontale supera i 150 px per riempire l'intero spazio rimanente. Tuttavia, se la imposti su auto-fill, le dimensioni della base non verranno ampliate quando viene superata la dimensione di base nella funzione minmax:
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
08. Allinea: 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 del riquadro di delimitazione, con lo spazio rimanente distribuito uniformemente tra gli elementi. Per queste schede, vengono inserite in modalità di visualizzazione Flexbox, con la direzione impostata su colonna utilizzando flex-direction: column.
Il titolo, la descrizione e il blocco immagine vengono inseriti in una colonna verticale all'interno della scheda principale. Quindi, l'applicazione justify-content: space-between consente di ancorare il primo (titolo) e l'ultimo (blocco di immagini) ai bordi della flexbox e il testo descrittivo tra questi elementi viene posizionato con la stessa spaziatura in ogni endpoint.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
09. Blocco dello stile: clamp(<min>, <actual>, <max>)
In questo articolo ci soffermeremo su alcune tecniche che prevedono meno browser supportati, ma hanno alcune implicazioni molto interessanti per i layout e la progettazione della UI reattiva. In questa demo, stai impostando la larghezza utilizzando il morsetto in questo modo: width: clamp(<min>, <actual>, <max>).
Consente di impostare una dimensione minima e massima assoluta e una dimensione effettiva. I valori possono avere il seguente aspetto:
.parent {
width: clamp(23ch, 60%, 46ch);
}
La dimensione minima qui è 23ch o 23 caratteri, mentre la dimensione massima è 46ch, 46 caratteri. Le unità di larghezza del carattere si basano sulle dimensioni del carattere dell'elemento (in particolare la larghezza del glifo 0). Il 'effettivo' è 50%, che rappresenta il 50% della larghezza dell'elemento principale.
In questo caso, la funzione clamp() consente a questo elemento di mantenere una larghezza del 50% finché il 50% è maggiore di 46ch (su aree visibili più ampie) o minore di 23ch (su aree visibili più piccole). Puoi vedere che, se allungo e rimpicciolisco la dimensione principale, la larghezza di questa scheda aumenta fino al punto massimo bloccato e diminuisce al minimo bloccato. Rimane quindi centrato nell'elemento principale, poiché abbiamo applicato ulteriori proprietà per centrarlo. Ciò consente layout più leggibili in quanto il testo non sarà troppo largo (sopra 46ch) né troppo stretto e stretto (meno di 23ch).
Questo è anche un ottimo modo per implementare la tipografia adattabile. Ad esempio, potresti scrivere: font-size: clamp(1.5rem, 20vw, 3rem). In questo caso, la dimensione del carattere di un titolo rimarrà sempre bloccata tra 1.5rem e 3rem, ma si aumenterebbe e si ridurrà 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 i fallback ed esegui i test.
10. Rispetto dell'aspetto: aspect-ratio: <width> / <height>
Infine, quest'ultimo strumento di layout è il più sperimentale della serie. Di recente è stato introdotto Chrome Canary in Chromium 84 e Firefox è stato implementato attivamente, ma al momento non è disponibile in alcuna versione stabile del browser.
Voglio accennare questo problema, però, perché si tratta di un problema che si verifica spesso. Ciò significa semplicemente mantenere 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à, dovrai utilizzare una compromissione padding-top e applicare una spaziatura interna pari a 56.25% per impostare un rapporto top-width. Presto avremo una proprietà per questo scopo per evitare la compromissione e per dover calcolare la percentuale. Puoi creare un quadrato con proporzioni 1 / 1, proporzioni 2 a 1 con 2 / 1 e qualsiasi cosa ti serva per ridimensionare l'immagine con un rapporto di dimensioni prestabilito.
.square {
aspect-ratio: 1 / 1;
}
Questa funzione è ancora in fase di sviluppo, ma è una buona idea conoscere perché risolve molti problemi degli sviluppatori che ho affrontato molte volte io stesso, in particolare per quanto riguarda i video e iframe.
Conclusione
Grazie per aver seguito questo percorso attraverso 10 potenti linee di CSS. Per saperne di più, guarda il video completo e prova anche le demo.