What are these CSS Hacks anyway? What do they have to do with fixing broken web sites?

Me at BrowserHacks
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] 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:

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

Tagged with: , , , , , , , , , , , , , , ,
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

Turn on Android Developer Settings

android_cutout

Tech Tip

Since Android 4.2 there has been a hidden way to turn on the developer settings. USB debugging the usual reason to turn on the feature.

How to do it:

Find and click ‘About Phone’ in your settings menu– usually the ‘cog wheel’ icon.

Scroll down to find ‘Build number’ at the bottom of the screen. This is the hidden door so to speak.

Tap ‘Build number’ 7 times in a row.

After a few taps you will start seeing developer messages so you know you are in the right place, but the 7th turns on the feature.

That is all there is to it!

For android development / programming check:
http://forum.xda-developers.com/android/software.

Posted in Android

Windows 7-10 Test Mode

win

Tech Tip

While not necessarily safe to allow non-standard/unsigned or development drivers on a system, one may do that in test mode. This is how you do (or undo) test mode in Microsoft Windows 7 and newer (including Windows 10).

Open an Administrator command prompt and enter this set of lines:

bcdedit -set loadoptions DISABLE_INTEGRITY_CHECKS
bcdedit -set TESTSIGNING ON

Then reboot.

To turn it back off, and revert to normal is the same way in reverse:

bcdedit -set loadoptions ENABLE_INTEGRITY_CHECKS
bcdedit -set TESTSIGNING OFF

Reboot and you are back to normal.

Posted in Windows, Windows 10, Windows 7, Windows 8, Windows 8.1

Windows 8-10 Boot Menu

winlogo

Tech Tip

This works in Windows 8/8.1 and 10.

Open an Administrator Prompt and type this command:

bcdedit /set {default} bootmenupolicy legacy

Now reboot and you will now have the option of the F8 boot menu that existed in older versions of Windows.

Posted in Windows, Windows 10, Windows 8, Windows 8.1

Windows 7-10 & Vista God Mode (Master Control Panel)

download

Tech Tip

Create a folder in Windows Vista, Windows 7-10 and change the name to this:

GodMode.{ED7BA470-8E54-465E-825C-99712043E01C}

You can modify the text as you like before the period in front of the CLSID:

Win7-10_GodMode.{ED7BA470-8E54-465E-825C-99712043E01C}

Clicking on the new God Mode folder will go to a hidden control panel with more options.

To create a shortcut command instead of a folder this works:

explorer shell:::{ED7BA470-8E54-465E-825C-99712043E01C}

Or even:

shell:::{ED7BA470-8E54-465E-825C-99712043E01C}
Posted in Vista, Windows, Windows 10, Windows 7, Windows 8, Windows 8.1, Windows Vista

Get dtrace and iotop back on Mac OS X

Apple_Logo_2015_03

Security in versions of OS X has been updated with the no-root theme with System Integrity Protection. Unfortunately that also includes dtrace and commands like iotop that rely on it. One can reboot a Mac into recovery mode and fix it however…

Enter Terminal in Recovery mode and type this command:

   csrutil disable

Better not to keep it turned off: Disable it only for dtrace…

   csrutil enable –without dtrace

It will complain about being an unsupported configuration, ignore it. Proceed anyway.

Then reboot.

If you wish to return it to the default, enter the Recovery Mode Terminal again and enter the opposite command:

   csrutil enable

Then reboot and all is reset to the way it was before you made any changes.

 

Tagged with: , , , , ,
Posted in Apple, Debugging, Macintosh, OS, OS X 10.10 Yosemite, OS X 10.9 Mavericks, Programming, Uncategorized

Firefox follows Microsoft Edge: adds -webkit- prefixes

Browser Logos
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.

This is going to be a bit twist for many developers out there… It already causes issues in sites where -webkit- prefixed items are used to avoid Microsoft browsers. Well there is something you can do about it. Firefox detects BOTH -moz- AND -webkit- so this works:

/* To detect Firefox 46+ (Pre-Release) */
    
@supports (-moz-appearance:none) and (-webkit-appearance:none)
{
   .selector { property:value; } 
}

Author: Jeff Clayton

So then you can reverse the effect as well. You will need to modify your older CSS hacks to rule out Firefox. The same trick works for Microsoft Edge, which I have been doing in my recent CSS edits.

@supports feature detection was added in Safari 9, Firefox 22, Chrome 28, and all versions of Microsoft Edge. So older browsers will not display this CSS.

/* Safari 9+ or Chrome 28+ without Firefox or MS Edge */
    
@supports (-webkit-appearance:none) /* Safari/Chrome Hacks */
and (not (-moz-appearance:none)) /* No Firefox */
and (not (-ms-accelerator:true)) /* No MS Edge */
{
   .selector { property:value; } 
}

Author: Jeff Clayton

For their official change lists:

    
[ Mozilla Firefox Webkit Additions ]

For the other browser:


[ Microsoft Edge Webkit Additions ]

View my regular CSS test page at:

[ http://browserstrangeness.bitbucket.org/css_hacks.html ]

Posted in Chrome, Chrome 28, Chrome-All, Cool Code, CSS, CSS Hacks, Edge, Edge-All, Firefox, Firefox 22, Firefox-All, Hacks, Microsoft, Programming, Safari, Safari 9, Safari-All, Software, Spartan, Spartan-All, Uncategorized, Web, Web Browser, Web Browsers

HTML+SSL CSS Hacks for Firefox 22 and 23

Firefox Logo
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.

Occasionally there are browser versions that are different in that the developers focus on other updates rather than CSS. Sometimes that means a different method of hack may need to be found. Versions 22 and 23 are (as most ways to differentiate a browser) easier with JavaScript, but natively there is an html difference that is usable. I had not found a straight CSS method (or other type of hack) that divides these two apart, so I looked at this method for the fun of something a little bit different. If you are familiar with CSS hacks this will be rather basic reading, but this is meant for just documenting a method and pointing out that other basic features other than CSS can perform the right task and produce the right result.

In this case it is a change in security. Firefox 23 blocks insecure non-ssl (http://) stylesheets from loading from within ssl-secured (https://) stylesheets using the @import feature.

In order to make sure we have both http and https, we need to call a chain of 2 stylesheets. The first one, https://www.yourlocation.com/ssl_stylesheet.css which in turn uses @import to load the second one (which is insecure) at https://www.yourlocation.com/non-ssl_stylesheet.css

This stylesheet chain will load styles from Firefox versions 1-22.

My usual test page loads the hacks for 22 and 23, but not 23+… It turns out that loading a set of stylesheets remotely does not load them fast enough for the local CSS. (A Race Condition). Loading them together, on the same server which handles both http and https appears to not have that problem.

@supports feature queries became available in version 22 of Firefox, and because I have Firefox queries to target those browsers, we an use them to divide them.

All other browsers already would not load insecure stylesheets from within secure stylesheets. Additional test page here (including Firefox 23+): http://jeffclayton.github.io/mixed_ssl_css.htm The hacks are the same, the order that the colors are loaded are different.

From your original html document, load the stylesheet normally with pre-set colors.

 <style type="text/css">
/* index.html */  

    /* start with a blank slate [for non-Firefox browsers as well] */
    
	.ff23up { color:white; }
	.ff23 { color:white; }
	.ff22 { color:white; }

  /* use CSS to make changes for firefox only  */

	@supports (-moz-appearance:none) and (display:flex) { .ff23up { color:red; } }

	@supports (-moz-appearance:none) and (not (cursor:zoom-in)) { .ff23 { color:red; } }

  </style>

  <link rel="stylesheet" type="text/css" href="https://www.yourlocation.com/ssl_stylesheet.css" media="screen" />

In my example I chose github to host because githubpages allow the use of both http and https to serve up their documents.

The only function this sheet has is to load an external sheet. You could of course also load ssl-only styles in this sheet if you like. The real reason for it however is just to middleman calling a non-secure stylesheet.

/* Contents of the SSL stylesheet */
/*  https://www.yourlocation.com/ssl_stylesheet.css */
@import url("https://www.yourlocation.com/non-ssl_stylesheet.css")

Now if you use this sheet as-is, any styles in it target Firefox 1-22. That is fine if that is your goal, but for the purpose of separating version 22 and 23 we need to use one of my previous CSS hacks.

/* Contents of the NON-SSL stylesheet */
/* https://www.yourlocation.com/non-ssl_stylesheet.css */

/* Firefox 23+ [This one works if on same server as the SSL stylesheet] */

@supports (-moz-appearance:none) and (display:flex) { .ff23up { color:white; } }

/* Firefox 23 */

@supports (-moz-appearance:none) and (not (cursor:zoom-in)) { .ff23 { color:white; } }

/* Firefox 22 */

@supports (-moz-appearance:none) and (not (cursor:zoom-in)) { .ff22 { color:red; } }

Author: Jeff Clayton

Versions 23 and above can be told to ALLOW insecure styles to be loaded from secure style sheets, but it is not recommended to set that in your browser by default. This means that if you have both http and https access to your directory structure, this method will work ‘right out of the box.’

These can be seen (with live files) as mentioned here:

[ http://jeffclayton.github.io/mixed_ssl_css.htm ]

Or

View my regular test page with the pair of Firefox 22 and 23 hacks (and others) at:

[ http://browserstrangeness.bitbucket.org/css_hacks.html ]

Tagged with: , , , , , , , , ,
Posted in Computers, Cool Code, CSS, CSS Hacks, Firefox, Firefox 22, Firefox 23, Hacks, Software, Tech, Web, Web Browser, Web Browsers
Follow

Get every new post delivered to your Inbox.