The combination of HTML5 & CSS3: Pros and Cons
It is always good to adopt the new advancements in order to remain competitive and utilize the benefits that they bring forth. Offering similar kind of beneficial relationship to designers and developers is the combination of HTML 5 and CSS 3. Both have many new features, which if applied can increase the efficiency level of a website and yield the desirable results.
HTML 5
HTML 5 is the latest version of HTML that promises to bring a number of useful features and enhance the users’ experience of the web. It overcomes the limitations of HTML 4 by introducing options which further increase the functionality. Though it is currently not supported by all the browsers but once it is done, it has the potential to change the way websites are created.
HTML 5 Features
Only one DOCTYPE
HTML has made it much easier to make document declaration which can now be done as <!doctype html>.
Geo-Location API
This feature helps in identifying the users’ location and thus is beneficial for online businesses to keep a track of their potential visitors. It is particularly useful if the users use mobile phones for surfing. However it is necessary that user provides the required permission to access the location information.
Canvas Element
With this feature in HTML 5, the drawing functions have been enhanced and it is now easier to create graphics, images, animations, etc.
Audio and Video Support
Without requiring any additional plug-in or set up, HTML 5 allows easy incorporation of audio or video elements in a page. In this way it scores over HTML 4.
Offline data Storage
HTML 5 allows storing files or web applications and makes them accessible without internet connectivity.
Problem areas:
Compatibility with Browsers
Not all browsers support HTML 5 which is being counted as the major drawback. Though most of its features are compatible with Firefox, Safari, Chrome & Opera but various versions of IE don’t support HTML 5 and seeing the number of users of IE, it is a serious problem that needs to be resolved.
Still under development
HTML 5 as a language is not fully developed yet and therefore is prone to changes. This may make its acceptance by developers a bit delayed.
CSS 3
Just as HTML 5, CSS 3 too has made its mark with its many features not only augment the aesthetic appeal but also improve functionality.
Here are certain features of CSS 3 that act in its favor:
Box Shadows
With CSS 3, one can now add shadow effect to any element of the web page, a feature which was absent in CSS 2.1 and required the use of separate image or picture.
Multiple Backgrounds
It is another useful feature of CSS 3 with which it is quite easy to create multiple backgrounds for one element.
Color Schemes plus opacity
It is one of most appreciated feature as it allows developers to select from multiple color options, whether RGB, CMYK or HSL as well define the opacity or transparency level right into the code in an easy manner. With CSS 3, the code can be written as RGBa or HSLa where ‘a’ stands for alpha or opacity.
Multiple Column Layouts
CSS 3 does away with the use of tables and allows making use of multiple columns for the text as per the requirement.
Rounded corners
It is another highly useful feature of CSS 3 that makes it possible to have rounded corners without any extra effort on part of the developers. With Border Radius property of CSS 3, it is easy to create round edges for a box.
Border Image
CSS 3 allows designers the flexibility of using an image for a border with its border image property and thus supports their creativity.
Problem areas:
Browser Support
Again as with HTML 5, some browsers do not support CSS3.
Variables are missing
As CSS 3 doesn’t have variables, it requires a considerable effort even if wishes to carry out a minor change in the site.
Still needs improvement to be called a layout language
CSS 3 can be regarded as highly efficient styling language but to become a layout language, it needs to have more control and make layouts flexible.
Setting aside the drawbacks, HTML 5 and CSS3, altogether offer the right set of elements to create appealing and effective websites. If used in conjunction, designers and developers can make much use of the benefits of the both.
Author: Seo-Semantic-Xhtml, a specialized division of Ipraxa – a full service web agency, offering services like PSD to HTML, IPad Testing, PSD to FBML and integration with Software applications like PSD to WordPress, Drupal, Magento, Joomla and more. You can connect with us at Facebook.
This rounded corners are from my point of view the best thing in css3. Now i have to create these corners in Photoshop and it’s frustrating. But the main problem exists! Compatibility with browsers.
the css3 great but its want some time to be more familiar and supported