HTML 5 - First Tests and Analysis

As a Web Development Lead at Tekriti, I have been at the forefront of developing the HTML, CSS and JS for several projects which Tekriti has been executing. What has been notable in this entire experience of mine is how little the HTML markup has evolved in the past 10 years or more. Sure we have definitely moved from table'd layouts to table less layouts, we have made concentrated efforts on keeping the HTML fluid, using CSS 2.0 and following W3C standards to the maximum. All of the above was the learning which me and my team has had over the past 4 years as Web 2.0 came calling. However there was still something lacking, as all this learning was more from a standards and discipline perspective, nothing new from a markup or technology perspective. One thing is for sure, HTML'ization of websites is a specialized job with a special set of skills and experience (especially with the plethora of browsers around these days IE6, 7, 8, Mozilla FF, Chrome, Safari, Opera).

The advent of HTML 5 is a breath of fresh air for the community of Web Developers whose core focus is to do the work as described above. Even though the draft reflects an effort started in 2004, the issues associated with browsers adding support for HTML made it hard for the roll out. Chrome and FireFox have taken the lead in this effort, with Chrome 3.0 and FF 3.5 supporting a sub-set of the tags for HTML 5. I believe HTML 5 will have a great impact on the Website development for the new age Web 2.0 sites and browsers.

This series of posts will cover details about HTML 5. If you have anything to do with web based software development , then HTML is the air you breathe. So follow this series to increase your awareness about the revolution called HTML 5.

HTML 4 introduced in 1997 gave a rough guide to many of the core features of HTML, but it did not provide enough definition on the kind of content deployed on the page (like video, article, audio etc). The same goes for XHTML 1, which defines an XML for HTML 4, which defines JavaScript APIs for both HTML and XHTML.

The HTML5 draft reflects an effort, started in 2004, to study contemporary HTML implementations and deployed content. The draft:

1. Defines a single language called HTML 5 which can be written in HTML syntax and in XML syntax.
2. Defines detailed processing models to interoperable implementations.
3. Improves markup for documents.
4. Introduces markup and APIs for emerging idioms, such as Web applications.
5. It will replace these documents HTML4, XHTML

The following areas / features defined in HTML 5 are believed to impact the Web architecture (Source: W3C draft on HTML5)

• The use of the DOM as a basis for defining the language.
• The concept of browsing contexts.
• The distinction between user agent requirements and authoring requirements.
• The new content model concepts (replacing HTML 4's block and inline concepts).
• The focus on accessibility as a built-in concept for new features (such as the hidden attribute, the progress element, et cetera) instead of an add-on (like the alt attribute).
• The focus on defining the semantics in detail
• The menu and command elements.
• The origin concept.
• Offline Web application caches.
• The definition of the browsing context "navigation" algorithm and the related session history traversal algorithms.
• The content-type sniffing and character encoding sniffing.
• The very explicit definition of a parser.
• The contentEditable feature and the UndoManager feature.
• The Drag and Drop and Copy and Paste architecture.
• The cross-document messaging feature (the postMessage API).
• The new sandboxing features for iframe.
• The definition of URL.

Does the above sound interesting? Well my next post will cover what all new markup elements have been added to HTML 5(like article, aside, video, audio, header, footer, nav etc), along with sample codes written in HTML 4 and HTML 5, to illustrate the differences.

Cheers to the new revolution !!

CSS mail of the day (10 Mar 09)

Hi All,

Here comes your CSS mail of the day:

color Property

This property describes the color of text within an element. Values for the property outside the specified ranges will be clipped or truncated to create a valid value.

Possible values:

inherit
Explicitly sets the value of this property to that of the parent.

[color]
This is a representation of the values for Red/Green/Blue used to determine a final display color. Please see the section on Color Units for details on the various color
specification schemes.

Example

body { color:blue }



Enjoy CSS :-)

CSS mail of the day (09 Mar 09)

Hi All,

Here comes your CSS mail of the day:

clip Property (Positioning)

A clipping area describes the portions of an element's rendering box that are visible (when an element's 'overflow' property is not set to 'visible'.)

Possible values:

inherit
Explicitly sets the value of this property to that of the parent.

auto
The clipping region is the same size as the element's rendering box.

[shape]
Only one [shape] syntax is currently understood:
rect([top] [right] [bottom] [left])
This syntax defines a rectangular area where [top], [right], [bottom], and [left] are offsets from each respective side of the element's rendering box. In the future, other
clipping shapes may be allowed.

The [top], [right], [bottom], and [left] values can take a standard [length] unit measurement or 'auto'. Use of the keyword 'auto' in this case indicates that the clipping
region for a specific edge will be the same as the corresponding side of the element's normal rendering box.

The origin point of the measuring system for this property is top/left, with increasing values as you move toward the bottom/right edges for each axis. Right and bottom
values are measured relative to the origin point.

Example

div { overflow: scroll; position: absolute; width: 50px; height: 50px; clip: rect(5px 40px 40px 5px) }


Enjoy CSS :-)

CSS mail of the day (19 Feb 09)

Hi All,

Here comes your CSS mail of the day:

text-overflow Property (Positioning)

If text is too long for the overflow/clipping area and the content is to be visually clipped, this property allows the clipped content to be visually represented by the string "..." (called an "ellipsis") in the non-clipped area.
This property only applies to text overflow content in the flow of text (horizontal for western text.) To explicitly force an overflow situation, content must be in either a NOBR element or an element with the 'white-space' property set to "nowrap" - otherwise, only a natural non-breaking word existing at the clipping boundary will induce this property to have an ellipsis effect (if the property is thus set.)

Possible values:

clip
Clips the viewable content to the area defined by the rendering box, the 'overflow', and 'clip' property values.

ellipsis
If text content will overflow, display the string "..." in the visibly-rendered region for content outside the visible area.

Example

div { position: absolute; left: 20px; top: 50px; width: 120px; height: 50px; border: thin solid black; overflow: hidden; text-overflow: ellipsis }



Enjoy CSS :-)

CSS mail of the day (17 feb 09)

Hi All,

Here comes your CSS mail of the day:

overflow-y Property (Positioning)

Some content in an element may fall outside the element's rendering box for a number of reasons (negative margins, absolute positioning, content exceeding the width/height set for an element, etc.) In cases where this occurs, the 'overflow-y' property describes what to do with the content that exceeds the element's width.

Possible values:

visible
Content is not clipped and may be rendered outside of the element's box.

hidden
Content is clipped and content outside of the element's box is not visible. The size of the clipping region is defined by the 'clip' property.

scroll
Content is clipped as necessary, but a vertical scrollbar is made available where necessary to view the additional, non-visible content. If the Visual media in use is static (such as Print) the content should be treated as if the value was 'visible'.

auto
This value is browser and media dependent, but should allow for a scrollbar if possible in case of overflow.

Example

blockquote { width: 50px; height: 50px; overflow-y: scroll }



Enjoy CSS :-)

CSS mail of the day (28 Jan 09)

Hi All,

Here comes your CSS mail of the day:

overflow-x Property (Positioning)

Some content in an element may fall outside the element's rendering box for a number of reasons (negative margins, absolute positioning, content exceeding the width/height set for an element, etc.) In cases where this occurs, the 'overflow-x' property describes what to do with the content that exceeds the element's width.

Possible values:

visible
Content is not clipped and may be rendered outside of the element's box.

hidden
Content is clipped and content outside of the element's box is not visible. The size of the clipping region is defined by the 'clip' property.

scroll
Content is clipped as necessary, but a horizontal scrollbar is made available where necessary to view the additional, non-visible content. If the Visual media in use is static (such as Print) the content should be treated as if the value was 'visible'.

auto
This value is browser and media dependent, but should allow for a scrollbar if possible in case of overflow.

Example

blockquote { width: 50px; height: 50px; overflow-x: scroll }



Enjoy CSS :-)

CSS mail of the day (16 Jan 09)

Hi All,

Here comes your CSS mail of the day:

overflow Property (Positioning)

Some content in an element may fall outside the element's rendering box for a number of reasons (negative margins, absolute positioning, content exceeding the width/height set for an element, etc.) In cases where this occurs, the 'overflow' property describes what to do with the content outside the elements rendering area.

Possible values:

inherit
Explicitly sets the value of this property to that of the parent.

visible
Content is not clipped and may be rendered outside of the element's box.

hidden
Content is clipped and content outside of the element's box is not visible. The size of the clipping region is defined by the 'clip' property.

scroll
Content is clipped as necessary, but scrollbars are made available where necessary to view the additional, non-visible content. If the Visual media in use is static (such as Print) the content should be treated as if the value was 'visible'.

auto
This value is browser and media dependent, but should allow for a scrollbar if possible in case of overflow.

Example

blockquote { width: 50px; height: 50px; overflow: scroll }



Enjoy CSS :-)