These are my legal CSS Hacks for fixing web browser quirks or outright bugs. Please enjoy, I have been working on them for years. May it help you if you need them. Please read here first: [What are these CSS Hacks Anyway?] Then check my [Live CSS Hacks Test Page] and also [BrowserHacks.com] where I sent new hacks and test submissions for the site.
Recently there was a posting on the browserhacks.com github board for me to test that was a little different. I verified it for him that it was in fact a webkit (any version of Chrome or Safari) hack that uses the content and :after method to show content on the page. It has CSS properties that apply to itself only. Most of these don’t do this so it seemed too interesting.
For all of these, they work on anything like so:
Here is the truncated form of the css posting I mentioned above (for ease of reading and works well as a one-liner)
/* Display Content To Chrome or Safari */
.selector:after {
content: "Webkit Content Here"\@/"";
property:value;
}
After seeing that it seemed that this was interesting enough to go further and attempt to do this for any browser. His is very surgical in that it is a content-only hack. The much more general ones also do this. It works as well to replace ‘after’ with ‘before’ with any of these css blocks.
/* Display Content To Firefox */
_:-moz-tree-row(hover), .selector:after {
content: "Firefox Content Here";
property:value;
}
A version for Internet Explorer:
/* Display Content To Internet Explorer 9 and Newer */
@media screen\0 { _::selection, .selector:after {
content: "MSIE Content Here";
property:value;
}
}
My version of the Chrome and Safari one:
/* Display Content To Chrome or Safari */
.selector:not(*:root):after {
content: "Webkit Content Here";
property:value;
}
It is also possible with media queries and feature supports:
/* Display Content To Internet Explorer 9 and newer */
@media screen and (min-width:0\0) and (min-resolution:+72dpi) {
.selector:after {
content: "MSIE Content Here";
property:value;
} }
/* Display Content To Internet Explorer 8 and Older */
@media \0screen\,screen\9 { .selector:after {
content: "MSIE Content Here";
property:value;
}
}
/* Display Content To Internet Explorer 8 and Newer */
@media screen\0 { .selector:after {
content: "MSIE Content Here";
property:value;
}
}
/* Display Content To Chrome or Safari */
@media screen and (-webkit-min-device-pixel-ratio:0) {
.selector:after {
content: "Webkit Content Here";
property:value;
} }
/* Display Content To Newer Versions of Safari Only (6.1+) */
@media screen and (-webkit-min-device-pixel-ratio:0)
and (min-color-index:0) {
.selector:after {(;
content: "Safari Content Here";
property:value;
);}}
/* Display Content To Newer Versions of Chrome Only (28+) */
@supports (-webkit-font-smoothing:antialiased) {
.selector:after {
content: "Chrome Content Here";
property:value;
} }
Another one like that:
/* Display Content To Newer Versions of Chrome Only (28+) */
@supports (-webkit-appearance:none) {
.selector:after {
content: "Chrome Content Here";
property:value;
} }
IT Director/Senior Software Engineer, Photographer I test and create new CSS web page formatting hacks for BrowserHacks.com for the purpose of repairing web sites. PS-- CSS hacks are fun, but please attempt good CSS first unless in a bind. See Test Pages: https://browserstrangeness.bitbucket.io and https://browserstrangeness.github.io
Jeff Clayton IT Director / Senior Software Engineer / Film & Photography 
Leave a Reply