Web Design

Mancanze e difetti più evidenti dei CSS, in un articolo aperto a opinioni e suggerimenti.

Senza dubbio i CSS sono uno strumento essenziale per ogni web designer, ma non sono esenti da difetti. Prendendo spunto da un recente post di Rockholderdesign, ho voluto riassumere quelle che secondo me sono le più gravi mancanze.

Ecco cosa che mi piacerebbe vedere implementato.

Selettori ascendenti

E’ una buona pratica l’uso dei selettori discendenti per evitare l’abbondanza di classi, ma al momento non esiste modo di selezionare il genitore di un particolare elemento.

Posizionamento verticale

Alcune azioni apparentemente intuitive sono fin troppo complicate con i CSS. Ad esempio il posizionamento orizzontale è elementare, ma centrare un elemento verticalmente non è così semplice.

Espressioni matematiche

Non è possibile usare formule per calcolare una dimensione, come ad esempio width: 100% – 5px;

Contenimento dei float

Non esiste una proprietà per far contenere ad un elemento un float (problema noto anche come auto-clear di un div). Ci sono degli hack, ma spesso portano a conseguenze indesiderate.

Background multipli

Attualmente è impossibile specificare una doppia immagine di sfondo su un elemento. La possibilità è prevista nei CSS3, e sarebbe di grande aiuto per evitare markup aggiuntivo.

Angoli arrotondati

I CSS permettono di utilizzare solo forme rettangolari. Sarebbe utile l’introduzione degli angoli arrotondati, così come quella di altre semplici forme facilmente gestibili dal foglio di stile.

Variabili

L’introduzione delle variabili sarebbe un vero passo avanti per i CSS. Poter dichiarare colori, bordi e altri elementi in maniera sintetica agevolerebbe il lavoro. C’è qualche speranza per il futuro, ma è ancora un’ipotesi lontana.

Colonne

Realizzare dei layout con 2, 3 o più colonne è ovviamente possibile, ma anche in questo caso non esistono dei moduli CSS appositi. Sarebbero sicuramente utili delle proprietà su misura per dividere uno spazio in colonne.

Maggiore coerenza tra i browser

Il punto fondamentale, non imputabile direttamente ai CSS. Ciò che crea più problemi tra gli sviluppatori è il differente supporto tra i vari browser esistenti. Alcuni come Safari e Opera si spingono fino ai CSS3, altri come Explorer non arrivano nemmeno alle specifiche dei CSS 2.1. Maggiore coerenza non farebbe male.

Alcuni di questi punti sono caso di studio per le future specifiche dei CSS, altri sono solamente delle ipotesi. Secondo voi cosa altro manca? Poche aggiunte faciliterebbero il compito di chi lavora ogni giorno con i fogli di stile: non sono problemi insormontabili e c’è sempre un modo per aggirarli, ma riuscire ad evitare hacks e markup aggiuntivo sarebbe un sogno.

I Framework CSS sono fogli di stile con regole già pronte, che teoricamente dovrebbero servire per tutte le esigenze. In realtà per me non è così, il mio CSS di base è costruito su misura.

In questi giorni ho ottimizzato il CSS di base che utilizzo come partenza per tutti i miei lavori. Scartare a priori l’idea di utilizzare un qualsiasi Framework CSS, come Blueprint, è stata la prima cosa che ho fatto.

Per chi non lo sapesse i Framework CSS sono fogli di stile con regole già pronte, che teoricamente dovrebbero servire per tutte le esigenze, ma che almeno nel mio caso complicano solo il lavoro. Spesso proprio questa generalità implica un’inutile mole di codice, che nella maggior parte dei casi non viene utilizzato.

Queste soluzioni non potranno mai essere universali: ognuno è abituato ad utilizzare un metodo diverso, e CSS Reset a parte tutto il resto ha comunque bisogno di essere personalizzato.

E’ appunto solo il CSS Reset di Eric Meyer che uso come punto di partenza, perchè consente di avere una buona coerenza tra i vari browser senza i problemi del reset con il selettore universale “*”.

Nel mio caso ho eliminato i selettori che non utilizzo per alleggerire il codice, ma la base è sempre quella di Eric.

Inoltre una comoda aggiunta per la quale ho rubato l’ispirazione a Piotr, è l’inserimento di una sezione dedicata ai colori utilizzati, all’inizio del CSS. Un comodo riferimento durante lo sviluppo, anche per eseguire al volo dei copia-incolla dei codici esadecimali.

Il risultato finale è un CSS che potete vedere a questo indirizzo, ma che non è pensato per essere adatto a tutti, l’ho realizzato esclusivamente per me.

Il mio consiglio è di ispirarsi alle varie soluzioni che offre la rete, ma costruirsi un CSS di base secondo le proprie esigenze. Solo così potrete ottimizzare i tempi nella scrittura di un foglio di stile.