The Evolution of CSS3 & HTML5
There is an almost constant evolution occurring in the world of web design and web development. If you take a look at where web design has come from in the last decade, it’s nothing short of amazing, and the recent announcement of CSS3 and HTML5… things just keep getting better.
Before CSS3 and HTML5 There Was…
Before CSS was really developed, you really only had three options when it came down to the design of your website.
Option 1: Design it in pure HTML
This option was good for loading time and search engines, but terrible on the eyes. Most people resorted to the gaudy effects of scrolling marquee text, terrible page layouts, and no visual balance to break up the page design.
Option 2: HTML With CSS and Images
This option was better, and it allowed for far better visual features, but there were still too many visual aspects that required the use of images. Some of the features even included text – if it was outside of standard web fonts, and before you could reference fonts placed on your server. You also had to resort to using images for anything using a rounded corner, gradient, or special image effects.
Option 3: Flash, Java, and Moving GIFs
Ever landed on a web page that nearly gave you a seizure because of all of the flashing text and moving GIF images? Nothing will make me click the red X faster than that.
If you wanted to make something more on your website, you were basically left to using flash, Java, or moving GIFs. All of which have “side-effects” of use.
You can create some awesome animation and movement effects using Adobe Flash, but it’s problems outweigh its benefits. Flash loads slow, it’s unreliable, and it is almost non-existent to search engines (especially when used alone). On top of that, you have to hope that the user has the most recent version of Flash installed on their computer, and isn’t using dial-up (or even some DSL connections), that will greatly increase the time it takes to load the Flash. Lastly… Flash is not compatible with every mobile device, like the iPhone.
Java has some great features, but you still risk people not having Java installed or enabled on their computer. This means that a lot of your cool features and design elements may go unused, or become dysfunctional to the user.
CSS5 and HTML5 Save The Day!
New Features of CSS3
CSS3 is vastly improving the way we present information on websites by simply making elements prettier to look at. Although it currently isn’t supported by all browsers yet, the newest major browsers have support for CSS3. In this section we are going to take a look at some of the new features for CSS3 and what you can use them for on your website.
Rounded Corners with Border Radius
This new feature allows you to create rounded borders for those divs with sharp corners without having to usd images with rounded corners. This feature is currently support in the Firefox, Chrome, Safari, and Internet Explorer 9 Beta browsers.
Example:
#div {
border: solid 1px black;
-moz-border-radius: 5px;
border-radius: 5px;
}
Border Images
Instead of using a regular old CSS border, the new CSS3 allows you to upload an image and use it for a more attractive border style.
Multiple Backgrounds
Earlier versions of CSS did not allow you to have multiple backgrounds for a single element on a page. CSS3 changes this and allows a single element to have multiple backgrounds.
Opacity
Before CSS3, you would have to use an image or a css filter to get opacity on an element. Now, it’s as simple as one line of code to change an element’s opacity.
Example:
#div{
opacity: 0.5;
}
Color Options
Instead of using hex codes and have to remember specific codes for specific colors, you can now choose the amount of Red, Green, and Blue in a single element.
Greater Support for Fonts
You can now upload a font file to your server, link to the file from within the CSS file using @font-face, and create a family for it so you can use it within any element on your page.
Text Shadows
This allows you to add a drop shadow for texts on the webpage, giving elements a much more professional look that couldn’t be done before without using images.
Example:
#div p {
text-shadow: 0px 2px 2px rgba(0,0,0,.2);
}
Resizing Elements
This gives users on your page the option to resize an element on a page.
Example:
#div {
resize:both;
}
New Features and Elements of HTML 5
HTML 5 brings a lot of new features to the table, and some browsers already have limited support for some of these new features.
New Doctype and Charset
Possibly the best thing about HTML 5 is how easy to implement it is. It’s as simple as stating the HTML 5 doctype, which follows below:
<!doctype html></code>
This works with just two simple words because HTML 5 is no longer part of SGML (Standard Generalized Markup Language), and is now a markup language all on its own. The character set for HTML 5 is very simple as well. It uses UTF-8 and the way you define it is:
<meta charset=”UTF-8″>
New Structure
HTML 5 now recognizes that a website will have a structure, similar to how XML documents or even books are structured. A website will generally have pages that all have a header, navigation, the body (content), sidebars, and a footer. There are also a few other structure elements this new feature accounts for, as seen below.
- <section> – defines page sections
- <header> – defines the pages header
- <footer> defines the pages footer
- <nav> – defines the pages navigation
- <article> – defines an article or primary content on a page
- <aside> – defines extra content on a page (IE, a sidebar)
- <figure> – defines an image that annotates an article
HTML 5 Inline Elements
These inline elements are used to define some basic concepts, and keep them neat looking and properly marked up. Most of these deal with the time or date.
- <mark> – indicates content that is marked in some fashion
- <time> – indicates content that is a time or date
- <meter> – indicates content that is a fraction of a known range
- <progress> – indicated the progress of completion for a task
Dynamic Pages Support
HTML 5 was developed with web application developers in mind, and helps them tremendously to more easily create dynamic HTML pages.
- Context menus – HTML 5 supports the creation and use of context menus
- href is not required on a tag anymore, allowing you to use the a tag with scripts in applications without requiring you to send the anchor anywhere.
- async attribute – when this is added to a script tag, it tells the browser to load the script in question asynchronously so it doesn’t slow down the loading and display of the other items on the page.
- <details> – provides details about an element (similar to a tooltip)
- <datagrid> – use this to easily create a table that pulls information from a database or other dynamic source
- <menu> – this allows you to create a menu system
- <command> – defines the action that should happen when a dynamic element is activated
HTML 5 New Form Types
The old standard form types are still supported, but HTML 5 adds a few more to make forms look more professional. These new form types are:
- datetime
- datetime-local
- date
- month
- week
- time
- number
- range
- email
- url
New HTML 5 Elements
There are few elements and tags that are completely new in HTML, giving HTML a whole new level of dynamics that wasn’t available before.
- <canvas> – this element gives you a JavaScript drawing space on the page. This allows you to add graphs or images to tool tips, or to just create dynamic, built on the fly, graphs on your pages.
- <video> – adds a video to your page
- <audio> – adds sound to your page
Elements Removed from HTML 5
There are some elements that HTML 5 is no longer supporting that were in earlier HTML versions. Most of them are already no longer used, which doesn’t make them being removed very surprising, but some of them seem a little too useful to just remove, such as the underline tag. These styling tags that are being removed are most likely due to CSS now mainly being used to style fonts on pages. The following will no longer be support in HTML 5:
- acronym
- applet
- basefont
- big
- center
- dir
- font
- frame
- frameset
- isindex
- noframes
- noscript
- s
- strike
- tt
- u
”
Facebook
Twitter
LinkedIn
Blog