Negli ultimi anni mi capita sempre più spesso di osservare un fenomeno curioso, e per certi versi preoccupante: HTML e CSS, le fondamenta del web, sembrano progressivamente scomparire dalla scena pratica dello sviluppo. Intendiamoci, sono ancora lì, silenziosi e onnipresenti sotto ogni interfaccia digitale che navighiamo quotidianamente. Ma nel concreto, nel lavoro quotidiano di sviluppo, vedo che la conoscenza diretta di questi linguaggi è sempre più sacrificata sull’altare della velocità, della produttività, dello standard già pronto.

Framework come React, Vue o Angular hanno semplificato e accelerato enormemente la creazione di interfacce complesse, fornendo template, componenti riutilizzabili e astrazioni che mascherano quasi completamente la necessità di scrivere codice HTML “nudo e crudo”. Per la parte di stile, il fenomeno è forse ancora più evidente: l’ascesa di utility-first framework come Tailwind CSS ha cambiato radicalmente il modo di pensare ai fogli di stile. Non più regole CSS astratte, ma classi già pronte, riutilizzabili, veloci da applicare.

Il risultato? Sempre più sviluppatori si muovono in un contesto nel quale il contatto diretto con HTML e CSS è minimo o assente. Tutto passa attraverso livelli di astrazione e strumenti che, sì, sono più efficienti, ma che rischiano di trasformare il developer in un mero operatore di strumenti preconfezionati.

Il mito della velocità e l’illusione della sostituibilità

“Perché perdere tempo a scrivere codice a mano quando posso usare strumenti come Webflow, Framer, o il più recente Canva Codes?”

È una domanda che sento spesso. E la risposta più gettonata è: “Non serve più. Gli strumenti ormai fanno tutto”. È vero. La tecnologia low-code e no-code sta avanzando a ritmi vertiginosi. Strumenti come Locofy, TeleportHQ, Framer AI e persino Lovable promettono di generare intere interfacce web partendo da semplici prompt o bozze grafiche.

Il nuovo Canva Codes, ad esempio, permette di generare codice web funzionante partendo da template visuali e blocchi modulari. Un sogno per chi vuole produrre landing page e siti vetrina in pochi click. Ma è proprio qui che si nasconde il rischio: in questo approccio, l’utente finale non ha più bisogno di sapere cosa c’è “sotto il cofano”. Non è più importante comprendere l’HTML, i selettori CSS, il box model, o la semantica. Basta che il risultato funzioni.

E allora la domanda diventa: ha ancora senso studiare le basi?

La diversità che stiamo sacrificando

C’è un altro aspetto che mi lascia perplesso: l’omologazione. Usare gli stessi framework, gli stessi template, le stesse librerie porta inevitabilmente a una standardizzazione estetica e funzionale del web. Le interfacce diventano sempre più simili, uniformi, prevedibili. La diversità, intesa come capacità creativa di andare oltre lo standard imposto dal framework, viene sacrificata in nome della velocità.

Eppure, la vera innovazione spesso nasce proprio dalla capacità di “sporcarsi le mani”, di uscire dai binari, di conoscere a fondo le regole per poterle infrangere consapevolmente. Se perdiamo la conoscenza delle basi, perdiamo anche la capacità di reinventare, di esplorare, di creare qualcosa di davvero diverso.

Stiamo andando verso un futuro di consumatori di strumenti?

Probabilmente sì. L’evoluzione naturale dell’industria tecnologica punta verso strumenti sempre più accessibili, user-friendly, democratici. Chiunque potrà creare siti web, interfacce, applicazioni senza scrivere una riga di codice. Questo è il trend. Gartner nel suo ultimo rapporto prevede che entro il 2027 oltre il 65% delle applicazioni saranno sviluppate con approcci low-code o no-code.

Ma cosa succederà quando questi strumenti avranno dei limiti, dei bug, o semplicemente quando vorremo uscire dallo schema predefinito? Saremo ancora in grado di intervenire? O dovremo affidarci ciecamente a chi ha scritto quel motore che genera tutto per noi?

E allora… studiare le basi ha ancora senso?

Probabilmente no. O forse sì. Dipende da che tipo di professionista vuoi essere.

Se ti accontenti di usare strumenti e template preconfezionati, la risposta è no.

Ma se vuoi essere davvero libero, capace di creare, di innovare, di intervenire nei dettagli più nascosti, la risposta è ancora sì, oggi più che mai.

La conoscenza delle fondamenta non è un fardello del passato. È una bussola per il futuro.

Happy

2 100 %

Sad

0 0 %

Excited

0 0 %

Sleepy

0 0 %

Angry

0 0 %

Surprise

0 0 %

Da diversi anni lavoro a progetti legati alla pubblica amministrazione. Nel tempo mi sono reso conto di cosa voglia dire realizzare un sito/app accessibile. Imparare ad usare screen reader, i giusti costrutti, come strutturate le pagine e usare gli attributi corretti per far capire ad una persona con handicap visivi o auditivi, come poter capire meglio e più velocemente i contenuti proposti.

La prima cosa che posso dire è questa, una persona disabile ha meno difficoltà di quelle che possiate pensare, sono abituati a superare gli ostacoli (non solo nel software) e questo in molti casi li rende più smart di noi utenti “normali” che dobbiamo capire con occhi e udito quello che ci viene proposto. Mi è capitato di lavorare con alcune persone non vedenti e sono rimasto ammirato dal loro approccio, capivano i contenuti della pagina (fatta con i giusti criteri) prima e meglio di me. Loro puntano al contenuto e alle informazioni, noi ci perdiamo nei fronzoli della pagina.

Con questo non voglio dire che non serve rendere accessibile il software, il contrario, noi sviluppatori con uno sforzo minimo possiamo aiutare queste persone, e non solo, a capire con più facilità quali siano i contenuti che proponiamo sul nostro sito o nella nostra applicazione.

Di seguito vi riporto i ventidue miti da sfatare sull’accessibilità suggeriti da a11ymyths.com e riportati nel mio progetto calendario dell’avvento per sviluppatori (sono aperte le iscrizioni per il 2022). Approfitto per ringraziare tutte le persone che si sono iscritte e che mi hanno dato suggerimenti su come migliorare e rendere i contenuti interessanti.

Iniziamo…

#01 L’accessibilità riguarda solo un piccolo gruppo di utenti

Non così piccolo. Circa il 15% della popolazione mondiale, o circa 1 miliardo di persone, vive con disabilità, sono la più grande minoranza del mondo. Il numero delle persone con disabilità è in forte aumento.

Una curiosità… una delle migliori App completamente accessibile al mondo (sia web che mobile) è quella di Amazon, il loro obiettivo è vendere e se non fossero accessibili si perderebbero una fetta del mercato.

Maggiori informazioni

#02 Gli utenti disabili non utilizzano il mio sito web

Come puoi essere così sicuro? Molte persone con disabilità come daltonismo, capacità motorie limitate, ecc. utilizzano i siti Web proprio come gli altri utenti. Inoltre, molte tecnologie assistive non sono rilevabili in alcun modo.

Maggiori informazioni

#03 Rendere accessibile un sito Web è costoso e richiede tempo

Potrebbe non essere così se l’accessibilità fosse considerata dall’inizio del progetto grazie ad un team di sviluppo con le competenze adeguate. Quando l’accessibilità è diventata un’abitudine, il tempo di sviluppo non cambia o cambia di poco.

Implementare l’accessibilità by design ha un costo molto ridotto rispetto ad un adattamento a posteriori.

#04 Possiamo aggiungere rapidamente l’accessibilità prima del rilascio

Non funzionerà. Forse alla fine potrebbero essere aggiunte cose semplici come testo alternativo o etichettatura dei moduli, ma alcune UX complesse dovrebbero essere pianificate per essere accessibili. In alcuni casi, rendere accessibili le funzionalità al termine del processo di sviluppo può richiedere il refactoring completo.

#05 L’accessibilità riguarda solo l’aggiunta di testo alternativo alle immagini

In effetti, la mancanza di testo alternativo per le immagini è uno dei maggiori problemi di accessibilità . Ma oltre a questo, ci sono molte cose da considerare mentre si rende accessibile la struttura dei titoli del sito Web, i controlli funzionali , il contrasto del colore e molto altro.

#06 L’accessibilità al Web è solo una responsabilità dello sviluppatore

È un lavoro di squadra. I progettisti creano interfacce utente accessibili, gli sviluppatori le realizzano, gli ingegneri QA eseguono i test di accessibilità, i PM si assicurano che l’accessibilità sia inclusa nei processi del team, il team legale verifica se un prodotto sia privo di rischi dal punto di vista dell’accessibilità, i gestori dei contenuti regolano il contenuto per renderlo conforme.

Maggiori informazioni

#07 L’accessibilità aiuta solo le persone con disabilità

Fortunatamente aiuta tutti . È risaputo che l’applicazione dei principi di accessibilità migliora l’esperienza complessiva dell’utente e rende un sito Web più comodo da usare.

#08 Rendere accessibili i siti Web non comporta vantaggi aggiuntivi

Per elencarne solo alcuni: più utenti, più entrate, migliore reputazione, meno rischi di essere citati in giudizio, migliore competenza dei team di sviluppo e molto altro. Alla fine, fare una cosa buona non deve sempre richiedere una ragione redditizia.

#09 L’accessibilità può essere riparata dall’overlay di accessibilità

Assolutamente no. C’è un’iniziativa firmata da centinaia di professionisti che sostiene la rimozione dell’overlay di accessibilità web.

Questo a mio avviso è un punto di discussione molto interessante relativo al lungo termine e come integrazione a strumenti che già l’utente possiede e che possono andare in contrato con queste pratiche

#10 L’utilizzo di strumenti automatizzati è tutto ciò che devo fare per rendere accessibile il mio sito web

Sarebbe facile, ma no. Di solito i test di accessibilità automatizzati possono rilevare solo il 30-50% di tutti i problemi di accessibilità . In effetti, alcuni siti Web possono essere costruiti in modo tale da superare i test automatici anche se il sito Web è totalmente inaccessibile.

#11 L’accessibilità è riservata agli utenti non vedenti

Certamente, l’accessibilità influisce sull’esperienza degli utenti non vedenti, ma riguarda anche gli utenti con altre disabilità visive come il daltonismo. Naturalmente avvantaggia anche le persone con altre forme di disabilità, legate all’udito, alla mobilità, alla parola o alla cognizione. Funziona anche per utenti anziani. In breve, per tutti gli utenti. È essenziale per alcuni ma utile per tutti.

Maggiori informazioni

#12 L’accessibilità è facoltativa

Fino a quando la tua azienda non è stata citata in giudizio. Scopri le cause di Netflix e Domino per capire che il prezzo per non essere accessibile potrebbe essere troppo alto. Ci sono molte leggi che possono richiedere l’accessibilità di un sito web.

#13 L’accessibilità riguarda solo la prevenzione di azioni legali

L’accessibilità riguarda i tuoi utenti. Ovviamente, prevenire le azioni legali è importante per qualsiasi azienda, ma anche la soddisfazione degli utenti e la reputazione dell’azienda apportano molto valore.

#14 L’accessibilità consiste solo nel seguire le WCAG

Di solito parte da WCAG, ma nella vita reale un sito Web conforme potrebbe non essere ancora completamente accessibile. L’accessibilità riguarda la comprensione dei bisogni di tutti gli utenti, nonché l’empatia e la consapevolezza.

#15 L’accessibilità può essere ottenuta solo aggiungendo attributi ARIA

Naturalmente, ARIA è una parte importante dell’accessibilità, ma la regola d’oro di ARIA è “Non usare ARIA”. Molti attributi ARIA potrebbero non essere necessari se vengono utilizzati tag HTML semantici.

#16 Non abbiamo bisogno di essere conformi

Forse ne hai bisogno. Esistono numerose leggi e regolamenti che possono richiedere a un sito Web di seguire i principi di accessibilità. Vale sicuramente la pena controllarli.

Maggiori informazioni

#17 Solo gli esperti di accessibilità possono implementare correzioni di accessibilità

Per fortuna no. Chiunque abbia alcune capacità di accessibilità può implementare e testare i siti Web per l’accessibilità. In effetti, non è solo facile da imparare, ma a volte è un processo piuttosto divertente. Non richiede un’esperienza specifica per eseguire i controlli facili.

#18 L’accessibilità è come una funzionalità: lo fai una volta e poi ce l’hai

L’accessibilità è una pratica, non una caratteristica. Significa che bisogna prendersene cura regolarmente, sia quando si lavora su funzionalità che quando si eseguono lavori di manutenzione. La conoscenza dell’accessibilità dovrebbe essere trasmessa quando un nuovo membro del team si unisce o quando i requisiti cambiano.

Maggiori informazioni

#19 L’accessibilità può essere risolta fornendo una versione del sito Web separata per le persone disabili

Quella è sempre stata un’ipotesi sbagliata. Molti team di sviluppo hanno imparato a proprie spese che mantenere diverse versioni del sito Web e mantenere tutti i contenuti aggiornati costano molto di più rispetto alla creazione dell’unico sito Web completamente accessibile.

#20 Le persone con disabilità non usano il web

È sbagliato. Infatti, in alcuni casi internet è l’unico modo con cui le persone disabili possono comunicare con il mondo. Inoltre, laddove le “persone abili” utilizzano le loro sensazioni naturali come la vista e l’udito, le persone con disabilità devono fare affidamento sulle tecnologie.

Maggiori informazioni

#21 I ciechi non guardano i film

Lo fanno sicuramente. Con l’aiuto delle descrizioni audio possono guardare e ascoltare qualsiasi contenuto multimediale come fanno tutte le altre persone.

Maggiori informazioni

#22 L’accessibilità può essere verificata solo da persone disabili

Bene, di solito le persone disabili sono i migliori tester: usano le tecnologie assistive a tempo pieno. Tuttavia, tutti possono imparare a testare l’accessibilità dei siti Web.

Maggiori informazioni

Conclusione

Quindi amici sviluppatori e designer, da domani sforziamoci un po’ di più a migliorare il mondo per tutti quanti.

Happy

0 0 %

Sad

0 0 %

Excited

0 0 %

Sleepy

0 0 %

Angry

0 0 %

Surprise

0 0 %

Eccoci al secondo appuntamento, se ve lo siete persi, ecco il primo articolo, con “abbelliamo le nostre pagine con i CSS”, suona un po’ come “divertiamoci con le bandiere” di Big Bang Theory.

Parliamo di Gradienti.

È una delle tendenze di questo 2020 insieme alla tipografia, che da qualche anno è veramente in crescita e quest’anno più che mai con i Variable Fonts, alle immagini vettoriali, le animazioni e le ombre.

Puoi registrarti adesso sul sito CSSsemantico.it per ricevere GRATUITAMENTE la tua copia del mio libro in formato elettronico appena sarà disponibile.

Vediamo di cosa si tratta, anche se risulta chiaro e di come li possiamo usare. Possiamo utilizzare diverse tipologie di gradienti e, grazie alle caratteristiche che possiamo impostare, usanti in modi veramente divertenti creando effetti molto interessanti.

Prima di iniziare, specifichiamo due cose:

• I gradienti sono applicabili allo sfondo di un oggetto ma non sono un colore, è un’elaborazione che dal browser è vista come uno speciale tipo di un’immagine, per questo motivo la dobbiamo utilizzare in modo corretto con la proprietà background o background-image. Non è valido come background-color.
• Essendo gestiti come immagini, possiamo applicare più di un gradiente o utilizzare anche immagini, allo stesso oggetto con effetti di sovrapposizione molto efficaci.

Iniziamo.

Gradienti lineari

<!-- Html -->
<div class="content">
</div>

/* stile */
.content {
  background: linear-gradient(white, black);
}

Esempio semplice, un gradiente lineare dall’alto al basso che parte dal bianco e arriva al nero.

La funzione linear-gradient prende in ingresso un minimo di due valori, quello di partenza e quello di arrivo e calcola in automatico tutti i passaggi di colore. Certo, prende in ingresso MINIMO due valore, ma possiamo specificarne più di due. Ecco il risultato se tra il bianco e il nero mettiamo il rosa.

Fino a qui è facile, ma ci sono moltissime altre varianti che possiamo applicare.

La funzione linear-gradient, come detto, prende in ingresso diversi parametri, il primo, se diverso da un colore, rappresenta la direzione verso la quale si deve applicare il gradiente oppure il suo angolo. Se non viene specificato, come nei due esempi precedenti, è equivalente a dall’alto al basso TO BOTTOM.

Anche per l’elenco dei colori abbiamo diverse possibilità per singolo parametro, possiamo infatti specificare il colore, da quando questo deve applicarsi fino a quando deve finire, questo per permettere il massimo livello di personalizzazione del gradiente.

Ecco la Sintassi formale.

linear-gradient(
  [ <angolo> | to <lato-di-destinazione>,]? <lista-colori> )

Vediamo alcuni esempi di come dichiarare il gradiente lineare.

/* dall'alto in basso, dal bianco al nero */
.content {
background: linear-gradient(white, black);
}

/* dal rosso al blu con un angolo di 45 gradi */
.content {
background: linear-gradient(45deg, red, blue);
}

/* dall'arancio, che parte dal 60% al ciano con un angolo di 135 gradi */
.content {
background: linear-gradient(135deg, orange, orange 60%, cyan);
}

/* verso destra con rosso, arancio, giallo, verde e blue, in questo esempio i colori vengono definiti senza sfumatura in quanto viene specificato l'intervallo di interruzione per ogni colore senza spazio di incrocio tra colori */
.content {
background: linear-gradient(to right, 
     red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);
}

/* Questo lo lascio provare a voi ;) */
.content {
background:
      linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
      linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
      linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
}

Gradienti radiali

<!-- Html -->
<div class="content">
</div>

/* stile */
.content {
  background: radial-gradient(white, black);
}

Nulla di più semplice, cambi la funzione e il gradiente è circolare partendo dal centro e andando verso l’esterno.

Il principio della funzione radial-gradient è il medesimo di linear-gradient, la differenza principale sta nel primo parametro nel qualche possiamo specificare le caratteristiche del modello circolare da applicare.

Ecco la Sintassi formale.

radiale gradiente (
  [[cerchia || <lunghezza> ] [at <posizione> ]? , |
    [ellisse || [ <lunghezza> | <percentuale> ] {2}] [at <posizione> ]? , |
    [[cerchia | ellisse] || <extent-keyword>] [at <posizione> ]? , |
    a <posizione> ,
  ]?
  <color-stop-list> [, <color-stop-list>] +
)

Come vedete, le combinazioni date dai parametri sono molo flessibili, con qualche esempio vi sarà tutto più chiaro.

/* Gradiente semplice, inizio centrale, allo 0% ciano, trasparente dal 20% e salmone dal 40% fino al riempimento  */
.radial-gradient {
  background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
} 

/* Gradiente non centrato, inizio dall'angolo alto-sinistra con un scostamento di 40px per lato e procedo con i colori #f35 fino a #43e */
.radial-gradient {
  background-image: radial-gradient(farthest-corner at 40px 40px,
      #f35 0%, #43e 100%);
}

Come nel caso del gradiente lineare, possiamo specificare intervalli più aperti o più chiusi per determinare la gradazione e l’effetto si incrocio tra i vari colori.

Per un maggiore dettaglio, vi rimando al link della documentazione ufficiale Mozilla dal qualche ho preso questi esempi e che estende le informazioni relative ai parametri.

Gradiente conico

Lo inserisco perché lo considero molto interessante da diversi punti di vista ma questa funzione non è ancora supportata dal tutti i browser, inoltre, dal punto di vista esclusivamente stilistico non è pratico e poco adattabile a creare layout di impatto.

Qui trovate la lista dei browser compatibili che supportano questa funzione.

La sua presenza, dove supportata è però molto utile, se proviamo ad applicare qualche proprietà aggiuntiva, come ad esempio un border-radius, lasciamo un intervallo di un grado tra gli angoli di interpolazione, ecco il risultato.

/* ecco lo stile per creare il nostro grafico */
background: conic-gradient(
    red 6deg,
    orange 7deg 68deg,
    yellow 69deg 120deg,
    green 121deg 280deg,
    blue 281deg
  );

Un perfetto grafico a torta, in puro CSS, senza l’utilizzo di complicate librerie grafiche in JavaScript o altri linguaggi.

Anche in questo caso, vi rimando al link della documentazione ufficiale Mozilla, cambia il primo parametro e le impostazioni dei parametri colori per determinare l’intervallo di angolazione.

Altre funzioni

Esistono altre funzioni di supporto alla creazione di gradienti, con supporto alle ripetizioni e altre funzionalità interessanti, ma anche queste in parte non sono ancora supportate da tutti i browser quindi aspettiamo che il tutto prenda una forma ufficiale.

CSS sta evolvendo tantissimo, ogni sula parte ha intrapreso diverse strade e si cercando di non disperdere il tutto in ulteriori sotto-rami che possano a loro volta diventare altro.

Si sta cercando di tenere tutto assieme per proporre un CSS4, che forse non vedremo mai nel suo insieme.

Sarà un ulteriore argomento di discussione.

Puoi registrarti adesso sul sito CSSsemantico.it per ricevere GRATUITAMENTE la tua copia del mio libro in formato elettronico appena sarà disponibile.

Risorse utili

Documentazione

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients
• https://www.w3schools.com/css/css3_gradients.asp

Strumenti
Utili per creare i gradienti in modo visivo e veloce.

• https://cssgradient.io/
• https://webgradients.com/
• https://www.colorzilla.com/gradient-editor/
• https://uigradients.com/

Happy

0 0 %

Sad

0 0 %

Excited

0 0 %

Sleepy

0 0 %

Angry

0 0 %

Surprise

0 0 %

Nel mio articolo della settimana scorsa sulle Animazioni con CSS, ho parlato di come iniziare ad utilizzare le animazioni per dare vita agli elementi della pagina. Oggi parliamo di un’altra funzionalità utile allo scopo, le transizioni.

Puoi registrarti adesso sul sito CSSsemantico.it per ricevere GRATUITAMENTE la tua copia del mio libro in formato elettronico appena sarà disponibile.

Le transizioni permettono di cambiare lo stile degli elementi della pagina, a differenza delle animazioni, che in base al momento impostano delle proprietà specifiche, le transizioni ci consentono di cambiare valore su una o più proprietà di un oggetto decidendo in quanto tempo questa transizione debba avvenire. L’effetto di transizione inizierà quando la proprietà CSS specificata cambia valore. È importante ricordare che la direzione è sempre unica e unidirezionale, passo dal valore X della proprietà A al valore Y della proprietà A in N secondi.

Facciamo un esempio.

/* Proprietà dell'elemento */
div {
  position:relative;
  left:50%;
  width: 100px;
  height: 100px;
  background: green;
  transform: translateX(-50%);

  transition: width 1s;
}

/* Proprietà di variazione dell'elemento al passaggio del mouse */
div:hover {
  width: 300px;
}

L’esempio sopra dice che, il mio elemento div ha una transizione transition sulla lunghezza width della durata di 1 secondo. Significa che ogni volta che verrà modificato il valore della proprietà width, in questo caso andando con il mouse sopra all’elemento, si attiverà una transizione che porterà al nuovo valore animando l’oggetto per 1 secondo.

Come per le animazioni, anche per questa funzionalità sono presenti proprietà dedicate, vediamole.

Le proprietà di trasformazione

transition-delay
Specifica un ritardo (in secondi) per l’effetto di transizione.

transition-duration
Specifica la durata della trasformazione.

transition-property
Specifica quale proprietà, alla quale cambio il valore, deve attivare la transizione. i possibili valori sono:

• all – La transizione si attiva per qualsiasi proprietà che modifichiamo del nostro elemento (impostazione predefinita)
• nome della proprietà – Possiamo specificare una o più proprietà, separate da virgola, per le quali vogliamo attivare la transizione.

transition-timing-function
Specifica la curva di velocità dell’effetto di transizione, i possibili valori di questa proprietà sono i seguenti:

• ease – specifica un effetto di transizione con un avvio lento, quindi veloce, quindi termina lentamente (impostazione predefinita)
• linear – specifica un effetto di transizione con la stessa velocità dall’inizio alla fine
• ease-in – specifica un effetto di transizione con un avvio lento
• ease-out – specifica un effetto di transizione con una fine lenta
• ease-in-out – specifica un effetto di transizione con inizio e fine lenti
• cubic-bezier(n,n,n,n) – consente di definire i propri valori in una funzione cubica-bezier

transition
Questa proprietà è la classica scorciatoia presente in CSS, la possiamo utilizzare nel seguente modo…
transition: property duration timing-function delay|initial|inherit;

Tips

Ecco un modo molto comodo per specificare i valori, come nella proprietà transition-property posso specificare più valori, anche per la proprietà transition-duration posso specificare più valori separati da virgola, questo verranno mappati, in passa alla posizione, sulla proprietà specifica.

div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s, 3s, 5s;
}

In questo esempio, opacity ci metterà 3s, left 5s, e così via.

Ma dove posso/devo usarla?

Personalmente utilizzo tantissimo le transizioni, le trovo particolarmente eleganti, perché di questo si parla, per la gestione degli stati degli elementi, usato in combinazione con JavaScript. Un altro campo nel quale le utilizzo è per la responsività e l’adattamento degli elementi nella pagina in fase di ridimensionamento del browser oppure per l’adattamento del contenuto per i dispositivi mobili.

Fammi sapere sui miei canali Social se questo articolo ti è stato utile e non dimenticare…

Puoi registrarti adesso sul sito CSSsemantico.it per ricevere GRATUITAMENTE la tua copia del mio libro in formato elettronico appena sarà disponibile.

Happy

0 0 %

Sad

1 100 %

Excited

0 0 %

Sleepy

0 0 %

Angry

0 0 %

Surprise

0 0 %

Oggi parliamo di una funzionalità di CSS che apprezzo particolarmente perché permette di dare vita agli elementi della pagina. Parliamo di animazioni CSS.

Oramai lo avrete capito, sono veramente un fan sfegatato di Cascading Style Sheet, il fatto che ci stia scrivendo anche un libro conferma la cosa.

Puoi registrarti adesso sul sito CSSsemantico.it per ricevere GRATUITAMENTE la tua copia del mio libro in formato elettronico appena sarà disponibile.

Dicevamo, parliamo di animazioni. CSS mette a disposizione alcune proprietà e regole che permettono di definire le caratteristiche dell’animazione che vogliamo applicare ai nostri elementi. Vediamoli in dettaglio e facciamo qualche esempio.

Le proprietà

Questo è l’elenco delle proprietà utili alla gestione dell’animazione. Queste proprietà vengono assegnate all’elemento che vogliamo animare.

animation-name
Identifica il nome dell’animazione che vogliamo applicare all’elemento

animation-duration
Definisce la durata dell’animazione, esempio: 4s, l’animazione durerà quattro secondi.

animation-delay
Rappresenta il ritardo che deve attendere l’animazione prima di iniziare, esempio: 2s, l’animazione inizierà dopo due secondi.

animation-iteration-count
Specifica il numero di volte in cui viene eseguita un’animazione. Impostando il valore infinite, l’animazione verrà eseguita in modo continuo (loop).

animation-direction
Specifica se un’animazione deve essere riprodotta in avanti, all’indietro o in cicli alternati, i possibili valori sono:

• normal– L’animazione viene riprodotta normalmente (in avanti). Questo è predefinito
• reverse – L’animazione viene riprodotta in senso inverso (all’indietro)
• alternate – L’animazione viene riprodotta prima in avanti, quindi all’indietro
• alternate-reverse – L’animazione viene riprodotta prima all’indietro, quindi in avanti

animation-timing-function
Questa proprietà, specifica la curva di velocità dell’animazione, i valori assegnabili sono:

• ease – Specifica un’animazione con avvio lento, quindi veloce, quindi fine lento (impostazione predefinita)
• linear – Specifica un’animazione con la stessa velocità dall’inizio alla fine
• ease-in – Specifica un’animazione con un avvio lento
• ease-out – Specifica un’animazione con una fine lenta
• ease-in-out – Specifica un’animazione con inizio e fine lenti
• cubic-bezier(n,n,n,n) – Consente di definire i propri valori in una funzione cubica-bezier

animation-fill-mode
Specifica uno stile per l’elemento quando l’animazione non viene riprodotta (prima che inizi, dopo che finisce, o entrambi). e animazioni CSS non influiscono sull’elemento prima della riproduzione del primo fotogramma chiave o dopo la riproduzione dell’ultimo fotogramma chiave.
I valori disponibili sono:

• none– Valore predefinito. L’animazione non applicherà alcuno all’elemento prima o dopo l’esecuzione
• forwards – L’elemento manterrà i valori di stile impostati dall’ultimo fotogramma chiave (dipende da animazione-direzione e animazione-iterazione-conteggio)
• backwards – L’elemento otterrà i valori di stile impostati dal primo fotogramma chiave (dipende dalla direzione dell’animazione) e li manterrà durante il periodo di ritardo dell’animazione
• both – L’animazione seguirà le regole sia in avanti che all’indietro, estendendo le proprietà dell’animazione in entrambe le direzioni

animation
Questa proprietà permette di definire in un’unica volta le caratteristiche dell’animazione che vogliamo applicare invece di utilizzare le singole proprietà. È l’equivalente di proprietà come border, overflow, ecc.
Questa è la modalità con la quale possiamo definire l’animazione usando questa proprietà.

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

La regola @keyframes

La regola @keyframes, come per @media, @support, ecc. è una regola di definizione. Questa permette infatti di definire i passaggi (keys) sulla nostra linea temporale di animazione, del resto se ne occupa il motore di render del browser che state utilizzando, l’animazione cambierà gradualmente dallo stile corrente al nuovo stile.

Ma come definisco un’animazione?

/* Definizione */
@keyframes <nome_animazione> {
    <key> { ... }
}

/* Esempio */
@keyframes primaanimazione  {
  from {
    background-color: red;
  }
  to {
    background-color: green;
  }
}

/* Elemento */
.animation {
  animation-name: primaanimazione;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
}

Posso ovviamente creare tutto le animazioni di cui ho bisogno, suggerisco di non usare nomi a caso, siate prolissi piuttosto che andare a codici che con il tempo potreste dimenticare.
Nell’esempio di seguito, ho applicato l’animazione definita sopra.

from…to

Per dichiarare i nostri passaggi sulla linea temporale, possiamo utilizzare due modalità, la prima è un semplice riferimento inizio (from) – fine (to), la seconda è un valore da 0% a 100% che identifica il valore progressivo dell’animazione, la durata dell’animazione è definita dalla proprietà animation-duration associato all’elemento che stiamo animando.

Possiamo, volendo, anche utilizzate l’insieme delle due dichiarazioni.

/* Esempio 1 - From/To */
@keyframes primaanimazione  {
  from {
    background-color: red;
  }
  to {
    background-color: green;
  }
}

/* Esempio 2 - % */
@keyframes primaanimazione  {
  0% {
    background-color: red;
  }
  50% {
    background-color: yellow;
  }
  100% {
    background-color: green;
  }
}

/* Esempio 2 - Mix */
@keyframes primaanimazione  {
  from {
    background-color: red;
  }
  50% {
    background-color: yellow;
  }
  to {
    background-color: green;
  }
}

Questo è il risultato degli esempi appena definiti.

Ogni passaggio che andiamo a definire può contenere ovviamente tutte le proprietà necessarie per animare il nostro elemento, dai colori, alla forma, alla posizione, alla dimensione, ecc.

Questi sono alcuni esempi di semplici animazioni utili a capire il livello di complessità che possiamo raggiungere.

Il prossimo passaggio è di rendere animati gli elementi con i quali interagiamo.

Puoi registrarti adesso sul sito CSSsemantico.it per ricevere GRATUITAMENTE la tua copia del mio libro in formato elettronico appena sarà disponibile.

Al prossimo appuntamento, parleremo di transizioni, e altri effetti, che ci aiutano a dare vita alla nostra pagina. L’esperienza utente diventa molto più efficace se corredata dai giusti movimenti.

Happy

1 33 %

Sad

2 67 %

Excited

0 0 %

Sleepy

0 0 %

Angry

0 0 %

Surprise

0 0 %

In questo appuntamento, parliamo di quelle proprietà che possono fare la differenza quando creiamo una pagina. Piccoli suggerimenti utili, e privi di sforzo, per aggiungere alle nostre pagine effetti che si notano.

Puoi registrarti adesso sul sito CSSsemantico.it per ricevere GRATUITAMENTE la tua copia del mio libro in formato elettronico appena sarà disponibile.

Sticky

Di certo vi sarà capitato di realizzare pagine contenenti menu, o porzioni della pagina, che volevate tenere visibili anche durante la fase di scorrimento della pagina. Probabilmente avrete trovato mille script che vi permettevano di farlo e così li avete aggiunti al vostro codice facendo vari copia e incolla dal web. Ma, forse, non sapevate che grazie a CSS questa funzionalità è già disponibile e facile da utilizzare.

Questo ne è un’esempio, se fate scorrere la pagina, gli elementi ai lati si bloccheranno, o meglio ancora, si ancoreranno in cima alla pagina smettendo di seguire lo scorrimento, che potrà essere via verticale che laterale (questo lo posso considerare un sotto suggerimento ;)).

Se arrivate in fondo al testo, ne trovate un terzo. Chi cerca trova.

Come facciamo per applicare questo effetto grazie a CSS…

.sticky-on {
  position: sticky;
  top: 10px;
}

Vado a definire una classe nella quale assegno, alla proprietà position, il valore sticky. A questo poi devo associare anche il valore di quanto deve essere distante dal bordo superiore, top: 10px.

Un altro grande vantaggio nell’utilizzare Sticky, è che l’oggetto nella pagina occupa la sua posizione e la sua dimensione fino a quando non viene attivata la condizione di ancoraggio, molto meglio di elementi in posizione fissa o assoluta sui quali poi dobbiamo gestire gli scostamenti verso gli altri elementi.

Veramente semplice e di facile applicazione, con nessuno sforzo la nostra pagina ha già una forma diversa.

Puoi registrarti adesso sul sito CSSsemantico.it per ricevere GRATUITAMENTE la tua copia del mio libro in formato elettronico appena sarà disponibile.

Filtri sfondo

Un altro effetto che mi piace particolarmente e che con il tempo ho sempre cercato di realizzare nei modi più disparati, anche grazie a librerie grafiche JavaScript, è l’effetto di sfocatura dello sfondo, in pieno stile Apple Safari per IOS. Esempio…

La proprietà backdrop-filter:, è nata proprio per questo, applicare filtri di sfondo a tutti gli oggetti, al contenuto dell’elemento non viene applicato nulla. Nasce anche come funzionalità per estendere la parte SVG con effetti veramente interessanti. Cosa ulteriore da segnalare, con backdrop-filter, siamo anche in grado di applicare affetti aggiuntivi supportati da immagini. Ma andiamo a capire meglio di cose si tratta.

<!-- HTML -->
<header>
</header>

/* CSS */
header {
  position: sticky;
  top: 0px;
  min-height: 200px;
  background-color: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid lightgray;

  /* Applico il filtro allo sfondo*/
  backdrop-filter: blur(4px);
}

Nell’esempio, puoi vedere applicato l’effetto, quando scorri, il testo che passerà sotto l’intestazione (che utilizza lo sticky come position), avrà un effetto sfocato.

Non male anche questo come effetto, è applicabile a qualsiasi elemento, possiamo utilizzarlo per fare finestre di dialogo sovrapposte, menu di navigazione a scomparsa e molto altro, basta solo un po di fantasia.

Ma backdrop-filter fa molto di più della “semplice” sfocatura. ecco un elenco di possibili effetti, anche sommabili tra loro, che possiamo sfruttare per vestire la nostra pagina a festa.

/* Valore chiave */
backdrop-filter: none;

/* URL per filtro SVG */
backdrop-filter: url(commonfilters.svg#filter);

/* valore disponibili per i filtri */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);

/* applicazione filtri multipli */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);

/* valori globali */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: unset;

Se ti è piaciuto, ci vediamo al prossimo appuntamento.

Puoi registrarti adesso sul sito CSSsemantico.it per ricevere GRATUITAMENTE la tua copia del mio libro in formato elettronico appena sarà disponibile.

Happy

0 0 %

Sad

0 0 %

Excited

0 0 %

Sleepy

0 0 %

Angry

0 0 %

Surprise

0 0 %

Nell’appuntamento del martedì con i nostri amati CSS, che questa settimana è di venerdì perché ho dovuto sistemare un problema legato alla visualizzazione delle immagini sul blog, ci occupiamo di layout di pagina. Come creiamo un layout che vada sempre incontro alle nostre esigenze, ma anche future.

Puoi registrarti adesso sul sito CSSsemantico.it per ricevere GRATUITAMENTE la tua copia del mio libro in formato elettronico appena sarà disponibile.

Abbiamo da tempo abbandonato le tabelle HTML con tag <table></table>, sfruttate a più non posso, per tanti anni, per realizzare il layout delle nostre pagine HTML. Grazie alla sempre maggiore diffusione di dispositivi diversi per funzionalità e dimensioni dello schermo, e grazie all’evolversi della tecnologia, abbiamo adottato layout più flessibili, questo grazie a posizionamenti relativi e assoluti. Partendo da qui, è stato il tempo di Flexbox, ottimo per fare contenuti dinamici ma non giusto per fare l’impaginazione e poi la griglia (Grid).

Finalmente tutti i browser in circolazione supportano a pieno le novità introdotte nei CSS per queste nuove proprietà, e abbandoniamo quelli legacy, proprio per questo, Bootstrap, nella sua versione 5, quando uscirà, non supporterà più IE 10 e 11, e possiamo dire, finalmente.

Tra le altre cose, sempre Bootstrap 5, introduce alcune novità interessanti:

• Rimozione di jQuery (a vantaggio di altri framework come Rect, Angular, ecc. per evitare problemi di incompatibilità)
• Rimuove il supporto per IE 10 e 11, basta litigare per adattare la nostra pagina per IE e tutti gli altri.
• Libreria di icone SVG personalizzate
• Passando a Hugo da Jekyll
• Aggiornamenti Javascript
• Aggiornamenti e correzioni di CSS e classi minori

Ma torniamo al discorso principale, anche perché personalmente non sono un amante dei framework CSS troppo “invasivi”, esempio Bootstrap, magari farò un post nelle prossime settimane su questo argomento.

Parliamo di griglie CSS, cosa sono e come funzionano.

La griglia è una rappresentazione di linee verticali e orizzontali che si intersecano rappresentando così le righe e le colonne. Gli elementi possono essere posizionati e gestiti all’interno di questa griglia con diverse modalità.

La griglia come contenitore

Per creare un contenitore griglia dichiariamo display: grido display: inline-gridsu un elemento. Non appena lo facciamo, tutti i figli diretti di quell’elemento diventano elementi della griglia .

.wrapper {
  display: grid;
}

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

In un browser Web, non vedrai alcuna differenza nel modo in cui questi elementi vengono visualizzati prima di trasformarli in una griglia, poiché la griglia, grazie all’algoritmo di griglia implicita applicato dal motore di render del browser, crea una griglia a colonna singola per gli elementi. 

Tips&Tricks

Utilizzando Firefox, potresti trovare utile lavorare con Grid Inspector , disponibile come parte degli Strumenti per sviluppatori di Firefox. Se visualizzi questo esempio in Firefox e controlli la griglia, vedrai una piccola icona accanto al valore grid. Fare clic su questo e quindi la griglia su questo elemento verrà sovrapposta nella finestra del browser.

Puoi registrarti adesso sul sito CSSsemantico.it per ricevere GRATUITAMENTE la tua copia del mio libro in formato elettronico appena sarà disponibile.

Dimensione fissa e flessibile

È possibile creare una griglia con dimensioni fisse espresse in pixel. Questo è comodo se dobbiamo avere un’impaginazione che rispecchi pienamente un’esigenza, che questa sia di tipo grafico o dovuta ad una gestione particolare del contenuto. In alternativa è possibile utilizzare dimensioni flessibili con percentuali o con la nuova unità fr progettata per questo scopo. Rappresenta una frazione dello spazio disponibile nel contenitore della griglia. La successiva definizione della griglia creerebbe tre tracce di uguale larghezza che crescono e si restringono in base allo spazio disponibile. Capirai meglio negli esempi di seguito a questo articolo.

Vediamo quali sono le caratteristiche principali della griglia CSS.

Posizionamento

È possibile posizionare gli elementi in una posizione precisa sulla griglia utilizzando numeri di riga, nomi o specificando un’area definita all’interno della griglia. La griglia CSS contiene anche un algoritmo per controllare il posizionamento di elementi non assegnati a una posizione esplicita sulla griglia, questo aiuta ma è evidente che dobbiamo definire questi puntatori in modo corretto per evitare risultato inaspettati. Se aggiungo un elemento un elemento alla griglia, devo sempre dargli un riferimento di dove questo debba essere posizionato.

Tracce per i contenuti

Grazie a due proprietà specifiche, possiamo definire righe e colonne sulla nostra griglia utilizzando le proprietà grid-template-columnse grid-template-rows. Questi definiscono le tracce della griglia. Una traccia della griglia è lo spazio tra due linee qualsiasi sulla griglia.

Nell’esempio che segue, ho evidenziato quanto detto fino ad ora. Un esempio di come applicare la dimensione fissa e variabile e come utilizzare le tracce. Sono quattro esempi di come definire grid-template-columns.

Nell’esempio, creiamo anche una definizione con una 2fr e poi due 1fr, seguita poi dall’utilizzo della funziona repeat(). Lo spazio disponibile è diviso in quattro. Due parti vengono assegnate alla prima traccia e una parte ciascuna alle due tracce successive.

Allineamento

La griglia contiene funzionalità di allineamento in modo da poter controllare come gli elementi si allineano una volta posizionati in un’area della griglia e come viene allineata l’intera griglia. 

Contenuto sovrapposto

È possibile posizionare più di un elemento in una cella o area della griglia e possono sovrapporsi parzialmente. Questa stratificazione può quindi essere controllata con la z-indexproprietà.

Aree

Questa è la mia proprietà preferita nell’utilizzo della griglia. Grazie alle aree, e sfruttando le media queries @media, possiamo realizzare layout veramente dinamici, flessibili, e perfettamente adattabili ad ogni situazione. È possibile ridefinire l’intera pagina cambiando solo il template di riferimento. Ecco come funziona.

Nel seguente esempio, al contenitore della griglia, aggiungiamo la proprietà grid-template-areas, questa proprietà permette di definire il modello di distribuzione degli elementi.

.wrapper {
  display: grid;
  grid-template-areas: "intestazione  intestazione"
                       "navigazione   contenuto"
                       "navigazione   piedipagina";
}
header {
  grid-area: intestazione;
  background-color: #8ca0ff;
}
nav {
  grid-area: navigazione;
  background-color: #ffa08c;
}
main {
  grid-area: contenuto;
  background-color: #ffff64;
}
footer {
  grid-area: piedipagina;
  background-color: #8cffa0;
}

<div class="wrapper">
  <header>Intestazione</header>
  <nav>Navigazione</nav>
  <main>Contenuto della pagina</main>
  <footer>Informazioni</footer>
</div>

La logica è semplice, crea un modello di griglia definendo dei segnaposto che vadano ad occupare gli spazi.

Se applicassimo una griglia al nostro modello, la vedremo in questo modo

• Il segnaposto “intestazione” occupa due colonne e la prima riga
• Il segnaposto “navigazione” prende la seconda e la terza riga della prima colonna
• Il segnaposto “contenuto” occupa la seconda colonna della seconda riga
• il segnaposto “piedipagina” occupa la seconda colonna della terza riga

Utilizzo poi gli identificativi dei segnaposto, assegnandoli alla proprietà grid-area, per identificare quali elementi andranno ad occupare quegli spazi.

E questo è il risultato, puoi verificare nel CSS come viene applicato rispetto all’HTML.

Tutto molto comodo da utilizzare e semplice da applicare, con le giuste indicazioni e il giusto utilizzo poi di altre proprietà, possiamo rendere il layout dinamico e potremmo riusciamo a dargli qualsiasi forma che potrebbe, con i giusti equilibri, non sembrare una griglia.

Un suggerimento video…

Questo video di cento secondi è un bel riassunto di quanto detto in questo articolo.

La Grid è potente, se combinata con altre parti di CSS come flexbox , può aiutarti a creare layout che in precedenza erano impossibili da costruire in CSS.

Buon divertimento.

Puoi registrarti adesso sul sito CSSsemantico.it per ricevere GRATUITAMENTE la tua copia del mio libro in formato elettronico appena sarà disponibile.

Happy

0 0 %

Sad

0 0 %

Excited

0 0 %

Sleepy

0 0 %

Angry

0 0 %

Surprise

0 0 %

In questo appuntamento del martedì sui CSS, parliamo di BEM (Block Element Modifier).

BEM — Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development

BEM è una metodologia. Chi crea fogli di stile, si rende conto che non sempre è semplice strutturarli, spesso diamo nomi alle classi che con il tempo continuiamo a modificare per adattarli allo stato del progetto ma spesso non riusciamo a riutilizzare nulla di quello che viene fatto su altri progetti e altre volte il tutto risulta confusionario e poco mantenibile nel tempo.

Esistono diverse strade per definire un proprio modello di scrittura dei CSS che possiamo utilizzare e riutilizzare più volte, nel mio nuovo libro vado a suggerire diverse strade per ottimizzare questa parte del lavoro.

Puoi registrarti adesso sul sito CSSsemantico.it per ricevere GRATUITAMENTE la tua copia del mio libro in formato elettronico appena sarà disponibile.

BEM definisce una convenzione di denominazione per le classi CSS in modo che possano essere più significative e riutilizzabili. Pensiamo BEM come una nomenclatura da applicare in modo gerarchico, vediamo nel dettaglio in che cosa consiste e come applicarlo.

Block

Il Block si posiziona al vertice della gerarchia, definisce l’entità principale del nostro elemento, eccone un esempio.

/* CSS */
.btn {
    /* definisco l'elemento principale */
}

<!-- HTML -->
<input type="submit" class="btn" />

I block possono essere nidificati l’uno dentro l’altro e si possono comporre solo con:

• lettere
• numeri
• trattini

Element

L’Element è sempre dipendente dal block e deve essere semanticamente rilevante. Deve essere leggibile e comprensibile nella forma e nel significato. Al contrario dei “block” non può esistere in maniera indipendente, è sempre correlate al “block”. Gli “element” possono essere inseriti all’interno e questi sono indicati da due caratteri di sottolineatura che seguono il nome del blocco. Ecco un esempio di come definirlo.

/* CSS */
.btn {
    /* definisco l'elemento principale */
}
.btn__primary {
    /* definisco le caratteristiche specifiche per questo elemento */
}

<!-- HTML -->
<input type="submit" class="btn btn__primary" />

Gli element si possono comporre solo con:

• lettere
• numeri
• trattini
• trattini bassi ( underscore )

Modifier

Il Modifier serve, come suggerisce anche il nome, a modificare block e element. I “modifier” possono manipolare il blocco in modo da poter applicare temi o stili a quel particolare componente senza infliggere modifiche su un modulo completamente non correlato. Questo viene fatto aggiungendo due trattini al nome del blocco.

/* CSS */
.btn {
    /* definisco l'elemento principale */
}
.btn__price {
    /* definisco l'elemento nella sua specificità */
}

.btn--red {
    /* definisco un modificatore dell'elemento per il colore rosso */
}
.btn--green {
    /* definisco un modificatore dell'elemento per il colore verde */
}
.btn--big {
    /* definisco un modificatore dell'elemento per la dimensione */
}

<!-- HTML -->
<input type="submit" class="btn btn__price btn--red" />

I modifier si possono comporre solo con:

• lettere
• numeri
• trattini
• trattini bassi ( underscore )

Vantaggi nell’utilizzo

Come avete visto, grazie alla condivisione di queste semplici regole possiamo creare componenti che sono chiari e definiti nelle loro caratteristiche e chi legge il nostro codice, capisce molto semplicemente le gerarchie e l’applicazione delle classi.

Se un altro sviluppatore ha scritto un markup HTML e non conoscevamo i CSS, dovremmo comunque avere una buona idea di quali classi sono responsabili di cosa e come dipendono l’una dall’altra. Gli sviluppatori possono quindi creare i propri componenti e modificare il blocco esistente in base al loro contenuto. Senza scrivere molto CSS, gli sviluppatori sono potenzialmente in grado di creare molte diverse combinazioni di pulsanti semplicemente cambiando una classe nel markup.

Importante

La cosa da tenete a mente nell’applicazione di BEM è seguire le regole, se questo non avviene, allora diventa complesso capire come applicarle. Dobbiamo essere attenti se facciamo estensioni, dobbiamo seguire sempre la gerarchia di Block > Element > Modifier o del più semplice Block > Modifier.

Nessuno ci vieta di mettere un selettore di modifier in un element che non appartiene allo stesso block o allo stesso element.

.nav .nav__listItem .btn--orange {
  background-color: green;
}

Questo è un errore perché abbiamo un modifier che è annidato in un element che non appartiene allo stesso block.

Con un po di attenzione, è certamente un modo interessante per scrivere CSS. Se vuoi scoprire altri interessanti suggerimenti per scrivere al meglio i tuoi CSS, puoi registrarti adesso sul sito CSSsemantico.it per ricevere GRATUITAMENTE la tua copia del mio libro in formato elettronico appena sarà disponibile.

Happy

0 0 %

Sad

0 0 %

Excited

0 0 %

Sleepy

0 0 %

Angry

0 0 %

Surprise

0 0 %

Oggi, nel consueto martedì dedicato ai CSS, parliamo di cinque funzioni che potresti non conoscere.
I fogli di stili nel tempo si sono evoluti molto per consentire una migliore e maggiore flessibilità, vediamo.

Puoi registrarti sul sito CSSsemantico.it per ricevere GRATUITAMENTE la tua copia del mio libro in formato elettronico appena sarà disponibile.

calc(…)

Personalmente è una delle funzioni che più utilizzo, quando vogliamo calcolare la corretta dimensione di un oggetto, ci preoccupiamo sempre di determinare le unità di misura da utilizzare a priori, percentuale, in punti, ecc. La capacità di questa funzione è quella poter calcolare in modo dinamico, anche utilizzando unità diverse, la lunghezza di un valore in ingresso.

Sintassi:

calc(<valore> <operatore> <valore>...);

Esempio:

calc(100% - 80px);

calc(100% / 4);

L’espressione può essere qualsiasi espressione semplice che combina i operatori standard:

Addizione +
Sottrazione –
Moltiplicazione * (almeno uno degli operatori deve essere numerico)
Divisione / (il lato destro dell’operatore deve essere numerico)

Molto comodo che utilizzo percentuali alle quali devo togliere pixel per via di padding o margin applicati a oggetti interni, oppure per determinate la dimensione in rapporto alla pagina con oggetti persistenti con dimensione fissa come barre per strumenti o simili.

attr(…)

La funzione attr() viene utilizzata per recuperare il valore di un attributo dell’elemento selezionato e utilizzarlo nel foglio di stile. Può essere utilizzato anche su pseudo-elementi.

Sintassi:

attr(<nome attributo> <tipo o unità>, <valore di fallback>);

Il tipo di unità è relativo alla tipologia, stringa, numero, ecc.

Alcuni esempi:

<button data-color="red"></button>
<button data-color="green"></button>
<button data-color="blue"></button>

button {
	color:attr(data-color);
}

Utile se vogliamo rendere dinamici gli elementi e utilizzare gli attributi per gestire le proprietà di classi condivise.

var(…)

CSS ha introdotto di recente il supporto delle variabili, o più precisamente, proprietà personalizzate, queste possono essere riassegnate a cascata per una maggiore flessibilità. Al pari dei preprocessori tipo SASS e LESS, consente di gestire in modo strutturato i valori dei nostri stili. Invece di ripetere lo stesso valore in più classi, oggi possiamo, direttamente in CSS, dichiarare una proprietà personalizzata, assegnarle un valore e usare direttamente la proprietà.

Sintassi:

var(<nome della proprietà>, <valore di fallback>?);

Possiamo utilizzare altre proprietà personalizzate come valori di fallback.

Esempio:

:root {
  --main-bg-color: pink;
}

body {
  background-color: var(--main-bg-color);
}

// Sovrascrivo il valore della variabile
body .content {
  --main-bg-color: red;

  background-color: var(--main-bg-color);
}

Possiamo utilizzare le variabili come parametri per le funzioni come calc(…) oppure rgb(…), esempio:

:root {
  --content-size: 100%;

  --color-r: 80;
  --color-g: 120;
  --color-b: 60;
}

.content {
  width: calc(var(--content-size) / 5);

  background-color: rgb( var(--color-r) , var(--color-g) , var(--color-b) );
}

@import

Probabilmente lo conoscete perché si vede spesso utilizzato per includere i font da Google o da altri servizi simili.
@Import nella realtà, nasce per includere altri fogli di stili in uno. Molti preprocessori lo utilizzano per combinare i CSS inclusi in fase di compilazione.

Sintassi:

@import <url|string> <lista media queries>;

Esempio:

@import "colori.css" print;

@import "layout.css" screen and (max-width: 768px);

In questo modo, possiamo gestire fogli di stili singoli a seconda delle necessità.
Possiamo creare un file principale main.css così strutturato:

@import "colors.css";
@import "master.css";
@import "layout.css";
@import "footer.css";

body {
  /* utilizziamo la variabile presente in "colors.css" */
  background-color: var(--main-bg-color); 
}

@supports

Questa è una di quelle che che preferisco. Oggi più che mai, utilizziamo fogli di stile che devono funzionare su diversi dispositivi, ma come spesso succede, non tutti questi hanno un supporto a tutti gli stili, alcuni ne possiedono di personalizzati utili per specifiche funzionalità o personalizzati da produttore, vedi Smart TV, Smart Watch, ecc.

Ma come facciamo a sapere se possiamo o meno utilizzare uno stile specifico su uno specifico dispositivo?

@supports ci viene in aiuto in questi casi. Lo possiamo utilizzare per applicare stili specifici se viene supportata una specifica proprietà.

Per semplificare, se è supportata la proprietà x, allora applica queste regole, possiamo anche determinare se una proprietà NON viene supportata allora applica altre regole.

Sintassi:

@supports (not) <condizioni supportata> {
  <regole css da applicare>
}

La condizione che vado a verificare può essere anche multipla utilizzando operatori booleani come OR e AND.

Esempio:

// Verifico se supporta il valore grid nella proprietà display
@supports (display: grid) {
  .main {
    display: grid;
  }
}

@supports not (display: grid) {
  .main {
    display: relative;
  }
}

@supports (display: table-cell) and (display:run-in) {}
@supports (transform-style: preserve) or (-moz-transform-style: preserve) {}

Conclusioni

Se le conoscevate tutte e le usate, bravissimi/e, usate al meglio CSS.
Se ne usate solo alcune, non male, mi piacerebbe vedere i vostri fogli di stile.
Se invece non ne conoscevate nessuna, non vi preoccupate, adesso le conoscete e potete usarle.

Puoi registrarti sul sito CSSsemantico.it per ricevere GRATUITAMENTE la tua copia del mio libro in formato elettronico appena sarà disponibile.

Ci rivediamo settimana prossima, buon divertimento.

Happy

0 0 %

Sad

0 0 %

Excited

0 0 %

Sleepy

0 0 %

Angry

0 0 %

Surprise

0 0 %

E’ martedì, non saltiamo il nostro appuntamento settimanale con i Fogli di Stili.

Puoi registrarti sul sito CSSsemantico.it per ricevere GRATUITAMENTE la tua copia del mio libro in formato elettronico appena sarà disponibile.

Oggi parliamo nuovamente di Google Fonts. Nel precedente articolo, abbiamo capito come poter ottimizzazione il dowload dei soli caratteri che dobbiamo utilizzare.
Oggi parliamo di un’altra novità introdotta da CSS e da qualche settimana disponibile anche sul servizio di Google, i font a dimensione e peso variabile. Sono presenti in rete molti altri servizi che supportano questi nuovi fonts.

Sono passati dieci anni dal lancio del servizio, Google introduce un nuovo layout, nuove funzionalità e un’interfaccia più dettagliata per la composizione delle risorse da includere nei tuoi CSS.

Google, con un tweet, ha ufficialmente reso disponibile i Variable Fonts sulla sua piattaforma.

Come possiamo attivare questa nuova interfaccia? Andate su Google Fonts, vi verrà evidenziato che è disponibile una nuova versione (vedi immagine sotto), cliccate e il gioco è fatto.

Subito non sembra tanto diverso ma se vi guardate bene attorno, ci sono un tantissime di novità.
Una volta sul nuovo layout, ci troviamo il filtro dei Variable Fonts subito disponibile.

Selezionandolo, ci verranno filtrati solo i font che supportano la “variabilità” del carattere, questo permette, tramite CSS, di specificare diversi valori come peso, larghezza, inclinazione, ecc. del carattere. Questa è la variabilità, poter occupare spazi diversi, senza fermarsi alla classica modalità di gestione dello stile del testo secondo grassetti o corsivi.

Possiamo dettagliare meglio dicendo che: Il termine carattere e carattere tipografico sono usati da molti in modo intercambiabile. Tuttavia c’è una differenza: un carattere tipografico include un’intera famiglia di disegni, come il carattere tipografico Roboto. Un font è uno dei file digitali di quella famiglia, come “Roboto Bold” o “Roboto Italic”. In altre parole, un carattere tipografico è ciò che vedi e il carattere è ciò che usi.

Per semplificare, quando utilizzo un carattere, e scelgo di specificare il grassetto, sto utilizzando un altro carattere della stessa famiglia, come conseguenza quando includo un font nel mio foglio di stile, includo anche l’intera famiglia se questa mi è utile per mettere in evidenza parti del testo.

Per ottenere un effetto di questo tipo, quando font devo scaricare? il Roboto Thin, il Roboto Black, il Roboto Regular Italic, e così via.

I Variable Fonts cercano, per quando possibile, di migliorare questa situazione. Non tutti i font si adattano a queste nuove caratteristiche perché non per tutti è possibile avere punti mobili che “spostati” mantengono le stesse linee o grazie.

Ma come lavoriamo con questi nuovi caratteri?

Dal mio punto di vista ho trovato la modalità poco lineare, si tratta in sostanza di utilizzare una nuova proprietà chiamata “font-variation-settings” alla quale possiamo assegnare i valori variabili. Credo che sarà soggetto a cambiamenti in futuro, al momento è stata scelta questa modalità per far convivere le due modalità, fonts variabili e non, probabilmente “font-weight” sarà la sua naturale evoluzione, così come è oggi per quelli non variabili.

Questa è la tabella di riferimento

la sintassi è la seguente, un esempio che utilizza solo Peso e Larghezza.

.fontvariabile {
    font-family: AmstelvarAlpha;
    font-variation-settings: 'wdth' 400, 'wght' 98;
  }

Per darvi un’idea più ampia della flessibilità di questo modello, ecco un ottimo esempio.

Vi lascio anche il link alla documentazione developer.mozilla.org relativa ai Variable Fonts.

Buone variazioni!

Puoi registrarti sul sito CSSsemantico.it per ricevere GRATUITAMENTE la tua copia del mio libro in formato elettronico appena sarà disponibile.

Happy

1 100 %

Sad

0 0 %

Excited

0 0 %

Sleepy

0 0 %

Angry

0 0 %

Surprise

0 0 %