:root erweitern durch mediaquerys

    Ich bastele gerade mit CSS-Variablen herum und habe ein funktionierendes CSS mit einem :root und mediaquerys, die das :root erweitern sollen.

    Das funktioniert soweit gut, doch frage ich mich ob das überhaupt valides CSS ist und wenn nicht, wie man valides schreiben kann.

    Der CSS Validator spinnt leider bei variablen total rum. Offenbar kennt er sie nicht.

    :root {


    --menu-rohme-radius-hover: 10px;

    [...]

    }


    @media only screen and (max-width:800px)

    {

    :root {

    --mediahoeg: 150px;

    --rohme: 1px solid green;

    }

    }

    @media only screen and (max-width:1200px)

    {

    :root {

    --mediahhoeg: 600px;

    --rohme: 1px solid red;

    }

    }

    Hi,


    Ohne mir jetzt Deinen Code genau angesehen zu haben, werfe ich mal in den Raum, dass der IE das nicht kann.

    Wenn man das also für die öffentliche Verwendung entwickelt/erstellt, sollte man bedenken, dass manche User noch den IE11 verwenden.

    Edge soll das zwar können, aber ich meine, das scheitert hin und wieder auch, das weiß ich aber grad nicht sicher.


    Testest Du vielleicht gerade in einem Browser von Micro$oft?


    EDIT: kurzer Nachtrag

    Edge scheint es wohl zu können, IE bis 11 leider dennoch nicht. Zum Testen einfach mal das hier nehmen und Fenstergröße des Browser entsprechend verändern:

    CSS
    :root { --bgcolor:#c00; }
@media only screen and (max-width:1200px) { :root { --bgcolor:#0c0; } }

BODY { background-color:var(--bgcolor); }

    Hat Dein Browser keinen grünen oder roten Hintergrund ( je nach Fenstergröße ), wird das Prinzip der Custom Variables/Properties nicht unterstützt.

    Ich habe derzeit kein Microsoftsystem zum Testen zur Hand, werde aber die Endversion logischerweise auf alles Testen. Daher Danke für deinen Hinweis, da kann ich schonmal vor ab gucken wie ich das später machen werde.


    IE User sind ~5% (edge genau so):
    https://de.statista.com/statis…tzung-weltweit-seit-2009/



    Ich muss mal gucken wie ich das lösen werde. Vielleicht lass ich das CSS vorher mit php generieren, oder schick den IE Leuten einfach eine Handyversion zu.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden