I know there are many workarounds to achieve html5 compatibility/support in different browsers including old versions of IE. I'm not a web designer. I'm starter at the area and despite domain model development first I want to build a good layout. Moreover I want to start with enabling a support for older browsers. But there are different ways to make and I can't decide which to choose and which's going to be better:
Use HTML5Shiv javascript or
Use Boilerplate template or
List Modernizer...
You can Start with initializr .it's an HTML5 templates generator http://www.initializr.com/
All of the methods you list after the HTML5 shim use the same technique. If all you want is support in older browsers (and you're ok with requiring Javascript) then the shim is the way to go.
There is a really big choice out there. My personal favorite is Foundation framework by Zerb which includes boilerplate.
A good idea could be to focus on 'less' if u are really planning to build your own toolkit. A good starting point for less could be http://framelessgrid.com/
Related
Features of HTML5 are no doubt very compelling but is it a good time to start development in HTML5 ?
I just have started development in HTML5 and realized at the time even not all HTML5 input types are supported by all browsers. It means it is not sure about basic stuff like input forms.
Please share how you are managing these things ? (Using HTML5 code with browsers currently supporting HTML5)
HTML 5 is still under development so you've got to be careful. Certain features, such as the more basic ones like <header> and <footer>, are less likely to change before the final release. The doctype decleration is unlikely to change. I wouldn't rely on the multimedia support as supported formats vary widely accross browsers.
The momentum behind HTML5 is strong and it is indeed a good time to get started if you have not already.
At the lowest level, you would need to write feature detection in your pages to see if the particular browser supports the HTML5 feature that you want to use.
I suggest the following:
Use sites like caniuse.com to determine the current support for a particular feature across browsers.
Use templates like HTML5 Boilerplate, which give you a structure for the HTML5 page that you can use , with support for various shims that bring in support for HTML5 features in older browsers.
If you prefer doing the detection yourself, use a library like Modernizr.
As with all cross-browser development, you can never rely on any support in the browser. If you target older browsers, then do not rely on HTML5 features. I haven't had problems with using the HTML5 doctype in older browsers, but specific features can be troublesome — e.g. you can use <header> elements, but IE won't let you style them in any way as it disregards header styles as invalid.
As long as you need to support old enough browsers, it will never be a good time to start using HTML5. The only thing that decides whether it's okay to use HTML5 is which browsers you want to support.
HTML5 is much easier then previous ones, It has developed allot in input fields, though its still under development and not complete yet.
You can check here http://html5test.com/ which browser supports HTML5 how much?
Currently, Chrome is the best that supports the HTML5 more than any other web browser.
-Thanks.
Take a look at the table in this wikipedia article. There is a lot of variability amongst browsers as to which parts of HTML5 are currently supported. This website tests your web browser to see which features it supports, so install a bunch of different browsers on your computer and test them for yourself.
We are small web app development company. We are planning to upgrade to HTML5/CSS3 and we are going through training phase(We are using video tutorials). While HTML5/CSS3 seems promising, there seem to be so many issues with cross-browser compatibility as well as many new APIs. Is there any template we can use right away while waiting for full recommendation from W3C? Currently, are there libraries/tools we can use to ensure cross-browser support?
Help much appreciated. :)
HTML5... Where to Start?
Right now your best bet is to follow what the browsers can do. Therefore, follow the different vendors' browser development blogs on the subject.
By the way, HTML5 is mostly a set of unrelated features going from markup to new functionalities such as WebGL and client storage (WebSQL). HTML5 builds upon previous specs HTML standards and clarifies many features. On the other end, CSS is the culmination of CSS1+CSS2+CSS3.
Go on the web, all the information is there!
Resources
A brief history of markup (information)
HTML5 Rocks (information + tutorials)
Dive Into HTML5 (information)
CSS3 (information + tutorials)
Quirksmode (browser compatibility)
WebGL experiments (experiments, you can view the source to learn)
HTML5 demos (demos)
Mozilla's development blog
Webkit
Librairies & Templates
HTML5 Boilerplate
HTML5 shiv (enables HTML5 for IE)
Modernizr
jQuery
Normalize.css
Tools
Aptana Studio (Linux/Mac OS/Windows)
Espresso (Mac OS X)
WebStorm (Linux/Mac OS/Windows)
Related StackOverflow Question & Answers
How important is it to follow the web standards?
Which HTML version should be chosen for a public website?
I will try to keep adding resources...
It will be a while before html & css3 will be supported but in the mean time if you would like to get a head start check out themeforest they have plenty html5 and php templates that you can start hacking away in. Another great tool is to check out this noupe post where they list some free html5/css3 tutorials.
Let's split the cross-browser compability into two parts: new HTML5 elements / attributes and HTML5 APIs.
Elements: Browsers that don't support the new HTML5 elements (like <section>), e.g. older versions of IE, will just print the content and ignore the styling. You can use a little JavaScript hack to make the elements stylable in IE: HTML5shim.
Attributes: Using the new HTML5 attributes is completly fine as well. Browsers that don't understand them will just ignore them. With Modernizr you can check if the HTML5 / CSS3 feature is available and if not just provide a fallback with JavaScript.
To provide support for the new HTML5 APIs you can use polyfills to add support for missing features. Here's a good list:
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
By the way: It's a good idea to use some HTML5 APIs like localStorage as a progressive enhacment. If it's just a little feature that's for enhacing the user experience, it's fine to do it with HTML5 and let older browsers just have the normal version.
jQuery is the most popular cross-browser library. It will use HTML5 features on browsers that support it and rolls back gracefully to something else when needed. It's updated frequently and is very feature rich.
quirksmode http://www.quirksmode.org/compatibility.html is a list of all HTML/CSS/DOM features and which browsers support them and to what degree.
w3schools http://www.w3schools.com/ is an excellent resource for seeing how specific HTML/CSS/DOM features works with code samples.
jsfiddle http://jsfiddle.net/ is an online javascript/HTML/CSS editor. It's a great way to test ideas before putting them in code. It's also a great way to share code samples with others.
jsPerf http://jsperf.com/ is an online code speed checker. If you're not sure of the best way to do something in javascript, you can run samples here. The results are also shareable.
You don't "upgrade" to HTML5 and CSS3. HTML5 is HTML, period. Since it takes years and years for such standards to become finalized, you transition to using the new elements and properties. It's never a wholesale change where one day you are using all new tools with little regard for the older ones.
Libraries and templates are helpers but aren't necessities. Pickup elements and properties as you need them. Do not start using the new stuff just because it's there.
Paul Irish and friends just launched Move The Web Forward:
You love web standards. You want to give back to the community. Curious about where to start? We're here to help.
...
Learn
One of the most beautiful things about the web is that it's constantly changing. While these changes and improvements can be overwhelming, we're here to help you get caught up! Here are some great resources to walk you through how browsers work, and help keep you up to date on their improvements.
...
Is there any single framework with which I can build a css3, html5 website that is compatible for all browsers including IE7 and later? Can http://html5boilerplate.com/ boilerplate help me in this?
You will never get the IE7 or IE8 rendering engine to achieve full compatibility with HTML5, CSS3, and other modern technologies. They are simply not capable of it.
However there are some hacks, tools and plugins which can get you part of the way.
Tools like Modernizr will help you by allowing you to detect which features are supported, to give your site a chance to work around it.
jQuery is a great library anyway, but is particularly good in this context because it abstracts a lot of browser differences away from the developer. Some things are easy in most browsers but a real pain in IE; jQuery takes a lot of that kind of stuff and makes it easy regardless.
Dean Edwards' IE7.js and Selectivzr are both Javascript libraries that give IE support for lots of the CSS selectors which were missing in older versions. This allows you to write your stylesheets without worrying so much about what IE supports. (IE7.js also fixes a number of IE's other glitches and missing features too)
CSS3Pie is a hack for IE that adds support for CSS border-radius, gradients and box-shadow.
There are in fact a whole load of hacks along these lines, all aimed at adding features to older versions of IE which it is missing. Modernizr's website has a big list of them here: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
However there is one big caveat to all of this. Speed. IE<=8 is a slow browser. It has a slow Javascript engine. Virtually all of these hacks are javascript based. You might get away with running a few of them on any given site, but trying to use enough of them to give IE anything like full support for HTML5 and CSS3 will slow the browser down to the point of being unusable.
There is one other angle to approach this question though, and that's Google's Frame plugin for IE. This basically installs the entire Google Chrome browser engine into IE. The user is still running the IE shell, but the web page is rendered as it would be in an up-to-date version of Chrome.
This sounds great, but of course it isn't perfect. The main down-side of it is that the end user has to install it manually onto their computer, which means that you as a web developer have no real control over whether it's there or not. So its not something you can just add to your site and expect everything to magically work.
Finally, you may also be interested in CanIUse.com, which gives browser support tables for various features, allowing you to see at a glance what is and what isn't supported in various versions of each browser.
HTML 5 is more an umbrella term for a variety of technologies than any one thing or framework. Really, any implementation you do should degrade gracefully-- and that is what makes the site browser compatible. Detect what the browser supports, and then have alternatives that are legacy friendly.
Check out: http://accessites.org/site/2007/02/graceful-degradation-progressive-enhancement/
And: http://diveintohtml5.ep.io/detect.html
Good luck.
Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.
MS is including it in the ASP.net MVC template projects
html5boilerplate won't help you.
As others have said html5 and css3 are very broad terms, there's no framework that implements all of the features provided by both of these. In fact they are not equally supported in browsers that say that they support them. And more, even W3C guys (who write the specs for html5 and css3) are not yet established on what features they will include or what steps will be required to implement them. You get the idea...
But.. if you narrow your requirements to some specific features, like video, audio tags, canvas drawing, nifty css effects, File API, or others, you CAN find frameworks that implement (or try to mimic) them with available technologies in cross-browser manner (more or less).
I'm going to develop a theme for a WordPress blog but I'm not sure if I should do it using XHTML/CSS2 or if I already can do it using HTML5/CSS3.
Usually, I use 960.gs framework but it isn't available with HTML5/CSS3. I've heard that the 52framework works fine as well and I'm thinking about adopt it for my project, but I'm really insecure about HTML5's early adoption (?).
Someone, please, can help me to decide which technology adopt on my project.
Thanks a lot.
HTML5 and CSS3 are "ready to use" - you need to learn a little about the concept of "Polyfilling", but you can make the user experience very similar in all browsers, even if you lose a few transition effects and rounded corners along the way.
My website has been HTML5 since 2009 and I tested it across many, many browsers.
So the bottom line is, HTML5 is designed to be highly backwards compatible with HTML4.01 and there are lots of techniques for making content available to older browsers that don't support the more funky elements in HTML5.
The 960 grid system will work with HTML5 and CSS3 because it's just a list of classes. CSS3 doesn't really give you any grid layout features yet that are widely adopted enough to be helpful.
I would use CSS3 and HTML5 as much as you can but don't forget about progressive enhancement. Don't blindly ignore a browser because it doesn't support CSS3. You should use HTML5 and CSS3 appropriately and not because it's cool.
What audience are you designing it for? Do you need to be bleeding edge?
I would say use XHTML/CSS2 as that will be supported for years unless you need the functionality in the others.
Being an early adopter can be quite painful, so only do that if you have good reasons to.
Html5 and css3 for sure!
The only thing you might want to ask yourself is wether or not you want to use the new elements (article, aside, nav etc.) Because if you do, you need to depend on Javascript in order for IE to render your page correctly.
Every new page should be written with the new doctype imo:
<!DOCTYPE html>
If you want a starting template that works well in all major browsers you might want to check this out: http://html5boilerplate.com/
Whole-heartedly agree with Bravax.
It's all really based on who your audience is. If you want your site to be on the bleeding edge, regardless of audience, go for it.
I have heard great things about 52framework! I am about to implement it into a full-on 100+ page site redesign. The good thing about it, is that it plays nice with IE (even 6!).
It is entirely related to the markets you are aiming at. You will be able to have more interactive content and easier to maintain styles with CSS3. This said, many of the html5 and css3 elements are not yet standardized. Even among the modern, cutting-edge, browsers there can be major differences.
If you are making a theme for experimental purposes or to play around with, I would go with the newer technologies.
If you are making this for consumption on a wide sale, and potential sale, you really should avoid technologies not supported by older browers, IE 7 and 8 especially.
I keep hearing about html5 and seen on other questions/answers on this site that the current browsers do not yet support it...what I know:
it has potential to replace flash and silverlight
Google seems to be building new systems to take advantage of it
(is that correct?)
What I don't know (which is a lot, but will limit it to some points of interest):
how will existing sites work within a html5 browser (backward compatible?)
is Flash/Silerlight really gone? will they be supported? (I'm sure adobe will not be happy)
is javascript impacted? improved? will jquery still work?
is there a good site listing (high level down) what the html code impacts are?
W3C has a working draft of the differences between HTML 4 and 5.
Google seems to be building new
systems to take advantage of it (is
that correct?)
Correct
Google Bets Big on HTML 5: News from Google I/O
HTML5 and The Future of the Web
HTML 5 is a mess. Now what?
http://html5doctor.com/ is probably a good place to answer a lot of that.
Stop thinking about it as a new version. Think of it as just another step, building on what we have and introducing some new elements that let us do new stuff.
Read up on the new elements and what browser support they have, then start using them where they help you (remembering to use the right doctype).
To answer just one question:
"is Flash/Silerlight really gone? will
they be supported? (I'm sure adobe
will not be happy)"
Yes, they will be supported, since HTML5 still has the OBJECT tag and this is what is used to embed external content (such as Flash etc).
For starters, it can work in older browsers. I've got it working in most major browsers in a reasonable span of versions: http://www.stevefenton.co.uk/
Flash and Silverlight will still be a part of the internet, but what they want to do is make it possible to have video content (for example) that doesn't need a plug-in to play it back. The idea is to pick a format that all browsers will support (this is more difficult than it sounds as the codecs might require licensing, or if they don't - might not be that good).
ALL browsers that support HTML5 will also display HTML4.01 and XHTML websites.
JavaScript and jQuery WILL continue to work.
Check out the http://www.w3.org/ website for the full specifications (in draft).
how will existing sites work within a html5 browser (backward compatible?)
Just fine. HTML5 is, as far as possible, backwards-compatible. Of course, some new HTML5 tags/APIs don’t work in older browsers (although many, like the new form field types, degrade gracefully), but much of HTML5 merely specifies, and builds on, how existing browsers parse HTML.
is Flash/Silverlight really gone? will they be supported? (I'm sure adobe will not be happy)
Adobe and Microsoft haven’t cancelled work on Flash and Silverlight, and no browser-makers (not even Apple) have said they’re removing their plugin APIs. So no, Flash and Silverlight are not gone.
is javascript impacted? improved?
The HTML5 spec both defines the DOM interface for HTML (which previous HTML specs didn’t do), and adds new browser JavaScript APIs (e.g. for data- attributes and geolocation). JavaScript the language isn’t affected though, as it’s specified in the ECMAScript Language Specification
will jquery still work?
Yes.
is there a good site listing (high level down) what the html code impacts are?
You don’t have to change any HTML code for it to continue to work.
As mentioned in other answers, the W3C has a decent document of the changes from HTML4:
http://www.w3.org/TR/html5-diff/
And Dive into HTML5 is a great intro if you’re familiar with HTML 4, especially it’s introductory “5 things you should know” chapter:
http://fortuito.us/diveintohtml5/
http://fortuito.us/diveintohtml5/introduction.html