Dev Depot: HTML5 Shiv, Backwards Compatibility

Of all the current coding technologies holding the most promise for the future, HTML5 leads the way — but despite its potential, many developers shy away from upgrading their infrastructure to HTML5 — often using the excuse of incompatibility with older browsers to cover for an unwillingness to adapt or to learn new techniques.

This reluctance does have a legitimate foundation, however, as new elements are not recognized by older web browsers, cannot hold child elements, and are not affected by CSS styles, hindering HTML5’s adoption by many coders.

HTML5 Shiv enables the use of HTML5 sectioning elements in legacy Internet Explorer variants and provides basic HTML5 styling for Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x.

Programmer Sjoerd Visscher stumbled upon a workaround, and later posted the tip in a comment on W3C HTML WG co-chair Sam Ruby’s blog, stating, “BTW, if you want CSS rules to apply to unknown elements in IE, you just have to do document.createElement(elementName). This somehow lets the CSS engine know that elements with that name exist.”

The response from the stunned coding community was swift, as the implications became clear.

“I want to jam standards support into (this and future versions of) Internet Explorer,” John Resig stated, coining the term “HTML5 Shiv,” and notes, “If a shiv is the only pragmatic tool I can use to do so, shouldn’t I be using it?”

You should be using it too.

Fortunately, several solutions are available for helping cautious coders to explore this new frontier.

For example, the HTML5 Shiv (Code.Google.com/p/html5shiv) lets webmasters make their HTML5-based websites more backwards compatible with older browsing software that does not natively support the latest HTML5 web development standard by inserting a level of support via a JavaScript file.

According to a rep, the HTML5 Shiv enables the use of HTML5 sectioning elements in legacy Internet Explorer variants and provides basic HTML5 styling for Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x.

Using the html5shiv is as easy as downloading a zip file and then inserting a call to the shiv's minified distribution within the web page's <head> element, either before or after the CSS calls. Here is the code:

<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->

“It must be included before the element (i.e. in the <head>) but it doesn’t matter if it appears before or after the CSS,” a rep advises. “But for the sake of performance it would make better sense to include the CSS first then this script.”The html5shiv is dual licensed under the MIT or GPL Version 2 licenses and the full, uncompressed source code is available, adding new HTML5 elements, and supports the printing of HTML5 elements, including default styles for elements such as “display: block” in HTML5’s article and section tags.

The publisher also addresses a common question: what is the difference between the html5shim and the html5shiv? The answer: nothing — one has an “m” and one has a “v” — that is it, so if you see information referring to html5shim, it is the same thing with a different name.

Because only Internet Explorer 9 or less will call the html5shiv code, it does not affect the performance of your site with other browsers, making the addition of this free script a no-brainer.

Related:  

Copyright © 2024 Adnet Media. All Rights Reserved. XBIZ is a trademark of Adnet Media.
Reproduction in whole or in part in any form or medium without express written permission is prohibited.

More Articles

opinion

The Ins and Outs of IP Addresses: What Website Owners Should Know

Think about your home address, the place you live. It is unique. That’s important because when you decide to invite someone over, they will need directions to find you. It’s even more important if you are hoping for a lot of visitors.

Brad Mitchell ·
trends

AI Is Coming: A Look at What's Ahead and Its Implications

The AI era has dawned, and the impact of this technology is beginning to be felt across the adult industry. We are already seeing a plethora of content, synthetic interactions and customizable avatars enabled by artificial intelligence.

Alejandro Freixes ·
opinion

Navigating Fraud Prevention in Credit Card Transactions

In the digital age, credit card transactions are essential to global commerce, providing unmatched convenience for consumers and businesses alike. With this convenience, however, comes the risk of credit card fraud, which can result in considerable financial losses and harm brand reputation.

Jonathan Corona ·
opinion

A Guide to Avoiding Scams in Hard Link Media Buying

‘If it sounds too good to be true, it probably is.” So cautionary wisdom reminds us, yet people still get scammed all the time. Fortunately, there are “red flags” you can watch for to help you identify scams and thereby avoid them.

Juicy Jay ·
opinion

The Dos and Don'ts of AI-Generated Content

AI is a hot topic. From automation to personal assistance to content generation, AI technology is already impacting our daily lives. Many industries, including adult, have had positive results using AI for customer support and marketing.

Cathy Beardsley ·
opinion

Strategic Upscaling of Non-4K Content

If content is king in adult, then technical quality is the throne upon which it sits. Technical quality drives customer acquisition and new sales, while cementing retention and long-term loyalty.

Brad Mitchell ·
profile

'Traffic Captain' Andy Wullmer Braves the High Seas as Spirited Exec

Wullmer networked and hobnobbed, gaining expertise in everything from ecommerce to SEO and traffic, making connections and over time rising through the ranks of several companies to become CEO of the mobile business arm of TrafficPartner.

Alejandro Freixes ·
opinion

To Cloud or Not to Cloud, That Is the Question

Let’s be honest. It just sounds way cooler to say your business is “in the cloud,” right? Buzzwords make everything sound chic and relevant. In fact, someone uninformed might even assume that any hosting that is not in the cloud is inferior. So what’s the truth?

Brad Mitchell ·
opinion

Upcoming Visa Price Changes to Registration, Transaction Fees

Visa is updating its fee structure. Effective April 1, both the card brand’s initial nonrefundable application fee and annual renewal fee will increase from $500 to $950. Visa is also introducing a fee of 10 cents for each settled transaction, and 10 basis points — 0.1% — on the payment volume of certain merchant accounts.

Jonathan Corona ·
opinion

Unpacking the New Digital Services Act

Do you hear the word “regulation” and get nervous? When it comes to the EU’s Digital Services Act (DSA), you shouldn’t worry. If you’re complying with the most up-to-date card brand regulations, you can breathe a sigh of relief.

Cathy Beardsley ·
Show More