[CSS] Richiamare classe generica dentro altre classi

Salve, è possibile fare una cosa del genere nel foglio di stile CSS?

.colore_testo { color:#FF0000 }

#principale { 
    
    width:            60%; 
    background:    #FFFFFF;
    .....

    color: .colore_testo; 
} 

Ovviamente così com'è non funziona...
è possibile richiamare la classe "colore_testo" dentro #principale (e anche altre classi, l'utilità è proprio nell'usarla per tante classi...)?

[makpaolo]

devi dichiarare nuovamente il colore del testo.
Se è raro cambiarlo lo puoi dichiarare nel " body{ "

verrà usato per tutto il sito dove non specificato differente.

no purtroppo così non va bene...

Ti spiego devo creare una funzione che, mediante javascript, mi permetta di fare diventare TUTTE le scritte della pagina di colore bianco (scritte rosse, verdi, blu, quindi tante classi, diventano tutte bianche)

Quindi devo modificare dinamicamente il foglio di stile... come posso fare?

[silverseraph]

puoi utlizzare php e metterai una cosa del genere:

<?php

$colore_testo = " #FF0000 ";

echo "<style type=\"text/css\">

#principale { 
    
    width: 60%; 
    background-color: #FFFFFF;
    color: $colore_testo; 

} 
</style>";
?>

ma perchè devi richiamarlo e creare un intasamento invece che non richiamare colore_testo mettendo gli attributi di colore_testo dentro #principale ??
tanto ti costa solo un ctrl+c / ctrl+v in più... intendo così :

 .colore_testo { color:#FF0000 
} 

#principale { 
    
    width:            60%; 
    background:    #FFFFFF;
    .....

    color: #ff0000; 
}

Ho risolto la questione.. Non come avrei voluto, (cioè modificando dinamicamente con javascript le classi GENERICHE del foglio di stile)... ma pazienza:

 .colore1 { color:#FF0000 }
 .colore2 { color:#000000 }
 ...

#principale { 
    
    width:            60%; 
    background:    #FFFFFF;
    .....

}  
.ubaldo { 
    
    width:            10em; 
    background:    #FFFF00;
    .....

}

.sempronio { 
    
    width:            15em; 
    background:    #CCCCCC;
    .....

}


ecc.. ecc.. 

dalla pagina (non dal foglio di stile ovviamente) faccio:

<div id='principale'      class='colore1'>ciao</div>
<div class='ubaldo'      class='colore1'>ciccio</div>
<div class='sempronio' class='colore1'>ora</div>

<div id='totti'                   class='colore2'>stacco</div>
<div class='camoranesi'      class='colore2'>tutto</div>
<div class='zambrotta'       class='colore2'>ciao</div>
<div class='zambrotta'       class='colore3'>ciao2</div> 

Vi ho indicato solo 7 div per farvi un esempio.. tenete conto che sono moooolti di piu...

Ho fatto così ma ho dovuto creare, per avere un risultato dinamico (che potete vedere qui sul link al centro), due fogli di stile diversi richiamabili da php RICARICANDO la pagina... Facendo in quel modo li ho resi piu velocemente modificabili dal momento che i dettagli che rendono diversi i due fogli di stile (cioè le classi "color") sono tutte vicine...

Bah.. pazienza..

L'ideale per me sarebbe modificare DINAMICAMENTE il foglio di stile, in modo da non dovere ricaricare la pagina per modificare i colori del sito...
certo è facile quando puoi fare

document.getElementById('principale').style.color= 'FF0000'; (dovrei ripeterla per OGNI singolo div del sito?.. è vietato dal w3c usare DIV diversi con ID uguali..)

ma non so come fare, se si puo fare, di modificare DIRETTAMENTE il foglio di stile... tipo (per assurdo, me lo sto inventando!)

document.style.color1='#000000; document.style.color2='#FF0000;


Ho cercato di essere il piu chiaro possibile.. Se vi vengono altre idee dite pure.. Nel frattempo vi ringrazio tutti intanto..

per tenere sotto controllo un colore per tutti gli elementi che lo usano potresti separarlo in questo modo

#tizio { 
    ...
    width:            60%; 
    background:    #FFFFFF;
}
#caio { 
    ...
    width:            60%; 
    background:    #FFFFFF;
}
#sempronio { 
    ...
    width:            60%; 
    background:    #FFFFFF;
}

#tizio #caio #sempronio { 
   color: #F8F8F8;
}

ma non so aituarti per modificarlo dinamicamente senza ricaricare

mavericck

document.getElementById('principale').style.color= 'FF0000'; (dovrei ripeterla per OGNI singolo div del sito?.. è vietato dal w3c usare DIV diversi con ID uguali..)

sparo a caso:

è un po' macchinoso, ma magari qualcosa del tipo:

$numero = 16^6; // sedici alla sesta, in modo da coprire tutti i possibili colori

for ($myid==0;$myid<$numero;$myid++){
           $colore=convertiinesadecimale($myid); //una funzione che converte in esadecimale il numero decimale
           echo "document.getElementById('".$myid."').style.color='".$colore."';";

} 

E poi in cima alla pagina

<style type="text/css">
<?php
$numerozzo=16^6;
for($i==0;$i<$numerozzo;$i++
echo ".".$i." { quiil codicevario riguardante ogni id }";
?>
</style>

In pratica quello che si fa è definire tutti gli id con un numero decimale che li associa al numero esadecimale che corrisponde a quel colore, per tutti i colori (se no devi scriverli a mano: puoi anche usare criteri piu' selettivi sul range del contatore nel ciclo for, se non ti servono troppi colori sparsi)

Dopodiché usi il tuo documentgetById associando ad esso il colore in questione...

Spero di aver afferrato il concetto della questione

PROBLEMA PRATICO DI QUESTA SOLUZIONE: definire 16^6 (sedici alla sesta potenza) colori è un po' pesante per il server, per non dire devastante, credo. Tra l'altro la pagina diventerebbe di dimensioni sterminate (1 byte per carattere, facciamo una ventina di caratteri per ogni id definito, sedici alla sesta id definiti, fanno 335544320 bytes, pari a 320 Megabytes...) Quindi se tu riuscissi a contenere la cosa sarebbe meglio: esempio:

definisci id 0 (per il nero) senza for
definisci id sediciallasesta (per il bianco) senza for
definisci gli id tra (per esempio) #888888 e #CCCCCC
definisci un paio di altri colori sparsi senza for
nel caso ti servisseo bianco nero e colori compresi tra #888888 e #CCCCCC.

In altre parole usare il metodo ma tagliare sulle variabili che ti servono

ALTERNATIVA GENIALE: tagliare sul range dei colori è un po' dura, perché di solito quello che servono sono colori molto distanziati tra loro, non te ne fai nulla di #001100 e #001101
Quindi fai tutto come ho scritto sopra, ma cambia lo step (al posto di $variabile++ metti

$step= 10 //o lo step che scegli tu

//poi nel for( ; ;) metti
for($variabile==0;$variabile>$numero; $variabile+=$step) { //etc etc 

[silverseraph]

Ma scusa nn andava bene la mia alternativa molto più semplcie?

o nn ho capto cosa vuole fare?

Ma scusa nn andava bene la mia alternativa molto più semplcie?

o nn ho capto cosa vuole fare?

Per cambiare il foglio di stile mediante php devo ricaricare la pagina da capo, non posso modificarlo dinamicamente senza ricaricare la pagina (insomma devo usare javascript...), e per dove dovrei inserire la funzionalità è necessario che la pagina non venga ricaricata... ( o no?...)

Per Pietrovischia: La "alternativa geniale" non è niente male...

[silverseraph]

ma scusa puoi mettere quello in un inculde visualizzabile x ogni pagina

Mmm.... non cambierebbe... vedi.. E' l'esigenza che ho io che è un po particolare...
In pratica io vorrei mettere un tasto, in tutte le pagine: Se l'utente preme il tasto tutti i colori della pagina dovrebbero virare verso colori piu contrastati...
Così anche l'utente ipovedente può accedere ai contenuti del sito senza sforzo...
Ti ho trovato un esempio di quello che voglio fare guarda qui.

Potrei raggiungere lo stesso risultato che c'è in quel sito se mettessi tanti getElementById per ogni oggetto della mia pagina... La mia domanda è quindi se potrei aggirare questo sistema in un modo piu..."elegante e veloce".. Sarebbe perfetto modificare DIRETTAMENTE le classi specifiche come dicevo piu sopra.. (ma mi sembra di capire che questo non si può fare...)

Perchè quindi non vorrei usare php qui?...

Perchè questo famoso pulsante magico sta sempre in cima alla pagina, (come in quel link che ho postato..) Se l'utente preme il famoso tasto mentre sta compilando un form, il riaggiornamento della pagina gli farebbe perdere tutto quello che ha scritto...

[silverseraph]

è semplicissimo: inserisci una variabile alla classe al posto del colore, e poi un utente tramite un menù a tendina potrà scegliere il colore.

basta fare una cosa del genere:

<form method="post">
<select name="colore"> <option value="">Scegli il colore</option> <option value="#FF0000">Rosso</option> <option value="#000000">Nero</option> <option value="#FFFFFF">Bianco</option> </select>
<input type="submit" value="Invia">
</form>

<?php

$colore_testo = $_POST['colore'];

echo "<style type=\"text/css\">

#principale { 
    
    width: 60%; 
    background-color: #FFFFFF;
    color: $colore_testo; 

} 
</style>";
?>

<div id="principale">Prova</div>

L'ho provato in locale e funziona.
Puoi sempre inserirlo anche con i bottoni radio.
ciaoo

$colore_testo = $_POST['colore']; 

Perdonami ma facendo in quel modo io devo ricaricare la pagina... devo infatti rimandare alla pagina stessa il valore che ho scelto dalla select (o radio) o quello che sia... no?...

[silverseraph]

eh scusa....ma che fa se ricarica la pagina? Quel codice (ho editato) come ti ho già detto devi inserirlo i ogni pagina, se ti è più comodo tramite include

che fa se ricarica la pagina?

Se in quel momento l'utente stesse compilando un form nel sito, non avendo ancora premuto il submit di quel form, perderebbe cio che ha digitato a causa del refresh...

[funcool]

Prova a guardare questo articolo, spiega come far cambiare un foglio di stile esterno.

[Ospite]

utilizzando questo codice

function setActiveStyleSheet() {
  title=getActiveStyleSheet()=="principale"?"alternativo":"principale";
  var i, a, main;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
      a.disabled = true;
      if(a.getAttribute("title") == title) a.disabled = false;
    }
  }
}

function getActiveStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
  }
  return null;
}

e questo

	<link rel="stylesheet" type="text/css"  title="principale" href="screen.css" />
	<link rel="alternate stylesheet" type="text/css"  title="alternativo" href="print.css" />

Poi basta un <a> che chiama setActiveStyleSheet all'onclick e si evitano problemi di incompatibilità.

Beh signori non ho parole.... Ebbene pensavo che il W3C non ci avesse pensato ... e invece il giochetto suggeritomi da gsvisinale funziona davvero... Se volete vederlo all'opera potete guardare la mia solita homepage.

E' perfetto... La pagina non viene riaggiornata... si sostituisce dinamicamente il foglio di stile e via... l'ho provato con firefox, IE, opera e Netscape, con identico risultato. Spettacolare, usatelo anche voi per rendere piu accessibili le vostre pagine.

Vorrei fare dei piccoli appunti però:

- Entrambi i fogli di stile vengono caricati (ogni foglio di stile sono oltre 600 righe nel mio sito..), quindi il peso in kilobyte della pagina credo si sia raddoppiato (questo è quello che sembra dal watchfire WebXact).
Si dovrebbe quindi realizzare un terzo foglio di stile, contenente i SOLI elementi comuni dei fogli di stile "principale" e "alternativo", così da sfoltire il tutto...

Poi basta un <a> che chiama setActiveStyleSheet all'onclick e si evitano problemi di incompatibilità.

OnClick non passa la validazione xhtml strict , meglio usare <a href="javascript:blabla();">

Domanda: Pensate che siano troppi 100 kB di pagina?...

P.S.: Grazie a tutti!

[dementialsite]

Aggiungo la mia visto che non è mai stata sparata: volendo, puoi anche definire più classi nel tuo CSS (unico file) con stili simili o diversi, e cambiarli dinamicamente con JS con questo codice:

document.getElementById('nome_elemento').className = 'nome_classe'

Domanda: Pensate che siano troppi 100 kB di pagina?..

Dunque, 100KB equivalgono a 100.000 caratteri (ASCII): rapportandoli alla Divina Commedia (mettiamo una media di 40 caratteri per verso, visto che sono tutti endecasillabi), vengono fuori 2.500 versi, pari a circa metà Inferno: sì, è decisamente troppo...

Stammi bene...

Capisco... mmm... Al massimo quanto dovrebbe essere la dimensione da ritenersi accettabile per una pagina? Questa stessa pagina di forum il webXact dice che pesa 139 kiloByte...

[madbad]

In linea teorica una pagina web dovrebbe essere di circa 30/40kb ma ormai al giorno d'oggi sono molto pochi i siti che le fanno così.

Eh si... Infatti... ho provato a sondare diverse pagine e sono tutte al di sopra dei 50kB...

Ho letto altrove che usando il metodo ob_start si può alleggerire parecchio...

Qualcuno di voi l'ha provato? ne vale la pena?

[Ospite]

OnClick non passa la validazione xhtml strict

Non la passa solo xkè XHTML (qualsiasi tipo) deve essere tutto minuscolo, quindi onClick diventa onclick. href=javascript:blablabla() è assolutamente da evitare per motivi di accessibilità.

Non la passa solo xkè XHTML (qualsiasi tipo) deve essere tutto minuscolo, quindi onClick diventa onclick. href=javascript:blablabla() è assolutamente da evitare per motivi di accessibilità.

Vero non ci avevo pensato che c'era una lettera maiuscola!

Ma come mai href=javascriptXXX è da evitare per motivi di accessibilità (il che è cosa vera, l'ho letto anche altrove...)? ...

In fin dei conti sia onclick che href=javascript eseguono (almeno in questo caso..) entrambe del javascript che in ogni caso non andrebbe usato per motivi di accessibilità..

Certamente nel caso specifico uso il JS per risolvere un altro tipo di problema di accessibilità (utenti ipovedenti), di certo chi usa Linx con screen reader non gli interesserebbe comunque di premere il bottone per avere uno schermo a diverso contrasto..

Addirittura (ma non sono sicuro di cio.. l'ho letto..) onclick non andrebbe mai usato perche usabile solo dal mouse, a meno che non sia accompagnato da onkeypress..

Quindi... credo sia uguale usare onclick= -->funzione JS
e usare href=Javascript