8 caratteristiche CSS all'avanguardia (e come usarli)

CSS è in continua evoluzione e una serie di nuove eccitanti funzionalità è stata aggiunta per rendere la specifica un'arma ancora più potente nel set di strumenti di un web designer.

La griglia CSS prende i layout a nuovi livelli non visti prima, le proprietà personalizzate introducono il concetto di variabili mentre le query funzionalità check per il supporto del browser. Le query dei supporti spostano un livello con nuove proprietà di accessibilità, i caratteri variabili offrono la massima creatività con il codice minimo Bloat mentre lo scorrimento che lo scatto elimina la necessità di JavaScript. Dai un'occhiata al nostro fresco Animazione CSS. Esempi per vedere cosa puoi creare. O, per costruire un sito senza codice provali costruttori di siti Web .

Per coloro che cercano di ottenere creatività ci sono forme CSS per layout unici e una serie di modalità di miscelazione e filtri per introdurre effetti di progettazione di stile Photoshop. Continua a leggere per scoprire come puoi usare queste funzionalità Must-Try nelle tue ultime build. Ma ricorda, un sito web complesso significa che hai bisogno di un web hosting Servizio in grado di supportare le tue esigenze.

01. Proprietà personalizzate

Se hai usato un preprocessore come Sass, o infatti un linguaggio di programmazione come JavaScript, non avrai senza dubbio familiarità con il concetto di variabili - valori definiti per il riutilizzo durante il tuo codice. Le proprietà personalizzate ci consentono di farlo nel nostro CSS, senza la necessità di preprocessori. Le variabili possono essere impostate al: livello di root (creando variabili globali) o scopate all'interno di un selettore. Possono quindi essere chiamati usando la sintassi VAR (-> - MyvariableName). Ad esempio, potremmo impostare una variabile chiamata --colore primario come questo:

 / * sull'elemento radice (un globale
variabile) * /
: root {
- -PrimaryColor: # F45942;
}
/ * Accidenti a un selettore * /
.my-componente {
- -primarycolor: # 4171f4;
} 

Ora possiamo usare quella variabile come valore di proprietà:

 H1 {
Colore: VAR (- -PrimaryColor);
} 

Le proprietà personalizzate sono ereditate, che hanno alcune implicazioni molto utili. Uno di questi è tematico. Prendi l'esempio sopra: possiamo definire una variabile globale (# F45942 - un rosso arancione brillante) per --colore primario A livello di radice, quindi ogni istanza in cui utilizziamo questa variabile, il valore sarà rosso. Ma stiamo anche ridefinire la stessa variabile all'interno di un selettore, con un valore diverso (# 4171F4 - medio blu). Quindi per ogni istanza in cui usiamo il --colore primario Variabile all'interno di quel selettore, il valore calcolato sarà blu.

Impostare i default

L'ambito delle variabili è una grande caratteristica, ma uno che potrebbe sorprenderti a volte! Se si tenta di utilizzare una variabile che non è ancora definita, il valore risultante ricadrà al valore predefinito del browser o un valore ereditato, piuttosto che una variabile definita più avanti sulla cascata. In alcuni casi, potrebbe essere opportuno impostare un valore predefinito:

 H1 {
Colore: VAR (- -PrimaryColor, Blu);
} 

In che modo le proprietà personalizzate differiscono dalle variabili del preprocessore?

Le proprietà personalizzate differiscono dalle variabili di preprocessore in alcuni modi chiave. Le variabili di preprocessore sono compilate prima che il codice venga inviato al browser. Il browser non vede mai che un valore è una variabile, vede solo il risultato finale. Le proprietà personalizzate sono calcolate nel browser. Puoi ispezionarle in moderni strumenti per sviluppatori, modificare la variabile e vedere il valore risolto. Sono variabili dinamiche, il che significa che i loro valori possono essere modificati all'interno di CSS o in fase di esecuzione con JavaScript.

A differenza delle variabili del preprocessore, le proprietà personalizzate non possono essere utilizzate all'interno dei nomi dei selettori, dei tasti delle proprietà o delle dichiarazioni di query multimediale - solo valori di proprietà CSS. I preprocessori CSS hanno ancora un sacco di benefici, quindi potremmo vederli incollando per un po 'più a lungo, ma probabilmente saranno usati più spesso in combinazione con proprietà personalizzate.

02. Query delle caratteristiche

Le query caratteristiche sono un modo per verificare se un browser supporta una particolare combinazione di valore di proprietà CSS all'interno del file CSS. Rimuovono virtualmente la necessità di librerie di rilevamento delle funzionalità come ModernizR. La sintassi è simile a una query multimediale: utilizzi la regola AT @supports. , seguito dalla tua coppia di valori di proprietà, avvolgendo il codice da eseguire se il browser soddisfa le condizioni specificate.

Le query delle caratteristiche sono ben supportate in browser moderni, ma sono relativamente nuovi, e uno "Gotcha" è che alcuni browser che potresti voler testare per il supporto potrebbero non supportare le query di funzionalità stesse. Spesso il modo migliore per gestire questo è quello di fornire prima stili di fallback (al di fuori della query caratteristica), quindi avvolgere i miglioramenti per supportare i browser all'interno del @supports. regola.

Siate consapevoli, le query funzionali devono essere utilizzate solo con parsimonia. Una delle grandi caratteristiche di CSS è che i browser ignoreranno semplicemente qualsiasi proprietà o valori che non capiscono. È meglio utilizzare le query di funzionalità solo quando non lo farebbe causare un bug visivo, altrimenti potresti crearli per un sacco di lavoro extra.

Come usare le query caratteristiche

Per verificare il supporto di un singolo valore di proprietà, possiamo fornire prima il fallback. In questo esempio, stiamo fornendo un fallback FlexBox per i browser che non supportano layout della griglia.

 .my-componente {
display: griglia;
}
@supports (display: griglia) {
.my-componente {
Display: flex;
}
} 

03. QUERNE MEDIA

Probabilmente sarai abituato a utilizzare le query dei supporti per rilevare la larghezza e l'altezza del viewport e il tipo di supporto (più comunemente schermo o stampa). La specifica delle query di livello 5 Livello 5 ci porta alcune nuove funzionalità dei supporti per test (facoltativamente) per, che sono già supportati in alcuni browser. Questi offrono alcuni grandi vantaggi per l'accessibilità.

Gli utenti con disturbi vestibolari e coloro che soffrono di malattie del movimento, potrebbero non apprezzare le pagine Web con un sacco di movimento, come animazioni e effetti di scorrimento parallasse. Utilizzando la query dei supporti del movimento ridotto preferita, possiamo fornire agli utenti di disattivare un'alternativa ridotta.

 .MY-ELEMENT {
Animazione: Shake 500ms Facile-in-out 5;
}
@media (preferisce-motion ridotto: riduzione) {
.MY-ELEMENT {
Animazione: nessuna;
}
} 

Sta diventando sempre più popolare per i siti Web per fornire un tema oscuro alternativo. Preferisce-Colors-Schema ci consente di interrogare se l'utente ha impostato una preferenza a livello di sistema (utilizzando le parole chiave scure, luce o no-preference) e mostrano di conseguenza la combinazione di colori appropriata.

 / * QUARRIE MEDIA 02 * /
corpo {
Sfondo: sfumatura lineare (a
in basso, # B5FAFF, # FFE2B4);
}
@media (preferisce-schema a colori: Dark) {
corpo {
colore bianco;
Sfondo: sfumatura lineare (a
fondo, # 0c1338, # 3e3599);
}
} 

04. Font variabili

In generale, se vogliamo includere un numero di diversi facce di font della stessa famiglia nella nostra pagina web, dovremmo caricare lo stesso numero di file di carattere. Più file dei caratteri caricati, più è il peso aggiuntivo alla tua pagina, con un impatto sulle prestazioni - quindi di solito è saggio caricare un massimo di tre o quattro file di caratteri (a seconda del budget di prestazioni).

I font variabili cambiano tutto ciò. Ci consentono di caricare un singolo file di font per un'intera famiglia di font. Sebbene questo file di solito sia più grande di un singolo font, se si desidera sfruttare i diversi pesi e stili, allora un font variabile è la soluzione più performante. Se hai comprato una famiglia di font intera, ricorda di abbassarla in sicurezza deposito cloud. Quindi non perdi i tuoi file!

Asse di variazione

Non solo, ma con font variabili, non siamo limitati a un piccolo sottoinsieme di pesi dei font. Quando si lavora con i caratteri regolari, i pesi dei font disponibili sono riportati in multipli di 100. In genere, 400 potrebbe essere il peso regolare, 300 il peso leggero e 700 il peso audace - con diverse famiglie che forniscono più pesi o meno. I font variabili hanno un asse di variazione, che ci fornisce una gamma di valori per proprietà come il peso del carattere. Un font potrebbe avere un asse di 1-900, che ci fornirebbe accesso a 900 pesi diversi!

L'asse della variazione non è solo limitato al peso. I caratteri variabili possono avere assi diversi per assi X-altezza, inclinazione, lunghezza del serif e contrasto (per scegliere solo alcuni esempi) - il che significa che un singolo file di carattere potrebbe darci l'accesso a centinaia, o anche migliaia di varianti! Potremmo persino animare queste proprietà, permettendoci di raggiungere alcuni effetti davvero interessanti. Mandy Michael ( https://codepen.io/mandymichael. ) ha un intero carico di demo creative che testano davvero i limiti.

Il supporto del browser per i font variabili è abbastanza buono, e molti fonderie dei font stanno sviluppando attivamente nuovi caratteri variabili che è possibile iniziare a utilizzare ora - anche se questi spesso vengono a un premio, in particolare per le famiglie di carattere più completamente in primo piano. Se vuoi solo iniziare a giocare con i font variabili per vedere cosa possono fare, ci sono un certo numero di siti di giochi di font variabili:

Siate consapevoli, se si desidera utilizzare i caratteri variabili in questo momento è necessario assicurarsi di utilizzare un sistema operativo aggiornato, non funzionerà su OSS più anziani.

Font-Variation-Impostazioni

Mentre possiamo alterare il peso del carattere abbastanza facilmente con il font-pesi Proprietà CSS, Font-Variation-Impostazioni è una nuova proprietà che ci dà pieno accesso ai diversi assi di variazione di un font. Questi includono entrambi gli assi registrati e gli assi personalizzati.

Assi registrati

Ci sono cinque diversi assi registrati, che corrispondono a varie proprietà CSS. Ognuno di questi ha ciò che è noto come un "tag Axis". Gli assi registrati sono: tornino (peso del font), wdth. (Stretch Font), slong (stile font: obliquo / angolo), italiano (stile font: italico), opsz. (dimensionamento dei font-ottico). Possiamo accedere a questi assi dalla proprietà CSS, o con Font-Variation-Impostazioni .

Questi assi non sono necessariamente tutti inclusi in ogni font variabile (alcuni possono avere solo uno o due assi), ma è probabile che siano i più comuni.

Assi personalizzati

Gli assi personalizzati sono assi su misura inclusi dal designer del font e potrebbe essere tutto ciò che può essere tutto. Potrebbero includere (ad esempio) lunghezza del serif, altezza X, anche qualcosa di più creativo (e meno tipograficamente tipico), come la rotazione.

Entrambi i tipi di assi devono essere espressi come tag a quattro caratteri. Gli assi registrati devono essere in minuscolo, mentre gli assi personalizzati sono maiuscoli. Entrambi possono essere combinati nella proprietà delle impostazioni di font-variazione. Font-Variation-Impostazioni è animata, che può consentire alcuni effetti UI molto interessanti! Alcuni esperimenti molto interessanti sono stati prodotti anche utilizzando i font di icone.

05. Effetti grafici

Se hai familiarità con gli strumenti di design come Photoshop e illustrator, potresti essere a conoscenza delle modalità di miscelazione e del modo in cui possono essere utilizzate per produrre effetti diversi su immagini. Il modo in cui il lavoro delle modalità Blend è quello di fondere due o più strati insieme usando le formule matematiche per calcolare un valore risultante per ogni pixel. I livelli potrebbero essere qualsiasi cosa - immagini, gradienti o colori piatti. Alcune modalità di fusione producono un risultato oscuro (ad esempio moltiplicati, che moltiplica i valori dei pixel dei livelli), alcuni più leggeri (E.G. Schermata e sovrapposizione). Non abbiamo bisogno di capire la matematica per usarle, comunque. Giocare con diverse modalità di miscelazione può darci una buona sensazione per la quale di loro producono i risultati desiderati se combinati con diversi livelli.

Con le proprietà CSS Modalità miscela e Modalità di fusione di sfondo , possiamo ottenere effetti di immagine simili a Photoshop nel browser. Entrambe le proprietà prendono gli stessi valori, ma funzionano leggermente in modo diverso.

Modalità di fusione di sfondo

Modalità di fusione di sfondo Unisce insieme gli strati di sfondo dell'elemento che stiamo prendendo di mira. Il nostro elemento potrebbe avere immagini di sottofondo, colori e gradienti, e sarebbero stati tutti miscelati l'uno con l'altro senza influenzare il contenuto in primo piano. Possiamo specificare più valori per Modalità di fusione di sfondo , uno per ogni strato di sfondo.

 .MY-ELEMENT {
Sfondo: URL (#Myurl),
Linear-Gradient (45DEG, RGBA (65, 68,
244, 1), RGBA (203, 66, 244, 0,5)),
RGBA (244, 65, 106, 1);
Dimensioni di sfondo: copertina;
Sfondo-Blend-mode: schermo,
moltiplicare;
} 

Modalità miscela

Modalità miscela colpisce come l'elemento si fonde con il suo genitore e i suoi fratelli, compreso qualsiasi tenore di fondo e contenuto di sfondo e pseudo-elementi. Alcuni interessanti effetti creativi possono essere raggiunti miscelando Pseudo-Elements sovrapposti (:: prima e :: dopo).

 .MY-ELEMENT {
Sfondo: RGB (244, 65, 106);
MIX-BLED-MODE: Moltiply;
} 

Filtri CSS.

I filtri CSS possono anche essere utilizzati per creare effetti visivi sorprendenti, utilizzando il filtro Valori della funzione di proprietà e filtro. A differenza delle modalità di miscelazione, applicano un effetto grafico direttamente all'elemento che stanno prendendo di mira, e un elemento può avere più filtri applicati.

Converti in scala di grigi.

Possiamo manipolare i colori di un elemento con un maggiore grado di controllo che affidarsi alle modalità di miscelazione. I filtri possono convertire un'immagine in scala di grigi, regolare la luminosità, il contrasto e la saturazione, sfocare un elemento o aggiungere un'ombra di caduta. Possono anche essere animati anche animati e sembrano fantastici con effetti motivi.

Filtri SVG.

I filtri CSS sono infatti versioni semplificate dei filtri SVG. Il CSS. filtro La proprietà prende anche un URL () funzione, consentendoci di passare in un URL a un filtro SVG. I filtri SVG sono estremamente potenti e consentono alcuni incredibili effetti dell'immagine - ma sono anche molto più complicati delle funzioni del filtro CSS! Sara Soueidan ha una meravigliosa serie di articoli su Codrops se sei interessato a tuffarti a codificare i tuoi filtri SVG personalizzati. Dai un'occhiata all'articolo a https://tympanus.net/codrrops/2019/01/15/svg-filters-101/

Clipping e mascheramento: oltre i rettangoli

Siamo abituati a trattare in scatole sul web, ma non tutto deve essere rettangolare! La clipping e il mascheramento sono due lati della stessa moneta, e sono diversi modi per nascondere e mostrare diverse parti di un elemento in modo che lo sfondo mostri attraverso. Questo ci dà il potere di introdurre forme interessanti e creative ai nostri progetti.

Clip-path

Il clip-path () La proprietà ci consente di "tagliare" un elemento definendo un percorso. Ci vuole un numero di funzioni di forma di base, Inset (), Circle (), Ellisse () o Polygon () , che ci consente di creare forme di ritaglio più complesse usando coppie di coordinati XY per definire il percorso. In alternativa, possiamo anche passare in un percorso SVG usando il sentiero() funzione o usando URL () per fornire un ID percorso SVG.

Non all'interno del percorso

Ritagliare un elemento clip tutto al di fuori del percorso che definisci, ma l'elemento stesso è ancora un rettangolo. Se si dispone di contenuti che si estendono dal limite del percorso del clip, anche quello sarà ritagliato - non avvolgerà la forma.

Maschera-immagine

maschera-immagine Ci consente di mostrare e nascondere parti dell'immagine utilizzando un'immagine (SVG o PNG trasparente) o gradiente come una maschera. a differenza di clip-path , possiamo aggiungere texture alle nostre immagini con mascheratura, poiché la sorgente della maschera non deve essere un percorso - consente di gradi di trasparenza.

06. Forme CSS.

La specifica delle forme CSS ci consente di avvolgere il testo attorno a forme geometriche galleggianti, creando alcuni layout interessanti e simili alle riviste. Questo è reso possibile usando il forma di forma proprietà. Simile a clip-path , possiamo dare a questa proprietà una funzione di forma di base Circle (), Ellisse (), Inset (), Polygon () , o un URL a un percorso svg, e infatti i due lavori in armonia molto bene! forma di forma Avvolgerà il nostro testo in modo efficace, ma non influenzerà l'elemento galleggiante. Se vogliamo che il testo sembri sembrare che si avvolge l'immagine o l'oggetto galleggiante, possiamo usare lo stesso valore per clip-path . Uso margine di formatura Per aggiungere spazi bianchi tra il percorso di forma e il contenuto che lo avvolge. Dare un'occhiata al Stuff & amp; Senza senso Sito per vedere come viene utilizzata le forme CSS per avvolgere il testo attorno a un'immagine centrale.

Firefox ha A. Editor del percorso formale all'interno del pannello Dev Tools, che è particolarmente utile per lavorare con forme complesse. Tuttavia, utilizzare con cautela. Avvolgere il bordo anteriore di un paragrafo del testo è ottimo per l'effetto artistico, ma non è sempre eccezionale per l'esperienza dell'utente. Le forme frastagliate complesse possono rendere più difficili blocchi di testo da leggere. Per contenuti importanti, potresti voler sterzare.

07. Scroll Snaping.

Molti siti web si avvantaggiano delle librerie JavaScript per fornire un'esperienza di scorrimento simile a app slick e nativo, in cui il contenuto "snap" a punti mentre gli utenti scorrono. Ora, con le specifiche Snap Scroll, possiamo farlo direttamente nel nostro file CSS - c'è poco bisogno di importare nei moduli JS pesanti per gonfiare la tua pagina!

Per implementare lo snap di scorrimento, abbiamo bisogno di un elemento per fungere da contenitore di scorrimento. I bambini diretti del contenitore dettano i punti che verranno spezzati e possono essere allineati in vari modi all'interno della zona a scatto.

Scroll Snapping può essere ancora più efficace se combinato con un altro nuovo valore di proprietà CSS - Posizione: appiccicoso . Questo valore di posizione "attacca" un elemento in una posizione specificata durante lo scorrimento all'interno del suo contenitore - un altro comportamento che è stato precedentemente possibile solo con JavaScript. Dai un'occhiata a questa scorrimento Snap con la posizione: Esempio di appiccicoso e intersezionebserver .

08. Griglia e layout CSS

Gli sviluppatori di front-end hanno hackerato il layout con qualsiasi strumento disponibile per l'uso al momento - più recentemente Flexbox, che molti sistemi di griglia moderni utilizzano. Ma FlexBox non è mai stato progettato per costruire griglie rigorose - il suo scopo è flessibilità!

La griglia CSS è la prima specifica progettata per il layout bidimensionale, consentendoci il controllo completo sulla creazione di un layout e posizionando gli elementi sia sulla riga che sull'asse della colonna. Costruire un layout reattivo con la griglia non richiede calc () o hacking in giro con margini negativi. L'arma segreta è l'unità FR - una nuova unità esclusiva per la griglia. L'unità FR Taglie le tracce di griglia (righe e colonne) come proporzione dello spazio disponibile. Tiene in considerazione qualsiasi traccia fissa, grondaie e contenuti, quindi distribuisce di conseguenza lo spazio rimanente. Jen Simmons ha coniato il termine "web design intrinseco" per descrivere la nuova era del layout web in cui la griglia si è in.

Come usare la griglia CSS

La griglia richiede un elemento con il valore della proprietà del display impostato su Grid, per fungere da contenitore della griglia. I bambini diretti del contenitore della griglia sono gli elementi che possono essere posizionati sulla griglia. Usiamo le proprietà grid-modelli-righe e Grid-modelli-colonne Per definire le tracce (righe e colonne) della griglia, e Colonna-Gap. e Gap di fila Per definire le grondaie (gli spazi tra le tracce).

 .GRID {
display: griglia;
Grid-modelli-colonne: ripetizione (4, 1FR);
grid-modelli-righe: ripetizione (4, 200px);
Gap: 20px;
} 

Stiamo usando ripetere() Funzione per mantenere il codice più conciso, come alternativa al longhand (ad esempio Grid-modelli-colonne: 1FR 1FR 1FR 1FR ). Questo esempio usa anche la stenografia Gap. per Gap di fila e Colonna-Gap. .

Il codice sopra ci dà tracce di quattro fila, ogni 100 px High e quattro tracce di colonna che ciascuna riempie una parte uguale dello spazio disponibile, utilizzando l'unità FR.

Vale la pena notare che questo non è l'unico modo per creare tracce di griglia. Le tracce implicite possono anche essere create collocando gli articoli della griglia. È utile leggere un po 'di questo se stai usando la griglia, come paga per ottenere una comprensione più profonda di come la griglia si comporta in condizioni diverse e può rendere la codifica molto più semplice.

Possiamo posizionare oggetti sulla griglia facendo riferimento ai numeri della riga della griglia, che sono linee numeriche che si siedono tra ogni traccia. Qui, stiamo usando la stenografia griglia-colonna e grid-row. per Grid-Column-Start , griglia-colonne , Grid-Row-Start e griglia-righe . Questi dicono al browser a quale linea il nostro articolo dovrebbe iniziare e terminare su ciascun asse.

 .ITEM {
Grid-colonna: 1/4;
Grid-Row: 2;
} 

La griglia ci fornisce molti modi diversi per posizionare gli articoli: potremmo invece nominare le nostre linee griglia:

 .GRID {
display: griglia;
Grid-Template-Columns: [Image-Start] 1FR
 1FR 1FR [IMAGE-START] 1FR;
Grid-modelli-righe: 200px [Image-Start]
 200px 200px [immagine-end] 200px;
Gap: 20px;
} 

In alternativa, The. Grid-Template-Area La proprietà ci consente di "disegnare" un layout della griglia con il testo.

.grid {
display: griglia;
Grid-modelli-colonne: ripetizione (4, 1FR);
grid-modelli-righe: ripetizione (4, 200px);
Gap: 20 px;
Grid-modelli-aree:
'....
'Immagine dell'immagine dell'immagine.'
'Immagine dell'immagine dell'immagine.'
'.... ';
} 

Usando uno di questi metodi, possiamo semplicemente fare riferimento alla corrispondente area della griglia quando si effettua un elemento griglia:

 .Immagine {
Griglia-area: immagine;
} 

Questo articolo è stato originariamente pubblicato su Creative Web Design Magazine Web designer . Acquista il problema 290 ora.

• 10 migliori quadri CSS nel 2019
• Come aggiungere animazione a svg con css
• 52 strumenti di web design per aiutarti a lavorare in modo più intelligente nel 2019