7 nuove funzionalità per creare un sito Web reattivo

I CSS moderni prendono l'intero controllo dello stile del sito Web con l'aiuto del JavaScript richiesto. In questo articolo, evidenzieremo sette nuovi aggiornamenti CSS per semplificare il futuro dello stile. Inoltre, stiamo considerando il supporto del browser di Chrome, Edge e Firefox. Infine, discuteremo i problemi, le soluzioni e praticamente tutto ciò di cui avrai bisogno per iniziare subito.

Considerando tutti i trucchi e le tecniche, ecco alcune funzionalità CSS selezionate che valgono il tuo tempo. Quindi, senza ulteriori indugi, tuffiamoci dentro.

1. Sottogriglia CSS

A differenza della capacità di CSS flexbox di muoversi solo in una direzione, puoi definire entrambe le dimensioni nelle griglie. Man mano che iniziano a diventare potenti e popolari nei prossimi decenni, si assiste a enormi cambiamenti nei progetti web. Le griglie nidificate vengono utilizzate per disegnare griglie all'interno delle griglie. Ma quali sono i principali svantaggi che hanno sollevato la richiesta di sottogriglie CSS?

• Le griglie nidificate dopo il livello 2 venivano utilizzate per traboccare il contenuto al di fuori della griglia più grande che influiva pesantemente sulla reattività di un sito web.
• Le griglie nidificate fungevano da elementi indipendenti all'interno del contenitore della griglia più grande. Non c'era alcun riferimento al contenitore padre per alcuna modifica.

Senza sottogriglie:

Dopo le sottogriglie:

Ecco come puoi implementare le griglie secondarie:

.contenitore {
larghezza: 700 px;
altezza: 500 px;
sfondo: rgb (214, 255, 139);
visualizzazione: griglia;
colonne-modello-griglia: 1fr 1fr 1fr 1fr;
righe-modello-griglia: 1fr 1fr 1fr 1fr;
}
.container div {
fondo: rgb (72, 170, 137);
righe della griglia: 2/3;
colonna-griglia: 2 / 5;
visualizzazione: griglia;
colonne-modello-griglia: sottogriglia;
righe-modello-griglia: sottogriglia;
}

Puoi posizionare più sottogriglie. L'eccezione degna di nota è che le griglie secondarie ereditano la proprietà grid-gap padre. Risulterà nella creazione di tutte le sottogriglie con le stesse proprietà di gap all'interno di ogni griglia genitore.

La cosa migliore delle griglie secondarie è che sono altamente reattive, regolabili e scalabili.

Compatibilità browser: Firefox

2. Proprietà rapporto d'aspetto

È possibile eliminare tutti i problemi di regolazione e calcolo modificando le proporzioni di un determinato contenitore. Se miri a inserire un video, tutto ciò che devi fare è fissare un rapporto di aspetto relativo alle diverse dimensioni dello schermo. Tuttavia, mentre si lavora con griglie multiple bidimensionali, ci sono possibilità di overflow e visualizzazione predefinita.

Puoi risolverlo supportando la proprietà delle proporzioni con l'attributo larghezza. Diventa utile per le immagini reattive in quanto è possibile definire un'altezza o una larghezza.

Ecco come puoi implementare la proprietà delle proporzioni:

.contenitore {
larghezza: 700 px;
proporzioni: 16 / 9;
fondo: rgb (72, 170, 137);
}

Puoi anche inserire le proporzioni: auto invece di specificare le proporzioni. Lo svantaggio del valore automatico predefinito è che il browser sceglierà la dimensione originale dell'immagine. Indubbiamente, ostacola la reattività del sito.

Compatibilità browser: Chrome, Edge, Firefox (parziale)

3. Spazio Flexbox

Grid-gap è abbastanza popolare per creare uno spazio uguale tra ogni griglia. Ma dovevi applicare margini negativi, selettori di pseudo-classe e selettori complessi per gestire lo spazio tra ogni elemento flessibile. Pertanto, il gap di Flexbox si traduce in righe di codice minori con una maggiore scalabilità.

Ecco come puoi implementare il gap flexbox:

.contenitore {
larghezza: 700 px;
altezza: 500 px;
display: flessibile;
allinea-elementi: centro;
giustifica-contenuto: centro;
distanza: 1 em;
}

Produzione:

Compatibilità del browser: tutti i principali browser, inclusi Chrome, Edge e Firefox.

Lo scorrimento aiuta a condividere più informazioni su un singolo sito Web senza ingombrare la copia web. Ma il principale svantaggio dello scorrimento è che potrebbe fermarsi a metà del para o dell'immagine. A volte, il controllo del contenuto impaginato viene lasciato a metà. JavaScript è usato con attenzione per evitare la personalizzazione dello scorrimento. Ma non è stato un risultato completamente soddisfacente fino a quando non è arrivato CSS Scroll Snap.

Utilizzando Scroll Snap, puoi definire limiti specifici per correggere il layout e la visibilità di un determinato contenitore. Ad esempio, è fantastico creare caroselli e sezioni di siti Web definite. Nota che non avrai bisogno di JS per nessuna regolazione.

Ecco come puoi implementare lo scroll snap:

.contenitore {
larghezza: 100%;
altezza: 100%;
display: flessibile;
overflow-x: scroll;
tipo scroll-snap: x obbligatorio;
}
sezione {
flessibile: nessuno;
display: flessibile;
allinea-elementi: centro;
giustifica-contenuto: centro;
dimensione del carattere: 15em;
font-family: Arial, Helvetica, sans-serif;
scroll-snap-align: fine;
larghezza: 100%;
altezza: 100%;
}

Produzione:

Lo snap di scorrimento CSS ha proprietà padre e figlio. La proprietà padre o contenitore decide la direzione dello scorrimento (x o y) e il comportamento dello snap di scorrimento. Ad esempio, puoi impostare scroll-snap-type: x obbligatorio. Concederà all'utente il controllo per decidere il punto di scorrimento senza considerare la posizione di scorrimento.

D'altra parte, il tipo scroll-snap: y proximity funziona solo quando il visitatore del sito è più vicino al punto di scorrimento.

La proprietà figlio è scroll-snap-align per allineare gli elementi durante lo snap di scorrimento CSS. Immette i valori di inizio, fine e centro per allineare gli elementi di conseguenza.

5. Query sulle funzionalità

Le query sulle funzionalità vengono utilizzate per gestire il normale degrado. Ad esempio, le griglie CSS sono piuttosto popolari al giorno d'oggi. Tuttavia, vale la pena ricordare che i browser più vecchi non possono eseguirne il rendering.

Qui, le query sulle funzionalità controllano se quel particolare browser supporta o meno una proprietà specifica e fornisce un sistema di supporto che incoraggia il riferimento a una proprietà CSS solo se è supportato su quella browser. In caso contrario, viene considerato il valore predefinito. In questo caso, puoi posizionare blocchi anziché griglie per qualsiasi fallback previsto.

Ecco come puoi implementare le query sulle funzionalità:

@supports (visibilità del contenuto: auto) {
corpo{
sfondo: verde acqua;
larghezza: 100%;
altezza: 100%;
}
}

Pertanto, solo i browser che visualizzano le proprietà di visibilità del contenuto avranno il colore di sfondo verde acqua; in caso contrario, verrebbe considerato il valore predefinito. Nota che @ è simile a @media delle query multimediali, in cui avresti dovuto impostare una larghezza massima o una larghezza minima per aggiustamenti di fortuna. Semplifica il ricordo delle query di funzionalità @supports.

Leggi di più: Come utilizzare le query multimediali in HTML e CSS

Compatibilità del browser: tutti i principali browser, inclusi Chrome, Edge e Firefox.

6. Proprietà di visibilità del contenuto

Il rendering veloce funge da spina dorsale per un sito Web interattivo per l'utente. Con la crescente popolarità dei dispositivi mobili, le prestazioni di rendering di un sito Web fungono da collo di bottiglia per ottenere un sito Web accattivante.

Qui, la proprietà di visibilità del contenuto gioca un ruolo cruciale. Perché, per impostazione predefinita, i browser visualizzano tutti gli elementi del sito Web contemporaneamente. Riduce il tempo di caricamento e le prestazioni complessive del sito, soprattutto se il tuo sito Web ha molte animazioni pesanti. D'altra parte, la proprietà di visibilità del contenuto esegue il rendering solo degli elementi del riquadro di visualizzazione e mostra altri elementi mentre si scorre la pagina.

#principale {
contenuto-visibilità: auto;
/* contiene-dimensione-intrinseca: 0 500px; */
}

La proprietà di visibilità del contenuto immette tre valori. content-visibility: visibile non mostra alcun effetto mentre content-visibility: nascosto è simile a display: nessuno dove l'elemento salta i contenuti inaccessibili. La visibilità del contenuto: automaticamente salta il contenuto irrilevante, ma è disponibile come pagina normale per le funzionalità dell'agente utente.

Misuriamo il potere della visibilità dei contenuti. Ecco il risultato:

7. Transizione, trasformazione e animazione

In CSS, abbiamo due modi per applicare l'animazione. La transizione viene utilizzata per apportare modifiche graduali alle proprietà visive degli elementi. D'altra parte, senza transizione, la trasformazione manipolerebbe bruscamente da uno stato all'altro.

Le animazioni vengono utilizzate con @keyframes che impostano gli stili in diversi punti durante la durata dell'animazione. La cosa interessante è che I @keyframes definiscono quando avverrà la modifica, la trasformazione e l'animazione prendono il controllo del cambiamento e la transizione si occupa di come avverrà il cambiamento (ad esempio, effetti al passaggio del mouse).

.bambino {
sfondo: verde acqua;
altezza: 150px;
larghezza: 150px;
colore bianco;
transizione: trasforma 0.2s easy-in-out;
animazione: myAnimation 2s infinita;
}
.child: hover {
trasforma: scala (2, 2) ruota (45 gradi);
}
@keyframes myAnimation {
0% {
}
50% {
trasformazione: translateX(400px)
}
100% {
trasforma: translateX(0px)
}
}

Compatibilità del browser: tutti i principali browser, inclusi Chrome, Edge e Firefox.

Avvolgendo

Il markup del foglio di stile a cascata è in continua evoluzione con funzionalità migliori. Finora, sei venuto a conoscenza di queste sette fantastiche funzionalità che includono la griglia secondaria CSS, la proprietà delle proporzioni, spazi vuoti flexbox, snap di scorrimento, query di funzionalità, proprietà di visibilità del contenuto, transizione, trasformazione e animazione.

Alla fine della giornata, devi assicurarti quali funzionalità stanno semplificando lo stile del tuo sito web.

7 nuove funzionalità da tenere d'occhio in Bootstrap 5

Se stai sviluppando siti Web e app utilizzando il framework CSS Bootstrap, ecco le novità di Bootstrap 5.

Leggi Avanti

Circa l'autore