Visualizzazione dei risultati da 1 a 3 su 3
  1. #1

    Includere variabile CSS in metatag HTML5

    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?
    Ultima modifica di SoloWiFi; 14-10-2020 a 11:16

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,801
    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.
    Ultima modifica di KillerWorm; 15-10-2020 a 18:27
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  3. #3
    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
    Ultima modifica di SoloWiFi; 15-10-2020 a 17:02

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.