Basta fork con CSS3

Cosa?#section1

Se avete lavorato sul web per più di una decade (sto probabilmente datando il mio stesso lavoro), potrebbe darsi che vi ricordiate quel periodo cupo della storia del web design nel quale JavaScript era un’arte oscura. Si era guadagnato quella reputazione perché, per fare una qualsiasi cosa che avesse una minima consistenza cross-browser, dovevate fare delle fork del vostro codice.

Era una pratica standard avere un insieme di funzioni JavaScript per Netscape ed un altro insieme per Internet Explorer. Oppure, se eravate dei veri e propri masochisti, tenevate il vostro codice tutto insieme e creavate una fork all’interno della funzione:

function doSomething(){
  if (document.getElementById)
  {
    // web standards FTW!
  }
    else if  (document.all) 
  {
    // do something in IE
  }
    else if (document.layers)
  {
    // do something in Netscape 4.x
  }
}

In molti casi, soprattutto quando si trattava di animazioni o event handlers, il codice diventava davvero contorto, superando facilmente perfino il più atroce codice-spaghetti in HTML. Il problema del fare fork del codice è che, quando meno ve lo aspettate, la fork troverà un modo per inforcarvi!

Ora, grazie al sostegno per i browser standard-compliant da parte del Web Standards Project e ai diligenti autori di librerie JavaScript, il mondo di JavaScript è un posto molto più gradevole in cui lavorare e giocare. Il nostro codice ora è relativamente libero da fork, con molti meno angolini in cui i bachi si possono annidare. Sfortunatamente, a causa della nostra smania di utilizzare alcune delle feature disponibili in CSS3, stiamo ricadendo nel nostro stesso errore.

Penso che @border-radius sia il proverbiale “zuccherino” che le fork hanno usato per condurci di nuovo tra le loro grinfie. Tutti noi li bramavamo: ce ne siamo usciti con una miriade di modi per simulare gli angoli arrotondati per realizzare i design dei nostri sogni. Così, quando Firefox e Safari ce li hanno fatti penzolare di fronte alle nostre facce sbavanti, chiedendoci solamente di aggiungere due piccole fork al nostro codice per ottenere questo privilegio, ci siamo buttati senza remore su questa possibilità.

.this-is-awesome {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

Erano solo due piccole fork, dopo tutto, che male potevano fare?

Bene, dopo aver avuto gli angoli arrotondati simmetrici, abbiamo voluto gli angoli arrotondati asimmetrici. Dopo tutto, dovevamo essere in grado di esprimerci e viene sempre il momento in cui ogni uomo, ogni donna, ogni bambino deve saltare su in piedi, sfidare il mondo, e impostare il raggio di ciascun angolo indipendentemente! Sfortunatamente, a WebKit non piace la forma abbreviata @border-radius, ma questo implica solo un po’ più di verbosità:

.this-is-slightly-less-awesome {
  border-radius: 10px 5px;
  -moz-border-radius: 10px 5px;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 10px;
  -webkit-border-bottom-left-radius: 5px;
}

Oh, e probabilmente vorremmo che anche Opera e Konquerer possano mostrare gli angoli arrotondati (assumendo che Opera li supporti questa settimana).

.this-is-absurd {
  border-radius: 10px 5px;
  -moz-border-radius: 10px 5px;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 10px;
  -webkit-border-bottom-left-radius: 5px;
  -o-border-radius: 10px 5px;
  -khtml-border-top-left-radius: 10px;
  -khtml-border-top-right-radius: 5px;
  -khtml-border-bottom-right-radius: 10px;
  -khtml-border-bottom-left-radius: 5px;
}

Ora vedete dove sta il problema? Vi ricorda qualcosa che eravamo soliti fare nei nostri CSS?

.can-you-hear-me-now {
  padding: 10px;
  width: 200px;
  w\idth: 180px;
  height: 200px;
  heigh\t: 180px;
}

O forse siete molto più affezionati a qualcosa che abbia un’abbronzatura migliore [gioco di parole intraducibile: parla del Tan hack e gioca sul fatto che tan in inglese significa abbronzatura, ndr].

.hooray-for-repetition {
  padding: 10px;
  width: 200px;
  height: 200px;
}
* html .hooray-for-repetition {
  width: 180px;
  height: 180px;
}

Chiamatelo forking, chiamatelo hacking, chiamatelo come volete: ma non dovremmo farlo.

L’alternativa#section2

Come potrete immaginare, le fork mi irritano un po’. Tuttavia, piuttosto che prendermela con loro e basta, ho deciso di costruire una libreria JavaScript che porti con sé una vita più pulita (o almeno dei CSS più puliti): eCSStender. (A dire il vero, l’impeto originale che ha portato a questa libreria era un po’ diverso, ma ci arriveremo tra un attimo).

Basilarmente, eCSStender (che si pronuncia “extender”) è una libreria JavaScript (simile a jQuery e Prototype) creata appositamente per lavorare con CSS. Di per sé, eCSStender non fa altro che analizzare i nostri fogli di stile. Ma, se diamo forza alle “estensioni”, allora eCSStender ci permette di usare proprietà come @border-radius e selettori come @.seven:nth-child(even) senza dover ricorrere a fork o hack.

Se siete inclini allo sviluppo, vi interesserà sapere che eCSStender non solo vi dà un’introspettiva nelle regole di stile contenute nei vostri files CSS e fornisce un framework per testare il supporto (o la mancanza di supporto) da parte di un browser per cose come i selettori e le proprietà, ma fornisce anche un meccanismo che vi permette di mettere delle patch al supporto del browser per CSS.

Tuttavia, se siete più propensi al design, sarete felici di sapere che usando eCSStender e una manciata di altre estensioni potrete scrivere dei CSS avanzati in maniera semplice. It Just Works™. [Funziona e basta. ndr]

.this-is-so-much-better {
  border-radius: 5px;
}

Usare eCSStender#section3

L’utilizzo di eCSStender è piuttosto immediato. Inserite semplicemente la libreria eCSStender e qualunque estensione vogliate far eseguire sul vostro CSS.

<script type="text/javascript" src="eCSStender.js"></script>

<script type="text/javascript" src="eCSStender.CSS3-backgrounds-and
-borders.js"></script>
<script type="text/javascript" src="eCSStender.CSS3-selectors.js">
</script>
<script type="text/javascript" src="eCSStender.CSS3-color.js"></script>

Oppure, potete essere più esigenti e scegliere i pezzi che volete dai pacchetti di estensioni che al momento sono disponibili e creare la vostra libreria di estensioni personalizzata.

<script type="text/javascript" src="eCSStender.js"></script>

<script type="text/javascript" src="my-extensions.js"></script>

Dove trovate queste estensioni? Ebbene, ho sviluppato un certo numero di estensioni che offrono la funzionalità di CSS3 e le ho riunite così che corrispondano ai vari moduli di CSS3, come ad esempio i bordi e i background, i selettori ed i colori. Sono anche a conoscenza di molti maghi di JavaScript che sono al lavoro su altri pezzi del puzzle CSS3, inclusi i layout multi-colonna e molto altro. Una lista completa delle estensioni a noi note è attualmente mantenuta sul sito web di eCSStender e, se siete interessati, il sito ha anche un’estesa documentazione su come creare le vostre.

Una volta che avete incluso i files JavaScript, vi concentrerete semplicemente sull’utilizzo delle proprietà così come sono definite dalla specifica e le estensioni faranno i loro magheggi trasformando quello che avrete scritto in qualcosa che sia comprensibile dai browser. La bellezza di questa struttura è che i vostri fogli di stile rimarranno puliti e liberi da fork, mentre le estensioni faranno tutto il lavoro sporco al posto vostro.

Queste estensioni sono costruite per essere anche intelligenti: usando la eCSStender API, si possono eseguire dei test per verificare se una proprietà o un selettore che desiderate usare sia supportato oppure no dai browser attualmente in circolazione. Se la proprietà è supportata, l’estensione non parte, ma se non è supportata, l’estensione viene attivata. Così, nel caso del border-radius, Safari 5 implementa la proprietà standard e l’estensione border-radius non viene fatta partire, ma in Safari 4, che capisce solo -webkit-border-radius, l’estensione deve essere eseguita, facendo poi le traduzioni necessarie. Una volta che la maggior parte dei browser che accedono al vostro sito saranno abbastanza svegli da comprendere gli standard senza dover essere tenuti per mano, potrete semplicemente cancellare le estensioni proprio come fareste per un foglio di stile con commenti condizionali per una versione di IE che non dovete più supportare. Facilissimo!

Gradireste un esempio, vero? Bene, il sito eCSStender ne ha sicuramente uno, ma io ho ne ho preparato un altro nell’eventualità che vi vada di vedere una combinazione di robe CSS3 in azione. Utilizza:

• @border-radius,
• @box-shadow,
• background RGBa,
• @transform: rotate(), e
• @transition (assumendo che il vostro browser ne supporti almeno un pochino).

Dovete passare con il mouse sopra il box.

D’accordo ma l’estensione?#section4

Come ho detto prima, eCSStender non era stata originariamente pensata per agire come una sorta di stucco per i browser: infatti, l’intento originario della libreria, quando cominciai a scriverla più o meno tre anni fa, era di rendere la vita facile a ciascuno di noi coinvolto nel processo di creare versioni future di CSS. Attraverso eCSStender, possiamo giocare con nuove idee e vedere i nostri concetti realizzati nei browser attualmente in circolazione. Fornisce un modo semplice per noi per sperimentare con la sintassi e per vedere cosa funziona e cosa no, senza dover aspettare il supporto nativo dei browser.

Se mi concedete il lusso per un momento, mi spiegherò con un esempio. Diciamo, quindi, che stavo pensando che sarebbe interessante far agire alcuni elementi in base alle loro caratteristiche fisiche e che vorrei usare CSS per fare ciò. Potrei creare una nuova proprietà (con l’estensione specifica per il produttore detta “easy” per indicare la mia azienda) chiamata< @-easy-physics-fill che creerà una delle molte sostanze, come il “piombo” o l’“elio”, come suo valore. Con eCCStender posso facilmente creare un’estensione che cerchi quella proprietà e applichi le proprietà fisiche richieste dall’oggetto. E’ un esempio forzato, però penso che abbiate colto il punto.

Usato in questo modo, eCSStender ci mette in grado di mostrare al W3C quello che vorremmo vedere in CSS. E può aiutare il CSS Working Group a valutare la sintassi e sperimentare con nuove idee senza dover aspettare che il produttore di un browser le implementi. Questo potrebbe sveltire il processo, perché le idee che non funzionano bene nelle applicazioni pratiche possono essere buttate prima che venga modificata la base del codice sottostante a qualunque browser. E chissà, forse il W3C considererà un’estensione come una valida implementazione che può essere usata come parte del processo di sviluppo aderente agli standard.

Gettare via le fork#section5

Come libreria, eCSStender ha pochi e modesti obiettivi. Innanzitutto, punta ad offrire dei tool robusti ai designer e agli sviluppatori che rendano migliore lavorare con CSS.

Da un lato, cerca di livellare il supporto per CSS attraverso tutti i browser, offrendo un semplice insieme di tool per lo sviluppatore che renda la creazione delle estensioni semplice e la loro implementazione una cosa da niente. Dall’altro, fornisce quegli stessi tool ai designer e ai developer che sono interessati ad elaborare e poi costruire vere implementazioni delle proprietà, dei selettori e dei meccanismi che vogliono vedere nelle future versioni dei CSS.

Forse il mio sogno di un mondo con un supporto uniforme per CSS attraverso i vari browser è la promessa di un paradiso mentre si è all’inferno, ma a me piace il paradiso!

Illustrazioni: {carlok}