Solo il blog di un altro web designer.
Postato il 24 Settembre 2007
Visto che sembra essere l’argomento del momento, nel mondo del web design, spendo anch’io un paio di parole sull’argomento e lo premetto subito: non sono un grande fan dei framework CSS.
Li trovo abbastanza inutili per varie ragioni:
La prima ragione è che ognuno disegna e programma a modo suo, quindi quello che va bene per uno, può risultare scomodo per un altro.
Secondo poi, i framework sono generalmente piuttosto estesi, e sebbene a volte siano suddivisi in più file separati e importabili a piacere, quasi sempre l’80% delle regole che vi sono scritte non vengono utilizzate.
Infine, una considerazione un po’ più filosofica, che nasce dal fatto che usando i framework si è costretti ad usare nomi di classi scelti da altri, che in molti casi, inoltre, non sono esattamente semantici.
Mi riferisco, ad esempio, alle classi specifiche per “floattare” (sì, lo so, sto termine fa rabbrividire anche me, ma non mi veniva di meglio) degli elementi a destra e a sinistra, comunemente indicate con left e right: ora, “left” e “right” sono due parole che racchiudono in loro un concetto visivo, e dunque non sono, a parer mio, adatte per essere messe all’interno di un markup che dev’essere il più possibile generico.
Quindi, come consiglia tanta altra gente, è meglio piuttosto farsi il proprio framework/foglio di reset da soli, cosicchè non si debba essere costretti a scrivere le solite regole n volte per n progetti, e con il vantaggio non indifferente di avere qualcosa che è fatto su misura per le nostre esigenze.
Quindi, qui sotto, pubblico quanto ho realizzato finora, col duplice scopo di non perdermelo in qualche cartella sperduta nell’hard disk e di condividerlo con chi avesse avuto dubbi simili ai miei sulla questione.
Al momento non sono presenti riferimenti esterni per questo articolo.
By Andrea Gandino — XHTML + CSS.
Effettivamente trovo impossibile scrivere un foglio di stile che vada bene per tutti, quindi molto meglio scriversi il proprio che almeno si sa a cosa si va incontro.
(Per quanto riguarda l’uso di left/right nei nomi delle classi…mi hai beccato!) ;)
Cambiando discorso: vieni a Rails to Italy? io ci sarò (mi toccherà anche moderare un panel ;) ) e si prospettano dei gran bei talk…
Ciao Andrea,
giungo qui cavalcando un pingback :)
Ho letto il post e rispetto la tua opinione, la mia penso che tu già la conosca se hai letto qualche mio scritto.
Il markup semantico è un bel paio di maniche, volevo scrivere qualcosa anche io al riguardo ma sto rimandando perché ogni giorno ne esce una. Quando ci riuscirò mi farà sicuramente piacere avere anche la tua opinione.
Volevo solo dire che i nomi left e right per classi che fluttuano gli elementi a sinistra e a destra, sono nomi estremamente semantici.
Yui-g, yui-u delle YUI, span-12, span-8 di Blueprint etc, quelle si che non sono semantiche!
Un’altra curiosità e poi smetto di importunarti. Ho letto il tuo reset, e volevo sapere il perché di questo:
hr {
position: absolute;
left: -9999px;
}
Pura semplice curiosità. Nei miei fogli non ho, sinceramente, mai fatto ricorso agli hr (o meglio, raramente si) e così impostati non ne avevo mai visti. Hanno un’applicazione particolare nei tuoi progetti?
@ Michele: che piacere risentirti! Per quello che riguarda la conferenza su Rails, dovrei vedere i miei impegni per quel periodo… Bello che comunque anche in Italia stiano cominciando a spuntare eventi come quello.
@ Laburno: in effetti riconosco di non essermi espresso benissimo, quindi riformulo. Io penso che “left” e “right”, ancorché semantici nel senso stretto del termine perché racchiudono in loro un significato ben preciso, non lo sono a livello globale.
Ad un non vedente, i concetti di “left” e “right” in una pagina web sono completamente estranei, come lo è il nome “sidebar”, ovvero “barra laterale”: già, ma laterale rispetto a cosa, dato che io non lo posso vedere?
Intuitivamente, un non vedente, che browsa una pagina con uno screen reader, che per sua natura legge la pagina in modo sequenziale seguendo l’ordine del markup, percepisce senz’altro meglio i concetti di “prima” e “dopo”, piuttosto che di “destra” e “sinistra”.
In tal senso, credo che abbia più senso usare parole chiave come “contenuto-primario”, “contenuto-secondario”, e poi floattare i rispettivi
div. Certo, questo è un discorso che calza a pennello per l’attributoid, mentre, forse, per le classi possiamo tenere un minimo di flessibilità in più.Per quel che riguarda gli
hr, per valutare la bontà di un markup io tendo prima di tutto a guardare la pagina senza stili applicati, solo testo nero su fondo bianco, nuda e cruda; trovo che sia utile, per uno che veda la pagina senza i CSS applicati, fornire una divisione tra le varie aree concettuali della pagina, mediante delle linee separatrici.Aiuta a distinguere meglio il contenuto, tutto qua!
I tag
hrli nascondo, poi, in quel modo, dal momento che, pare, la proprietàdisplay: none;dei CSS venga mal digerita dagli screen readers.P.s. Grazie mille per il commento!
Questo è uno spunto interessante a cui sinceramente non avevo pensato. Direi che dipende da e se la semantica del markup è letta/interpretata in un determinato modo agli screen readers. Ho sempre associato la semantica di markup come ad un’utilità per gli sviluppatori.
Questo utilizzo è capitato di farlo anche a me, ma non conosceva affatto questo problema del display:none sugli screen readers (per l’appunto io avrei usato proprio display:none). Ho fatto bene a chiedere :)
Grazie della risposta! Alla prossima :)
Se può interessare: Logic CSS Framework