What are these CSS Hacks anyway? What do they have to do with fixing broken web sites? [NOT “Hacking!!!”]

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 check out my [Live CSS Hacks Test Page at Bitbucket] MIRROR at [Live CSS Hacks Test Page at GitHub] and also [BrowserHacks.com] where I sent new hacks and test submissions for the site.

Have you ever had or seen a web site that works fine… mostly… but not in (name a specific web browser here)? …or even a specific version (maybe it works properly in Internet Explorer 10 but not 11 for example)?

A few pages to check out:

• [Chrome & Safari CSS Hacks]
• [Firefox CSS Hacks]
• [Internet Explorer CSS Hacks]
• [Microsoft Edge CSS Hacks]

That is the bane of the web programmer/developer in today’s world. They build it usually using a Windows or Mac-based machine and invariably it works great on the platform or web browser it was designed with but NOT on others.

Why this is the case? Simply there many programmers working on each web browsers’ programming, and they are very large applications… and while they are supposed to follow the current web standards it is not all that easy, and sometimes not even entirely intended. Web sites are the same way, especially the larger and more complex ones.

What do you do about it???!!! How do I get my own site to work on ALL browsers the same way, or at least ‘well enough’…

GENERAL DISCLAIMER: Always attempt to make the site work properly with good cross-browser CSS first, then only if there is still a problem, especially if it is time-sensitive, you can consider resorting to using a CSS hack. This is ALL LEGAL — while it is odd code, this is not talking about breaking into anything, just providing methods of fixing errors in web sites where they don’t act right in every web browser.

‘Well enough’ is the key actually. Older browsers simply do not have the same level of capability that the new ones do so making them work ‘the same on every platform’ is not always possible. What we do is attempt to write good CSS formatting that ‘degrades nicely’ so on every platform, a good looking site exists, even if it is different than the original design — the end user will be happy and won’t care so much of the difference.

What about sites that SHOULD look good on modern browsers, and it is clear that the browser can in fact handle everything my site throws at it?? That is the question we are trying to solve here. Often it is a case of finding common ground… rewriting CSS and testing it on all of the major browsers to make it work right is the right way to do it.

HOWEVER– there is not always enough time to do it if your customers need it to look right immediately in say Internet Explorer, or Safari on a Mac, etc… (Chrome and Firefox are the other ones that are major players so these 4 are what most people strive to target.)

Here is where it is often necessary to find a quick fix, one that works for the meantime until a better CSS solution is found. That is what CSS Formatting Hacks are all about — a way to target specific browsers, or a set of browsers ONLY, with CSS for only those browsers.

How it works is rather simple in idea but often more complicated in structure, or just hard to understand because CSS hacks may not actually look like they should do anything at all. Often a company creates special CSS for usage on their own web browsers. There are also cases where certain CSS functionality is added to browsers when newer versions are released. That is where most of these CSS hacks or hack combinations come from, sometimes there is even an occasional outright CSS bug that only affects one or a few different browsers or version(s) of those browsers.

If we know for example that it works fine in every browser but say Firefox 29 and newer, then we attempt to find a CSS formatting hack that allows us to insert CSS into a site that only affects versions 29 and newer… or if we cannot find a hack that does that, then we look for one that works on older versions (specifically 28 and older in this example if we can). Here is one example:

/* Firefox 29+ (using a media query) */

@media screen and (min--moz-device-pixel-ratio:0)
 and (min-resolution:3e1dpcm) {

    /* Any CSS here shows up only in Firefox 29 and newer */
 
    body {
        background-color:gray; 
        color:red;
    } 
}

The best answer is to play the odds. What versions are your customers going to be using? If your demographic never uses older versions of say Internet Explorer 9 or less, then why be concerned about that set of browsers? The answer is maybe you do not, so then you would want to focus your attentions on the browsers that your customers are going to be using the most, and THEN maybe see if your sites at least look basically fine on other browsers in case you get the uncommon straggler with out of date computer equipment.

Well that is what these are all about– Test your site and see what browsers don’t render your site properly, and then find what CSS would fix that. If you try it and that throws off other web browsers, then you may need to (at least temporarily) use a CSS hack to solve the problem until you can find a better solution.

While I hope to find hacks for every version of every major browser out there, it is not always possible. If you cannot find a hack for your specific version, then use them in order from oldest to newest. In a style sheet they do overwrite each other in text order, so write CSS for say version 28+ [meaning: 28 and newer a.k.a chrome >= 28 for the more mathematically inclined] of chrome first, then for version 29+ sequentially on a page, so the last CSS you have in your style sheet targets the most recent web browsers. That is not a dead set rule of course, just a guide to work from. If you need to use a hack, use it in whatever order does what you need it to accomplish.

There are many on this blog for this purpose. Try not to overuse them but only in a pinch if absolutely necessary. I also contribute new hacks and test hacks for browserhacks.com. You will see much work there of mine as well. I have been working with Hugo, Tim and Fabrice since Fall of 2013 to help that site have what it needs to help the web development community at large.

Jeff

–

Jeff Clayton
IT Director, Senior Software Engineer, Professional Photographer

About Jeff Clayton

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

‹ CSS Hack using CSS3 Variables (Firefox 31 and Newer)

OS/Platform Specific CSS Hacks ›

Tagged with: Browser, Browser Versions, Browsers, Chrome, CSS, CSS Hacks, Firefox, Internet, Internet Explorer, MSIE, Opera, Programming, Safari, Web Browser, Web Design, Web Programming
Posted in Apple, Chrome, Computers, Cool Code, CSS, CSS Hacks, Firefox, Hacks, Internet Explorer, Linux, Macintosh, Microsoft, OS, OS X 10.10 Yosemite, OS X 10.6 Snow Leopard, OS X 10.7 Lion, OS X 10.8 Mountain Lion, OS X 10.9 Mavericks, Safari, Software, Spartan, Tech, Web, Web Browser, Web Browsers, Windows, Windows 10, Windows 7, Windows 8, Windows 8.1, Windows XP