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.
Related
I'm new to CSS, and I was wondering, is there another way to write an equivalent to pseudo class :link , in case :link is not supported?
Theoretically, in selectors-4 you can write :any-link:not(:visited), but you are going to be hard-pressed to find any browsers that support :visited but not :link, let alone :any-link, browser regressions notwithstanding.
A slightly more widely-supported selector requires knowledge of the document language since the link pseudo-classes themselves match different elements based on document semantics. In HTML, :link can be expressed as the following level 3 selector-list:
a[href]:not(:visited), area[href]:not(:visited), link[href]:not(:visited)
The same caveat applies.
If you're asking about browsers that support neither of the link pseudo-classes, remove the :not(:visited) from the above selector-list. If you're asking how to match links based on their visitedness in browsers that support neither pseudo-class, then it becomes impossible. But there are no known browsers that lack support for the link pseudo-classes, so this will never be a problem if you're making websites.
Note that CSS1 and CSS2.1 define :link and :visited to apply only to a elements — the standalone Selectors standard (level 3 and up) instead defers to the document language, and in the case of HTML, the current definition above is provided by HTML5. What this means in theory is that browsers up to and including IE6 (not sure about IE7) don't support the link pseudo-classes on elements other than a[href], and that's because IE6 was designed to be CSS1-compliant, not CSS2-compliant.
What this means in practice depends on whether or not you use the link pseudo-classes to match area or link elements, and whether or not you support browsers dating back to IE7, in the first place. If you're like 99.9% of authors who don't use them with area or link elements, then this means absolutely nothing to you in practice.
The a {} selector ({} added since it's so short) will apply to all pseudo classes though a:link will override specific styling for URLs the user has not yet visited.
Someone mentioned an exceptionally old version of Internet Explorer. If you're new to CSS you should first concentrate on current browsers. If you're learning at this point the oldest version of IE that you'll be supporting is IE11 if working with CSS will become a part of your future career.
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
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 am lookg for a tool, plugin that is able to check on my web-deployment if in the css stylesheets is any class that is never used.
Everything I found was just interpreting the current displayed site, which therefor is still much work to check everything..
Dust-Me Selectors
Dust-Me Selectors is a Firefox extension (for v1.5 or later) that finds unused CSS selectors.
http://www.sitepoint.com/dustmeselectors/dustmeselectors-2.2.zip
"It extracts all the selectors from all the stylesheets on the page you're viewing, then analyzes that page to see which of those selectors are not used. The data is then stored so that when testing subsequent pages, selectors can be crossed off the list as they're encountered."
I have created a link and when I try to set the style;
a:visited {
text-decoration: underline;
color: #FF0000;
}
It doesnt seem to work. It works fine in IE. I have also followed the order; link, visited, hover, active.
Is this a known issue, or am I making any mistake?
It might have to do with specificity and the order that you have your selectors in. In general, when specifying link states, you should follow the "love/hate" principal:
:link
:visited
:hover
:active
Maybe you have the :hover or :active selector before :visited?
Download the Firebug or WebDeveloper plugin for Firefox and use it to examine the style of the link, say using Inspect, to see where the style is being set. You should be able to see what styles are being applied and from where.
i have heard it is to do with the security - so something under the firefox hood disables visited links from showing so that other software cannot inspect the active styles and figure out where a user has been.
that does sort of make sense, but they should make it an option, and they should also EXPLAIN TO PEOPLE THAT THAT IS WHAT THEY HAVE DONE and save us all some time.....
Go to Tools -> Options and check if Firefox is remembering your browsing history. If this option is unchecked then the browser cannot show you which links you have visited because you denied the browser that information, hence the reason why your visited links do not change color.
Because of security issues that Google/Bing/etc. will be glad to tell you about, only a short list of properties can be styled with the :visited pseudoclass. Text-decoration isn't one of them, though color ought to work.
Depending on what IE version the OP was using when s/he posted this question, the issue there may be incompatibility of IE, especially before IE8, with standards and with other browsers.
More information here (among other places): https://www.w3schools.com/cssref/sel_visited.asp
It's likely being overridden by another style. If you have the Web Developer toolbar installed you can see what CSS styles are in affect and where they came from by selecting "View style Information" from the CSS menu.