CODEWITHSUNDEEP
cssinternet-explorerie-developer-tools
DaeYoung
DaeYoung

Reputation: 1229

IE developer tools - css properties are strikethrough in red

I decided to use third party provider's css, image and javascript on my web application for its make up.

I was curious of how this package (css+image+js) works so that as soon as I accessed resources of web app I activated IE's developer tools via pressing F12.

I noticed that some css properties have strikethrough in red color. I would to like know what it means...

I'd appreciate your input on this matter.

enter image description here

Upvotes: 2

Views: 3363

Answers (3)

Scott Marcus
Scott Marcus

Reputation: 65883

It means that those properties are being overridden by a more specific rule somewhere else in the code.

For example, take this code:

#someId {color:red;}
p {color:blue;}
<p id="someId">My Text</p>

In this case, both CSS rules would apply to the paragraph, but the text color of the paragraph would be red, not blue because an ID rule (#) is more specific than an element rule (p).

If you were to look at a page that contained this code, you would see the p rule would have a line through it, telling you it's been overridden.

Upvotes: 7

jonghyon lee
jonghyon lee

Reputation: 99

It means that CSS redefine to CSS, Javascript, html. Example:if you will define: in css file:

 p {color:blue}

and html file

 <p id="someId" style="color: red">My Text</p>

and javscript file or jquery file here is jquery code

 ("#someId").css('color', 'yellow');

result is yellow Here, p {color:blue} line have strikethrough in red color In words, this is priority issues. priority of css is Five kinds. if you are define to Top method, for four kinds have strikethrough in red color. example: top method is

  <p id="someId" style="color: red !important;">My Text</p>

Upvotes: 0

Spudley
Spudley

Reputation: 168853

IE dev tools shows all of the styles that match the current object, including those that are overridden by another style.

The overridden styles are shown with the strikethrough effect to make it clear that they are not the style that is in effect, but they are still shown so you can see how the browser has worked out what to render.

If you disable an active style by unticking it, then the next matching style in the sequence will take effect and the strikethrough effect will be removed from it. This allows you to easily experiment in real time with the styles, and easily see the effect of making changes to your CSS code.

Upvotes: 1

Related Questions