Archivio > Categoria: Presentazione

CSS e proprietà occulte

Qualche tempo fa ho approfondito lo studio della proprietà CSS display: stilando una pagina di analisi e verifica della suddetta proprietà (visualizza l'articolo originale). Sono stati illustrati tutti i valori possibili sino alle specifiche CSS 2.1, correlati di markup a scopo esemplare, e di test sul crossbrowsing.

L'articolo è rimasto abbastanza inosservato, mentre è stato per me un grande piacere scoprire che Molly Holzschlag incoraggia l'utilizzo di queste proprietà relativamente sconosciute. L'autrice si sofferma in particolare sul valore run-in, dal quale - secondo lei - sarebbe possibile ricavarne molti vantaggi, se solo la comunità si interessasse maggiormente a queste caratteristiche.

Questo è un altro argomento che merita di essere discusso ampiamente, secondo me. Molti professionisti e molti appassionati probabilmente ignorano l'esistenza di almeno un buon 20% delle proprietà CSS finora esistenti (non è un dato scentifico preciso, esce dalla mia testolina ed è assolutamente inaffidabile!), che spesso si rivelano utilissime allo scopo di sistemare con maggior coerenza e forse un pizzico di originalità in più gli elementi nella pagina. La mancata conoscenza di tali proprietà porta spesso gli sviluppatori ad ingegnare più o meno complessi work-around per ottenere effetti che, semplicemente, sono già disponibili con altri mezzi.

Il problema è abbastanza grave, considerando che, anche in questo caso, una buona parte della colpa è dovuta ai browser che si ostentano a non supportare queste ignote features, nutrendo il disinteresse dei più. Il discorso è sempre quello: l'importante è che una cosa funzioni; se non funziona, il discorso non esiste nemmeno.

Molly, quindi, ci sta lanciando un avvertimento importante:

There’s a reason it’s important to advocate this for certain useful aspects of a spec that might not have full implementation. Without interest and support from the community, such features could easily get dropped from future specifications.

It’s difficult enough getting features we want into the specs in the first place, so let’s not let the good stuff we do have, such as the run-in value for display, disappear before we have a chance to see it properly implemented and available for consistent use.

C'è una ragione che è importante sostenere per certi utili aspetti di una specifica che potrebbe non avere una completa implementazione. Senza l'interesse e il supporto della comunità, alcune caratteristiche potrebbero facilmente essere tolte dalle future specifiche.

E' abbastanza difficile ottenere caratteristiche che vogliamo nelle specifiche al primo posto, quindi non permettiamo che le buone cose che abbiamo, come il valore run-in, spariscano prima che ci sia la possibilità di vederle implementate e disponibili per un uso consistente.

Interesse, supporto, comunità. Sono le parole chiave di un messaggio che personalmente sostengo e apprezzo completamente. E voi?

. Pubblicato sabato 23 dicembre 2006 e archiviato in , .

Specificità dei links

Luca (aka deMo) mi segnala questo approfondimento sulla specificità CSS(Cascading Style Sheets) dei links di Eric Meyer.

Il documento è vecchio (l'ultima modifica risale al 5 Febbraio 2005), ma l'argomento è interessante: come al solito non si smette mai di imparare. La frequente domanda a cui Eric risponde in questo piccolo articolo è: Ho provato ad applicare i CSS ai miei links, ma l'hovering non funziona. Come è possibile? E' colpa di questi stupidi browsers? E' in questo frangente che viene introdotta la specificità dei selettori, ed in particolare delle pseudo-classi applicate all'elemento <a>.

Il problema di fondo sta tutto nell'ordine in cui vengono specificati gli stati per un link. Io personalmente ho sempre raggruppato a:link, a:visited, a:active insieme, per poi eventualmente ridichiararne uno dopo aver definito gli stili di a:hover. Il signor Meyer invece ci illustra il metodo LVHA, ovvero Link Visited Hover Active: se scritti in questo ordine, gli stati di ogni link non si sovrascrivono, come al contrario potrebbe succedere in altri casi.

Ma allora, perchè bisogna seguire questo schema? They all have equal weight. Hanno tutti lo stesso peso.

 a:link {color: blue;}        /* specificità = 1,1 */
 a:visited {color: purple;}   /* specificità = 1,1 */
 a:hover {color: magenta;}    /* specificità = 1,1 */
 a:active {color: red;}       /* specificità = 1,1 */

E' poi interessante il metodo proposto da Eric (e valido con i CSS 2) per scavalcare il problema di specificità, senza intaccare le altre pseudo-classi e/o creare conflitti di alcun tipo. La soluzione consiste nel combinare insieme più stati:

 a:visited:hover {color: maroon;} /* specificità = 2,1 */
 a:link:hover {color: magenta;}   /* specificità = 2,1 */
 a:hover:active {color: cyan;}    /* specificità = 2,1 */

They have the same specificity, but they apply to fundamentally different beasts, and so don't conflict. In sostanza, quindi, la specificità rimane la stessa, ma cambia l'ordine e si rompe lo schema: la selezione diventa più specifica, offrendo tra l'altro una maggiore personalizzazione (possiamo infatti creare effetti di hovering diversi in base alla natura del link).

. Pubblicato lunedì 24 luglio 2006 e archiviato in , .

La strada verso i selettori CSS 3

Se ne parla tanto in questo periodo. Le nuove specifiche stanno arrivando, e portano con sè tante innovazioni: nuove proprietà, nuovi attributi, nuovi selettori.
Vorrei soffermarmi proprio su quest'ultima categoria, i selettori, e proporre, a partire dai CSS 1, uno pseudo-percorso verso i patterns introdotti nella terza e nuova versione dei fogli di stile.

  • Fase 1: Ripasso generale

    Russel Dyer di XML.com ha scritto un articolo sui selettori CSS 1, 2, e 3, utile per ripassare definizioni e caratteristiche introdotte per ogni versione. E' un ottimo viaggio verso le piu' recenti specifiche, e dà una visione d'insieme dell'evoluzione compiuta nella presentazione di una pagina, e nella selezione di elementi in essa.

  • Fase 2: Approfondimeno sui selettori CSS 2.1

    Roger Johansson invece, in un articolo sui selettori CSS 2.1 diviso in tre parti, ci illustra attraverso alcuni esempi tutte le combinazioni e gli strumenti disponibili nei CSS 2.1 per individuare elementi in un documento. L'autore ci spiega anche il significato di alcuni termini usati nel contesto, come child, descendant, o parent.

  • Fase 3: Primo sguardo ai selettori CSS 3

    Allo stesso Roger Johansson della fase precedente appartiene anche un articolo sui selettori CSS 3, decisamente ben strutturato e fornito di esempi, nel quale vengono presentati i nuovi modelli che andranno a costituire la novità nelle nuove specifiche. Da leggere anche i commenti all'articolo, in cui vengono puntualizzate alcune affermazioni e sono proposti esempi di codice utili in futuro per essere utilizzati.

  • Fase 4: Approfondimento sui selettori CSS 3

    Ovviamente non potevano mancare le specifiche W3C, evidentemente le più complete ed esaurienti.
    Per chi avesse voglia di controllare quali combinazioni sono supportate dagli attuali browser, segnalo la W3C Test Suite, costituita da pagine d'esperimento per ogni selettore.
    Infine, suggerisco uno sguardo anche a SelectORacle, uno script che spiega a parole il funzionamento dei patterns CSS 2.1 e CSS 3 inviati come input.

. Pubblicato sabato 17 giugno 2006 e archiviato in .


Paginatura: