Includere variabile CSS in metatag HTML5

**SoloWiFi** · 14-10-2020, 11:14

Salve, volevo chiedere se in qualche modo è possibile far leggere una variabile CSS ad un meta tag dell'head della pagina.

Spiego meglio:
Attualmente ho un CSS in questo modo

codice:

:root {
    --ColoreScuro: #3F6DAA;
    --ColoreIntermedio: #6B97D1;
    --ColoreChiaro: #A3C6F5;
    --ColoreBordo: #FFFF00;
    --ColoreTesto: #FFFFFF;
}
#MyDiv {
    background-color: var(--ColoreScuro);
    border-bottom: 1px solid var(--ColoreBordo);
}

... segue il resto del css

nell'header della pagina:

codice:

<meta name="msapplication-navbutton-color" content="#3F6DAA">
<meta name="theme-color" content="#3F6DAA">

come è visibile nella pagina utilizzo il colore che ha anche la variabile css --ColoreScuro

sarebbe possibile indicare qualcosa di simile

codice:

<meta name="msapplication-navbutton-color" content="var(--ColoreScuro)">

ovviamente questo non funziona

Attualmente, essendo pagine in ASP me la cavo inizializzando la variabile a monte per poi usarla, in questo modo

codice:

<%ColoreScuro="#3F6DAA"%>
<meta name="msapplication-navbutton-color" content="<%=ColoreScuro%>">
<meta name="theme-color" content="<%=ColoreScuro%>">

E tutto funziona bene ma non è parametrizzato a dovere.
Se io volessi cambiare colori, oltre a modificare il CSS devo per forza modificare a mano anche la parte HTML

Tornando alla mia domanda: Posso far lavorare una sorta di variabile ripescata dal CSS?

**KillerWorm** · 14-10-2020, 20:37

Ciao, la questione penso non sia risolvibile attraverso il solo CSS o il markup HTML. Ho visto che in genere una soluzione, per rendere quel valore dinamico, è quella di integrarlo attraverso il codice lato server, come appunto hai già fatto tu stesso.

Capisco però il problema che descrivi riguardo la necessaria modifica di entrambe le parti, CSS e HTML. In tal caso una possibile alternativa è quella di agire via JavaScript per recuperare quel valore della variabile CSS e scrivere runtime quei tag in modo dinamico.

Potresti usare una cosa del genere, da inserire ovviamente nell'head in sostituzione di quei due tag (che appunto saranno scritti runtime) e facendo attenzione ad inserire questo script solo dopo l'inclusione del CSS in questione (in modo che la variabile CSS risulti disponibile da JavaScript):

codice:

<script>
   ;(function(){
      let colore = getComputedStyle(document.documentElement).getPropertyValue('--ColoreScuro');
      document.write(
         '<meta name="msapplication-navbutton-color" content="'+colore+'">'
        +'<meta name="theme-color" content="'+colore+'">'
      );
   }());
</script>

Prova e fai sapere.

**SoloWiFi** · 15-10-2020, 16:58

Non funziona e comunque ci azzecca poco.

Una alternativa c'è ma sempre lavorando lato server.
Dichiarare la root prima di caricare i css

codice:

<%
ColScu="#3F6DAA"
ColInt="#6B97D1"
ColChi="#A3C6F5"
ColTes="#FFFFFF"
%>

<head>
<style>
:root {
    --ColoreScuro: <%=ColScu%>;
    --ColoreIntermedio: <%=ColInt%>;
    --ColoreChiaro: <%=ColChi%>;
    --ColoreTesto: <%=ColTes%>;
}
</style>
<meta name="msapplication-navbutton-color" content="<%=ColScu%>">
<meta name="theme-color" content="<%=ColScu%>">
<link href="/css/MyCss.css" rel="stylesheet" type="text/css" media="all">



</head>

in questo modo ho sia caricato i CSS con le variabili ed in più ho una variabile da usare per il resto.

Ora posso scrivere i colori in un file esterno e chiamarlo via include. In questo modo modifico solo un file in caso di bisogno

Discussione: Includere variabile CSS in metatag HTML5

Strumenti discussione

Ricerca discussione

Visualizza

Includere variabile CSS in metatag HTML5

Permessi di invio