Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
This may not be a question related to programming but I am still asking this since I am banging my head a lot on this issue.
I am finding a lot of HTML5 & CSS3 features useful for my website designing. But as usual (like all developers) I am confused whether to use it or not since older browsers dont support it. (Like css transitions, 3D tranforms, and so on)
I know that I can add fallbacks with Modernizr
(or)
Can give alternate stylesheets (If lt IE9.)
(or)
Can avoid using css3 and html5
(or)
Use plain javascript/jquery to do all the effects
(or)
Use html5shiv or similar for adding specific html5 command support.
What my problem is...
I am so fed up of adding so many fallbacks as a developer to every transition/every element which is not supported. So, I thought of few things but not able to choose what to do..
1) Should I totally avoid users still having old browsers and just support latest browsers?
2) Since I am anyway going to make a mobile site with JQuery Mobile separately, should I use the mobile site as a fallback for people with old browsers?
3) Should I continue adding fallbacks and alternate stylesheets?
4) Or, is there any better option?
I am banging my head so badly due to these incompatibility issues. Please give me a suggestion which is developer as well as user friendly. Thank you.
Sùmmary: it depends on your audience. There's no definitive answer to your concerns.
If your target is people who tend to own latest technologies, you can support browsers from 2 years onwards. In the other hand, if your target is people who love staying in old operating systems or you're talking about a large corporation/government, maybe you'll need to provide fallbacks or just skip using edge technologies in order to ensure a proper user experience across all target user devices and browsers.
OP said in some comment:
But I am not sure whether I have to completely scrap support to people
with old browsers and alternatively offer them with a mobile based
website for pc
If your target has latest tech, why you want to provide a mobile site for PC? You need to decide: if you think that you shouldn't support too old browsers and systems, you shouldn't try to maintain 2 sites when a great percentage of visitors will go to the "edge version". Otherwise, make your main site compatible with older browsers.
BTW, as I said before, there's no definitive answer to your concerns, because it's all about taking a decision and the time will tell you if it was right. Use analytics, check what are the most used Web browsers in your site and provide fallbacks when you detect that there's a high percentage of visitors using old browsers...
According to me,you should restrict clients using old browsers and mention in a disclaimer that your webapp will require versions of browsers with uniform support for all HTML5 and css3 features.You can check support for these elements using http://caniuse.com/. This will avoid alot of inconvenience for you as a developer and unnecessary stacking to styles and jsfiles to your webapp making it sluggish.Even i faced the similar problem and i know how irritating it is to handle cross-browser issues.Cheers :)
Related
What is the best way to detect browser compatibility for HTML 5 syntax? And prompt the user if the browser is not compatible?
I understand the tutorial which shows how to test browser compatibility for HTML5. But I am curious to know if that is the only way? Do I need to inspect each and every element?
Have a look at Modernizr:
Taking advantage of the new capabilities of HTML5 and CSS3 can mean
sacrificing control over the experience in older browsers. Modernizr 2
is your starting point for making the best websites and applications
that work exactly right no matter what browser or device your visitors
use.
Thanks to the new Media Query tests and built-in YepNope.js
micro-library as Modernizr.load(), you can now combine feature
detection with media queries and conditional resource loading. That
gives you the power and flexibility to optimize for every
circumstance.
It has a lot of built in methods to test for browser features and provides a useful way of providing fallback code for when features you want to use are not supported.
More info: http://www.modernizr.com/
"HTML5 compatibility" is a very vague thing.
When people ask about HTML5 compatibility, they generally mean "what browsers support these new-ish browser features X, Y and Z which I want to use?"
There are a whole raft of features which have been added to browsers in the last couple of years, and which are now commonly referred to as "HTML5".
In fact, there aren't any browsers which support every new feature out there.
What you need to do is work out which features have wide enough support to make them worth using, which features you'd like to use but are happy to work around if you encounter a browser that doesn't support them, and which features you absolutely have to use to achieve what you want to do.
A fairly comprehensive list of new browser features, along with browser support charts for them all is available at http://caniuse.com/ (if you scroll to the bottom, you'll see in the overall compatibility table that the very best current browsers only support 89% of features they've tested. This will improve over time as new versions are released... but of course, also new features will be introduced too)
For determining at run-time whether the user's browser supports a given feature, you can use Modernizr. This is a Javascript-based tool which will give you a set of CSS classes and Javascript flags which tell you what features are supported. You can use this to trigger alternate behaviour in your site if the browser doesn't support a feature you want. (Modernizr also includes the HTML5Shim functionality, which allows IE to at least cope with HTML pages containing new HTML5 elements).
For more cross-browser compatibility, there are a whole range of hacks which have been written to allow older browsers (mainly IE to be fair) to support a range of newer features. You can see a fairly comprehensive list of them here: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
Obviously, trying to run more than a few of these at once in IE will severely impare your site's performance, but it can be handy if you need to support one or two features. My favourite at the moment is CSS3Pie, which gives IE6/7/8 support for CSS rounded corners, shadows and gradients.
Hope that helps.
Here is a tutorial of detecting HTML5 compatibility & capabilities :
http://diveintohtml5.ep.io/detect.html
There are alternative HTML5 detectors using similar techniques, but I would suggest to use Modernizr.
To sum up the "score" of HTML5, you can design your own "marking scheme". Sum up weighted score gives you the total score.
The simplest method : in JS you create a new element, and set the attributes to be a colorpicker (HTML5) in JS, and return the type of the element (it is a picker only if the browser ic HTML5 compatible) :
var element = document.createElement("input");
element.setAttribute("type", "color");
return element.type !== "text";
do I need to inspect each and every element?
Nope. Only the parts you want to use that aren’t backwards-compatible.
See Five Things You Should Know About HTML5, especially points 1 and 4.
I would suggest you can try using <audio>Anything within Audio tag here</audio>.
Any text written inside the between <audio> and </audio> will be displayed in browsers that do not support the <audio> tag.
Since the audio tag is newly added in HTML5.
This works on IE 11 (and hopefully other browsers too).
// Detect HTML v5 compatibility
var isHtml5Compatible = document.createElement('canvas').getContext != undefined;
It's a take from Clement's answer and the link from Shivan (http://diveintohtml5.info/detect.html). Clement's answer didn't work in IE 11.
In my case I use jQuery UI for everything so don't need Modernizr (also it seemed slower). Reading the rather negative "How to use Modernizr" blog comments supports this assumption.
But now jQuery have split browser compatibility between v1 and v2 development streams, its necessary for people wanting to support non-HTML v5 browsers to load EITHER the v1 or v2 jQuery core script at the start. So this "one liner" HTML v5 detection is perfect. Here's how I load jQuery properly using the result:
// Use jQuery v2 for HTML v5 browsers else v1 to support old browsers
var jQueryScriptPath = (isHtml5Compatible)
? "/Scripts/jquery-2.0.3.js"
: "/Scripts/jquery-1.10.2.js";
document.writeln("<script src=\"" + jQueryScriptPath + "\" type=\"text/javascript\"><\/script>");
If you vote this answer up please also vote clement and Shivan's answers too :-)
I'm using turn.js for a page-flip effect, and it doesn't seem to work very well on IE7/IE8 (load up the website in IE7 mode and you can see for yourself).
What's the best way to support old browsers, while keeping the cool page-flip on modern browsers? (Note: I don't need the hot corners at all on IE, as I also have dedicated arrow links which flip the page via Javascript, similar to the turn.js demo.)
Do you have a sample of how you're applying turn.js? As in, do you have a link or how is your page structured? These are a good place to start.
More the the point of gracefully failing when you detect an older browser: There are multiple options, some make more sense than others depending on how much of the site is already done. First off, how does the site look with Javascript disabled completely? I know this isn't the case for IE7/8, but start there. Can it be used with no JS whatsoever? If the answer is "no," think of ways to make that answer "yes" if you can. This is always a good question when thinking about how to handle older browsers.
If you're early in the site's programming, or the content is laid out in a clear way, then you can work around the limitations of older browsers. A practice I try to follow is designing the site without JS or with as little as absolutely possible, and then program in functionality for "whizzing and banging" afterwards.
In your case, I would suggest something along the lines of: if you detect IE7/8 (or mobile browsers that may not be up to snuff, etc) then load in a secondary stylesheet with rules that give your content as much of the feel of the "original" as you can. Next, have the JS for the older browsers show/hide the pages of content instead of page-flipping them - this can be achieved with some divs on the left and right that move the page and then track the current page vs possible pages (are there any before this page? after this page?) in order to show/hide the navigation divs. turn.js just looks like fancy animations for the same thing, so you should be able to say "Hey, this browser is IE 7 or IE 8 - so, let's not initialize turn.js and just turn control over to the page previous and page next divs."
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I am creating a website from scratch which would work for both desktop and iPad. There are going to be some UI components like sliding panels like you can see on
http://www.moneycontrol.com/tablet/
Plus some other things like Accordion, Drag drop things, etc
I need to have the same html file to be called for all devices (can only have separation at css or js)
Now we can implement these in multiple ways. In some cases, it is possible to have the same component work in both desktop and iPad without modification (e.g. Through jquery ui)
But guess there are some downsides like performance issue. Not sure if this is the only thing. Please suggest if you know of any other thing, may be from development side as well.
Another approach is to have different ui component to work on desktop vs iPad. E.g. For the site http://www.moneycontrol.com/tablet/, it uses DMZone sliding panels which would only work on iPad and not on common desktop browsers..so in this case, we would use another component which would work for desktop. Is this a good approach?
Thus My question is like which approach should i go for, both from a user perspective, future development efforts for some other mobile device ?
I need some strong points which would really justify the right approach.
Please suggest as much as you can. I am quite open to all ideas..
What you are looking for is a mobile app framework that supports desktop clients. There are tons of those available both free and commercial.
One of those which is quite popular is http://www.appcelerator.com/
Although i haven't used it and i can't tell you if you will hit a dead end on the road (with the sliders for instance), this is the best approach that you can do.
And, you are more than covered for future mobile devices.
You can do your own research of other frameworks, but appcelerator seems fine.
EDIT:
Seems like there is controversy whether its best to create native app vs browser based app on mobile devices. There are some interesting posts:
http://www.readwriteweb.com/archives/mobile_app_or_browser-based_site.php
http://blog.caplin.com/2011/02/11/sdps-native-or-browser-based-mobile-apps/
The only sane way to export your app to multiple devices is to use a framework. The other way is to make hundreds of conditionals depending on the device that is visiting your site...
If you want pure HTML interaction in the mobile device, then you can use jQuery Mobile. But you will have to make some sort of hacking to render the page correctly on desktops.
Sencha touch is the best web based touch UI toolkit out there, in my opinion, it's also free. http://dev.sencha.com/deploy/touch/examples/kitchensink/
Click on the 'User Interface' link to see examples.
Apps written in Sencha touch work on iOS, Android and Blackberry. One code base for all your mobile OSs. You can also run them directly in safari/chrome.
Here's their API http://dev.sencha.com/deploy/touch/docs/
i have built a beautiful website that works very fast in all of the latest browsers but many of the users are forced to use ie6. If i can't get around this problem. Is there anything to do to optimize some of the inefficiencies of ie6 when building my site to lessen the pain.? its an asp.net mvc site with heavy use of jquery.
You don't mention any specific issues with the site, but you can pass scripts, styles, even content just to IE6 by using conditional comments.
<!--[if IE 6]>
IE6 only stuff goes here
<![endif]-->
Apart from that, learn the many, many quirks of IE6 and the fixes for these problems. There is certainly plenty of resources on this out there, we've had to deal with it for quite some time!
If you need help with something specific, perhaps edit your question with further details.
Retroactively, i don't know if there's an exact answer other than troubleshooting the problems one at a time. The correct way would be to code proactively for all browsers until IE6 is finally put to rest as it should be :)
jQuery works pretty well with IE6, so you should be ok on that front. You will most likely run into some CSS quirks, but once you learn what to avoid it's really not bad coding for IE6. The main thing I keep running into is when you float something, you always need to put a display type of relative or absolute on it otherwise it will just disappear from the screen in many cases.
First of all, it should be considered in the beginning of a project whether IE6 needs to be supported or not. Designing for it requires a bit different approach - some things just tend to break down. My advice is you should probably make the experience on IE6 only "sufficient" and just make sure the site can be used as intended. Making it look flashy is just not going to work with any reasonable amount of effort.
Is Chrome frame an option? It could be positioned as a something similar to java which less people have a problem with.
http://code.google.com/chrome/chromeframe/
I am looking at the custom attributes feature of html 5 here at this link
http://ejohn.org/blog/html-5-data-attributes/
This look like the perfect thing for when I am using jquery/javascript.
My question, Is HTML 5 supported by all the main browsers?
example
<li class="user" data-name="John Resig" data-city="Boston"
data-lang="js" data-food="Bacon">
<b>John says:</b> <span>Hello, how are you?</span>
</li>
Various portions of HTML5 are supported by the different browsers, for various definitions of 'supported'.
Several parts work right now, reliably. The data-* attributes you ask about in your question work just fine in every browser, even IE6; however, nobody yet supports the fun "dataset" method to access them. As long as you're fine with just grabbing them by the full attr name, you're golden. I use them to store state all the time in my webapps, as they're the officially blessed method for doing so.
Wikipedia has a good summary of the various support levels across browsers: http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML_5)
Parts of HTML 5 are supported by Safari, Firefox and Opera, but they are not necessarily incorporating the same parts.
It seems that Firefox is the most ahead, from my experience, but it will be years before the majority of browsers users use will support it.
So, until then we will need to continue trying to use it when we can, in browsers that support the new features, and having workarounds for users that haven't updated yet, or continue to use IE.
Use some services like
http://caniuse.com/
For example for your question - http://caniuse.com/dataset
As you can see all modern browsers support it
Also you can use something like http://modernizr.com/ in your code (it's already included in http://html5boilerplate.com/)
PS: just notified that this question is too old, but it was linked to some other question i checked before
No.
The Wikipedia page "Comparison of layout engines (HTML 5)" does a good job of listing which engines have implemented which parts of HTML5.
There is currently a lot of red boxes on those tables, and that is based on the latest development version, not the version most users will be using.
Full support of HTML 5 is a way off BUT...
Creating custom attributes is nothing new and is likely to work in all the main browsers - but test to be sure that it will work in your case.
We can use HTML 5 now, just not all of it. A lot of HTML 5 is about formalising the way that HTML is currently used and ensuring backwards compatibility - so if a feature works in browsers now, use it.
Almost no web technology is completely supported by any browser; no bugs, quirks or issues.
HTML5 is designed for backwards compatibility, and it will hardly break your site (take <input type=url> for instance - non-supporting browsers show an ordinary text box, Opera lets you select an URL from history/bookmarks). I'd go by the approach: develop, try in the browsers you need to support - if it works, awesome. If not, don't use it. Just like with other specs.
HTML5 isn't even close to being completely supported on any browser yet, and some browsers (notably the IE's) have no intention of supporting it at this time.
no, not yet. wait at least until gecko and webkit support it.
ps: you could use html 5 with data attributes anyway, if you need it for javascript purposes. or choose some other unused attributes (title, abbr, ...others?)
As of August 25, HTML 5 is still a working draft.
http://dev.w3.org/html5/spec/Overview.html