Nel webdesign uno di pilastri della programmazione moderna è il linguaggio CSS. Spesso però i CSS vengono scritti non solo da grafici, ma da programmatori web, con una formazione informatica di programmazione. Cosa significa? Significa che il concetto di oggetto e di ereditarietà diventa linfa vitale, droga per un tossico in astinenza. E nei CSS come è utilizzabile?
Purtroppo la solo versione 2 dei CSS prevede un minimo di supporto CSS tramite l’operatore >> che permette di copiare tutte le definizioni di stile da un market all’altro. Potete vederne l’esempio da Caputo’s Blog.
Nei CSS attualmente usabili e supportati dalla maggior parte dei browser (versione 1) l’ereditarietà si implementa in due modi. Uno direttamente nella definizione sfruttando il cascading, cioè la possibilità di ridefinire a cascata gli stili. L’altro nel HTML che implementa il CSS.
Ereditarietà CSS nel foglio di stile
Il principio è: dichiarare più stili allo stesso momento per poi ridefinirli successivamente.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.a,.b,.c{
font-family: "Comic Sans MS";
font-size: 9px;
color: #0000FF;
border: 1px solid #0000FF;
margin-bottom: 5px;
}
.b{
background-color: yellow;
}
.c{
border-color: red;
}
</style>
</head>
<body>
<div class="a">xxx</div>
<div class="b">xxx</div>
<div class="c">xxx</div>
</body>
</html>
Ereditarietà CSS nel html
Banalissimo: ad un elemento HTML applichiamo più classi diverse, inserendole nell’attributo CLASS e separandole con lo spazio. Chiaramente si applica solo alle classi, e non alle definizioni di ID (#). E’ vero però che potremo simulare ereditarietà anche mischiando gli ID con le classi.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.a{
font-family: "Comic Sans MS";
font-size: 9px;
color: #0000FF;
border: 1px solid #0000FF;
margin-bottom: 5px;
}
.b{
background-color: yellow;
}
.c{
border-color: red;
}
</style>
</head>
<body>
<div class="a">xxx</div>
<div class="a b">xxx</div>
<div class="a c">xxx</div>
</body>
</html>
Definire i figli (update)
Spesso può essere utile definire un insieme di caratteristiche solo per un sottoinsieme di elementi. Se ad esempio creaiamo un DIV e lo chiamiamo (ID) Pippo, possiamo procedere a definire lo stile di tutti i link all’interno di Pippo in questo modo:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#zona,#zonaNo{
font-family: "Comic Sans MS";
font-size: 9px;
color: #0000FF;
border: 1px solid #0000FF;
padding: 10px;
margin: 10px;
}
#zona a{
color: red;
}
</style>
</head>
<body>
<div id="zona">xxx xxx xxx <a href="prova.html">xxx</a> xxx <a href="provina.html">xxx</a> </div>
<div id="zonaNo">xxx xxx xxx <a href="prova.html">xxx</a> xxx <a href="provina.html">xxx</a> </div>
</body>
</html>
Questo vale sia per la definizione # sia per la definizione delle classi.
Have a good web design 🙂
L’ereditarieta io la uso, e devo dire che senza quella si scriverebbero _tonnellate_ di codice CSS in piu, ocn il risultato di appesantire la navigazione.
Ottimo articolo 🙂
@Luca: Grazie Luca, anch’io la uso spesso. Soprattutto integrando zone diverse e ridefinendo anche i singoli tag.
io preferisco delimitare le aree, ognuna con il suo stile se ce n’è bisogno. Vado bene con il “class” e l'”id”. diventerei matto 🙂
@yuri: abbiamo pensato la stessa cosa: infatti ho appena aggiornato il post proponendo anche quel tipo di modello. Alla fine è ereditarietà anche quella 🙂
Hmmm… Ma il tuo articolo sembra insinuare che i semplici “grafici” siano più carloni dei programmatori e non usino mai l’ereditarietà! :)))
@Elisa: no no non insinuo. Ho proprio detto questo. Nel mondo ci sono Grafici e ci sono Programmatori. Poi nel mezzo possono esserci grafici che amano studiare la programmazione, e programmatori con il pallino per la grafica. E tutte le sfumature.
Al giorno d’oggi si è fatto di necessità virtù, generando un meltin pot delle professionalità. E’ raro, ormai, trovare uno che faccia precisamente una cosa: forse non possiamo più permettercelo?
Parlo per me: IO non posso piu permetterlo. Mi spiego meglio.
Sono laureato in Informatica, mi sto specializzando con altri 2 anni di studio, programmo da quando avevo praticamente 10 anni, ma comunque ho dovuto studiare per avere delle basi di grafica per saltarci fuori.
Perche? Perche con alcuni clienti, e con alcuni budget “bassi”, non posso permettermi di comprare il lavoro di un grafico, e quindi devo fare le cose da solo. Ovvio che i miei prodotti “a basso costo” vengono fuori molto meglio dal punto di vista della programmazione che da quello della grafica, ma cerco sempre di migliorare 🙂
@Luca: stavo aspettando questo commento al varco. Tutte le regole e le etichette che ogni giorno leggiamo sono nomi da carta. Io sono passato da una piccola a una grande azienda e ben poco è cambiato. Le aziende dove la settorializzazione dei ruoli, nell’I.T., è ancora valida penso si contino su una mano… e forse nemmeno.
Se qualcuno ha esperienze in merito ben vengano comunque.
Anche nello stesso Web dovrebbero esserci i web architect, i web designer, i web marketter, i web writer, i web usabiliter… ma alla fine con il cliente che storce il naso per 2000 €… ‘zzo gli proponi?
@Merlinox:Io ho clienti che se gli spari 2000 euro ti cacciano via urlando. Altri addirittura storcono il naso per 1000.
E’ ovvio che con questi clienti, se me li voglio tenere, devo adottare soluzioni differenti, e quindi fare un po tutto io.
Ovvio che invece quando arriva il progetto importante, e c’e un budget che lo permette, preferisco far fare il proprio lavoro ad ogni persona: viene sicuramente meglio 🙂
@Luca: certo che se uno si mette nell’ottica di un’azienda, con spese, affitti, licenze software… e pensa a quanto equivalgono in ore 1000 €, c’è veramente da piangere.
@Merlinox: vero, infatti io sono freelance e me la cavo cosi. Come licenze non pago niente, utilizzo software free ed open-source. Affitto ne pago uno, quello di casa, che e’ anche il mio ufficio.
Comunque chiedere dei soldi alla gente, e sapere che ti resta il 50% per pagare le spese e vivere è umiliante.
Tutto verissimo. Però, tornando alla questione dell’ereditarietà dei CSS: dovrebbe essere una cosa talmente *ovvia* che non c’è bisogno di essere programmatore per capirla. E’ la logica stessa che ti dice che devi fare così, se non vuoi trovarti con le lenzuala di codice, tutta roba ridondante. Insomma, uno che non lo fa, significa che non agisce secondo logica, non che gli manchino la preparazione o le competenze. Al limite, uno dovrebbe ignorare che i css hanno la proprietà dell’ereditarietà: ma chi non lo sa? C’è scritto in tutti i manuali, è la prima cosa che si impara. O no?
@elisa: ti ricordo che Microsoft ha creato .Net per permettere ai programmatori ex visual basic di fare web application. E ti garantisco che in giro ce ne sono tanti che non sanno nemmeno cos’è l’html, figuriamoci i CSS. Usano il loro bel visual studio, posizionamento assoluto e ciao!
@Merlinox: si quello di sicuro 🙁
@elisa: non e’ ovvio, perche molti non lo fanno. C’e anche scritto ovunque di fare siti accessibili, ma non tutti lo fanno. E comunque, l’ereditarieta dei CSS e’ relativamente “semplice”, in programmazione ne esistono di piu complesse. Tieni anche presente che molte persone non hanno problemi a trovarsi con “lenzuola di codice”, perche danno per scontato che “tanto c’hai l’ADSL” 🙂
@Luca: quoto! Senza contare il tableless!!!
@Merlinox: vero! potremmo metterci qui a scrivere un “lista degli {e,o}rrori del codice che dici? 🙂
@Luca: sarebbe pericoloso, potremo inserire nuovi bug in quello che scriviamo! It’s a patchWorld!
@Merlinox: ahah vero 🙂 Pero forse potrebbe essere utile come “pillola”, con brevi esempi ed eventuali correzioni 🙂
@Luca: bene o male le cose sono sempre quelle. A sto punto uno si legge le linee di accessibilità: c’è tutto, anzi di più!
@Merlinox: Si vero che sono sempre quelle, pero c’e ancora gente che non le conosce…
@Luca: ci sono anche 2 alternative:
– non ritengono siano utili
– non gliene frega un kaiser!
@Merlinox: credo la seconda 🙂
Maybe… nel frattempo vedo di andare a casa cercando il refrigerio in macchina. 8 ore a 29 gradi non sono il massimo!
Pingback: CSS + Link = effetti!!!
Pingback: Ereditarietà CSS | Simone D'Amico