Using Chrome developer tools I added a CSS rule for a certain tag with certain ID. But this appears opaque. Why is it the case? Does this convey some special meaning in Chrome developer tools?
It means that the rule has been inherited:
https://developer.chrome.com/devtools/docs/elements-styles?csw=1#computed_style
Related
I'm debugging a style problem in Internet Explorer 9.
It look's like ie9 doesn't apply all style rules defined in my css file. As I look in the network tab of Developer Tools, I see for example the '.mobileMenu' class present.
But the style is not applied to the element, if I use 'Inspect element', the browser simply doesn't know about any related style rules. A large portion of the css file (but not all of it) is simply ignored by ie9.
It works in Chrome, Firefox and IE 10. There are a couple of CSS validation errors, but none that look really troubling.
My guess, which is a guess, is that perhaps some stylesheet property (CSS3?) is causing ie9 to stop rendering and skip the rest of the file. Is that possible?
Anyone any experience?
Thanks !
In the end, it had nothing to do with CSS3.
Ie9 did stop rendering, not because of anything in the css file itself, but because the style sheet was to large..
According to Microsoft:
http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164546.aspx
We split the Style Sheet into two seperate files and the problem was resolved.
Some CSS3 properties are not accepted by IE9. See this page for which browsers support which properties.
If the CSS3 properties are not support by IE9, you can try using a plugin like:CSS3PIE
One reason why I don't use Internet Explorer for web development is the way it supports CSS attribute manipulation: it lists the most general stylesheet attributes first. When there's a lot of the stylesheet rules you have to scroll down - which is most of the time.
Is there a way to change that order ? So it list the most specific style rules first just like Firefox in firebug and Chrome do ?
Try with IE tester. www.my-debugbar.com/wiki/IETester/HomePage.
You also need to install debug toolbar for IE tester http://www.debugbar.com/download.php.
This tool will give you what you need.
I'm looking for a method to inspect elements styled using pseudo-classes (such as :hover) from IE.
I am able to do this with Firefox using the Firebug HTML style drop-down that allows the browser to apply a pseudo-class to a selected element:
I am also able to do this in Chrome by toggling the element state:
However, I have not been able to find a similar option with IE developer tools. I've tried using Firebug Lite, but the same option that is present in Firefox does not seem to be in the Lite version.
Is there a way to apply pseudo-classes to elements in IE (similar to Firefox and Chrome) so that I may see how it's being styled, or otherwise observe pseudo-class styling in IE?
I've never found this in the native developer tools included with IE.
It looks like IE 11 has this feature now, although it seems like it's only for Hover (and Visited for anchor tags).
I'm working with a custom app that doesn't allow classes to be applied to the tag and the original CSS we were working with uses this methodology. Instead, the app requires an individual CSS file for each browser (lame, I know).
Our company has a sample page that has the working code applied with browser specific overrides placed on the HTML tag. So, what I'd like to do is load up the page in each version of IE and see what specific CSS is actually applied, then just upload each CSS file to the app. Does anyone know a tool that will do that?
Note, I did find this: How can I see which styles in my stylesheet are actually being applied to the current page?
But the answers were for firefox. :(
If you press F12 in Internet Explorer it will bring up Developer Tools.
From here you can inspect the HTML/CSS and see the specific CSS rules applied.
With these tools you can then change the browser mode Internet Explorer runs in e.g. If you are using IE9 you can set it to run in IE9 Compatibility Mode, IE9, IE8, IE7.
You can also change the document mode IE9 Standards, IE8 Standards, IE7 Standards and Quirks mode.
EDIT : You could try http://unused-css.com/
Where can I get the source for a browsers native/base stylesheet?
In particular the internet explorer ones.
Unlike Firefox and Chrome where you can see the standard styles that were applied to its elements indenpendentemente your own CSS, IE does not. The default styles are programmed into the engine itself, but are not treated as a style sheet that can be visualized.
You can get almost exact ones for different versions of Internet Explorer from here:
http://www.iecss.com/
You can pick from IE6 all the way up to IE9.
The same site also includes the user agent style sheets for some other common browsers, but it's reasonably easy to obtain them directly from these other browsers yourself.
There is a small problem here: if you want IE's default stylesheet to use on your page, you're probably doing something wrong.