Lor.Dal.Col.blog

Propongo qui degli spunti per alcune regole di sintassi o funzionalità che mancano nei CSS.

Le proposte sono solo a titolo di esempio e probabilmente sono incomplete, servono solo per dare un’idea.

INDICE

• commenti inline
• variabili per il foglio di stile
• raggruppamento di selettori
• ereditarietà multipla delle regole applicati a selettori

Riporto qui di seguito degli esempi di codice che spiega queste funzionalità.

Commenti inline

Sarebbe molto comodo poter fare i commenti inline nei css, con la doppia barra:

a .menuitem {           // voce del menù
     color: red;        // fissa rosso per tutti gli stati
     font-family: sans-serif;
}

Variabili per il foglio di stile

Se si potessero definire delle variabili si potrebbero definire la palette dei colori, le dimensioni dei vari tipi di testo, alcune dimensioni di layout all’inizio del file per poi utilizzare queste variabili lungo tutto il foglio di stile. In questo modo sarebbe più semplice trovare i punti da cambiare se si vuole modificare un colore o una dimensione e soprattutto dovremmo fare la modifica una sola volta per tutto il foglio di stile.

$color_text: black;
$color_title: red;
$back_color: #BBB;
$font: sans-serif;
$column_width: 150px;

p {
    color: $color_text;
}

a .menuitem {
     color: $color_title;
     font-family: $font;
}

table {
    border: 1px solid $color_title;
}

Magari introducendo anche delle funzioni applicabili alle variabili, ad esempio:

• funzioni matematiche per variabili che esprimono dimensioni per esempio: $column-width - 30px
• funzioni speciali per i colori, per esempio: lighter($color1) oppure anche darker(darker($color1))

Questa funzionalità si può avere rendendo il foglio di stile dinamico (generandolo da php, asp, jsp, ruby), ma non è la stessa cosa poichè il lavoro lo farebbe il server inoltre la sintassi sarebbe molto più difficile da leggere.

Raggruppamento di selettori

Se abbiamo alcuni selettori molto lunghi e simili a cui dobbiamo applicare la stessa regola è necessario ripeterli tutti in questo modo:

div.menu .x-btn-text-icon a.x-btn-text, div.menu .x-btn-text-icon p.x-btn-text, div.menu .x-btn-text-icon div.x-btn-text {
    font-weight:bold;
}

Sarebbe molto più comodo poterli raggruppare in questo modo:

div.menu .x-btn-text-icon (a,p,div) .x-btn-text {
    font-weight:bold;
}

Ereditarietà multipla delle regole applicati a selettori

Si potrebbero ereditare con un comando le regole applicate a un selettore anche in altri selettori, senza essere costretti a riscriverle, ad esempio:

p {
    font-family: Arial, sans-serif;
    color: red;
}

h1 {
    inherit(p);
}

Infine si potrebbe usare il concetto delle variabili css per salvare un insieme di regole da poter applicare più volte:

$typography:{
    font-family: Arial, sans-serif;
    color: red;
}

h1 {
    $typography;
    font-size: 2em;
}

p {
    $typography;
    margin-top: 10px;
}

Non mi sono ancora messo a studiare le specifiche provvisorie dei CSS3 (proprio perchè incomplete, aspetterò che vengano implementate in un buon numero di browser prima di perderci tempo), però spero vivamente che siano comprese delle regole simili a quelle proposte qui, o che ci siano delle alternative valide.