Top 10 Reasons to Start Using HTML5 Right Now…

So you’re still not using HTML5, huh? I guess you probably have your reasons; it’s not fully adopted yet, it doesn’t work in IE, you don’t like users, you’re out of touch or you are just passionately in love with writing strict XHTML code. HTML5 is the revolution that the web needed and the fact is, it is the future whether you like it or not — suck it up and deal. HTML5 isn’t hard to use or understand and even though it’s not fully adopted yet, there are still plenty of reasons to start using it right now — like right after you get done reading this article.

html5-reasons

There are lots of articles touting the use of HTML5 and praising the benefits of it, yes this is another one of those. With all these articles, with Apple pushing it, with Adobe building new dev products around it, and with so many web sites devoted to it, I still talk to fellow designers and developers who haven’t or won’t adopt it for a variety of reasons. I think the main problem is, it still seems like a mysterious creature to many. To many it feels more like the jet pack or the flying car — an awesome idea that is fun to think about but still not practical in its use. Wrong, the reality is that it is extremely practical right now! It’s not the latest Mercedes concept car being towed around form car show to car show, it’s a reality and it’s not going anywhere.

In order to further demystify HTML5 and help these knuckle dragging designers and developers to jump on the bandwagon I’ve put together a top ten list of reasons why we should all be using HTML5 right now. For those that currently use HTML5 this list may not be anything new or ground breaking, but hopefully it will inspire you to share the benefits of HTML5 with others in the community. We’ll do this Letterman countdown style (minus the celebrity presenter) and start with number ten – accessibility.

10 – ACCESSIBILITY

HTML5 makes creating accessible sites easier for two main reasons: semantics and ARIA. The new (some currently available) HTML headings like <header>, <footer>, <nav>, <section>, <aside>, etc. allow screen readers to easily access content. Before, your screen readers had no way to determine what a given <div> was even if you assigned it an ID or Class. With new semantic tags screen readers can better examine the HTML document and create a better experience for those who use them.

ARIA is a W3C spec that is mainly used to assign specific “roles” to elements in an HTML document – essentially creating important landmarks on the page: header, footer, navigation or article, via role attributes. This has been well overlooked and widely under-used mostly due to the fact that it wasn’t valid, however, HTML5 will validate these attributes. Also, HTML5 will have built in roles that can’t be over-ridden making assigning roles a no brainer. For a more in depth discussion on HTML5 and ARIA please visit the WAI.

9 – VIDEO AND AUDIO SUPPORT

Forget about Flash Player and other third party media players, make your videos and audio truly accessible with the new HTML5 <video> and <audio> tags. Getting your media to play correctly has always been pretty much a nightmare, you had to use the and <object> tags and assign a huge list of parameters just to get the thing visible and working correctly. Your media tags just become these nasty, huge chunks of confusing code segments. HTML5′s video and audio tags basically treat them as images; <video src=”url”/>. But what about all those parameters like height, width and autoplay? No worries my good man, just define those attributes in the tag just like any other HTML element: <video src=”url” width=”640px” height=”380px” autoplay/>.

It’s actually that dead simple, however because old evil browsers out there don’t like our HTML5 friend, you’ll need to add a little bit more code to get them working correctly… but this code isn’t nearly as gnarly and messy as the <object> and tags:

<video poster="myvideo.jpg" controls>
 <source src="myvideo.m4v" type="video/mp4" />
 <source src="myvideo.ogg" type="video/ogg" />
</video>

Some resources worth checking out:

8 – DOCTYPE

doctype html

<!DOCTYPE html>

Yup that’s it, that is the doctype, nothing more, nothing less. Pretty simple right? No more cutting and pasting some long unreadable line of code and no more dirty head tags filled with doctype attributes. You can simply and easily type it out and be happy. The really great thing about it though, beyond the simplicity, is that it works in every browser clear back to the dreaded IE6.

7 – CLEANER CODE

If you are passionate about simple, elegant, easy to read code then HTML5 is the beast for you. HTML5 allows you to write clear and descriptive code, semantic code that allows you to easily separate meaning from style and content. Consider this typical and simple header code with navigation:

<div id="header">
<h1>Header Text</h1>
<div id="nav">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>

So this code is pretty clean and simple? But with HTML5 you can clean this up even more and at the same time give your markup more meaning:

<header>
 <h1>Header Text</h1>
 <nav>
  <ul>
   <li><a href="#">Link</a></li>
   <li><a href="#">Link</a></li>
   <li><a href="#">Link</a></li>
  </ul>
 </nav>
</header>

With HTML5 you can finally cure your “divitis” and “classitis” by using semantic and HTML headers to describe your content. Previously you would generally just use div’s for every block of content than drop an id or class on it to describe its content but with the new <section>, <article>, <header>, <footer>, <aside> and <nav> tags, HTML5 allows you to code your markup cleaner as well as keep your CSS better organized and happier.

Some resources worth checking out:

6 – SMARTER STORAGE

One of the coolest things about HTML5 is the new local storage feature. It’s a little bit of a cross between regular old cookies and a client-side database. It’s better than cookies because it allows for storage across multiple windows, it has better security and performance and data will persist even after the browser is closed. Because it’s essentially a client side data base you don’t have to worry about the user deleting cookies and it is been adopted by all the popular browsers.

Local storage is great for many things, but it’s one of HTML5 tools that are making web apps possible without third party plugins. Being able to store data in the user’s browser allows you to easily create those app features like: storing user information, the ability to cache data, and the ability to load the user’s previous application state. If you are interested in getting started with local storage, check out Christian Heilmann’s great 24 Ways article from last year —Wrapping Things Nicely with HTML5 Local Storage.

Some more resources worth checking out:

5 – BETTER INTERACTIONS

Awe, we all want better interactions, we all want a more dynamic website that responds to the user and allows the user to enjoy/interact your content instead of just look at it. Enter <canvas>, the drawing HTML5 tag that allows you to do most (if not more) interactive and animated possibilities than the previous rich internet application platforms like Flash.

Beyond <canvas>, HTML5 also comes with a slew of great APIs that allow you to build a better user experience and a beefier, more dynamic web application — here’s a quick list of native APIs:

  • Drag and Drop (DnD)
  • Offline storage database
  • Browser history management
  • document editing
  • Timed media playback

For way more info on these APIs and more native interactive features of HTML5 visit HTML5Doctor.

Some resources worth checking out:

4 – GAME DEVELOPMENT

Yup, that is correct, you can develop games using HTML5′s <canvas> tag. HTML5 provides a great, mobile friendly way to develop fun, interactive games. If you’ve built Flash games before, you’ll love building HTML5 games.

Script-Tutorials has recently offered a four part series of lessons focused on HTML5 game development, head on over and check out some of the sick stuff they have created:

Some more resources worth checking out:

3 – LEGACY/CROSS BROWSER SUPPORT

modern browsers support

Your modern, popular browsers all support HTML5 (Chrome, Firefox, Safari IE9 and Opera) and the HTML5 doctype was created so that all browsers, even the really old and annoying ones, er, IE6 can use it. But just because old browsers recognize the doctype that doesn’t mean they can use all the new HTML5 tags and goodies. Fortunately, HTML5 is being built to make things easier and more cross browser friendly so in those older IE browsers that don’t like the new tags we can just simply add a Javascript shiv that will allow them to use the new elements:

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Some resources worth checking out:

2 – MOBILE, MOBILE, MOBILE

Call it a hunch, but I think mobile technology is becoming more popular these days. I know, that is a pretty crazy assumption and some of your are probably thinking — mobile is just a fad… right. Mobile devices are taking over the world. The adoption of mobile devices continues to grow very rapidly and this means that more and more users will be using their mobile browsers to view your web site or application. HTML5 is the most mobile ready tool for developing mobile sites and apps. With Adobe announcing the death of mobile Flash, you will now count on HTML5 to do your mobile web application development.

Mobile browsers have fully adopted HTML5 so creating mobile ready projects is as easy as designing and constructing for their smaller touch screen displays — hence the popularity of Responsive Design. There are some great meta tags that also allow you to optimize for mobile:

  • Viewport: allows you to define viewport widths and zoom settings
  • Full screen browsing: IOS specific values that allow Apple devices to display in full screen mode
  • Home Screen Icons: like favicons on desktop, these icons are used to add favorites to the home screen of an IOS and Android mobile device

For more info on how to mobilize your site via HTML5, check out “Mobifying” Your HTML5 Site.

Some resources worth checking out:

1 – IT’S THE FUTURE, GET WITH IT!

The number one reason why you should start using HTML5 today is this: it’s the future, start using it now so you don’t get left behind. HTML5 is not going anywhere and as more and more elements get adopted more and more companies will start to develop in HTML5. HTML5 is essentially just HTML, it’s not scary, it’s not anything you really need to figure out or relearn — if you’re developing XHTML strict right now you are already developing in HTML5 so why not take full advantage of it’s current capability?

You really don’t have any excuses not to adopt HTML5 and begin your new love affair with it. Truly, the only real reason I prefer to use HTML5 is just to write cleaner code, all the other benefits and fun features I haven’t even really jumped into yet, but that is the great thing about it, you can just start using it right now and not even change the way you design. So, start using it right now, whether you are just simplifying and making your markup more semantic OR you are gonna build some sick new mobile game that will take over the world — who knows, maybe you can start selling stuffed animal versions of your gaming characters too.

GREAT HTML5 RESOURCES

http://html5doctor.com
http://html5rocks.com
http://html5weekly.com
http://www.remysharp.com
http://www.script-tutorials.com

Posted by: Dhiraj kumar

Unquoted font family names in CSS

CSS

Are the quotes in font-family: 'Comic Sans MS' required, or not?

According to the the CSS validator, the quotes are supposed to be there in this case because the font family name contains spaces:

Family names containing whitespace should be quoted. If quoting is omitted, any whitespace characters before and after the name are ignored and any sequence of whitespace characters inside the name is converted to a single space.

However, this is an error in the CSS validator. The warning message suggests that all font family names containing whitespace should be quoted, which is simply not true. font-family: Comic Sans MS (without quotes) is perfectly valid CSS that works the way you’d expect it to.

In reality, it’s a bit more complex. To grok the rules on font family names, we need to understand the difference between CSS strings and identifiers first.

Strings and identifiers

The spec says the following about strings:

Strings can either be written with double quotes or with single quotes.

Identifiers are defined as follows:

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters[a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_).

ISO 10646 defines the Universal Character Set, which correlates to the Unicode standard. Note that they’re actually talking about the hyphen-minus character — not the hyphen character, which is U+2010. The code point for hyphen-minus is U+002D, and for underscore (low line) it’s U+005F. The highest code point currently allowed by Unicode is U+10FFFF. So, any character matching the regular expression [-_\u00A0-\u10FFFF] is allowed in an identifier.

The spec continues:

[Identifiers] cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code […]. For instance, the identifier B&W? may be written as B\&W\? or B\26 W\3F .

Translated into regex: any string that matches ^(-?\d|--) is not a valid CSS identifier.

Whitespace

Both the CSS 2.1 and CSS3 Fonts Module Level 3 specs say:

Font family names must either be given quoted as strings, or unquoted as a sequence of one or more identifiers. This means most punctuation characters and digits at the start of each token must be escaped in unquoted font family names.

Note: “a sequence of one or more identifiers” implies that multiple space-separated identifiers will form a single font family name. Therefore, font-family: Comic Sans MS is valid, and equivalent to font-family: 'Comic Sans MS'. The former consists of three space-separated identifiers, the latter is simply a string.

This is clarified a few paragraphs down in the spec:

If a sequence of identifiers is given as a font family name, the computed value is the name converted to a string by joining all the identifiers in the sequence by single spaces.

The aforementioned CSS validator warning describes what happens if leading or trailing whitespace is used around identifier sequences:

[A]ny whitespace characters before and after the name are ignored, and any sequence of whitespace characters inside the name is converted to a single space.

This is implied by the spec text, too: an unescaped whitespace character can never be part of an identifier, so it can never start a “sequence of identifiers”.

Generic family keywords

The spec defines the following generic family keywords: serifsans-serifcursivefantasy, andmonospace. These keywords can be used as a general fallback mechanism, in case the desired font choices are not available. Authors are encouraged to append a generic font family as a last alternative for improved robustness. As keywords, they must not be quoted.

In other words, font-family: sans-serif means that a generic sans-serif font family will be used, whilefont-family: 'sans-serif' (with quotes) refers to an actual font that goes by the name of sans-serif. A very important difference!

Other keyword values

The same behavior applies to a few other keywords, too:

Font family names that happen to be the same as a keyword value (inheritserifsans-serifmonospace,fantasy, and cursive) must be quoted to prevent confusion with the keywords with the same names. The keywords initial and default are reserved for future use and must also be quoted when used as font names. User agents must not consider these keywords as matching the <family-name> type.

Note that all keywords are case-insensitive. For example, Monospacemonospace, and mOnOsPaCe all refer to the same keyword, and if you want to use a font with that exact family name rather than the default keyword value, you’ll need to quote it.

Summary

As long as the only disallowed characters in an otherwise valid identifier are single U+0020 space characters, and all space-separated parts are valid identifiers too, the identifier sequence can be used as an unquoted font family name (unless it’s a keyword, but there are no keywords with spaces in them).

If a font family name matches a keyword, it must be quoted to form a string.

If you want to use an invalid CSS identifier as (part of) a font family name, you’ll need to quote it to form a string instead; or you could just escape any special characters so it can remain an unquoted identifier.

Here are some example font-family declarations:

/* Invalid because `/` is not allowed in an identifier: */ font-family: Red/Black;
 /* Valid — an escaped `/` symbol is allowed in an identifier: */ font-family: Red\/Black;
 /* Invalid because a string cannot be combined with an identifier: */ font-family: 'Lucida' Grande;
 /* Valid — it’s a single string: */ font-family: 'Lucida Grande';
 /* Valid — it’s a space-separated sequence of two identifiers: */ font-family: Lucida Grande;
 /* Valid — it’s still a space-separated sequence of two identifiers: */ font-family: Lucida     Grande;
 /* Invalid because `!` is not allowed in an identifier: */ font-family: Ahem!;
 /* Valid — it’s a string: */ font-family: 'Ahem!';
 /* Valid — an escaped `!` is allowed in an identifier: */ font-family: Ahem\!;
 /* Invalid because an identifier cannot start with a digit: */ font-family: Hawaii 5-0;
 /* Valid — it’s a string: */ font-family: 'Hawaii 5-0';
 /* Valid — `\35 ` (including the space) is an escape sequence for `5`: */ font-family: Hawaii \35 -0;
 /* Valid — `\ ` (including the space) is an escape sequence for ` `: */ font-family: Hawaii\ 5-0;
 /* Invalid — `$` is not allowed in an identifier: */ font-family: $42;
 /* Valid — an escaped `$` symbol is allowed in an identifier: */ font-family: \$42;
 /* Valid — `€` is allowed in an identifier: */ font-family: €42;

Bonus puzzle: Other than keywords, I can only think of one font family name that can’t be used without quotes — there is no way to escape it in an identifier. Do you know which one?

Posted by: Dhiraj kumar

Clearing floats methods nowadays

At my beginnings as a web designer using Div tags, when I first discovered clear floats I was so happy and it was for sure an “a-ha” moment. Since then, so many things have changed and new clearing methods have appeared. One thing remained the same: the need to clear floats.

In this article, we’ll see some effective solutions for clearing floated elements.

clearing-floats

But first, what is float?

Arranging website page elements was always a struggle for you as a web designer. To achieve your desired website layout, a lot of calculation of box dimensions are needed, and various implementation decisions must be taken as well.

At the beginning, perhaps you used table elements to structure your layout, and even if tables are very intuitive, the table purpose is to list tabular data. You also tried the CSS display values like: tabletable-cell or table-row to build structures, but shortly you gave up as there wasn’t enough support for that.

In the end, you got rid of table markup and skipped to div floats.

So, float is a CSS property which help you aligning and positioning your web page elements.

clearing-floats-simple-example
Simple floats example

Clearing floats

Elements placed after a floated element will wrap around the floated element. To avoid this behavior, you must clear floats. To do that, generally you use the clear property which has four values: leftrightboth and none.

<div style="float:left"></div>
<div style="float:right"></div>
<div style="clear:both"></div>

The above is a common example.

Beside the above example that requires extra HTML markup, below is a list with some clearing methods that I found very useful (and they do not require extra markup):

Clearfix reloaded by Thierry Koblentz

clearfix-reloaded

.clearfix:before,
.clearfix:after{
  content: ".";
  display: block;
  height: 0;
  overflow: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;} /* IE < 8 */

New clearfix hack by Jeff Starr

new-clearfix-hack

.clearfix:after{
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

Micro clearfix hack by Nicolas Gallagher

micro-clearfix

.cf:before,
.cf:after{
  content:"";
  display:table;
}

.cf:after{
  clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf{
  zoom:1;
}

CSS clearing floats with overflow by Nick La

clear-overflow

That’s it!

You may already know the above techniques and my questions is:  Which one do you use most? Share your opinion with us!

Posted by: Dhiraj kumar

7 tips to organize your CSS

Working often with CSS for my own website or for my job makes me trying always to be organized and that made me thinking about a thing. What is the best way to organize my CSS file(s)? With this article I will try to present you a short guide about CSS organizing.

tips-to-organize-your-css

1. Group your CSS files into a folder

Beside your main CSS file you may want to use also a print CSS file or why not a CSS file for the IE6/7 browser. Placing them together in a folder named css for example will help you improve your website back-end structure.

group-css-files

2. Use efficient selectors

A very important thing for you to know is how browsers understand and read your CSS selectors? The answer is that they read them from right to left. That means that for the selector ul li a span the first thing thing interpreted is span.

efficient-selectors

The id is the selector with the greater specificity so always, instead div#header you should use just #header. This way your file will be less redundant and smaller. Also note that the use of efficient CSS selectors is a nowadays requirement.

3. Comment and separate your CSS rules

Generally, a CSS file contains reset styles, header, content and footer styles and in order to easier browse your CSS rules you should choose a way to separate them.

comment-css

You can choose an simple and easy to notice separator as in the following example:

  /* Header styles */
  /* ---------------------------------- */
  /* Content styles */
  /* ---------------------------------- */
  /* Footer styles */

4. Create a simple color scheme to use for your styles

When you are dealing for example with a CSS file for an web application you will use a lot common styles and colors.  So placing something as following inside a CSS comment could be very helpful for you:

  /* Colors: Light Gray #eaeaea, Dark Gray #828282, Red #c60000 */

5. Use a meaning naming convention for your selectors.

Let’s suppose you need to name your logo, menu and a tagline that are placed inside a header id wrapper. A good approach in this way would be to use namings as:

  • header-logo or h-logo
  • header-menu or h-menu
  • header-tag or h-tag

css-naming-convention

6. Create your own small CSS framework

By doing that you will be able to use these common CSS classes at any time for any elements from your markup.

.full-width{
  width: 100% !important;
}

.min-width{
  width: 1% !important;
  white-space: nowrap !important;
}

.centered-inline{
  text-align: center !important;
}

.centered-block{
  margin-left: auto !important;
  margin-right: auto !important;
}

7. Simple is better

Don’t try to complicate things because simplicity will save you time, effort and why not your remaining hair 🙂

Posted by: Dhiraj kumar

10 CSS shorthand tips and how to optimize CSS

cssIf you want to write efficient and optimized CSS code then you’ll surely need to have in mind the following shorthand tips.

These tips and tricks apparently don’t seem to be so important at the first sight. But once you write thousands of CSS lines you will wish to optimize every single line.

Why’s that? Because loading speed does matter (Google introduced this to their ranking algorithms) and your web pages will load faster because your stylesheet file size will be smaller.

Below I will present you a short, yet comprehensive CSS shorthand guide to help you get started optimizing your CSS file. So let’s have a look at some examples and see exactly how we can optimize a CSS file.

1. Background properties in one line

Defining a background property could be made in an easier way than we often happen to see.

Why using:

 background: url(example.gif);
 background-color: #eaeaea ;
 background-repeat: repeat-x;
 background-position: top left;

… when you could easier write:

background: #eaeaea url(example.gif) repeat-x top left;

2. Border property

When all of the border widths are the same, instead using:

border-color: red;
border-width: 1px;
border-style: solid;

… you can simply write this:

border: 1px solid red;

3. List properties

The following list properties:

list-style-position: outside;
list-style-image: none;
list-style-type: disc;

… could be simplified into:

list-style: disc outside;
/* shorthand notation for list properties */
/* list-style: [list-style-type] [list-style-position] [list-style-image];*/

4. Font and line-height properties

Font and line-height properties like the ones below:

font-family: Arial, Helvetica;
font-weight: bold;
font-style: italic;
font-size: 1em;
line-height: 1.5em;

… can be easily transformed into:

font: bold italic 1em/1.5em Arial, Helvetica;

Much simpler huh? 🙂

5. Margin and padding properties

This example applies for margin and also for padding, so next we’ll use as example the CSS margin property.

/* top=10px, right=5px, bottom=15px, left=20px */
margin: 10px 5px 15px 20px;

/* top=10px, right=5px, bottom=10px, left=5px*/
margin: 10px 5px;

/* top=10px, right=5px, bottom=15px, left=5px*/
margin: 10px 5px 15px;

Now let’s see what else we can do to write optimized CSS:

6. Always remember that “0″ anything equals to “0″

Use the “0″ value instead 0px or 0em so instead the the following CSS properties

margin: 0px;
padding: 0em;

you could use:

margin: 0;
padding: 0;

7. Use shortcuts for hexadecimal colors

White color equal to “#ffffff” or just “#fff”, #aabbcc can be wrote like #abc and so on.

8. Simplify non integer CSS values

Instead writing 0.5em you can use .5em, 0.5px is equal to .5px

9. The last property semicolon it’s not required?

div{
margin: 0;
padding: 0 /* note that you can skip the last rule semicolon, and yes it passes W3C validation */
}

10. Floated elements inherits “display:block” declaration

When floating an element there’s no need to add also “display: block” declaration as we often see. This is helpful for avoiding redundancy and save us one line of CSS.

These are some CSS shorthand tips I often use and they are very helpful for me, when coding CSS. I hope they will also help you writing shorter, better CSS code.

Over to you

What do you think about the tips I presented above and what else do you use for optimizing the CSS file?

Posted by: Dhiraj kumar

Things you should know about CSS anatomy

I often notice people tend to use stylesheets without knowing its structure meaning. That’s why, in this tutorial I will try to present you the CSS components structure.

css-structure-anatomy

1.Selectors

The selector is the element that is linked to a particular style.In the following example the selector is “p”, so “p” is the element who’s margin properties will be “0″.

p{
  margin: 0;
}

Class Selectors

The advantage of a class selector is that it can be applied to more than one elements according to W3C recommendation.

.colored{
  color: red;
}

Having this, all paragraphs who’ll have “colored” class as attribute will inherit red color from stylesheet.

ID Selectors

The id attribute assigns a unique identifier to an element, so try assigning an id attribute to no more than just one element.

If you’ll assign a CSS id to more elements within a page you will fail the W3C Markup Validationwhich is very important for you, as a designer.

#colored{
  color: red;
}

Contextual Selectors

p#colored span{
  color: blue;
}

This selector is applied to all “span” elements within the paragraph with “colored” id attribute.

Result:
blue-css-example

2.Properties

Now that we know how a selector looks like let’s see what is a CSS property. CSS properties defines how the styles should look on the Web page or elsewhere.

Examples: margin, padding, color, border, background etc.

In this example, the h1 element has three properties: color, font-family and margin. These properties with theirs values defines how the h1 element will look.

h1{
  color: red;
  font-family: Verdana;
  margin: 10px 0;
}

Conclusion

Using the selectors properly you will not only have a cleaner markup but you will also have a more beautiful CSS code.

Posted by: Dhiraj kumar