CSS - TomStardust.com

CSSDay 2023: il resoconto

Sono stato al CSSDay 2023: un evento tecnico ma non solo, tra accessibilità del web, usabilità, tipografia e design.

Per il secondo anno di seguito sono andato a Faenza per partecipare di persona al CSSDay. È un evento a cui vale la pena partecipare se ti occupi di sviluppo web e vuoi capire in che direzione investire le tue energie.

Il CSSDay 2023 è stato un evento ancora più partecipato rispetto al 2022: un ottimo segnale, con la sala del Teatro Sarti non piena ma comunque affollata.

Quali sono stati gli argomenti?

È stato interessante vedere come Grusp abbia deciso di portare sul palco talk su temi diversi, dedicando anche una sessione ad accessibilità ed usabilità. Non solo interventi tecnici sui CSS quindi, ma anche temi paralleli che sono comunque fondamentali da conoscere per chi si occupa di sviluppo frontend.

Continua a leggere »

Di ritorno dal CSS Day 2022

Sono tornato a partecipare ad una conferenza dopo 3 anni e una pandemia. Com’è stato il CSS Day?

Andiamo subito al sodo: è stato bello.

Grazie a Grusp che ha avuto il coraggio di organizzare un evento simile quando tutti ancora sono titubanti — comprensibilmente — ad accettare la sfida di un evento in presenza. Non era scontato, non è stato sicuramente facile, ma ci sono riusciti.

Il CSS Day 2022 è stata una gran bella occasione per tornare a parlare di tecnologia, sviluppo front-end, UX e non solo.

Per me erano passati almeno 3 anni dall’ultima conferenza in presenza, ed è stato bello rivedere persone conosciute, incontrarne faccia a faccia altre per la prima volta, e prendere nuovi contatti. Il networking è sempre un lato fondamentale degli eventi dal vivo.

Continua a leggere »

Accessibilità dei contenuti generati tramite CSS

La maggior parte degli screen reader riconosce i contenuti generati tramite CSS, ma è bene fare attenzione a come vengono utilizzati.

Se avete utilizzato la proprietà content dei CSS, sapete già quanto sia utile per inserire del contenuto in abbinamento agli pseudo-elementi :after e :before.

Utilizzarla è semplicissimo, visto che il css:

p:before {
   content: "Inizio";
}

p:after {
   content: "Fine";
}

Agisce sul codice della pagina inserendo del contenuto subito prima e subito dopo l’elemento selezionato (il paragrafo in questo caso).

Mi sono chiesto a che punto fosse il supporto degli screen reader per contenuti inseriti in questo modo. Si tratta di testo non esistente all’interno della pagina html, e non è quindi scontato che sia accessibile a tutti i visitatori. Continua a leggere Accessibilità dei contenuti generati tramite CSS »

Magie con i selettori CSS3

Non stai ancora usando i selettori CSS3? Stai perdendo un’opportunità.

Già in passato avevo parlato dei selettori CSS3, che aiutano a scrivere codice HTML ordinato e pulito. Sfruttare i fogli di stile è un ottimo modo per evitare di aggiungere id e classi inutili nelle pagine, ed in particolare nei miei post avevo affrontato due argomenti:

Cosa è cambiato nel frattempo?

Una cosa fondamentale: sono passati più di 5 anni ed ormai non ci sono più problemi di compatibilità cross-browser. È possibile sperimentare, usare tutti i selettori esistenti senza problemi, e se rimangono dei dubbi c’è una risorsa imperdibile come caniuse.com a disposizione.

Continua a leggere Magie con i selettori CSS3 »

CSS modulari e SASS, il workshop

Un riassunto del workshop organizzato da Develer dedicato ai CSS modulari.

Qualche giorno fa ho partecipato ad un workshop organizzato da Develer, azienda fiorentina che tra le altre cose può vantare nel proprio curriculum eventi come Better Software.

Develer workshops

Il workshop era intitolato “CSS e HTML5: organizzare il caos”. Speaker di turno Matteo Papadopoulos, che in poco più di un’ora ha affrontato una serie di temi relativi allo sviluppo di pagine web facili da mantenere grazie alla logica modulare.

L’argomento non era facile da affrontare soprattutto addentrandosi in dettagli tecnici, ma proprio questo ho trovato diversi spunti interessanti.

Continua a leggere CSS modulari e SASS, il workshop »

Quando usare !important nei CSS

Ha senso utilizzare !important in un foglio di stile? La risposta è no, con rare eccezioni.

L’uso di !important nei CSS è la principale causa di frustrazione quando si lavora su un sito, soprattutto se ereditato da altri sviluppatori.

Infatti se all’interno di un CSS ci sono delle regole contrassegnate con !important e questi valori devono essere modificati su dei nuovi elementi, non ci sono molte soluzioni. Le principali sono due:

stravolgere il foglio di stile
entrare in un circolo vizioso aggiungendo nuove regole con !important.

Basta capire questo per rendersi conto di come sia sempre meglio evitarne l’uso. Mi era capitato anche in passato di sfiorare l’argomento parlando degli standard del sito della BBC, dove era appunto proibito agli sviluppatori di utilizzare questa regola.

Continua a leggere Quando usare !important nei CSS »

CSS font-size e l’unità di misura rem

I CSS3 introducono una nuova unità di misura priva dei problemi di em e px.

Esistono vari modi di ridimensionare il testo di una pagina web tramite CSS: in pixel, em e in percentuale.

Tramite un post di Jonathan Snook ho scoperto l’esistenza di una nuova unità di misura introdotta con i CSS3, chiamata rem. Questa unità si comporta in maniera molto simile a em, senza ereditarne i punti deboli.

Continua a leggere CSS font-size e l’unità di misura rem »

CSS3: come usare le transizioni

Una guida sulle CSS3 transitions, disponibili già oggi sui browser più evoluti.

Leggendo CSS3 for Web Designers di Dan Cederholm ho avuto modo di approfondire alcuni moduli che pur non essendo ancora degli standard possono essere già utilizzati in maniera efficace.

La parte che riguarda le CSS3 transitions è una delle più interessanti, perché consente di creare semplici effetti grafici con poche righe di codice all’interno del foglio di stile. E’ assurdo installare interi framework JavaScript per un banale effetto dissolvenza: adesso è possibile evitarlo, con alcuni compromessi.

Continua a leggere CSS3: come usare le transizioni »

CSS design e standard di lavoro

Le linee guida della BBC per i “future media” includono diverse raccomandazioni sulla scrittura dei CSS. Simili pratiche sono solo inutili complicazioni?

Uno dei siti corporate che presta più attenzione ai dettagli è quello della BBC: all’apparenza semplice ed ordinato nonostante i numerosi contenuti, si basa su molte pagine di specifiche tecniche e linee guida che devono essere rispettate dai suoi sviluppatori.

Continua a leggere CSS design e standard di lavoro »