Home/ Questions/Q 9143747
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T10:06:05+00:00

As part of a mobile-first build, i am loading the ‘desktop’ css dynamically in

  • 0

As part of a mobile-first build, i am loading the ‘desktop’ css dynamically in a blocking fashion

<script type="text/javascript">
    var mq = window.matchMedia("(min-width: 640px)");
    if(mq.matches){
        var stylesheet = document.createElement('link');
        stylesheet.href = '<?php echo $src ?>';
        stylesheet.rel = 'stylesheet';
        stylesheet.type = 'text/css';
        document.getElementsByTagName('head')[0].appendChild(stylesheet);
    }
</script>

However, webkit and ff give more power to the css loaded pre-injection.

enter image description here

Even if SetTimeout 3 seconds before loading mboxes.css, the browsers still favour the css rules that were not injected.

How can i get the css specificity rules to behave?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Ok, worked this out.

    For the CSS to behave “normally” it needs to be injected into the <body> not the <head>.

    document.getElementsByTagName('body')[0].appendChild(stylesheet);
    • 0