CSS Hack: Cross-Browser Targeting
It's not just IE — legacy Firefox, Safari, and Chrome also need targeted fixes. Feature-based hacks (instead of version-based) are more reliable for non-IE browsers.
We can use CSS attribute selectors, vendor prefixes, or parser quirks to target specific browsers.
|
My background color is black in Firefox.
/* Non-IE Browser Hacks */
/* Firefox (all versions) */
@-moz-document url-prefix() {
.element { color: #ff0000; }
}
/* Firefox 3.6+ */
.element:not(:-moz-any-link) { color: #00ff00; }
/* Safari/Chrome (WebKit) */
@media screen and (-webkit-min-device-pixel-ratio:0) {
.element { color: #0000ff; } /* Chrome/Safari */
_::-webkit-full-page-media, _:future, .element { color: #ffff00; } /* Safari only */
}
/* Opera 12- */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
.element { color: #ff00ff; }
}
Further Reading: You may have seen syntax like this: -webkit-property: value; -moz-property: value; -ms-property: value; -o-property: value;
In the early stages, when new CSS features hadn't been finalized yet, browser vendors were concerned that the standard syntax might change later on. Rather than using the native properties directly, they added proprietary prefixes to the properties to test compatibility first. These proprietary prefixes were designed to work with early versions of Chrome/Safari, Firefox, IE/Edge, and Opera.
|