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).
Related
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
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
SeleniumHQ says that each driver supports whatever CSS Selectors its browser supports. According to this site, IE 9 should support the :nth-of-type() selector. However, I appear to be getting a NullPointerException from the depths of the RemoteWebDriver class when I execute findElements on this selector. My By.cssSelector looks like this:
table#ucsp_dgMultiSelect tr:nth-of-type(2) input#cbPres
This works fine on Chrome. Maybe IE 9 has a problem with putting that selector in the middle there, I don't know, but that would break a lot of my code. The :nth-of-type() selector has become my go-to for identifying WebElement locators within a table. Has anyone else had success using the :nth-of-type() selector as a locator with WebDriver and IE 9?
I'm using IEDriverServer.exe.2.25.2.0 and my IE version is 9.0.8112.16421 64-bit
WebDriver does, in fact, support the CSS selectors that the browser does, and if IE9 supports the :nth-of-type() selector, then so should the IE driver. However, that's not the entirety of the story. If the DOCTYPE in your page is not a modern standard (e.g. <!DOCTYPE html>, IE also tries to guess at how it's supposed to render the document, and if it guesses that it should be rendering it as a previous IE version, it'll use the CSS selector engine of that previous version.
Since you're using IE9, there's a very easy way to see if WebDriver should be able to find the element with the selector you're trying to use. Open the "F12 Developer Tools" by hitting the function key F12 while you're on the page you're interested in. Go to the Script tab in the Developer tools, and type
document.querySelector('table#ucsp_dgMultiSelect tr:nth-of-type(2) input#cbPres')
If the console displays the element information, then WebDriver should be able to find it. If not, then IE can't find it, and WebDriver never will either.
This debugging technique will work anytime you're trying to find an element using CSS selectors in IE9, and is invaluable in helping find out if the problem is IE or if it's the driver. Additionally, the F12 Developer Tools also will tell you what mode IE is trying to render the page in, which can also be instructive.
I have put together this simple code for showing/hiding some content on click using CSS only. It works as I want it to in FF but wont work in Chrome or Safari (untested as yet in IE)
http://jsfiddle.net/fW3yW/
Can someone please tell me why it wont work in these browsers and suggest an alternative (using CSS only if possible)?
Here is the site where the code is being used - http://www.themontessoripeople.co.uk/montesori/?page_id=20#policies-list
Added tabindex, works in Chrome: http://jsfiddle.net/fW3yW/1/
From here: css focus not working in safari and chrome
jQuery method: http://jsfiddle.net/fW3yW/12/
You're abusing CSS. The :focus psuedo-class is meant for styling form elements that have focus, rather than for <a> links, where browsers might implement :focus differently, and then there's also the similar :active psuedo-class.
I suggest you do not hide anything by default with CSS, but use jQuery to hide the elements on-load, then use jQuery to create show/hide animations (easily done with a single line of code) when a link is clicked. It's a lot more elegant and works on more browsers.
You're using a CSS3 selector, with an XHTML doctype. I don't know that all browsers will handle CSS3 with an XHTML doctype tag - though the two specs aren't necessarily tied together.
Have you tried changing the doctype to indicate HTML5? (Then, of course, that brings up all kinds of HTML5shim questions...)
Use jQuery instead...way more reliable and elegant.
http://www.w3schools.com/jquery/jquery_hide_show.asp
I can style visited links with a:visited. I want to the same for links to pages I have in my browser favorites.
I wonder if Firefox has a pseudo-class for that.
Then I could style them with the addon "Stylish".
There's a good reason this doesn't exist: It can be used in conjunction with getComputedStyle to invade your privacy (using javascript to report what you may have bookmarked).
This was also a problem with the :visited selector and Mozilla rectified it:
http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/
I suppose they could do the same for :bookmarked or something, but as of now this doesn't exist.
I wonder if Firefox has a pseudo-class for that.
I could not find anything in this list of Mozilla-specific CSS extensions that does what you want, so most likely there isn't such a pseudo-class.
There is definitely no such pseudo-class in standard CSS, though, but I think you already know that since you're asking specifically about a Firefox extension.