If one were to build a new Web Browser, from scratch; Which documents would they need in order to follow Standards?
Would they just use the W3C website to obtain information on how HTML and CSS should be parsed?
I apologize if this is too broad of a question, or if I am not providing enough information, but I'm not quite sure how exactly I should ask this type of question.
Building your own web browser is one thing; building a web browser along with a rendering/layout engine from scratch is another.
Rendering engines are what "execute" the HTML/CSS/Scripting code and change it to render-able content. For instance, Mozilla Firefox uses the Gecko engine, while Chrome and Safari use WebKit. Writing a decent engine isn't simple -- there are many standards to follow. There are open-source engines (like Gecko), so you don't have to write your own. But in any case, there are 2 main standards to follow:
The W3C Standards
The IETF RFC Drafts
Good luck, and I hope that helped you!
Related
I was wondering this while I was learning some front-end web development. But does anyone understand what the point of the menu tag is for html if the tag is not supported in all major browsers? When I was inspecting some web page I saw its use then looked on the w3schools website for more info about it, and it states that there its not supported in any browsers.
In this specific case:
The menu element was introduced in HTML 3.2, did not see wide take up from browser authors, was deprecated in HTML 4 and removed in HTML 5.
It has no place on the modern web.
In more general terms:
Most features of web standards have limited support from browsers when they are first introduced. Often their effects can be replicated in browsers that do not support them using CSS and/or JavaScript.
Sometimes take up of a feature is so poor that it gets removed from the standards again (although modern approaches to writing standards mean they will tend to live in a draft state until it is clear if the support is going to be good enough).
It is up to the page author to decide when there is sufficient client support for a feature for it to be worth using, and how much effort they wish to go to in order to make it work in older browsers.
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).
Is it safe now to develop web application with HTML 5 specifications? or should we wait longer for final standards?
I want to start developing a new project. I want it to be up to date in every aspects. should I wait more for html 5 or I can start programming based on it?
It all depends on your audience.
If most of your audience is going to be fairly hip web developers that know to use a decent browser, you are probably going to be fine using HTML5.
However, if your audience is any government institution (school, etc), business place, etc, you might not want to use it yet. My school currently runs on Internet Explorer 6/7, and one of my teacher constantly complains about that "Your browser is not supported" message at the top of Youtube. These people probably don't have any control over the browser they use, and might be a bit behind due to the IT guys.
Find your audience, and use what you are comfortable using with them.
It depends what you which features you want to implement. HTML 5 is a very broad standard covering video, dynamic bitmaps, geolocation, more semantic tags etc.
No browser has implemented all HTML5 features, all have implemented some
This will tell you most of what you need to know about and which browsers support it.
http://diveintohtml5.ep.io/
Which part were you particularly interested in? Many people want to use canvas which is the dynamic graphics tag (simulates svg in an element). Canvas works on all major browsers except IE, though support for canvas is predicted in IE9
It depends on your audience. If they have the latest browsers then you can start using parts of HTML 5. If you don't have a good understanding of your user base then you might want to use web analytics to understand the capabilities of their browsers. Developers tend to have newer browsers but corporations or schools may not. You should also do some research on HTML 5 and understand if you can get up to speed with it quickly if deployment time is a concern.
Use progressive enhancement. A lot of the HTML5 features (application cache, the custom form fields, the extra semantic tags) will do no harm in unsupported browsers (though you might need the HTML5 shiv from Remy Sharp), but give a bonus to users and spiders who can use them. Other features (video tag, database storage, web workers, geolocation) can use workarounds for compatibility with older browsers - the Modernizer library linked by Mark Pilgrim makes this very easy. If your app is usese Geodata, for example, you could use the browser-based geolocation where available and fallback to something IP-based.
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