5 Hot New CSS Caratteristiche e come usarle

In questo articolo esploreremo cinque nuove proprietà che arrivano a CSS, dai un'occhiata a ciò che fanno e come metterli in uso pratico nei tuoi progetti. Stiamo andando a creare un Layout del sito web Per una pagina che include un newsfeed e una piccola casella di chat nell'angolo. Per altri trucchi CSS, dai un'occhiata al nostro articolo esplorando diversi Esempi di animazione CSS. . Se stai creando un sito completamente nuovo, prova a Builder del sito web E assicurati di navigare web hosting Opzioni qui.

Per questo tutorial avrai bisogno di Chrome 65+ o Firefox 59+. Dare un'occhiata al Accompagnamento GitHub Repo. per il codice passo-passo. Sfremeremo le seguenti funzionalità per creare un'esperienza migliore e lavorare su alcuni problemi. E se stai progettando insieme a una squadra, utilizza il meglio deposito cloud. per mantenere le cose coesive.

Modulo di visualizzazione CSS (Livello 3)

• display: contenuti;
• Stato W3C. - Drafting
• Supporto del browser

Modulo regole condizionale CSS (Livello 3)

• @supporto(...) {...}
• Stato W3C. - raccomandazione candidata
• Ulteriore lettura: Documenti Web MDN.

Modulo comportamento di overscroll CSS (Livello 1)

• comportamento di overscroll: contenere;
• Stato W3C. - non ufficiale.
• Supporto del browser
• Ulteriore lettura: Prendi il controllo del tuo rotolo

Modulo dei selettori CSS (Livello 4)

• : messa a fuoco: dentro
• Stato W3C. - Drafting
• Supporto del browser
• Ulteriore lettura: MDN Web Docs : messa a fuoco: dentro , : presentato segnaposto

Il modulo di contenimento CSS (livello 1)

• Contenere: vernice;
• Stato W3C. - raccomandazione candidata
• Supporto del browser
• Ulteriore lettura: Contenimento CSS in Chrome 52

01. Impostare l'HTML per il newsfeed

Innanzitutto abbiamo bisogno di creare un markup super semplice e ripetendo per il nostro giornalista. Creiamo a .contenitore Div con una lista non ordinata all'interno. Dai il & lt; UL & GT; la classe di .alimentazione , quindi creare 10 elementi elenchi ciascuno contenente un div con il .carta Classe e la scheda di testo 1, carta 2 ecc.

Finalmente crei un altro Elenco-elemento. Tra 5 e 6 con una classe di .nidificato - Questo sarà utile in seguito - e aggiungi a & lt; UL & GT; Dentro con tre elementi dell'elenco utilizzando la scheda di testo A, carta B ecc.

& lt; corpo e GT;
 & lt; div class = "container" & gt;
 & lt; UL CLASSE = "Feed" & GT;
 & lt; li & gt; & lt; div class = "card" & gt; card 1 & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div class = "card" & gt; card 2 & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div class = "card" & gt; carta 3 & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div class = "card" & gt; carta 4 & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div class = "card" & gt; carta 5 & lt; / div & gt; & lt; / li & gt;
    & lt; li class = "nided" & gt;
 & lt; UL & GT;
 & lt; li & gt; & lt; div class = "card" & gt; card A & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div class = "card" & gt; carta B & Lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div class = "card" & gt; carta c & lt; / div & gt; & lt; / li & gt;
 & lt; / UL & GT;
 & lt; / li & gt;
 & lt; li & gt; & lt; div class = "card" & gt; carta 6 & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div class = "card" & gt; carta 7 & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div class = "card" & gt; carta 8 & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div class = "card" & gt; card 9 & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div class = "card" & gt; card 10 & lt; / div & gt; & lt; / li & gt;
 & lt; / UL & GT;
& lt; / div & gt;
& lt; / body & gt; 

02. Stile il newsfeed

Ora dobbiamo aggiungere alcuni stili rapidi in modo che questo inizia a sembrare più un newsfeed. Per prima cosa possiamo dare & lt; corpo e GT; un colore di sfondo grigio sottile. Quindi dai .contenitore una larghezza massima di 800 px e uso Margine: 0 Auto; per allinearlo.

Diamo anche .carta uno sfondo bianco, 10 px di imbottitura e margine e infine a min-altezza di 300 px - questo dovrebbe darci abbastanza per rendere scorlo la pagina. Infine, cospargeremo una magia flexbox sul .alimentazione Per rendere gli oggetti fluiscono bene, con due carte per riga.

 .Feed {
Display: flex;
Flex-wrap: wrap;
}
.Feed li {
Flex: 1 0 50%;
} 

03. Problemi di layout fissa

Se scorri l'elenco noterai che le nostre carte nell'elenco nidificato, la carta A - C, stanno causando alcuni problemi di layout. Idealmente vorremmo fluire con il resto delle carte, ma sono tutti bloccati insieme in un blocco. Il motivo per questo è che un contenitore Flex - che viene creato usando Display: flex. - fa solo i suoi figli immediati (cioè gli elementi dell'elenco) in articoli flessibili.

Ora, normalmente l'unico modo di aggiustare questo è cambiare il markup, ma facciamo finta di non avere quel lusso. Forse il markup del newsfeed è generato da uno script di terze parti o è il codice legacy che stai solo cercando di reskin. Quindi come possiamo risolvere questo?

Incontrare Display: contenuti . Questo piccolo liner è essenzialmente un elemento si comporta come se non fosse lì. Vedi ancora i discendenti dell'elemento ma l'elemento stesso non influisce sul layout.

Poiché stiamo fingendo che non possiamo cambiare il markup (solo per questo passaggio) possiamo essere un po 'intelligenti su questo e fare il .carta Elementi gli elementi Flex e ignorano quasi interamente il markup dell'elenco.

Prima rimuovi l'esistente .Feed Li. classe e quindi usare Display: contenuti per entrambi & lt; UL & GT; e & lt; li & gt; elementi:

 .Feed ul,
.Feed li {
display: contenuti;
} 

Ora dovresti vedere le carte che fluiscono in ordine, ma abbiamo perso il dimensionamento. Correggi che aggiungendo la proprietà flessibile al .carta anziché:

 .card {
Flex: 1 0 40%;
} 

Ta-da! Le nostre carte stanno ora usando le meraviglie di Flexbox come se il loro markup strutturale non ordinato non esistesse.

Come una nota laterale potresti chiedermi perché il BASE FLEX. Il valore è impostato sul 40%. Questo è perché il .carta La classe ha un margine, che non è incluso nel calcolo della larghezza come ci si aspetterebbe quando si utilizza Dimensionamento della scatola: Border-Box . Per ovviare a questo abbiamo solo bisogno di impostare il BASE FLEX. Abbastanza alto da attivare l'avvolgimento al punto necessario e flexbox riempirà automaticamente lo spazio rimanente.

04. Esplora le query delle caratteristiche

Sebbene Display: contenuti Fa esattamente ciò di cui abbiamo bisogno, è ancora solo a lavorare lo stato del progetto con W3C. E nel supporto Chrome arrivò solo nella versione 65 pubblicato nel marzo 2018. Incredibilmente Firefox ha avuto sostegno da aprile 2015!

Se disabilita lo stile in DevTools vedrai che i nostri cambiamenti hanno fatto un po 'di casino con il layout quando Display: contenuti non è applicato. Quindi cosa possiamo fare su questo? Tempo per la nostra prossima nuova funzionalità - query caratteristiche.

Questi funzionano come le query dei media, ma ti consentono di chiedere al browser - utilizzando solo CSS - se è supportata un'espressione di proprietà e valore. Se lo sono, gli stili contenuti all'interno della query saranno applicati. Ora, muoviamo il nostro Display: contenuti stili in una query delle caratteristiche.

 @supports (display: contenuto) {
.Feed ul,
.Feed li {
  display: contenuti;
}
.carta {
  Flex: 1 0 40%;
}
} 

05. Usa 'no' per un risultato più pulito

Normalmente in questo tipo di scenario progressivo di miglioramento avremmo usato la query per aggiungere i nuovi stili, ma dovrà anche disabilitare alcuni degli stili originali necessari per il layout di fallback.

Tuttavia potresti decidere che poiché il supporto per le query caratteristiche è abbastanza buono (se si ignora IE) in realtà desideri utilizzare la query delle funzionalità non operatore. Funziona come se ti aspetteresti, quindi possiamo riapplicare il nostro originale flettere Proprietà all'elenco-elementi quando Display: contenuti non è supportato:

 @Supports not (display: contenuto) {
.Feed li {
  Flex: 1 0 50%;
}
} 

Dentro il non Query possiamo aggiungere alcuni stili in modo che il .nidificato Gli articoli re-applicano fondamentalmente ciò che è stato ereditato usando Display: contenuti .

 ALIMENTARE LI.Nestato {
Base flessibile: 100%;
}
.Feed li.nestato ul {
 Display: flex;
 Flex-wrap: wrap;
} 

06. Prendendolo un ulteriore passo avanti

Puoi già vedere il potenziale delle query caratteristiche, ma la cosa davvero interessante è che puoi combinare espressioni utilizzando i tre operatori disponibili: e , o e non . Forse potremmo anche verificare Display: flex. Supporto e quindi aggiungere un fallback a galleggiante.

Non lo faremo qui, ma se fossimo avremmo modificato per la prima volta le due query caratteristiche come così:

 @supports (display: flex) e (display: contenuto) {
...
}
@supports (display: flex) e (non (visualizzazione: contenuto)) {
...
} 

Come bonus puoi anche testare il supporto delle proprietà personalizzate come questa:

 @supports (--foo: verde) {
...
} 

07. Aggiungi una casella di chat

Ora abbiamo un bellissimo giornalista in atto, aggiunci una piccola casella di chat che è fissata in basso a destra dello schermo. Avremo bisogno di un elenco di messaggi e un campo di testo per l'utente per inserire il proprio messaggio. Aggiungi questo blocco subito dopo l'apertura & lt; corpo e GT; etichetta:

 & lt; div class = "chat" & gt;
 & lt; div class = "messaggi" e gt;
 & lt; UL & GT;
& lt; li & gt; & lt; div class = "message" & gt; messaggio 1 & lt; / div & gt; & lt; / li & gt;
& lt; li & gt; & lt; div class = "message" & gt; messaggio 2 & lt; / div & gt; & lt; / li & gt;
& lt; li & gt; & lt; div class = "message" & gt; messaggio 3 & lt; / div & gt; & lt; / li & gt;
& lt; li & gt; & lt; div class = "messaggio" & gt; messaggio 4 & lt; / div & gt; & lt; / li & gt;
& lt; li & gt; & lt; div class = "message" & gt; messaggio 5 & lt; / div & gt; & lt; / li & gt;
& lt; li & gt; & lt; div class = "message" & gt; messaggio 6 & lt; / div & gt; & lt; / li & gt;
& lt; li & gt; & lt; div class = "message" & gt; messaggio 7 & lt; / div & gt; & lt; / li & gt;
& lt; li & gt; & lt; div class = "messaggio" & gt; messaggio 8 & lt; / div & gt; & lt; / li & gt;
& lt; li & gt; & lt; div class = "Message" & gt; messaggio 9 & lt; / div & gt; & lt; / li & gt;
& lt; li & gt; & lt; div class = "message" & gt; messaggio 10 & lt; / div & gt; & lt; / li & gt;
 & lt; / UL & GT;
 & lt; / div & gt;
 & lt; Input Type = "Testo" Class = "Input" & GT;
& lt; / div & gt; 

08. Stile la casella di chat

È ora di aggiungere rapidamente un po 'di styling quindi sembra mezzo decente.

 .Chat {
 Sfondo: #fff;
 Bordo: 10 px solido # 000;
 Fondo: 0;
 Dimensione del carattere: 10 px;
 Posizione: fissa;
 Destra: 0;
 Larghezza: 300 px;
 z-index: 10;
}
.Messaggi {
 Border-bottom: 5 px solido # 000;
 Overflow: Auto;
 Imbottitura: 10 px;
 altezza massima: 300 px;
}
.Messaggio {
 Sfondo: # 000;
 Border-Radius: 5 px;
 Colore: #FFFF;
 Margine: 0 20% 10 px 0;
 Imbottitura: 10 px;
}
.Messaggi Li: Ultimo-bambino .Message {
 Margin-Bottom: 0;
}
.input {
 Bordo: nessuno;
 blocco di visualizzazione;
 Imbottitura: 10 px;
 Larghezza: 100%;
} 

09. Catena di scorrimento

Spero che ora avrai una piccola casella di chat con un elenco scorrevole di messaggi seduti in cima al tuo newsfeed. Grande. Ma hai notato cosa succede quando scorri all'interno di un'area nidificata e raggiungi la fine della sua gamma scorrevole? Provalo. Scorri fino alla fine dei messaggi e vedrai la pagina stessa inizierà a scorrere invece. Questo è chiamato catena di scorrimento.

Non è un grosso problema nel nostro esempio, ma in alcuni casi potrebbe essere. Abbiamo dovuto lavorare attorno a questa funzione prima di creare aree scorrevoli all'interno di modali o menù di contesto.

La soluzione sporca è quella di impostare il & lt; corpo e GT; per Overflow: nascosto , Ma c'è una nuova, splendida nuova proprietà CSS che risolve tutto questo ed è un semplice unico rivestimento. Di Ciao a comportamento di overscroll . Ci sono tre valori possibili:

• auto - Il valore predefinito, che consente la catena di scorrimento
• contenere - Disabilita la catena di scorrimento
• nessuna - Disabilita la catena di scorrimento e altri effetti di overscroll (ad es. Gullbanding)

Possiamo usare la stenografia comportamento di overscroll o possiamo indirizzare una direzione specifica con overscroll-behavior-x (o -y. ). Leggiamolo al nostro .Messaggi classe:

. Messaggi {
...
overscroll-comportament-y: contiene;
...} 

Ora prova di nuovo lo scorrimento e vedrai che non colpisce più il rotolo della pagina quando raggiungi la fine del contenuto.

Questa proprietà è anche abbastanza utile se volevi implementare una funzionalità di aggiornamento pull-to-refresh nella tua PWA, ad esempio per aggiornare il newsfeed. Alcuni browser, come Chrome per Android, aggiungono automaticamente i propri e fino ad ora non c'è stato un modo semplice per disabilitarlo senza utilizzare JS per annullare gli eventi utilizzando i gestori non passivi di impatto sulle prestazioni.

Ora devi solo aggiungere comportamento di overscroll: contenere all'elemento contenente la vista, probabilmente & lt; corpo e GT; o & lt; html & gt; .

Vale la pena notare che questa proprietà non è uno standard W3C, piuttosto una proposta del Gruppo Community Incubator Web (WICG). Le proposte WICG popolari, stabili e mature sono considerate per la migrazione a un gruppo di lavoro W3C in una fase successiva.

10. Collapse la casella di chat quando non è in uso

Al momento la casella di chat prende un bel po 'di spazio, che a meno che non stiamo interagendo con esso è un po' distratto. Fortunatamente possiamo fare qualcosa su questo con una piccola magia CSS.

Ma prima di tutto dobbiamo modificare leggermente i nostri stili esistenti. Per impostazione predefinita, vogliamo che la casella di chat sia crollata, quindi abbiamo bisogno di ridurre il altezza massima Valore in. .Messaggi classe. Mentre siamo lì possiamo anche aggiungere una transizione al altezza massima proprietà:

. Messaggi {
 ...
 altezza massima: 25px;
Transizione: massima altezza 500ms; } 

Pagina successiva: Continua a esplorare nuove funzionalità CSS nei passaggi 11-20

• 1.
• 2.

Pagina corrente: Esplora 5 nuove funzionalità CSS: Passaggi 01-10