Programmazione.it v6.4
Ciao, per farti riconoscere devi fare il login. Non ti sei ancora iscritto? Che aspetti, registrati adesso!
Info Pubblicità Collabora Autori Sottoscrizioni Preferiti Bozze Scheda personale Privacy Archivio Libri Corsi per principianti Forum
In arrivo le variabili nei CSS?
Scritto da Fabio Lelli il 27-01-2011 ore 09:27
Seminario Intel
Librerie JavaScript come Less o Sass consentono di strutturare la costruzione di un foglio di stile CSS utilizzando variabili, nidificando i selettori, e con altri costrutti che rendono il codice più leggibile e facilmente modificabile. In un post del suo blog, Tab Atkins, membro del CSS Working group e del team di sviluppo di Chrome, presenta alcune innovazioni sperimentali che stanno per essere proposte al W3C, ispirate proprio dalle potenzialità delle summenzionate librerie.
L'introduzione delle variabili permetterebbe di definire uno schema di colori per il sito, o delle dimensioni standard per certi elementi, e di modificarle in modo semplice. La sintassi proposta è :
  1. @var color $colore-sfondo #c06;
A differenza di quanto accade per Less e Sass, le variabili andrebbero quindi tipizzate (qui con la keyword color), con l'intento di costruire un CSS Object Module più coerente di quello attuale.

Senza mezzi termini Atkins afferma che l'attuale CSSOM fa schifo, dato che tutti i valori vengono gestiti attraverso stringhe come "500px", "1.5em". Inserendo direttamente i valori tramite JavaScript potremmo invece avere una sintassi molto più logica; per attribuire un valore:
  1. elemento.style.values.backgroundColor.lightness = 10;
per modificare un valore:
  1. elemento.style.values.width.px += 100;
per ricavare i valori degli elementi:
  1. var larghezzaInEm = el.style.values.borderWidth.em;
Vengono inoltre proposti altri strumenti per facilitare questa sorta di "programmazione" dei fogli di stile, come ad esempio i Mixin, che raggruppano un insieme di dichiarazioni.
  1. @mixin errore {
  2.  background: #fdd;
  3.  color: red;
  4.  font-weight: bold;
  5. }
  6. div.errore {
  7.  border: thick solid red;
  8.  padding: .5em;
  9.  @mix errore;
  10. }
In più, nidificare le dichiarazioni, coerentemente col DOM, ridurrebbe l'usuale prolissità del codice CSS:
  1. #main > header > h1 {
  2.            font-size: 2em;
  3.            background: blue;
  4.            color: white;
  5.                        & > a {
  6.                       color: #ddf;
  7.                                 &:visited {
  8.                                color: #fdf;
  9.                               }
  10.               }
  11. }
Infine i moduli, ispirati a Python, evitano i problemi derivanti da variabili globali, che potrebbero essere inserite tramite widget di terze parti. Si tratta in pratica di creare namespace con variabili e mixin:
  1. @module widget {
  2.  @var $colore red;
  3.  @mixin titolo { font-weight: bold;}
  4. }
  5.  
  6. elemento1 {
  7.  color: $widget.colore;
  8.  @mix widget.titolo;
  9. }
  10.  
  11. elemento2 {
  12.  @use widget;
  13.  color: $colore;
  14.  @mix titolo;
  15. }
Queste proposte, con la loro sintassi ispirata alla programmazione ad oggetti, sono indubbiamente più consone alla mentalità degli sviluppatori. Quali critiche potrebbero essere loro mosse? A parere di Jeffrey Way queste innovazioni potrebbero complicare la semplicità dei fogli di stile e intimidire i designer "puri", rispolverando la questione del rapporto fra sviluppo e design in ambito web. Non sembra tuttavia che occorra essere programmatori per apprezzare le possibilità aperte da questi strumenti; con un piccolo sforzo anche i web designer potranno avvantaggiarsi, e non poco, di questi futuribili aggiornamenti dei CSS.
Precedente: Guida alle licenze software: anatomia di una licenza software (1/2)
Successiva: Gestire elementi dinamici in jQuery: il metodo .live()
Intervento di Luca Fabbri a.k.a. keul80 del 28-01-2011 ore 15:20
Nobile
Nobile

(64 interventi)
Iscritto il 10-08-2001
In effetti non capisco la critica.

"Non sembra tuttavia che occorra essere programmatori per apprezzare le possibilità aperte da questi strumenti;"

Sono d'accordissimo!

Permettere al CSS di avere forme come le variabili e l'ereditarietà non è assolutamente una cosa "da programmatori".

Nella mia azienda abbiamo una persona che si occupa di grafica "pura" e ha sempre trovato molto comodo poter avere le variabili nel CSS (che il CMS Plone, che usiamo, fornisce).

Questi formati poi sono completamente retro-compatibili.
Copyright Programmazione.it™ 1999-2014. Alcuni diritti riservati. Testata giornalistica iscritta col n. 569 presso il Tribunale di Milano in data 14/10/2002. Pagina generata in 0.235 secondi.