Ereditarietà CSS

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 🙂

Loading Facebook Comments ...

26 pensieri su “Ereditarietà CSS

  1. Luca

    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 🙂

    Rispondi
  2. yuri

    io preferisco delimitare le aree, ognuna con il suo stile se ce n’è bisogno. Vado bene con il “class” e l'”id”. diventerei matto 🙂

    Rispondi
  3. Merlinox Autore articolo

    @yuri: abbiamo pensato la stessa cosa: infatti ho appena aggiornato il post proponendo anche quel tipo di modello. Alla fine è ereditarietà anche quella 🙂

    Rispondi
  4. elisa

    Hmmm… Ma il tuo articolo sembra insinuare che i semplici “grafici” siano più carloni dei programmatori e non usino mai l’ereditarietà! :)))

    Rispondi
  5. Merlinox Autore articolo

    @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?

    Rispondi
  6. Luca

    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 🙂

    Rispondi
  7. Merlinox Autore articolo

    @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?

    Rispondi
  8. Luca

    @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 🙂

    Rispondi
  9. Merlinox Autore articolo

    @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.

    Rispondi
  10. Luca

    @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.

    Rispondi
  11. elisa

    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?

    Rispondi
  12. Merlinox Autore articolo

    @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!

    Rispondi
  13. Luca

    @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” 🙂

    Rispondi
  14. Luca

    @Merlinox: ahah vero 🙂 Pero forse potrebbe essere utile come “pillola”, con brevi esempi ed eventuali correzioni 🙂

    Rispondi
  15. Merlinox Autore articolo

    @Luca: bene o male le cose sono sempre quelle. A sto punto uno si legge le linee di accessibilità: c’è tutto, anzi di più!

    Rispondi
  16. Pingback: CSS + Link = effetti!!!

  17. Pingback: Ereditarietà CSS | Simone D'Amico

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *