How HTML5 And CSS3 Will Change Web Design
- Brian Flores
- July 11, 2011
Although not fully operational, HTML5 in combination with CSS3, will be a significant upgrade from how websites are currently being constructed. The majority of websites today are based on HTML4, which was released in 1999, over 12 years ago. Since its release, there have only be small adjustments made to HTML4, but HTML5 has been in the processing pipeline since 2001.
HTML5 was originally predicted to be released in 2022, but the release date has since been adjusted to 2014. The rate-limiting step in the release process has of course been Microsoft. Since the company is so huge, it takes a long process to make alterations to anything. The biggest change is the adaptation of Internet Explorer to allow the use of HTML5, and for some time Microsoft wasn’t making any changes to allow this. But, it's now clear that Internet Explorer 9 will be able to use some of the new features.
Some browsers are currently not accepting all of the complex features of HTML5 and CSS3, but developers are working to implement these features on all browsers as quickly as possible. With that said, there are a number of available elements that include a variety of great features available now, and the rest of the features can be added to a website's code without the use of any 3rd party applications.
Anyone who has had an iPhone or any type of device running on the iOS platform knows the trouble they face when trying to run a Flash application. These apps simply will not function properly. This has established the idea that developers need an alternative to Flash. The combination of HTML5 and CSS3 not only resolves this problem for developers, it makes it even simpler for the development of other apps for different types of mobile devices, which opens the doors for a number of new designs and website formats.
Often the transition from one platform to another requires learning how to design a page all over again. One of the biggest positive aspects surrounding HTML5 is the fact that it is based on HTML4. This means integrating code from HTML4-based pages is simple and easy. This also means a number of the attributes in HTML4 are also accessible in HTML5, but these attributes have been adjusted to make the new platform easier to use. In some cases, older code can remain in place while the new attributes are utilized. There are number of new elements found in HTML5 and CSS3, almost too many to list, which is why this article will cover some of the main features people are most excited about.
The Latest With HTML5
1. One of the biggest features developers are looking forward to is the audiovisual support that HTML5 has. Although it is not totally functional yet, the completion of the feature has more than a positive outlook. Upon its completion, developers will not require 3rd party plugins in order to stream audio and video on the their websites.
2. The application cache feature makes it possible for developers to utilize web applications without being connected to the Internet. This is done by creating a cache manifest file on a web server. The necessary resources to operate offline can then be retrieved through the manifest element of HTML tag. The code is simple and the resources can reached with the command: <html manifest=”/cache.manifest”>, and an AddType directive in the .htaccess file found in the root web directory: AddType text/cache-manifest .manifest. The syntax for this command will vary slightly depending on the type of server that is being utilized.
3. HTML5 is a taking a page of Apple’s book by utilizing the canvas element, which is already supported in Safari and Firefox. With this feature, developers can produce flat graphics straight through the code utilizing the Draw function. This makes it possible to bypass the use of Photoshop in order to make a 2D image, and instead place the image directly in the code.
4. Declarations have also been simplified in the new HTML5. All HTML5 syntax requires that a doctype be specified in order for the browser to render the page in standards mode. In the past, this declaration was extremely long and took a relatively large amount of code to make the declaration. With HTML5, the new doctype declaration is simply: <!DOCTYPE html>, which eliminates a lot of coding for the developer.
There are also a number of new features being implemented in CSS3 that work in conjunction with HTML5 in order to simplify the life of developers. Although not completely finished, CSS3 has been separated into different levels of completion. There are some features that are complete, while there are other features that are still being tested for completion. The layout and text formatting features are ready for use by developers, with some other features still in the works. Much like HTML5, there are some browser compatibility issues, and Internet Explorer compatibility is behind as well.
CSS3 provides a number of features for developers that may not be totally necessary for the functionality of the website, but provide aesthetic beauty. With the increasing demands of users for a clean-cut website, these features within CSS3 are being welcomed with open arms by developers. Using CSS3 in conjunction with HTML5 makes it much easier to create a website that will leave visitors “oohing and aahing” over the design.
TypeFaces makes elegant use of CSS3 box shadows by outlining photos.
Just Made My Day uses CSS3 rounded corners for speech bubbles.
2. Another great feature in CSS3 is the ability to create rounded corners in a much easier manner. Instead of using images, CSS3 utilizes a div tag and a border-radius element. Currently, this requires a bit of adjustment depending on the type of browser being utilized, but once the feature is complete, it will be universal throughout all browsers.
WeGraphics uses the RGBA coloring to fade the opacity of images on hover.
3. Coloring in CSS3 has never been easier with the implementation of RGBA coloring. Instead of having to know hex coloring or utilizing a cheat sheet, developers can now choose the amount of red, green, blue, and opacity that will be present within the design. Another bonus to this new feature is that it does not require any browser extensions in order function properly.
Ironing Out The Kinks In CSS3 & HTML5
As mentioned before, the main concern with CSS3 is cross browser compatibility. Although a large number of features in both HTML5 and CSS3 are ready and available to use, not all browsers are capable of utilizing them yet. One of the best browsers for these new features is the recently released Firefox 5. Opera 9.5 is also a contender as a new browser able to run these features as well, but it's not quite perfect and still shows some inability to run a few of the features. Safari, Chrome and Kindle, which are all based on WebKit technology, can all run most of these features without any problems.
Although there are a number of individuals counting down the days until an alternative is put in place of Flash for iOS devices, HTML5 is not quite ready to take its place in the audio/video playing or animation department for a conventional browser. However, it does appear that in the near future, HTML5 will eventurally overtake Flash.
- Dive Into HTML5 - An online book by Mark Pilgrim detailing the differences between HTML5 and HTML4 and giving excellent examples for how to use each HTML5 feature.
- HTML5 Rocks - Use their demos and labs for a great way to begin experimenting with the new features HTML5 has to offer.
- HTML5 W3C Official Spec - Read the original docs for yourself.
- CSS3.info - A massive collection of CSS3-related tutorials and information.
- CSS3.com - A reference guide for CSS3 properties.
- Quirksmode - See the latest browser support for CSS3 properties.
- CSS3 Generator - Need to generate some CSS3 code and tired of writing out all the browser prefixes? Use this generator for almost every CSS3 property.
- CSS3 W3C Working Group - See the official current snapshot of CSS3.
Your Comments Are Valuable - Join The Discussion!
Find what you need.
Here's the latest for developers.
Popular programming tutorials.
We're on the web.
We are where you are. Discover great content by becoming our fan on Facebook, following us on Twitter, or subscribing to our RSS feeds.