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:

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

Advertisements
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

One of my movies is now online!

“Tangled Web,” a feature length film with me in it and me also as the cinematographer got posted by Chapel Grove Films this last week!

[ Tangled Web Movie on Vimeo ]
[ Tangled Web on the Internet Movie Database ]
[ Tangled Web Movie Reviews ]

tangled_web_movie_poster

Shannon Hunter’s life is a living hell.

She’s kept a virtual prisoner in her own home, at the mercy of her abusive husband Alex. Her only comforts are her children, her neighbor and best friend Kelly, and Taylor — the man she secretly loves. But Taylor is 3,000 miles away. They met online and their only contact is video chatting on the Internet via their webcams.

One night, after a terrible beating from Alex, Shannon is at the breaking point. That’s when Taylor devises a desperate plan — a deadly plan! A plan that, if it works, will set Shannon free so she and Taylor can finally be together.

But Shannon doesn’t know that someone is secretly watching her through her webcam — someone with an evil plan of his own!

Seen entirely from the point-of-view of the characters’ webcams, “Tangled Web” is a story of suspense and deceit that will keep you guessing right up to the very last second!

“Tangled Web” stars Rae Becka (as Rebecca Morris) as the tortured Shannon Hunter, with Jeff Clayton as her abusive husband, Austin Herring as her online lover, and Desiree Markella as her best friend Kelly.

This film is not rated. It contains adult themes, some language and one violent scene. It is not recommended for children under 17.

Run time: 73 minutes

Posted in Acting, Film, Media, Movies, Television, TV

Turn on Android Developer Settings

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

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

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)

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

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… (2 dashes before ‘without’)

   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

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

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-ime-align:auto)) /* 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.io/css_hacks.html ]
MIRROR:
[ http://browserstrangeness.github.io/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