post

Enable css for HTML5 tags in Older Internet Explorer: HTML5 – The Beautiful Butterfly! Part 3

First you may take a look in:
Part 1
Part 2


This is a very interesting topic. Most of the html5 tags are not supported in older versions Internet Explorer(IE) or other older browsers. When we develop a website in html5, we consider it. You can ignore older versions of FF, Chrome or Safari, but you can’t just ignore IE7 or IE8. Well, some tags are still not supported in any browsers, but what about simple tags like section, article, header, nav etc?

When we apply styling on these tags using css, the tags are not recognized in IE at all. So, no style is shown. For example:
[html]

bla bla bla
bla bla bla

[/html]
And you style this
[html]

header{padding: 10px; background: red;}
nav{margin: 10px 5px 10px;}

[/html]

This will look good any modern browser but not in older versions of IE. And it was not discovered until a unknown person make a comment. It was in 2008. The commenter Sjoerd Visscher posted a comment in intertwingly.net/blog/2008/01/22/Best-standards-support:

Btw, if you want CSS rules to apply to unknown elements in IE, you just have to do document.createElement(elementName). This somehow lets the CSS engine know that elements with that name exist.

And this comment changed everything! Before this comment nobody knew that you can do it, pretty interesting, isn’t it?

So, the way is if we create a simple script line in the head tag, all html5 tags should be introduced in IE.
[html]

document.createElement(‘header’);
document.createElement(‘nav’);
document.createElement(‘article’);

[/html]
So, if we need to create a number of elements for IE, we can use an array:
[html]

var e = [‘header’, ‘section’, ‘nav’, ‘article’]; // add more elements here
for(var i = 0; i < e.length; i++){
document.createElement(e[i]);
}

[/html]
But we don’t want to execute this script in every browsers, only in IE. So, use conditional html tag :)
[html]

var e = [‘header’, ‘section’, ‘nav’, ‘article’]; // add more elements here
for(var i = 0; i < e.length; i++){
document.createElement(e[i]);
}

[/html]

You can see a nice documentation here by John Resig. Another well known and popular web developer Remy Sharp created a script that enable html5 tags in IE and is available in google code. An advanced script is here. So, if you use this you just need to include the source, rest of things will be done by that script :)

There are many ways out there for IE to recognize the html5 tags. We will discuss about those in some other day :)

Part 1
Part 2

post

HTML5: The Beautiful Butterfly! Part 2

Before starting this part, you may like to take a look on part 1. We are going to discuss some more important changes in this post. As HTML5 has been taking the top place of tomorrow’s world, it has a lots of flexibility. So, it’s your turn to use the resource that you have in HTML5.

Section, Article and Aside tag

Section is used to separate two or more parts, to make a connection between a heading and it’s excerpt or content. Also, within a section you can use h1 elements without having to worry about whether a particular section is at top level, second level, third level and so on. Section can be nested. One thing you need to remember that, section should not be used for styling. So, use a parent wrapping element to style for a particular section.
[html]

This is heading

This is excerpt…

This is heading

This is excerpt…

[/html]

About article, many people thinks article is used only for blog posts. This is wrong. Article can be used for the content that are segmented. So, your main content can be wrapped with article tag. Even you can wrap your blog comments with article tag. You can use header tag within article tag.

[html]

This is heading

Long content here..

Long content here..

Long content here..

    • …
    • …
    • …

Long content here..

Long content here..

[/html]

We have a generic idea that “aside tag is only used for a sidebar”. Well, this is true, but not true if you use the term ‘only’. Aside tag represents the part of the content that is not 100% applicable but still related to the content. So you can use aside tag within a content, just remember the aside tag should represent related content, not the applicable content. You know the use as sidebar. Let’s see different one.

[html]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae nisi metus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis vulputate tristique iaculis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae nisi metus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis vulputate tristique iaculis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae nisi metus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis vulputate tristique iaculis.

[/html]

Make a simple accordion with details tag

Many people thinks some things should be separated for javascript and html. We can build pretty attractive and sexy accordion with javascript. But for the same of simlicity, html5 introduces a very easy approach with details tag. Remember, all browsers don’t support all tml5 tags yet. Google chrome is the best browser to check html5 tags and attributes. So, you should really stick with chrome when you want to check your html5 outputs.

Within details tag, you need to use summary tag to show a part, e.g. question. Other elements will be hidden by default, we can consider it as answers.
[html]

  • This is a question

    This is a long answer….

  • This is a question

    This is a long answer….

[/html]
It will show only the questions with an arrow behind it. When you click on the arrow, then the rest of the corresponding content will be visible. This is very useful if you want to develop a FAQ quickly.

Now, what about changing the colors of the arrow. We can use a tricky css to change the colow of the arrow.
[html]

[/html]
If you want to keep open an item, just use open attribute in the details tag.
[html]

  • This is a question

    This is a long answer….

  • This is a question

    This is a long answer….

[/html]
The last item will be open by default. Also, remember details tag need to be used within list items. It should look like below:

Screen Shot 2013-11-30 at 8.20.37 PM

See Part 1 here

post

HTML5: The Beautiful Butterfly! Part 1

HTML or Hypertext Markup Language is a formatting language that programmers and developers use to create documents on the Web. The latest edition HTML5 has enhanced features for programmers such as video, audio and canvas elements. You view a Web page written in HTML in a Web browser such as Internet Explorer, Mozilla Firefox or Google Chrome. The HTML5 language has specific rules that allow placement and format of text, graphics, video and audio on a Web page. Programmers use these programming tags or elements to produce web pages in unique and creative ways. Tags enable the creator to make a more efficient and intelligent web page. Users will not have to use a Flash plug-in for video and audio content. Visual Studio users typically write code in HTML5 when creating web site content.

Well, we are not going to discuss here about HTML5, but some useful tips for HTML5 :)

Change of Doctype

Doctype declaration in older version
[html][/html]
This is much more easier now
[html][/html]
Also, you can put notes here:
[html][/html]

Some people may think that it will not run in Internet Explorer 6 or 7 or other older versions. Totally wrong. As long you are using
[html][/html]
Basically the ‘text/html’ part will handle it.

New html tag

We are used to keep in this way:
[html][/html]
Get rid of this xmlns attribute now:
[html][/html]
You can declare a language here:
[html][/html]

No self closing tag

In xhtml, we needed to close the self closing tags. Like:
[html]

[/html]
But now in HTML5, we don’t need to close the self closing tag. So,
[html]

[/html]

not bound to use quotation for attribute value

Well, we needed to use quotation for attribute value in xhtml. Like:
[html]

[/html]
You can get rid of that quotation.
[html]

[/html]
But it is strongly recommended to use quotation for attributes value as when you use a editor, it changes color and better to understand the segmentation of your code.

Unique tag for header, footer and nav

When you think a segment should be considered as a header, then change your
[html]