Nuove unità grafiche della finestra - CSS

by Laura Celis Ballesta Date: 22-06-2023 css viewport

'Intercop 2022" è un progetto annunciato da Google, Microsoft, Apple e Mozzilla Foundation per far sì che tutti i browser offrano la stessa esperienza web.

Il progetto ha 15 aree di interesse e una di queste è l'aggiunta di più unità di dimensione della finestra grafica, per una migliore compatibilità tra browser e dispositivi mobili.

 

Nuove unità

Prima avevamo solo "vh" e "vw" per impostare le dimensioni della finestra grafica, ora abbiamo altre tre unità che ci aiuteranno molto a facilitare la creazione di disegni per qualsiasi dispositivo, soprattutto per i cellulari, visto che oggi sono i dispositivi con cui navighiamo di più.

 

Large viewport (lvh y lvw)

La finestra grande è quella che non mostra alcuna interfaccia dinamica del browser.

Su un dispositivo mobile, 100lvh e 100lvw corrisponderebbero all'intera dimensione dello schermo senza alcun elemento del browser.

Small viewport (svh y svw)

La finestra piccola è quella in cui vengono visualizzate tutte le interfacce del browser, quindi 100svh e 100svw avranno le dimensioni giuste per essere inseriti nell'interfaccia.

Questa unità è ideale quando si cerca di mantenere una dimensione relativa alla finestra grafica tenendo conto degli elementi attivi del browser.

Dynamic viewport (dvh y dvw)

Funziona come una combinazione di questi elementi.

La finestra viene ridimensionata quando gli elementi dell'interfaccia del browser appaiono o vengono nascosti. Questo insieme di unità è molto utile per adattare automaticamente gli elementi alla navigazione.

 

Compatibilità

Oltre l'85% dei browser supporta queste unità di misura, che possono quindi essere applicate senza problemi in quasi tutti i casi.

Lo si può vedere in: caniuse.com

 

Conclusione

È innegabile che queste nuove misure di dimensionamento sono e saranno sempre più utili perché renderanno più facile creare layout che riempiano la finestra visibile sui dispositivi mobili tenendo conto della barra degli indirizzi.

Spero che l'abbiate trovato utile, grazie mille!

 
by Laura Celis Ballesta Date: 22-06-2023 css viewport visite : 656  
 
 
 
 

Articoli correlati

Come funziona il GAP in CSS Grid e flexbox

Forse conoscete già la proprietà CSS gap. Non è esattamente una novità, ma l'anno scorso ha acquisito un'importante capacità: ora funziona in Flexbox oltre che in CSS Grid. Questo, e…

Introduzione alle CSS Container Queries

Il responsive web design è una componente essenziale dello sviluppo web. Come sviluppatori front-end, dobbiamo preoccuparci continuamente della moltitudine di nuove risoluzioni e dispositivi. Va da se che creare una versione…

Flexbox, breve guida pratica

In questo articolo impareremo a gestire gli elementi del nostro sito web in modo più efficiente ed efficace, grazie alla proprietà Flexbox. Ma attenzione, non stiamo parlando di una semplice proprietà…

Paesaggi Parallax costruiti interamente con CSS e HTML

Il CSS3 ha messo finalmente fine alle nostre frustrazioni: con delle semplici proprietà si aprono infatti infinite soluzioni. Una tra tante, la possibilità di inserire uno sfondo animato in una pagina…

9 Utili Librerie CSS per il Disegno Web

I componenti perduti di bootstrap, un complemento che sicuramente non dovrete mai farvi mancare!  Jasny Bootstrap E se il vostro framework CSS parlasse? Ecco a voi un nuovo Framework Semantico.Un…

Introduzione all'animazione dei poligoni con css

Per lungo tempo noi sviluppatori web, abbiamo dovuto rassegnarci alle strutture geometriche fondamentali: i blocchi rettangolari. Cosí, quando è stato introdoto il clipping nei css, abbiamo gioito. Dite la verità... Ma cos'è…

CSS: la funzione Calc()

Nella progettazione di un sito web responsive, dobbiamo tener conto della ormai grande varietà di dispositivi sui quali sarà visualizzato il nostro lavoro e delle rispettive variazioni di risoluzioni alle…

Realizzare banner animati con CSS3

Avete dei clienti esigenti che "ancora" vi chiedono movimentati, sbrilluccicanti banner in flash? Se siete stanchi di rispondere che ormai il flash è andato in pensione potete proporre una soluzione…

I 10 migliori generatori di gradienti CSS

Difficilmente si potrà creare il gradiente perfetto affidandoci alla pura e semplice scrittura di codice CSS. Avere un riferimento visivo in fase di creazione è fondamentale. Ecco perché tra i tool…

15 effetti di testo avanzati con CSS3

Le nuove proprietà CSS3 sono senza dubbio un grande vantaggio per poter modellare a piacimento tutti gli elementi di una pagina web senza dover ricorrere all'utilizzo del codice javascript. Una delle…

15 esempi di trasformazioni 3D con CSS

Lo sviluppo e l'evoluzione dei browser web come Safari, Chrome e Firefox ha dato agli sviluppatori web ed ai web designers, l'opportunitá di sbizzarrirsi con  la creazione di effetti bellissimi,…

8 strumenti per formattare ed ottimizzare i CSS

La fase di ottimizzazione dei file CSS è forse una delle piú importanti per velocizzare il caricamento di un sito web o blog. Per raggiungere questo obiettivo è necessario ripulire il…

Clicky