CODEWITHSUNDEEP
javascripthtmlcssmicrosoft-edgevideo.js
Manuel Ballard
Manuel Ballard

Reputation: 9

IE/Edge styles applied in different order compared to other browser

I am finding that styles are being applied in a different order in IE edge compared to chrome.

Example on this site http://videojs.com/ inspecting this element

<div poster="http://vjs.zencdn.net/v/oceans.png" preload="auto" class="video-js vjs-fluid vjs-paused preview-player-dimensions vjs-controls-enabled vjs-workinghover vjs-v6 vjs-mux vjs-user-inactive" id="preview-player" lang="en-us" role="region" aria-label="Video Player"><video id="preview-player_html5_api" class="vjs-tech" preload="auto" poster="http://vjs.zencdn.net/v/oceans.png" tabindex="-1">
...
</div>

IE

enter image description here

Chrome

enter image description here

what is the reason for the difference?

Upvotes: 0

Views: 557

Answers (1)

Scott Marcus
Scott Marcus

Reputation: 65825

The order that each browser lists the styles in is not the order that they are actually applied to the element. This can be easily seen by comparing the two lists. Although they may list certain selectors in a different order, both are applying them equally (neither browser is applying something that the other browser isn't). Each browser vendor is free to set up their development tools in whatever way they like - there are no standards to follow on that. So, it's perfectly reasonable to expect differences in how various browsers report information in their tools.

There are specific rules about CSS selector "specificity" and what selectors will override others. Both of those browsers are standards complaint and apply the specificity rules equally.

Only when two selectors have identical specificity, and when the properties set in those selectors conflict with each other, will the location of the selectors (relative to each other) in the overall CSS be a factor.

Both your div and your video elements have ids as well as classes applied to them, so there are multiple styles being applied with different specificity. Also, the video element is nested within the div, so inherited CSS properties come into play.

Understanding CSS specificity is the key to solving your issue.

Upvotes: 1

Related Questions