Source: http://blog.merlinox.com/ereditarieta-css/
Timestamp: 2018-03-24 17:31:16+00:00

Document:
﻿ Ereditarietà CSS | Merlinox's Blog
Ereditarietà CSS
Scritto il 19/05/2009 da Merlinox in Graphicsign, Web Mania
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.
.a,.b,.c{
<div class="a">xxx</div>
<div class="b">xxx</div>
<div class="c">xxx</div>
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.
<div class="a b">xxx</div>
<div class="a c">xxx</div>
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:
#zona,#zonaNo{
#zona a{
<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>
Questo vale sia per la definizione # sia per la definizione delle classi.
Have a good web design 🙂
Pubblicato il 19/05/2009 in Graphicsign, Web Mania (CSS, web design)
← Articolo precedente Installare le estensioni (Extensions) su Google Chrome | 3 sul Blog – Tech, Fun e Web 2.0 →
26 pensieri su “Ereditarietà CSS”
Luca 19/05/2009 alle 10:25
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 🙂
Merlinox Autore articolo 19/05/2009 alle 10:28
@Luca: Grazie Luca, anch’io la uso spesso. Soprattutto integrando zone diverse e ridefinendo anche i singoli tag.
yuri 19/05/2009 alle 10:40
io preferisco delimitare le aree, ognuna con il suo stile se ce n’è bisogno. Vado bene con il “class” e l'”id”. diventerei matto 🙂
Merlinox Autore articolo 19/05/2009 alle 10:45
@yuri: abbiamo pensato la stessa cosa: infatti ho appena aggiornato il post proponendo anche quel tipo di modello. Alla fine è ereditarietà anche quella 🙂
elisa 19/05/2009 alle 14:48
Hmmm… Ma il tuo articolo sembra insinuare che i semplici “grafici” siano più carloni dei programmatori e non usino mai l’ereditarietà! :)))
Merlinox Autore articolo 19/05/2009 alle 14:52
@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?
Luca 19/05/2009 alle 15:18
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 🙂
Merlinox Autore articolo 19/05/2009 alle 15:23
@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?
Luca 19/05/2009 alle 15:33
@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 🙂
Merlinox Autore articolo 19/05/2009 alle 15:42
@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.
Luca 19/05/2009 alle 15:49
@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.
Merlinox Autore articolo 19/05/2009 alle 15:50
Comunque chiedere dei soldi alla gente, e sapere che ti resta il 50% per pagare le spese e vivere è umiliante.
elisa 19/05/2009 alle 15:58
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?
Merlinox Autore articolo 19/05/2009 alle 16:01
@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!
Luca 19/05/2009 alle 16:02
@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” 🙂
Merlinox Autore articolo 19/05/2009 alle 16:04
@Luca: quoto! Senza contare il tableless!!!
Luca 19/05/2009 alle 16:16
@Merlinox: vero! potremmo metterci qui a scrivere un “lista degli {e,o}rrori del codice che dici? 🙂
Merlinox Autore articolo 19/05/2009 alle 16:20
@Luca: sarebbe pericoloso, potremo inserire nuovi bug in quello che scriviamo! It’s a patchWorld!
Luca 19/05/2009 alle 16:24
@Merlinox: ahah vero 🙂 Pero forse potrebbe essere utile come “pillola”, con brevi esempi ed eventuali correzioni 🙂
Merlinox Autore articolo 19/05/2009 alle 16:27
@Luca: bene o male le cose sono sempre quelle. A sto punto uno si legge le linee di accessibilità: c’è tutto, anzi di più!
Luca 19/05/2009 alle 16:31
@Merlinox: Si vero che sono sempre quelle, pero c’e ancora gente che non le conosce…
Merlinox Autore articolo 19/05/2009 alle 16:33
@Luca: ci sono anche 2 alternative:
– non ritengono siano utili
– non gliene frega un kaiser!
Luca 19/05/2009 alle 16:38
@Merlinox: credo la seconda 🙂
Merlinox Autore articolo 19/05/2009 alle 16:45
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

References: articolo 19
 articolo 19
 articolo 19
 articolo 19
 articolo 19
 articolo 19
 articolo 19
 articolo 19
 articolo 19
 articolo 19
 articolo 19
 articolo 19