Introduzione alle funzioni matematiche CSS Livello 4

Le notazioni funzionali fanno parte del CSS Values ​​and Units Module, che è anche la sede di utili funzioni matematiche come Calc (), e dal livello 4 min () e max (). Queste potenti funzioni aprono porte incredibili per gli autori di CSS che richiedono abilità logiche matematiche all'interno dei CSS. In questo articolo parleremo Calc (), min () e max () e come tutti e tre possono essere utili nel tuo lavoro in questo momento. Iniziamo!

Cosa sono le notazioni funzionali di Heck?

Le notazioni funzionali sono una delle nove sezioni principali (la sezione otto per l'esattezza) del modulo Valori e unità CSS del W3C. A partire da Bozza dell'Editore di Livello 4, le Notazioni Funzionali ora contengono ulteriori sottosezioni come ginocchiera () che consente di commutare tra valori e attribuire riferimenti attraverso l'uso di attr (). C'è anche un'altra sottosezione interessante chiamata "Mathematical Expressions" che comprende le nostre amichevoli funzioni matematiche Calc (), min () e max (). 

Passiamo alla definizione del W3C per aiutarci a capire quali sono le Notazioni Funzionali:

"Una notazione funzionale è un tipo di valore componente che può rappresentare tipi più complessi o richiamare un'elaborazione speciale. La sintassi inizia con il nome della funzione immediatamente seguita da una parentesi di sinistra, seguita dall'argomento (s) della notazione seguita da una parentesi di destra. "

Nei termini di un laico stanno dicendo che è un "nome di funzione", come ad esempio calc, seguito da apertura ( e chiusura ) parentesi. Ma cosa c'è tra di loro?

Presentazione delle espressioni matematiche

Come accennato, "Espressioni Matematiche" è una sottosezione di "Notazioni Funzionali", ma cosa sono e cosa fanno? Di nuovo, passiamo al W3C, dove sono definiti come:

"Le funzioni matematiche, calc (), min () e max (), consentono espressioni matematiche con addizione (+), sottrazione (-), moltiplicazione (*) e divisione (/) da utilizzare come valori dei componenti."

Questo significa Calc (), min () e max () sono "funzioni matematiche" che consentono "espressioni" tra parentesi al fine di "calcolare valori". Ok, è chiaro ora. Il termine "espressioni" è solo un modo elegante per dire "la logica matematica è totalmente consentita tra parentesi".

Introdotto nel livello 4 è una definizione recentemente aggiornata per integrare ciò che sappiamo finora:

"I componenti di una funzione matematica possono essere valori letterali, altre funzioni matematiche o altre espressioni, come attr (), che valutano un tipo di argomento valido (come ).” 

Per chiarire ulteriormente, le "altre funzioni matematiche" a cui si fa riferimento qui sono Calc (), min () e max (), ma dichiarano anche che queste funzioni possono essere annidate l'una dentro l'altra. Potresti scrivere Calc (min ()), min (calc ()), Calc (max (min ())), Calc (min (attr ())) e così via. Tuttavia, il mio suggerimento è di fare del tuo meglio ed evitare il vortice di nidificazione, anche con la possibilità di farlo, come suggeriscono le specifiche.

Ora diciamo "ciao" ancora una volta a un paio di fantastiche funzioni matematiche che hanno quasi perso la possibilità di stringere la mano al CSS Working Group.

Ben tornato min () e max ()

Le funzioni min () e max () sono due funzioni matematiche che lasciano il segno, ma solo dopo che sono state quasi rimosse dai Bozze dell'Editore di Valori e Unità di Livello 4. Grazie a Lea Verou, i venti del cambiamento si sono fatti strada e non potrei essere più felice.

"Forse ora che Values ​​3 è andato a CR è tempo di riconsiderare l'aggiunta min () e max () di nuovo nei valori 4?

Gli autori stanno facendo hack estremamente strani con Calc () per emularli dentro dimensione del font e altezza della linea, che chiamano "serrature CSS". Se tu google Serrature CSS vedrai quanto diventeranno diffusi questi hack, indicando una chiara necessità dell'autore.

Inoltre, man mano che le variabili CSS diventano più ampiamente utilizzate, la necessità di min () e max () diventerà ancora più grande. Ricordo che alcuni dei problemi che ci hanno fatto abbandonare loro 6 anni fa possono ora essere risolti con il non valido al momento del valore calcolato concetto introdotto dalle variabili. "- Lea Verou

Dal suggerimento di Lea su GitHub, min () e max () sono stati ufficialmente inseriti nella bozza dell'Editor di CSS Livello 4 Valori e Unità inclusa una rapida adozione da parte di WebKit. Gli sviluppatori possono sperimentare ed esplorare personalmente l'utilizzo di WebKit Nightly (a partire dal 24/10/17). Ecco il singolo commit WebKit per gli strani curiosi in cui il supporto è stato magicamente concesso min () e max ().

A Cursory Glance at Clamp ()

Un altro intrigante gossip in quello stesso thread su GitHub iniziato da Lea Verou è stato il commento in cui Tab Atkins suggerisce un vero e proprio Clamp () funzione. Clamp () letteralmente "fisserebbe" un valore tra i valori limite.

"... sono d'accordo Clamp (), mentre tecnicamente superfluo, è utile abbastanza spesso che probabilmente merita di esistere. "

Oh mio! Questo sarebbe piuttosto l'aggiunta alle espressioni matematiche. Una funzione come Clamp () è una vittoria definitiva per i bisogni di risposta di oggi e sarebbe sicuramente un amico benvenuto nella lingua.

morsetto (minN, midN, maxN)

Le discussioni in corso ruotano attorno a questo tipo di sintassi sopra e mi sembra di essere uno che è d'accordo con il suggerimento; ha senso e legge in modo logico. Mi chiedo solo che cosa accadrà all'utilizzo di min () e max () Se Clamp () fa davvero una apparizione in futuro.

Con il nostro chiacchierato raffreddato ad acqua, ci concentriamo sulle funzioni matematiche attuali che siamo venuti qui per discutere; Calc (), min () e max ().

Ora vieni Calc ()

Questa è una delle mie funzioni matematiche preferite per abbellire i CSS e può fare ogni sorta di magia. Anche la sintassi non è troppo approssimativa, una volta che ci si approva e il supporto è stellare.

.my-element width: calc (50% - 10rem); 

In questo esempio sopra abbiamo il nome della funzione (calc) seguito dalle nostre parentesi che contengono "espressioni", o in altre parole ... logica matematica.

"La funzione calc () consente espressioni matematiche con addizione (+), sottrazione (-), moltiplicazione (*) e divisione (/) da utilizzare come valori dei componenti." - W3C

Di nuovo, questo è parlare per dire "puoi fare matematica tra parentesi".

Per quanto riguarda le espressioni, gli autori possono trasmettere valori generici come 50%, 2em, 40, e può usare Calc () dovunque , , , , , , o  i valori sono ammessi Le mie unità preferite da usare ed esaminare in natura sono unità viewport (vh,vw, Vmin, vmax). Questi sono i valori delle dimensioni dello schermo che sono particolarmente utili con la tipografia e il layout che stiamo per vedere.

Calc () Nella natura selvaggia

L'esempio sopra è solo un modo per gestire la tipografia reattiva. Utilizzando una combinazione di query multimediali, Sass, Calc () e le unità viewport, Mike ci dimostra come la tipografia reattiva può scalare perfettamente tra valori di pixel specifici.

Ecco un'altra dimostrazione di tipografia a bocca aperta usando Calc () e le unità viewport di Tim Brown. Questa demo è stata utilizzata per il suo articolo che trattava di CSS Locks che ti incoraggio a leggere se la tipografia è qualcosa che ti interessa.

Unità Viewport e Calc () può anche aiutare a creare alcuni dei nostri modelli di layout preferiti. Nella demo qui sopra, Calc () viene utilizzato per sottrarre l'altezza del piè di pagina dall'altezza del viewport (vh). Una soluzione intelligente di Chris Coyier per il nostro vecchio amico "The Sticky Footer", così spesso richiesto. Questa demo funziona anche in combinazione con le variabili CSS.

Ci sono certamente altri casi quando si tratta di applicazioni e stati dinamici in questa demo di David Khourshid. David usa Calc () per sfondi, valori di offset, trasformazioni, filtri, opacità e persino larghezza. Questa è anche una grande demo per coloro che cercano di immergersi in React insieme alle variabili CSS.

Ora diamo un'occhiata a due funzioni matematiche aggiuntive di cui ti divertirai, attualmente conosciute come min () e max ().

min () e max (): Definizione dei vincoli

Come accennato in precedenza, queste funzioni sono ancora nella loro infanzia, quindi le dimostrazioni che dimostrano che i casi d'uso sono desolanti, ma non lasciatevi spaventare dallo sperimentare. Per indagare min () e max () dovrai scaricare WebKit ogni notte. Una volta scaricato, sei libero di aprire Nightly (icona nera) e andare al lavoro.

min (espressione, [espressione]) max (espressione, [espressione])

Ricordi quando abbiamo appreso quali erano le espressioni? Era solo un modo elegante per dire "logica matematica". Per esempio:

min (1 * 10vw, 2 / 50vw) max (1 * 10vw, 2 / 50vw)

Ogni espressione è separata da una virgola con un'espressione aggiuntiva che segue. Possiamo anche passare alle specifiche che affermano esplicitamente questa stessa regola:

"Il valore calcolato di una funzione min () o max () è l'elenco di espressioni separate da virgole" - W3C

Nel caso in cui ti sia sfuggita questa parte molto importante della spiegazione, le specifiche hanno appena dichiarato a elenco di espressioni separate da virgola proprio come abbiamo fatto nel frammento di codice in precedenza.

"Una funzione min () o max () rappresenta il più piccolo (il più negativo) o il più grande (il più positivo), rispettivamente, il calcolo separato da virgola che contiene." - W3C

Hai capito tutto questo? Hanno appena detto il più piccolo (il più negativo) o il più grande (il più positivo). Il W3C ci ha dato il permesso di scrivere numeri negativi come parte delle nostre espressioni.

Prendiamo questo tempo ora per vedere come min () e max () mettersi alla prova in una demo funzionante; aggrappati ai tuoi cappelli.

min () e max () Nella vita reale

Ecco una demo che mostra un paio di casi d'uso per min () e max () usando un componente larghezza e dimensione del font. Il larghezza ha un vincolo minimo e un limite massimo mentre il nostro componente dimensione del font è anche bloccato con un valore minimo e massimo. Ricorda che funzionerà solo su WebKit Nightly al momento della stesura di questo documento; se vuoi vedere un'animazione in azione, dai un'occhiata a questa GIF (francamente troppo pesante per essere incorporata nella pagina).

Nell'esempio sopra sto iniziando a fare le cose vincolando il larghezza e facendo così in una riga.

larghezza: min (max (100px * 2, 70vw), 500px);

Utilizzando l'approccio di cui sopra sono in grado di includere un vincolo centrale contro un minimo e un massimo. Questa linea di codice dice al browser "Prova a impostare la larghezza su 70vw, ma non lasciarlo andare più in basso di 200px (100px * 2) o superiore a 500px. " C'è anche un'altra strada che puoi percorrere per ottenere un risultato simile.

min (max (minN, midN), maxN)

Per spiegare più in dettaglio questo equivale a un valore minimo, un valore medio e infine un limite massimo. annidamento max () entro min () aiuta a bloccare tra i vincoli desiderati.

larghezza minima: 200 px larghezza massima: 500 px

Se abbiamo usato min-width e larghezza massima arriveremmo a una destinazione equivalente che stavamo raggiungendo min () e max (). Sono curioso se proprietà come min-width diventerà obsoleto a favore di funzioni matematiche come min () e max () negli anni a venire.

Riguardo a dimensione del font Io uso lo stesso approccio min / max per creare tipografia reattiva e bloccante.

font-size: min (max (1rem, 4vw), 2rem);

Sto dicendo al browser "Prova a impostare la dimensione del carattere su 4vw, ma non lasciarlo andare più in basso di 1rem o superiore a 2rem. " Purtroppo non ci sono equivalenti come min-font-size e max-font-size come avessimo per larghezza, ma come da CSS Fonts Module Livello 4 specifica che potrebbe diventare una realtà.

Questa è certamente una notizia eccitante e gli autori sono altrettanto entusiasti quando si tratta di limitare i valori nei CSS.

Avere min () e max () significa NON PIÙ "Locks CSS"! È possibile creare un blocco numerico inserendo min (max ()) ☛ dimensione carattere: min (max (30px, 10vw), 60px); pic.twitter.com/hMxAt0iu2K

- Tommy H🎃dgins (@innovati), 19 settembre 2017

Basta cercare "CSS Locks"

Se usi un motore di ricerca per rintracciare i blocchi CSS troverai un sacco di articoli e demo. CodePen mostra anche una varietà di penne sotto un'altra ricerca CSS Locks. Per quelli che sono nuovi all'idea dei blocchi CSS lasciami spiegare in modo più dettagliato.

La tecnica di blocco consente la transizione graduale tra due valori, a seconda delle dimensioni della finestra corrente. Tim Brown l'ha soprannominato "CSS Locks" nel suo articolo "Tipografia flessibile con blocchi CSS", tuttavia questa tecnica è stata introdotta da Mike Riethmuller nel suo articolo "Controllo preciso sulla tipografia reattiva". 

Questo può essere utile quando si usa Calc () e unità viewport per intestazioni e copia del corpo che aumentano o diminuiscono in base alle dimensioni dello schermo. Questo tipo di vincoli è ciò che abbiamo imparato a conoscere come "CSS Locks".

Ci sono molti articoli su CSS Locks, quindi ecco alcuni dei miei preferiti da leggere nel tuo tempo personale.

• Tipografia basata su Viewport Unit di Zell Liew
  
• La matematica delle serrature CSS di Florens Verschelde
  
• CSS "serrature" di Chris Coyier
  
• Tipografia fluida di Geoff Graham
  
• Tipografia reattiva e fluida con unità vh e vw di Michael Riethmuller
• Tipografia fluida e reattiva con CSS Poly Fluid Sizing di Jake Wilson

Blocco con EQCSS

Nella demo sopra di Tommy Hodgins, EQCSS viene utilizzato per bloccare dimensione del font con JavaScript al timone, mentre il CSS è sul sedile posteriore. Ti permetterò di decidere da solo su come ti senti nel mixare JavaScript con i CSS.

Blocco con variabili CSS e JavaScript

Ho scritto un helper JavaScript che usa le variabili CSS insieme all'aiuto di JavaScript per "bloccare" le dimensioni dei caratteri di intestazioni, body copy e altezza della linea in quanto le dimensioni dello schermo variano al ridimensionamento e agli eventi di caricamento della pagina senza l'uso di query multimediali.

Queste proprietà hanno come target "lock" i valori definiti, ma questo non è qualcosa che viene senza avvertimenti. Quando si tratta di sviluppo ci sono alcuni pro e contro per ogni approccio. A causa degli eventi che si verificano e delle proprietà CSS modificate, molto probabilmente incontrerete la pittura e il layout su ridimensionamento, quindi è meglio usarlo con parsimonia, o in altre parole; non usarlo per tutto sulla tua pagina.

Ecco alcuni elementi di saggezza per quanto riguarda lo stile JS.

1. Ogni volta che utilizzi JavaScript per aiutare a applicare gli stili, sarà più lento del solo CSS. Fai tutto in CSS che può essere fatto in CSS.
2. Quando si utilizza JavaScript per applicare gli stili, le prestazioni sono determinate dalla complessità dei test da eseguire e da quanti elementi della pagina devono essere testati. Prova a scrivere i tuoi stili in modo da limitare il numero di test basati su JS che vengono eseguiti per determinare quali stili applicare e provare a limitare il numero di elementi nel tuo codice HTML che vengono sondati o testati da un foglio di stile alimentato da JS.
3. Comprendere quali eventi innescano i ricalcoli degli stili. Volete che gli stili rimangano aggiornati con le cose che accadono nel browser, ma volete anche limitare il numero di listener di eventi in esecuzione in un dato momento. È qui che è veramente importante limitare il numero di elementi a cui questi test si applicano. Se si utilizza una libreria dell'interfaccia utente, potrebbero essere presenti eventi e callback incorporati nel framework che si desidera attivare i ricalcoli negli stili basati su JS. Essere consapevoli di ciò che gli ascoltatori di eventi saranno presenti nel browser nella pagina in cui saranno in esecuzione gli stili alimentati da JS che si sta scrivendo e provare a trovare modi per limitare il numero di listener di eventi necessari; limitare il numero di elementi che stai ascoltando, collegare ascoltatori simili in eventi globali, utilizzare eventi specifici della struttura per un'integrazione più stretta e considerare l'utilizzo di nuove API browser come Resize Observer e Mutation Observer se possono aiutarti per le tue esigenze.
   

Conclusione

Ora che hai avuto un assaggio delle funzioni matematiche CSS, spero che ti ispirino, o ti convincano a iniziare a usare proprietà stabili e a sperimentare con quelle a margine sanguinante. Se stai usando Calc () o hanno sperimentato min () e max () Per favore fateci sapere nei commenti. Buona programmazione!