Cosa è clump () in CSS (e come usarlo)

Se hai mai provato a far sembrare il tuo sito su entrambi i telefoni e monitor giganti, hai visto come si rompe la spaziatura, i caratteri si restringono drasticamente o si ridimensionano in modo eccessivo e gli elementi sono sopraffatti o scompaiono. Per correggere tutto ciò, finisci per scrivere un lungo elenco di query multimediali per un layout. Ecco dove Clamp () può aiutare.

È una funzione CSS che semplifica le dimensioni delle impostazioni. Invece di definire più valori a punti di interruzione fissi, consente di impostare un minimo, un preferito e un massimo in modo che i tuoi elementi si ridimensionano fluidali al cambiamento dello schermo. La parte migliore è che rimangono entro i limiti definiti, quindi non ci sono incoerenze di layout.

In questo post, spiegheremo come funziona Clamp (), perché spesso può essere più efficiente delle query dei media e come Divi 5 ti consente di usarlo senza scrivere una singola riga di codice!

Cosa è clamp ()

Clamp () è una funzione nativa in CSS, utilizzata per definire valori reattivi che si regolano in base alla dimensione dello schermo. Invece di codificare un singolo numero, si dà al browser un intervallo con cui lavorare: impostare un valore minimo, un valore preferito scalabile e un valore massimo. Questi rendono il tuo layout più flessibile e non devi scrivere più query multimediali per ogni dimensione dello schermo.

Comprendiamo questo con un esempio di dimensione del carattere fluido che aumenta/diminuisce in base alla dimensione dello schermo.

font-size: clamp(40px, 7vw, 100px);

Qui, la dimensione del carattere non andrà mai al di sotto di 40px, in scala basata sul 7% della larghezza del viewport e smetterà di crescere una volta che raggiunge 100px.

Un altro grande vantaggio dell'utilizzo di CLAMP () è che, a differenza delle query dei media, evita i salti rigidi e mantiene i tuoi stili più prevedibili e leggibili.

Cosa intendiamo con questo? Comprendiamo questo confrontando il clamp () con le query multimediali.

Confronto di corse () e query multimediali

Le query multimediali sono un altro modo comune per regolare le dimensioni dei caratteri per diverse larghezze dello schermo. Qui, si definiscono i punti di interruzione in specifiche larghezze dello schermo in cui i tuoi stili cambiano. Ad esempio, è possibile assegnare una dimensione del carattere per il desktop, un altro per il tablet e un terzo per il cellulare in modo tale che la dimensione del carattere cambi solo quando la larghezza dello schermo colpisce ogni punto di interruzione.

Questo metodo funziona, ma non è fluido. Tra 1000px e 501px, la dimensione del carattere rimane bloccata a 100px. Nel momento in cui lo schermo raggiunge 500px, il carattere scende bruscamente a 30px. Questo significa nessuna transizione regolare, solo un forte cambiamento.

Quindi, se vuoi rendere il ridimensionamento più naturale, devi aggiungere diversi punti di interruzione e regolare manualmente la dimensione del carattere su ciascuno. Ciò renderebbe il tuo codice lungo e gonfio.

Al contrario, CLAMP () ti consente di risparmiare da brusche transizioni e un lungo codice. In effetti, può essere scritto in una singola riga: Font-Size: Font (30px, 7VW, 100px).

Questo dice al browser di ridimensionare il carattere tra 30px e 100px in base al 7 percento della larghezza di visualizzazione. La dimensione del carattere si regola in modo fluido su tutte le dimensioni dello schermo senza salti improvvisi o la necessità di più punti di interruzione. Definite ancora i limiti, ma il ridimensionamento è automatico e più coerente.

In Live Action, ecco come un confronto tra il ridimensionamento del carattere dei punti di interruzione della query dei media e un coccole ():

Per il ridimensionamento reattivo, Clamp () fa una differenza notevole. Invece di aspettare che le larghezze fisse dello schermo per innescano modifiche allo stile, risponde a ogni pixel in mezzo. Ciò mantiene il tuo codice più pulito e il tuo design più coerente su tutti i dispositivi. Inoltre, è ampiamente supportato dalla maggior parte dei browser moderni, il che significa che renderà bene questi browser , rendendolo una sostituzione affidabile e pratica.

Come il clamp () funziona dietro le quinte

Clamp () prende tre valori che lavorano insieme per ridimensionare qualsiasi proprietà CSS:

 clamp(minimum, preferred, maximum) 

Ogni parte della funzione ha un ruolo specifico:

• Valore minimo: il valore più basso possibile. L'elemento non si ridimensionerà al di sotto di questo punto, non importa quanto sia piccolo lo schermo.
• Valore preferito: questo valore scale in base alla dimensione dello schermo. Di solito è impostato usando unità relative come VW o un'espressione calc () per consentire la fluidità libera.
• Valore massimo: la dimensione più consentita. Anche su schermi molto grandi, l'elemento non supererà questo valore.

Quando il browser calcola la dimensione finale, valuta prima il valore preferito. Il browser utilizza il minimo se la dimensione dello schermo è abbastanza piccola da cui il valore preferito scende al di sotto del minimo. Allo stesso modo, se lo schermo è abbastanza ampio da cui il valore preferito supera il massimo, si attacca a quello.

Questo rende il comportamento prevedibile. Sai sempre che il tuo design rimarrà nella tua gamma definita, ma ottieni un ridimensionamento flessibile tra questi limiti. Impostando limiti minimi e massimi, il clamp () garantisce che i tuoi elementi si ridimensionano in modo fluido ma mai troppo. Proprio abbastanza.

Scegliere il giusto valore preferito

Potresti aver notato che il valore preferito (quello centrale) svolge un ruolo più importante in tutto questo. Decide come gli elementi si ridimensionano.

Innanzitutto, non dovrebbe essere un valore fisso come un morsetto (40px, 80px , 120px) perché in questo caso il valore preferito non si ridimensiona affatto. Poiché 80px è già tra il limite, il browser lo blocca e ignora le variazioni delle dimensioni dello schermo. Ciò si traduce in un valore statico, che sconfigge in primo luogo lo scopo di usare il clamp ().

Invece, il valore preferito dovrebbe essere sempre relativo , come nel morsetto (40px, 7VW , 120px). Qui, 7VW risponde alla larghezza di Viewport, che consente all'elemento di ridimensionare senza problemi attraverso le dimensioni dello schermo. La funzione di morsetto assicura quindi che non scenda mai al di sotto di 40px o oltre 120px, mantenendo le dimensioni sensibili al 7% della larghezza dello schermo.

Devi anche considerare la dimensione del valore relativo. Ad esempio, un valore inferiore come 2VW ridimensiona l'elemento più gradualmente tra le dimensioni dello schermo, mentre un valore maggiore come 6VW provoca un ridimensionamento più rapido e raggiunge prima la dimensione massima. Per identificare quale ridimensionamento funziona per te, provare il calcolatore della scala del tipo di fluido. Ti consente di visualizzare in anteprima valori diversi ed esportare CSS pronti all'uso.

NOTA: il calcolatore della scala del tipo di fluido emette valori VI. Se si utilizza l'output generato in Divi, assicurarsi di cambiare le unità VI in VW.

Diversi tipi di unità nel morsetto ()

Le unità all'interno del morsetto () influenzano il modo in cui si comporta attraverso i dispositivi. Ecco tutto ciò che puoi usare:

Nella maggior parte dei casi, gli sviluppatori utilizzano PX per i valori minimi e massimi e un'unità fluida come VW per il valore preferito. Questo dà il miglior equilibrio tra controllo e reattività.

Tuttavia, è anche possibile utilizzare unità relative per valori Min e Max, come il morsetto (2REM, 4REM, 8REM). Questo rende il tuo design più accessibile e più facile da ridimensionare se la dimensione del carattere radice cambia. È particolarmente utile per gli utenti che regolano le impostazioni del browser per la leggibilità.

CLAMP () in Divi 5

La funzione CLAMP () in CSS è incredibilmente utile, ma solo se ti senti a tuo agio nel scrivere codice. Che dire di coloro che preferiscono costruire visivamente i loro siti Web senza toccare un foglio di stile? Vorresti creare layout fluidi usando il clamp () ma senza scrivere codice?

In tal caso, le unità avanzate di Divi 5 possono aiutare.

Iscriviti al nostro canale YouTube

Per farla breve, Divi 5 supporta Clamp () come unità avanzata attraverso il costruttore ed è super facile accedervi. Ovunque sia possibile inserire un valore numerico, come dimensioni del carattere, spaziatura o larghezza della sezione, troverai direttamente l'opzione di utilizzare il clamp ().

Basta fare clic nel campo di input per selezionare dalle diverse unità avanzate disponibili in Divi 5 (vedere l'elenco di colore scuro accanto alla dimensione del testo dell'intestazione) , modificare il tipo di unità e definire i valori minimi, preferiti e massimi.

E questo è tutto! Nessuna codifica o CSS - tutto ciò che hai fatto è stato inserire un valore di morsetto () e la tua intestazione è diventata fluida proprio così.

Divi 5 semplifica la creazione di progetti fluidi e reattivi senza scrivere CSS personalizzati. Ottieni tutta la flessibilità di un morsetto () con la semplicità di un editor visivo. (Divi 5 supporta molte altre unità avanzate, incluso Clamp ()).

Impara tutto sulle unità avanzate di Divi 5

Come usare il clamp () in Divi 5?

Ormai, hai visto quanto sia facile usare il clamp () in Divi 5. Basta selezionare l'unità pless () e aggiungere i tuoi valori preferiti. Nessun codice personalizzato, nessun file CSS, solo un'interfaccia visiva pulita.

Ma ciò che rende il clamp () davvero potente all'interno divi non è solo la funzione stessa. È ciò con cui funziona.

Divi 5 è costruito attorno a un sistema di progettazione modulare. Ciò significa che è possibile combinare il coccole () con altre funzionalità avanzate come variabili di design e funzioni CSS come Calc () per rendere il layout non solo reattivo ma anche coerente e facile da scalare. Ed è qui che diventa interessante: Divi 5 rende facile adattarsi al morsetto () nel tuo flusso di lavoro.

Clamp () funziona con variabili di design

Il modo migliore e più efficiente per usare il morsetto () in modo efficace in Divi 5 è combinarlo con variabili di progettazione.

Le variabili di progettazione consentono di definire valori globali (come tipografia, colori e persino dimensioni dei caratteri) in modo da poterle usare in tutto il sito per mantenerlo coerente. È inoltre possibile salvare i valori di clamp () come variabili numeriche. Ciò consente di salvare valori globali reattivi in ​​modo tale che quando li modifichi, tutte le istanze vengono aggiornate contemporaneamente.

Ad esempio, si definisce le dimensioni del morsetto () per le intestazioni H1-H6 come questa:

E salvali all'interno del gestore variabile in Divi Builder:

Quindi tutte le vostre intestazioni in tutto il sito Web si adatteranno in base ai valori di pinza () definiti.

Ora, se si desidera aggiornare la dimensione H3, basta modificare la sua variabile numerica e verrà aggiornato ovunque tu l'abbia usato. ( Vuoi creare il tuo sistema di tipografia in Divi 5? Ecco una guida completa sulla gestione dei caratteri e delle dimensioni dei caratteri utilizzando le variabili di CLAMP () e di progettazione.)

Questo approccio consente il controllo centralizzato, rendendo facile aggiornare le impostazioni di tipografia a livello globale senza regolare manualmente ogni istanza. Applicando queste variabili CLAMP () tramite i preimpostazioni del gruppo di opzioni, semplifica il processo di progettazione.

Clamp () si combina con calc ()

Puoi anche usare la funzione calc () all'interno di clamp () per perfezionare il modo in cui i tuoi valori si ridimensionano. Ciò è particolarmente utile quando si desidera aggiungere una dimensione di base e quindi ridimensionarla in modo più preciso con un'unità relativa come VW.

Ad esempio, dimensioni del carattere: morsetto (1Rem, calc (0,75Rem + 2VW), 2,5Rem) utilizza calc () per aggiungere una base stabile (0,75REM) e quindi ridimensionarlo ulteriormente con 2VW.

Ciò consente al carattere di ridimensionare in base alla larghezza della vista, ma gli dà anche un vantaggio con una dimensione del carattere di base. Ciò è utile per mantenere la leggibilità su schermi più piccoli senza bisogno di più varianti di morsetto. Il trucco calc () all'interno del clamp () è perfetto per ovunque tu voglia quel controllo extra su come le cose si scatenano.

Casi d'uso pratici di pinze ()

Ora diamo un'occhiata ad alcuni casi di utilizzo comune di morsetto () e quanto diventa facile quando lo stai applicando con Divi 5:

1. Dimensioni di intestazione coerenti su tutti i dispositivi

La tipografia reattiva è il miglior caso d'uso di un morsetto (). Dato che avevamo già definito le dimensioni della nostra intestazione (H1-H6) usando il clamp () nelle variabili di design, è tempo di vederle in azione.

Abbiamo creato questa pagina utilizzando H5S per le voci di menu. Quindi, abbiamo applicato la variabile del numero H5 a ciascuna delle dimensioni del testo della testa di H5. E come puoi vedere, ogni intestazione si ridimensiona in modo fluido attraverso i punti di interruzione.

Il testo rimane chiaro, equilibrato e visivamente coerente in tutti i nostri punti di interruzione reattivi definiti.

È inoltre possibile utilizzare il morsetto () per l'altezza della linea e la spaziatura delle lettere. Aiuta a mantenere una leggibilità ottimale aumentando le lacune di linea o la spaziatura man mano che lo schermo si allontana. Un piccolo cambiamento, ma renderebbe i contenuti a forma di lunga durata più traspirante.

2. Imposta coccola () larghezza per sezioni di paragrafo su schermi di grandi dimensioni

I paragrafi sono naturalmente facili da leggere sui dispositivi mobili, poiché le linee brevi nelle schermi compatte rendono digeribili i contenuti. Tuttavia, sui monitor ultra larghi, i lettori saranno costretti a scansionare intere righe orizzontali se una sezione a larghezza intera allunga il testo troppo lontano. Sembra di leggere un cartellone pubblicitario. La lunghezza della linea ideale di una frase è di circa 50-75 caratteri, quindi se il tuo sito Web mostra una frase infinita su un ampio schermo, potresti perdere l'interesse del lettore.

Per correggere questo, impostare una larghezza reattiva come il morsetto (300px, 65VW, 800px) per ridimensionare il paragrafo a una larghezza fissa (800px) in modo che i paragrafi appaiano leggibili anche su schermi più ampi.

Questo è un modo perfetto per rendere i tuoi post sul blog leggibili su schermi più ampi.

3. Set Clamp () larghezza per immagini singole o in primo piano

Allo stesso modo, le immagini singole (come le immagini in primo piano) possono apparire troppo grandi sugli schermi ultra larghi. Sembra perfetto su un tablet, ma può estendersi goffamente su un monitor 4K, che può sembrare opprimente rispetto al resto del contenuto.

Per risolvere questo problema, utilizzare una larghezza dell'immagine basata sul morsetto come un morsetto (300px, 60vw, 1000px). Garantisce che l'immagine cresca in modo fluido con le dimensioni dello schermo ma si ferma prima che domini il layout.

Oppure, puoi semplicemente impostare una larghezza di clemp () per l'intera riga del contenitore per garantire una scala di tutti gli elementi (immagine, intestazione e testo).

4. Aggiungi imbottitura e margine di fluido con morsetto ()

I designer spesso ottengono la spaziatura giusta per il desktop, ma non sempre funziona bene su schermi più piccoli o molto grandi. L'imbottitura fissa e i margini non si regolano sempre con le dimensioni dello schermo. Ecco dove il clamp () diventa utile.

Ad esempio, un margine di morsetto (0,5REM, 2VW, 2REM) e un morsetto (1REM, 3VW, 4REM) in una galleria di immagini creano spazi che iniziano in piccolo e in scala con lo schermo.

Dà la stanza del layout per respirare su grandi schermi e mantiene le cose strette sul cellulare:

CLAMP () aiuta anche a ridimensionare le imbottiture agevolmente attorno a layout della scheda, gallerie di immagini, contenitori di sezione e blocchi di testo, specialmente quando si desidera una spaziatura intenzionale senza costante modifica del punto di interruzione.

5. Crea sezioni di eroi reattive che si ridimensionano perfettamente

Usando CLAMP (), puoi rendere le sezioni di eroi perfetti su ogni schermo definendo l'intestazione di eroi, l'imbottitura dei pulsanti e la spaziatura dei sottotitoli. Abbiamo salvato questi valori di Clamp () come variabili di progettazione per semplificare la loro applicazione. (Ma non vorresti compilare il tuo gestore variabile salvando ogni minuto dettaglio.)

Applicare quei valori è ora facile.

Una volta salvato, ognuno si adatterà automaticamente alle dimensioni dello schermo per dare al tuo eroe la prima impressione perfetta su ogni dispositivo.

Progetta layout pixel-perfetto utilizzando clamp (), senza scrivere una singola riga di codice

Clamp () ti aiuta a progettare layout fluidi e reattivi senza fare affidamento su infinite domande sui media. E con Divi 5, non è necessario scrivere una singola riga di codice per usarlo. Sia che preferisca la codifica o ti godi il design visivo, le unità avanzate di Divi rendono più facile l'applicazione di coccole () ai caratteri e la spaziatura.

Con potenti caratteristiche come il clamp () così facilmente accessibile, non vorresti provare Divi 5 fuori da solo? Prova valori diversi, crea il tuo sistema reattivo e guarda quanto possono diventare flessibili i tuoi layout. E quando hai un trucco per il morsetto () preferito, condividilo nei commenti qui sotto! Ci piacerebbe vedere cosa crei.