10 Useful Fallback Methods For CSS and Javascript
Code fallbacks are the perfect solution for compromising with your many unique visitors. Not everybody on the web is using the same operating system, web browser, or even physical hardware. All of these factor into how your webpage will actually render on screen. When working with new CSS or JavaScript tricks you’ll often run into such technical bugs.
But don’t let these pitfalls discourage you! In this guide I’ve put together some of the most common fallback techniques for web designers focusing on CSS and JavaScript/jQuery. When all else fails you want to provide users at least basic page functionality. Simplicity reigns supreme in the field of user experience design.
Check out our guide below and let us know your thoughts and questions in the comments section.
1. Rounded Corners with Images
CSS3 techniques have skyrocketed into mainstream web design. One of the most notable properties is border-radius which allows for on-the-fly rounded corners. These look beautiful on practically any button, div, or text box. The only problem is the limited support between web browsers.
Many older browsers including Internet Explorer 7 do not support this property. So in order to keep rounded corners working for all standard browsers you’ll need to build a fallback with images.
The standard code uses regular CSS3 properties on the main div while accommodating for images on each of the corners. You’ll likely need to set up some extra divs within the main container which are used to display corner images in the background.
#mainbox {
-webkit-border-radius: 5px; /bin /boot /dev /etc /home /initrd.img /initrd.img.old /lib /lib64 /lost+found /media /mnt /opt /proc /root /run /sbin /snap /srv /sys /tmp /usr /var /vmlinuz /vmlinuz.old Safari */
-moz-border-radius: 5px; /bin /boot /dev /etc /home /initrd.img /initrd.img.old /lib /lib64 /lost+found /media /mnt /opt /proc /root /run /sbin /snap /srv /sys /tmp /usr /var /vmlinuz /vmlinuz.old Firefox\Gecko Engine */
-o-border-radius: 5px; /bin /boot /dev /etc /home /initrd.img /initrd.img.old /lib /lib64 /lost+found /media /mnt /opt /proc /root /run /sbin /snap /srv /sys /tmp /usr /var /vmlinuz /vmlinuz.old Opera */
border-radius: 5px;
}
#mainbox .topc {
background: url('corner-tl.png') no-repeat top left;
}
#mainbox .topc span {
background: url('corner-tr.png') no-repeat top right;
}
#mainbox .btmc {
background: url('corner-bl.png') no-repeat bottom left;
}
#mainbox .btmc span {
background: url('corner-br.png') no-repeat bottom right;
}
2. jQuery Dropdown Menu System
Dropdown menu systems are perfect for today’s Web. However the biggest issue is visitors accessing your website without the JavaScript enabled. In this case none of your menus would work at all! The best solution is using CSS to display/hide each of the sub-menu div blocks and display them on hover.
The only problem with this solution is that Internet Explorer 6 doesn’t support these CSS hover selectors. However IE7+ works great; and of course all browsers will work fine if JavaScript is enabled in the first place. The code from this tutorial on CSS Plus is one of the best resources I’ve found. It provides not only a solution with jQuery but also the CSS necessary for IE issues.
Another alternative solution you can try is just openly displaying each of the menus in IE6. You can use Internet Explorer conditional comments to apply stylesheets based on the browser version. Of course, this won’t be the prettiest solution, but it will simply work.
If you don’t feel that Internet Explorer 6 is much of a worry then don’t even bother with this alternative fallback. The tutorial and subsequent code above should be enough to get your JavaScript menu loading even with strict CSS in all of the major browsers.
3. Targeted Internet Explorer Styles
I’m sure we all know about the rendering issues coming out of Microsoft’s Internet Explorer. I can give a bit of credit for their latest IE8 and future prospects with IE9. However there is still a small audience running IE6/IE7 and you really can’t ignore them just yet.
Conditional comments as mentioned in the last section can be useful for reformatting areas of the page. For example if you have a dropdown menu with sub-navigation in IE6 that will only display using JavaScript, you’ll be out of luck trying CSS as a fallback method. Instead the best solution is to display each sub-list as a navigation block.
<!--[if IE 6]> <link rel="stylesheet" type="text/css" media="all" href="css/ie6.css" /> <![endif]-->
Adding the above code to your document header you can then specify the display type for each sub-navigation. The best part about this fallback is that you can overwrite the CSS and still dynamically show/hide menus when JavaScript is enabled. Otherwise you’ll just display an open list of links. You could use a similar code like what I’ve added below.
#nav li {
position: relative;
width: 150px; /bin /boot /dev /etc /home /initrd.img /initrd.img.old /lib /lib64 /lost+found /media /mnt /opt /proc /root /run /sbin /snap /srv /sys /tmp /usr /var /vmlinuz /vmlinuz.old must set a finite width for IE */
}
#nav li ul { /bin /boot /dev /etc /home /initrd.img /initrd.img.old /lib /lib64 /lost+found /media /mnt /opt /proc /root /run /sbin /snap /srv /sys /tmp /usr /var /vmlinuz /vmlinuz.old sub-nav codes */
display: block;
position: absolute;
width: auto; /bin /boot /dev /etc /home /initrd.img /initrd.img.old /lib /lib64 /lost+found /media /mnt /opt /proc /root /run /sbin /snap /srv /sys /tmp /usr /var /vmlinuz /vmlinuz.old define your own width or set in the li element */
}
#nav li ul li {
width: 100%;
}
4. Legacy IE Opacity/Transparency
One of the many annoying bugs with Internet Explorer is the deal with opacity. The alpha-transparency settings in CSS3 can be altered through the opacity property. Yet in the way of Microsoft only Internet Explorer 9 currently supports this feature.
The best solution for targeting IE6+ is through filter, a proprietary setting only recognized by IE. Check out the brief code example below:
.mydiv {
opacity: 0.55; /bin /boot /dev /etc /home /initrd.img /initrd.img.old /lib /lib64 /lost+found /media /mnt /opt /proc /root /run /sbin /snap /srv /sys /tmp /usr /var /vmlinuz /vmlinuz.old CSS3 */
filter: alpha(opacity=55); /bin /boot /dev /etc /home /initrd.img /initrd.img.old /lib /lib64 /lost+found /media /mnt /opt /proc /root /run /sbin /snap /srv /sys /tmp /usr /var /vmlinuz /vmlinuz.old IE6+ */
}
All you need to do is include the line above within any element requiring transparency. Notice that similar to the CSS3 property, all child elements will also inherit this opacity change. If you are looking for a newer method which targets IE8 specifically, check out the code below. It behaves in the same manner as our filter property is only recognized by the Microsoft IE8 parser.
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=55)"; /bin /boot /dev /etc /home /initrd.img /initrd.img.old /lib /lib64 /lost+found /media /mnt /opt /proc /root /run /sbin /snap /srv /sys /tmp /usr /var /vmlinuz /vmlinuz.old IE8 */
5. Creating CSS3 Buttons with Fallback Images
Buttons are a fantastic web element for all kinds of interfaces. They can behave as form inputs, navigation items, or even direct page links. With CSS3 it’s now possible to format buttons with many unique styles such as background gradients, box shadows, rounded corners, etc.
However you cannot trust that all your visitors will be able to render these newer properties. When building a fallback design for buttons (or even similar UI elements) there are two distinct options. The first is to include a background image designed exactly as the CSS would look. This can be easily accomplished in Photoshop. However if you’re not an expert in the software then this may be troublesome.
The alternative is to fallback to a plain background color and simpler CSS styles. I’m using some of the code examples from CSS-Tricks great post on CSS3 gradients. All the major browsers including Safari, Firefox, Chrome, and even Opera support these properties. The area where you’ll run into issues is in the support of legacy browsers: older Mozilla engines, IE6/7, possibly even Mobile Safari.
.gradient-bg {
background-color: #1a82f7; /bin /boot /dev /etc /home /initrd.img /initrd.img.old /lib /lib64 /lost+found /media /mnt /opt /proc /root /run /sbin /snap /srv /sys /tmp /usr /var /vmlinuz /vmlinuz.old uses a solid color at worst */
background-image: url('https://assets.hongkiat.com/uploads/code-fallback-methods/fallback-gradient.png');
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2F2727), to(#1a82f7));
background-image: -webkit-linear-gradient(top, #2F2727, #1a82f7);
background-image: -moz-linear-gradient(top, #2F2727, #1a82f7);
background-image: -ms-linear-gradient(top, #2F2727, #1a82f7);
background-image: -o-linear-gradient(top, #2F2727, #1a82f7);
}
The only small issue with solely using images as a fallback method is that you won’t have an active state change when the user clicks on a button. You could build two different images for these regular vs. active states, although it would take some extra work. This reason alone may push you to use a solid background color instead of fallback images. Try out a couple of different solutions to see which looks best in your layout.
6. Checking for Mobile Content
Another huge trend in 2012 is the popularity of mobile Internet browsing. Smartphones are everywhere and data over 3G/Wi-Fi is becoming more and more accessible. Thus many designers will be looking to provide a fallback layout for mobile users.
A couple of popular mobile web browsers will render pages similar to a desktop environment. Mobile Safari and Opera are best known for this, even supporting many common jQuery scripts. But these pages are not always mobile-friendly and there is room to expand on UX.
There are two ways you can detect mobile browsers and display an alternate layout or stylesheet. The first is through JavaScript which works great as a frontend tool. The script I’ve added below is very simple and only checks for iPhone/iPod Touch users. Detect Mobile Browsers is a fantastic website which offers a more detailed script you can run instead.
// Redirect iPhone/iPod Touch
function isiPhone(){
return (
(navigator.platform.indexOf("iPhone") != -1) ||
(navigator.platform.indexOf("iPod") != -1)
);
}
if(isiPhone()){
window.location = "m.yourdomain.com";
}
Now the other alternative is checking through a backend language such as PHP. You can check for a variable known as the HTTP_USER_AGENT. Dozens of websites will turn up if you google these terms. However I still recommend the Detect Mobile Browsers link I added in the previous paragraph.
The site has free downloadable scripts for parsing not only in PHP, but also tons of other popular backend languages. These include ASP.NET, ColdFusion, Rails, Perl, Python, and even server-based code such as IIS and Apache.
7. Slicebox Slider with Graceful Fallback
My favorite CSS3 freebie from 2011 probably has to be the Slicebox 3D Image Slider released by Codrops. It utilizes beautiful CSS animation transitions in browsers which support them, currently in Google Chrome and the latest in Safari. It’s weird that even the most recent Firefox or IE9 release still can’t use these transitions.
The best part about this code is that it’ll still fallback to provide basic transition effects between the images. Granted much of the animation is performed through jQuery, but the standard CSS fallback option is still very reliable considering how many browsers cannot support flashy CSS3 animations.
Alternatively Codrops also just recently released another sliding images panel which utilizes even more creative CSS3 techniques. This image slider is created using background images in CSS, so even without the transition effects it behaves very smoothly.
8. jQuery Script CDN Failsafe Method
The jQuery library has become almost essential for developing JavaScript on the web. Many alternate CDN suppliers have created static URLs where they host all the release versions of jQuery. Google, Microsoft, and even jQuery themselves have created a CDN portal for developers, among a few other lesser-known websites.
There are possibly hundreds of thousands of developers reliant on these providers. What would happen if any of the links were broken for whatever reason or the servers went offline? It would be a good idea to host a local copy and implement this only if you would need it. Well this great fallback code snippet from CSS-Tricks lets you do just that!
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='/js/jquery-1.7.1.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
9. Unique HTML5 Checkboxes
HTML5 has opened the door for some fresh cool styles to build websites. Part of this enhanced web experience is through forms and input elements. Checkboxes are just one example which can be heavily customized to fit your needs.
I ran into this wonderful CSS/jQuery tutorial posted back in early Spring 2011. It offers a simple method of creating Apple-style switches for your checkboxes which gracefully degrade in older browsers. The code uses background images to replace the on/off styles between user interactions.
The original input checkbox elements are hidden by default and their value is determined through JavaScript calls. This means you can dynamically pull the value at any point through jQuery, but it will also be passed into the form upon hitting the “submit” button.
Assuming that JavaScript is turned off or unsupported in older browsers the script will default to regular HTML inputs. This will also disable the CSS for the newer checkbox styles so it’ll appear as if nothing has changed. The script behaves more like an aesthetic front-runner with a clean fallback than anything else. But these sliders look fantastic, and the same techniques could be applied to other form input fields such as select menus and radio buttons.
10. HTML5 Supported Video
The new HTML5 specs have been very progressive in many areas. Both video and audio elements have enhanced native support for a large number of media files. However it does turn out that between the HTML5-supported browsers they do not all agree on file types.
Mozilla Firefox generally supports .OGG video which you can use VLC as a converter. Google Chrome & Safari look for .MP4 or H.264 encoded .MOV files. Because of these differences you would normally have to include three different video formats – the two listed above along with an .FLV fallback.
Thankfully some really smart guys put together a library called VideoJS. It’s an extremely small JavaScript build which allows for a single implementation of Flash and HTML5 video in one tag. It’s free to download and open source, so developers are welcome to contribute as well. Both the Flash and HTML5 video players are customized to be identical so all users will have the same experience. Check out their HTML5 video embed code example:
<video id="mainVid" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="480" poster="https://assets.hongkiat.com/uploads/code-fallback-methods/default_preview_img.png"
data-setup="{}">
<source src="my_video.mp4" type="video/mp4">
<source src="my_video.webm" type="video/webm">
</video>
Following a similar route the html5media project offers a method for consolidating all streaming media into one filetype. Unfortunately even VideoJS isn’t perfect with every single browser. What the html5media project has tried to do is work around browser incompatibilities to support any video file type amongst all platforms. And it actually works quite well!
Conclusion
I hope this guide of useful fallback methods will come in handy for web developers around the world. It can be tough building websites to adapt to a wide range of software specifications. This is especially true when you’re working with many different languages such as CSS and JavaScript.
But trends are indicating that we’re approaching a more supportive era in web design. Never before have more browsers and web standards been agreed upon, especially within CSS3 & HTML5. These techniques are just some of the many to consider when building standards-compliant web pages. As a web developer, you’ll constantly want to be following the latest design trends and adapting to best suit your audience.