Otto suggerimenti CSS per layout ed effetti avanzati

Il regno dello sviluppo del front-end web ha compiuto notevoli progressi negli ultimi anni. Tuttavia, il front-end web, come lo vedono gli utenti, è sempre lo stesso: markup HTML in stile CSS.

Molti problemi di layout possono sembrare semplici all'inizio, ma spesso si rivelano complicati. Senza una conoscenza approfondita del funzionamento di alcune funzionalità CSS, questi layout avanzati possono sembrare impossibili da ottenere con i soli CSS.

In questo articolo, troverai otto suggerimenti e trucchi CSS di esperti che sfruttano le funzionalità CSS meno conosciute per implementare alcuni di questi layout ed effetti avanzati.

1. Massimizzazione dei selettori di fratelli CSS

Il problema: stai perdendo opportunità di ottimizzazione non utilizzando i selettori fratelli.

La soluzione: utilizzare i selettori fratelli ogni volta che ha senso. Ogni volta che stai lavorando con un elenco di elementi e hai bisogno di trattare il primo o l'ultimo elemento in modo diverso, il tuo primo istinto potrebbe essere quello di usare i selettori pseudo CSS :first-child e :last-child .

Ad esempio, quando si crea un'icona del menu hamburger solo CSS:

Vedi Pen Maximizing CSS Sibling Selectors 1 di Rico Mossesgeld (@ricotheque) su CodePen.

Questo ha senso: ogni barra ha un margine inferiore, ad eccezione dell'ultima.

Tuttavia lo stesso effetto è possibile anche tramite il selettore fratellino adiacente (+):

Vedi Pen Maximizing CSS Sibling Selectors 2 di Rico Mossesgeld (@ricotheque) su CodePen.

Anche questo ha senso: tutto dopo la prima barra ha un margine superiore. Non solo questo trucco CSS consente di risparmiare alcuni byte in più (che possono facilmente sommarsi per qualsiasi progetto di medie dimensioni), ma apre anche un mondo di possibilità.

Considera questo elenco di carte:

Vedi Pen Maximizing CSS Sibling Selectors 3 di Rico Mossesgeld (@ricotheque) su CodePen.

Ognuno ha un titolo e un testo, l'ultimo dei quali è nascosto per impostazione predefinita. Se vuoi rendere visibile solo il testo della scheda attiva (con la classe .active ) e quelle successive puoi farlo velocemente usando solo CSS:

Vedi Pen Maximizing CSS Sibling Selectors 4 di Rico Mossesgeld (@ricotheque) su CodePen.

Con un po' di JavaScript, anche questo può essere interattivo.

Affidarsi solo a JavaScript per tutto ciò, tuttavia, risulterebbe in uno script come questo:

Vedi Pen Maximizing CSS Sibling Selectors 5 di Rico Mossesgeld (@ricotheque) su CodePen.

dove includere jQuery come dipendenza ti consente di avere un codice piuttosto breve.

2. Dimensionamento coerente degli elementi HTML

Il problema: gli elementi HTML hanno dimensioni incoerenti su browser diversi.

La soluzione: impostare box-sizing per tutti gli elementi su border-box . Una rovina di lunga data per gli sviluppatori web, Internet Explorer ha fatto una cosa giusta: ha dimensionato correttamente le scatole.

Altri browser guardano solo il contenuto quando calcolano la larghezza di un elemento HTML, con tutto il resto trattato come eccedenza. Una width: 200px div, con 20px di riempimento e un bordo di 2px , rende come 242 pixel di larghezza.

Internet Explorer considera il riempimento e il bordo come parte della larghezza. Qui, il div dall'alto sarebbe largo 200 pixel.

Guarda la Pen CSS Box Model Demo 1 di Rico Mossesgeld (@ricotheque) su CodePen.

Una volta presa la mano, scoprirai che quest'ultimo approccio è più logico, anche se non segue gli standard.

Se dico che la larghezza è 200 px, accidenti, sarà una scatola larga 200 px anche se ho 20 px di riempimento.

In ogni caso, il seguente CSS mantiene le dimensioni degli elementi (e quindi i layout) coerenti su tutti i browser:

Guarda la Pen CSS Box Model Demo 2 di Rico Mossesgeld (@ricotheque) su CodePen.

Il secondo set di selettori CSS protegge gli elementi HTML con uno stile senza border box dall'interruzione del layout.

box-sizing: border-box è così utile che fa parte di un framework CSS relativamente popolare chiamato sanitize.css.

3. Elementi dinamici dell'altezza

Il problema: mantenere l'altezza di un elemento HTML proporzionale alla sua larghezza.

La soluzione: utilizzare l'imbottitura verticale in sostituzione dell'altezza.

Supponiamo che tu voglia che l'altezza di un elemento HTML corrisponda sempre alla sua larghezza CSS. height: 100% non cambia il comportamento predefinito degli elementi corrispondenti all'altezza del suo contenuto.

Guarda Pen Dynamic Height Elements 1 di Rico Mossesgeld (@ricotheque) su CodePen.

La risposta è impostare l'altezza su 0 e utilizzare padding-top o padding-bottom per impostare invece l'altezza effettiva di .container . Entrambe le proprietà possono essere una percentuale della larghezza dell'elemento:

Guarda Pen Dynamic Height Elements 2 di Rico Mossesgeld (@ricotheque) su CodePen.

Ora .container rimarrà un quadrato, non importa quanto sia largo. overflow: hidden impedisce ai contenuti lunghi di rompere questo rapporto.

Questa tecnica, con alcune modifiche, è ottima per creare incorporamenti di video che mantengono le proporzioni a qualsiasi dimensione. Allinea semplicemente l'incorporamento con la posizione in alto a sinistra di .container position: absolute , imposta entrambe le dimensioni dell'incorporamento al 100% in modo che si "riempi" .container e modifica il padding-bottom di .container in modo che corrisponda all'aspetto del video rapporto.

Guarda Pen Dynamic Height Elements 3 di Rico Mossesgeld (@ricotheque) su CodePen.

position: relative per .container assicura che il posizionamento assoluto iframe funzioni correttamente. Il nuovo padding-bottom è solo l'altezza del rapporto di aspetto diviso per la sua larghezza, moltiplicato per 100. Ad esempio, se il rapporto di aspetto del video incorporato è 16:9, la percentuale di riempimento inferiore deve essere 9 diviso per 16 (.5625) e moltiplicato per 100 (56,25).

4. Elementi di larghezza dinamica

Il problema: mantenere la larghezza di un elemento HTML proporzionale alla sua altezza.

La soluzione: utilizzare la dimensione del carattere come base per le dimensioni dell'elemento.

Ora, che dire del contrario, o dei contenitori che cambiano la larghezza come cambia la loro altezza? Questa volta, è la font-size del carattere in soccorso. Ricorda che larghezza e altezza possono essere in em s, il che significa che possono essere un rapporto tra la dimensione del font-size dell'elemento.

Un elemento con una font-size del carattere di 40px, una larghezza di 2em e un'altezza di 1em sarebbe largo 80 pixel (40 x 2) e alto 40 pixel (40 x 1).

Vedi Pen Dynamic Width Elements di Rico Mossesgeld (@ricotheque) su CodePen.

Vuoi cambiare l'altezza di .container ? Cambiare la dimensione del font.

L'unico avvertimento è che è impossibile far corrispondere automaticamente la dimensione del carattere di un elemento all'altezza del suo genitore tramite solo CSS. Tuttavia questa tecnica consente di ridurre uno script di ridimensionamento Javascript da:

 var container = document.querySelector( '.container' ); container.style.height = yourDesiredHeight + 'px'; container.style.width = yourDesiredHeight * yourDesiredRatio + 'px';

a:

 document.querySelector( '.container' ).style.fontSize = yourDesiredHeight + 'px';

5. Centratura verticale del contenuto dinamico

Il problema: mantenere un elemento HTML (con altezza sconosciuta) centrato verticalmente all'interno di un altro.

La soluzione: imposta l'elemento esterno da display: table , quindi converti l'elemento interno in un CSS table-cell . Oppure usa semplicemente CSS Flexbox.

È possibile centrare verticalmente una riga di testo con line-height :

Vedere il centraggio verticale della penna di Dynamic Content 1 di Rico Mossesgeld (@ricotheque) su CodePen.

Per più righe di testo o contenuto non testuale, le tabelle CSS sono la risposta. Imposta la visualizzazione di .container su table , quindi usa display: table-cell e vertical-align: middle per .text :

Vedere il centraggio verticale della penna di Dynamic Content 2 di Rico Mossesgeld (@ricotheque) su CodePen.

Pensa a questo trucco CSS come all'equivalente verticale del margin: 0 auto . Flexbox di CSS3 è un'ottima alternativa a questa tecnica se il supporto buggy di Internet Explorer è accettabile:

Vedi Pen Vertical Centering di Dynamic Content 3 di Rico Mossesgeld (@ricotheque) su CodePen.

6. Colonne della stessa altezza

Il problema: mantenere le colonne alla stessa altezza.

La soluzione: per ogni colonna, utilizzare un valore margin-bottom negativo grande e annullarlo con un valore inferiore padding-bottom altrettanto grande . Funzionano anche le tabelle CSS e Flexbox.

Usando float o display: inline-block , è possibile creare colonne affiancate tramite CSS.

Guarda le colonne della penna della stessa altezza 1 di Rico Mossesgeld (@ricotheque) su CodePen.

Nota l'uso di box-sizing: border-box per dimensionare correttamente il .cols . Vedere il dimensionamento coerente degli elementi HTML sopra.

I bordi della prima e dell'ultima colonna non vanno fino in fondo; non corrispondono all'altezza della seconda colonna più alta. Per risolvere questo problema, aggiungi semplicemente overflow: hidden to .row . Quindi imposta il margin-bottom di ciascun .col su .col e il suo padding-bottom su 100009px (99999px + il riempimento di 10px applicato agli altri lati di .col ).

Guarda le colonne della penna della stessa altezza 2 di Rico Mossesgeld (@ricotheque) su CodePen.

Un'alternativa più semplice è Flexbox. Ancora una volta, usalo solo se il supporto di Internet Explorer non è un must.

Guarda le colonne della penna della stessa altezza 3 di Rico Mossesgeld (@ricotheque) su CodePen.

Un'altra alternativa con un migliore supporto del browser: tabelle CSS (senza vertical-align: middle ).

Guarda le colonne della penna della stessa altezza 4 di Rico Mossesgeld (@ricotheque) su CodePen.

7. Andare oltre la scatola

Il problema: le caselle e le linee rette sono così cliché.

La soluzione: usa transform: rotate(x) o border-radius .

Prendi una tipica serie di riquadri da un sito Web di marketing o brochure: una pila verticale di diapositive con un punto singolare. Il suo markup e CSS potrebbero assomigliare a questo:

Guarda la penna che va oltre la scatola 1 di Rico Mossesgeld (@ricotheque) su CodePen.

A costo di rendere il markup molto più complicato, questi riquadri squadrati potrebbero essere trasformati in una pila di parallelogrammi.

Guarda la penna che va oltre la scatola 2 di Rico Mossesgeld (@ricotheque) su CodePen.

C'è molto da fare qui:

L'altezza di ogni riquadro è controllata da .pane-container. Il margine inferiore negativo assicura che i riquadri si accatastino perfettamente.

• .pane-background , il suo figlio .mask-box e il suo nipote .image sono tutti impostati su position: absolute . Ogni elemento ha valori differenti in top , a left , in bottom e a right . Ciò elimina qualsiasi spaziatura creata dalle rotazioni descritte di seguito.
• .mask-box viene ruotato di 2 gradi (in senso antiorario).
• .image viene ruotato di -2 gradi per contrastare la .mask-box .
• .mask-box è nascosto in modo che i lati superiore e inferiore ruotati ritagliano l'elemento .image .

In una nota correlata, trasformare un'immagine in un cerchio o in un ovale è semplicissimo. Basta applicare border-radius: 100% all'elemento img .

Guarda la penna che va oltre la scatola 3 di Rico Mossesgeld (@ricotheque) su CodePen.

Modifiche CSS in tempo reale come queste riducono la necessità di preparare il contenuto prima che venga pubblicato su un sito web. Invece di applicare una maschera circolare a una foto in Photoshop, lo sviluppatore web può semplicemente applicare lo stesso effetto tramite CSS senza modificare la foto originale.

L'ulteriore vantaggio è che, lasciando il contenuto intatto e non dipendente dal design attuale del sito Web, sono facilitate future riprogettazioni o rinnovamenti.

8. Modalità notturna

Il problema: implementare una modalità notturna senza creare un nuovo foglio di stile.

La soluzione: utilizzare i filtri CSS.

Alcune app dispongono di una modalità notturna, in cui l'interfaccia si oscura per una migliore leggibilità in condizioni di scarsa illuminazione. Sui browser più recenti, i filtri CSS possono creare lo stesso effetto, applicando effetti simili a Photoshop.

Un utile filtro CSS è invert , che (nessuna sorpresa) inverte i colori di tutto all'interno di un elemento. Ciò rende superflua la creazione e l'applicazione di una nuova serie di stili.

Guarda la Pen Night Mode 1 di Rico Mossesgeld (@ricotheque) su CodePen.

L'utilizzo di questo filtro su testo nero e sfondo bianco simula la modalità notturna. !important assicura che questi nuovi colori prevalgano su tutti gli stili esistenti.

Guarda la Pen Night Mode 2 di Rico Mossesgeld (@ricotheque) su CodePen.

Sfortunatamente, l'immagine sembra strana, perché i suoi colori sono stati invertiti con tutto il resto. La buona notizia è che più filtri possono essere applicati contemporaneamente. L'aggiunta del filtro di rotazione della tonalità riporta le immagini e altri contenuti visivi alla normalità:

Guarda la Pen Night Mode 3 di Rico Mossesgeld (@ricotheque) su CodePen.

Perché funziona? hue-rotate(180deg) crea semplicemente lo stesso effetto di invert(1) . Ecco una demo di come funzionerebbe il CSS in modalità notturna se attivato tramite un pulsante basato su JavaScript.

Ottieni il massimo dai CSS

A meno che il browser o il modo in cui sono costruiti i siti web non cambi radicalmente in futuro, una buona conoscenza dei CSS rimarrà un'abilità fondamentale nello spazio di sviluppo web.

Tutti questi suggerimenti CSS condividono qualcosa in comune: massimizzano l'uso dei CSS come linguaggio di stile, lasciando che sia il browser stesso a fare il lavoro pesante. E, se fatto correttamente, questo produrrà sempre risultati migliori, prestazioni migliori e quindi una migliore esperienza utente.

Facci sapere se hai qualche trucco CSS che trovi interessante e utile nella sezione commenti qui sotto.