CSS3 Media Query to target only Internet Explorer (from IE6 to IE11+), Firefox, Chrome, Safari and/or Edge A set of useful CSS3 media queries to target only specific versions of the various browsers: Internet Explorer, Mozilla Firefox, Google Chrome, Apple Safari and Microsoft Edge. The trick to this hack is the proposed CSS 3:empty pseudo-class. If you’re looking to target only Firefox 3, you’re out of luck. At the time of this writing, Firefox 3 seems immune to any. Yeah, i know its weird, but i'm pretty sure its a firefox bug, or every other browser has a bug and firefox gets it right. Basically, its this: i created a wordpress theme. People use it and import blogs from blogger, tyepad, etc, so i get a variety of sizes of images imported into their blogs, and all sorts of funky proprietary coding to embed those images, because wordpress imports the code. Apr 07, 2013 Last year, Microsoft announced that IE10 will not be supporting conditional comments. With their history, this is obviously a risky move. Up to now, to target quirky behaviour in IE6-9, developers have been using conditional comments, conditional classes, and other IE-specific hacks. But without conditional comments in IE10, the only options we're left with to target CSS problems are hacks. Mar 24, 2017 What would be best way to target only Firefox with your CSS rules and not a single other browser? That is, not only should Internet Explorer ignore the Firefox-only rules, but also WebKit and Opera should. SOLUTION 1: This is probably the most clean and easy solution out there and does not rely on JavaScript being turned on.
Browserhacks is mostly based on the big list of CSS browser hacks by Paul Irish. Other posts like Moving IE specific CSS to media blocks by Keith Clark, Detecting browsers with JS hacks by Gareth Eyes and IE CSS hacks by Nicolas Gallagher greatly helped. Many thanks to Jeff Clayton for his help with the tests and the creation of new hacks. Nonetheless, I wanted to document every browser-specific css selector and style attribute hack I’ve seen. Plus there’s no way to provide stylesheets to only Safari, I believe. With these you’ll be able to better target IE, Firefox, Chrome, Safari and Opera from within the css. So here are go.
I am a web developer,
Recently (this week and last) my firefox has been caching very old resources. If i update a pages html, i can see that change on a refresh, but and css or js changes i make do not reflect. Every time i load a site i have to do a [shift + refresh]. Even if i clear my cache in the preferences it will not solve the problem.
The only way i can make firefox load the new page resources is via a app called 'clean my mac 2' where i have to do a application reset.
I do this 5 or 6 times a day and the rest of the time i still have to [shift + refresh] to get the updated content.
In a perfect world, I don’t use CSS hacks, and certainly don’t recommend them. In the unpredictable, chaos of the real world, however, there are many situations where applying styles to particular browsers is indeed the optimal solution. Most of the time, I am targeting or filtering Internet Explorer (because it is so incredibly awesome), but occasionally I need to tweak something in a modern browser like Firefox, Safari, or Opera. In this article, we’ll look at CSS hacks targeting different versions of Firefox.
Some of these CSS hacks don’t validate, others are proprietary, and some are completely valid (depending on CSS specification). I have tested these hacks to the best of my ability, but don’t let that stop you from checking things out on your own (in fact, I absolutely recommend doing so). These Firefox hacks are organized according to version number and presented with ease of copying and pasting in mind. That said, here are some notes that apply to all of the hacks in this article:
- For each hack, change only
#selector,.selector, and of course the declaration blocks. - Hacks that do not validate as CSS are designated with
[!]in the associated comment. - If you discover any inconsistencies, incompatibilities, or inoperabilities, please leave a comment.
- This post is a work in progress. Please share any Firefox hacks that are not on the list.
Also keep in mind that, in general, there are two types of CSS hacks: those that target and those that filter. By targeting, we are referring to the application of CSS styles to a particular, targeted browser (or set of browsers) at the exclusion of all others. Conversely, by filtering, we are referring to the application of CSS styles to every browser except a particular browser (or set of browsers). In essence, this hack dichotomy represents two sides of the same coin. How you classify these various hacks all depends on perspective.
CSS Hacks targeting all Firefox
These hacks target all versions of Firefox:
CSS Hacks targeting Firefox 1.5 and newer
This hack targets Firefox versions 1.5 and newer:
CSS Hacks targeting Firefox 2 and older
These hacks target Firefox 2 and older:
CSS Hacks targeting Firefox 3
This hack targets Firefox 3 (and possibly newer):
Got more?
Please help by sharing any Firefox hacks that target or filter specific versions of Firefox. Bonus points for anyone with a hack for filtering all versions of Firefox (and only Firefox).