IE11/Edge doesn't respect link/css order in DOM

Question

tl;dr: IE11/Edge seems to give priority to styles in CSS files loaded last with javascript rather than how they appear in the DOM structure.

I cannot find anyone else who has reported this problem, but am looking for help confirming my issue.

I have a function for loading JS libraries (locally if the cdn fails) and this includes a line to either 'appendTo' or 'prependTo' the 'head' element (passes in 'method').

$("<link>", { rel: "stylesheet", type: "text/css", "href": css })[method]("head");

The issue is that core website style may override library styles, so I thought 'prependTo' the 'head' would work to ensure the core styles override the library - this does work in Firefox & Chrome. But in IE the library styles are still overriding as though the CSS file was after the core files in the DOM even through inspecting the DOM shows that it is before.

In my case, I am loading dataTables CSS & JS from local versions if the CDN fails - and since I want my custom website CSS to override the library, I am using 'prependTo' to make sure the dataTables CSS is before my custom website CSS in the document head tag. IE11 still applies it 'last' or gives it preference. It's true when emulating IE10 etc. though I no longer have a test area for 'real' old IE versions to verify if this was always true.

Can you confirm this is the functionality in IE? Do you know when this started? Do you know a fix? Trying to avoid a bunch of "!important" in my CSS files.

Answer 1

I'm seeing the exact same problem even on Edge 16. My unfortunate work around is to manually attach any css via JavaScript instead of in my html/page template.

    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = '/link/to/style.css';
    document.querySelector('body').appendChild(link);