Emulating HTML5 features on legacy browsers using Javascript - javascript

Is there something like a HTML5 enabling script, that simulates the function of new HTML5 elements for older browsers?
I know there is html5shim, but that only makes the elements style-able.
I was more looking for a solution, that makes new HTML5 elements behave like they should.
Here are some examples:
A script that simulates the placeholder attribute
A script that simulates form validation
A script that simulates the details-element
A script that simulates the datalist-element
Is there a solution, that provides all of them as one? And all the other new HTML5-Elements as well?

HTML5 polyfills
has a large list of all polyfills.
There is no large project that "emulates" all of HTML5. Mind you Modernizr is probably the most complete project to that end.
My personal recommendation is find and use polyfills as and when you need them. Loading less features is always better.

Related

How to check if browser supports pseudo-elements in javascript?

I'm developing a website that should run in ancient browsers (IE 7/8/9, Safari 5.1.7). Our target customer is the old people.
I'm no expert in javascript and I searched for solution. My title question is very straight-forward.
I used input radio and others that has custom design using before and after.
If it's checked. I just toggle in after and before display property in css.
The problem is when the user is using ancient browser, the input radio will never appear. My idea is toggle display in input radio if the browser doesn't support pseudo-elements.
For CSS feature detection there really is no need to reinvent the wheel, tools like Modernizr do this perfectly and have a very small footprint, since you can select only the feature detects that you need.
Seeing as you want to support IE <8, I would strongly advise you to use it, since you're probably going to run into a lot of situations where CSS/JS features are unavailable.
Detect if they have a sufficient browser: http://caniuse.com/#feat=css-gencontent
Basically, IE8 (maybe 9 depending on what you need) and older don't work, everything else does.
You may find the library Modernizr useful in this instance. It allows you to test for browser features.
Optionally if you want to shim it so you know that the browser will support it you can use Selectivizr

Understanding Modernizr benefits over html5shiv

I know there's a lot of good questions on the site about these two script libraries.
I wanted to ask something that I can't seem to find in any of them though.
What does Modernizr provide that html5shiv doesn't out of the box, that is, just including the script.
I know html5shiv "just" fixes HTML5 elements for IE < 9, does it's support stop there?
Does Modernizr fix CSS3 issues on IE navigators? Does ie9.js do that? (and I mean this particular question out of the box, without additional js code to handle corner-cases)
What are the advantages of Modernizr over html5shiv when you take into account using the library besides just including the script?
They do different things.
Modernizr detects the availability of features in a page allowing you to provide your own polyfills for older browsers should you require that functionality. You can add support for <canvas> using a canvas tag polyfill so that canvas functionality, including it's JavaScript interface, in browsers that don't support the <canvas> tag.
Html5shiv adds the new html5 tags that aren't available (<section>, <header>, etc) to older browsers. It also creates the default styles (display: block for <section> for example).
That's it. It provides no other functionality.
Modernizr 1.5+ actually includes HTML5Shiv, so if you use it, shiv is redundant. Source: http://modernizr.com/docs/#html5inie
"As of Modernizr 1.5, this script is identical to what is used in the popular html5shim/html5shiv library."

Make Internet Explorer recognize "advanced" CSS selectors

Do any JavaScript libraries exist that somehow make Internet Explorer (no particular version) recognize advanced CSS selectors, such as input[type="text"]?
I hate adding extra classes to HTML objects just to accommodate IE.
I can't believe this wasn't suggested:
http://selectivizr.com/
selectivizr is a JavaScript utility
that emulates CSS3 pseudo-classes and
attribute selectors in Internet
Explorer 6-8. Simply include the
script in your pages and selectivizr
will do the rest.
Selectivizr works automatically so you
don't need any JavaScript knowledge to
use it — you won't even have to modify
your style sheets. Just start writing
CSS3 selectors and they will work in
IE.
You also need to include a standard JavaScript library of your choice, which you're likely already doing.
IE7.js (and IE8.js and IE9.js): http://code.google.com/p/ie7-js/ do their best to bring prior versions of IE up to support for what the script names (e.g. IE8.js tries to make IE6/7 act like IE8). This includes, among other things, many attributes of CSS2/3, though you'll have to check to see exactly what is supported in which version.
if you just want to use the selectors in JS, http://sizzlejs.com/ supports all CSS2/3 selectors and is used as the base for many JS libraries.
so you want a javascript that changes the browsers css support?
i'm pretty sure that's impossible.
your best bet is going to be putting whatever styles you want into a class, and in your document ready, do an .addClass

Including SVG in HTML5 for iOS

I'd like to include an SVG image in an HTML5 web page, to interact with this SVG via JavaScript, and to apply CSS styling. If possible, I'd prefer to keep the SVG in a separate file. I'm hoping to be able to use the web page offline so hopefully whatever solution is recommended will be compatible with this.
Please could someone suggest the best / most cross-browser compatible way of doing this? If there's not really a method that will work across all browsers, I'd be happy to settle for a way that works with iOS 4.3's Safari browser :-)
Thanks in advance!
Thanks to everyone and apologies for not giving an update sooner - Unfortunately, I got distracted by another project!
After some time playing with various alternative options, ( http://tavmjong.free.fr/SVG/SVG_IN_HTML/svg_in_html.html / http://www.schepers.cc/svg/blendups/embedding.html ) I've still not been able to use an external .svg file and keep the JS in the main HTML5 file - i.e. I've been unable to get these approaches to allow the SVG file to reference JS functions, or to allow the HTML file to gain access to elements from the included SVG file. Even inline SVG doesn't yet work on iOS :(
So, I'm going to try my luck with Raphael (http://raphaeljs.com). I think this may mean that I'll need to create the SVG programatically rather than being able to just link to an external .svg file. I'll just have to write a script to translate the SVG content to JS Raphael function calls and hope to avoid any other other stumbling blocks.
It depends the browsers you are targeting. Modern browsers (IE9, Chrome, Firefox4...) support inline SVG. Older browsers may require some alternatives.
Here there is an online test to check browser support by using several methods to include the SVG.
http://tavmjong.free.fr/SVG/SVG_IN_HTML/svg_in_html.html
But I think that if you are using HTML5, then you are targeting modern browsers so you should use inline svg with the <svg> tag.
Take a look at this page: http://www.schepers.cc/svg/blendups/embedding.html
It shows five different ways of embedding an external SVG file into HTML (note that these aren't the only ways, but they are the simplest). It's also a quick way to check the capabilities of a particular browser.

How can I target jQuery mobile capable phones?

I've made a web-app using the jQuery Mobile framework for which I would like to provide a fall-back, for lower-spec phones.
My question is... what is the best way to target JQM-capablephones? I saw a similar question posted on the jquery forum. One of the answers suggested http://detectmobilebrowser.com/ which provides a long list of handsets.
Is this the best way, or should I be testing for browser-capabilities rather than actually targeting handsets. If it is the latter what feaures are considered to be 'Grade-A' featues?
Cheers
Progressive enhancement is what you should aim for, jQuery allows you to have a single codebase and have it work across the range of devices.
Consider this:
All links to other pages are regular html links, links will still work without AJAX support because they'd just send you to the location of the required page
All major framework elements are built around lists, links, and a few divs. No HTML5 required for rendering content
At the bare minimum, all phones can display a good amount of styling, allowing you to display the content no matter how capable
Do you have custom interfaces which wouldn't work at all without full support for jQuery mobile?
I agree that graceful degradation is the best solution. I would add that using the noscript tags is also a good way to provide graceful degradation by adding adding functionality via HTML for phones that have no support for JS.
I think it will be difficult to find a browser-capability (or even a set) that defines whether the phone will work with JQM. In my own experience I have used WURFL, an open source device detection library, that provides capability information. However I used it to target specific devices to include device specific CSS and remove all JS for other devices that I know do not support it (to remove the overhead of the JS being downloaded).
WURFL: http://wurfl.sourceforge.net/
JQM advertises that it provides graceful degradation:
Graceful Degradation: jQuery Mobile uses the very best HTML 5 and CSS 3 features to provide the best possible experience in the most-capable browsers. However we don’t consider this to be an all-or-nothing proposition: Less capable browsers will still receive the best possible experience that their platform can handle. They may not have all the gradients or fancy transitions of the best platforms but they’ll still be highly usable. The most basic browsers will easily degrade back to simplified HTML and CSS.
I have also tested multiple JQM pages in a single mobile page which work great (very speedy) in JQM but suffer from the same problem mentioned (all pages show up when javascript is turned off in the browser of a smart phone). To work around this issue, only use a single page per JQM page (you give up speed and uniform page transitioning though). In regards to the NOSCRIPT tag option, that tag is NOT universally recognized in all browsers. To work around that issue, you could try something like the following:
<div id="no-js">
<!-- Place HTML without javascript here -->
</div>
<div id="js">
<script language="javascript">
// place javascript here which would be ignored by browsers not support javascript or with
// javascript turned off
document.getElementById("no-js").style.display = "none"; // be sure to hide the non javascript
// div
</script>
</div>
The above logic would work in either NOSCRIPT tag type browsers as well as those that do not recognize NOSCRIPT.
dlausch

Categories

Resources