#multipleBG {

}

Browser Support:
FireFox 3.6 and later, Google Chrome 1.0, Opera 9.6, Safari 3.2.1

EXAMPLE

Twitter, Facebook, Linkedin, Orkut and numerous other services that is rocking the web, and leading the information bandwagon from front, are all kids of this concept. Today, the web is not confined to the desktops / workstations and you need not be glued to your monitor to be on track with your friends’ updates, you can meet-up with your friends on the move via a ‘TWEET’. Blogs, Microblogs, Social Networking – they all have just invaded the information highway.

Just when we were left thinking, whether we are making use of the complete potential of the worldwide network, here comes the concept of Web 3.0! With the mushrooming of data, there is an obvious and definitive need for a more precise segregation and organization of content as there is an incredible amount of information lurking on the web, shouting for attention.

Thanks to the search god – GOOGLE – for some innovative ways to bring the content to common user. Recently google exposed some semantic data in its search results in the form of some straight forward answers – refer to http://www.readwriteweb.com/archives/google_semantic_data.php. The evolution of this search giant can really be an inspiration after they introduced the new ‘Search Options and Rich Snippets’. They are significantly making use of the structured data open standards like Micro Formats and RDF to power the rich snippet feature. As a result they are showing some meaningful results, than just the preview text that used to be displayed earlier. Now the user can have the luxury of having more context driven results on ‘googling’.

The defining factor / strategy for the new web – WEB 3.0, would be the ability to create data that are ‘machine readable’. In this way it would be possible to organize and comprehend the vast ocean of information into a more meaningful and usable one, thereby putting the user in the driver’s seat. A very easy way to understand this concept would be to imagine how it feels, when you are able to find out the nearby theatre which shows your favorite movie during your leisure time. Awesome isn’t it ? These are just some bi-products of a more semantic and structured web, and the real scope of this relatively nascent concept is really incredible !

Here are some strict ‘NO’s while coding your CSS. ( A quality code not only cements your standard-adherance, but it also gives the extra scalability and reduces those late-night coding horrors :P )

No ‘!important’

In CSS, the “!important” suffix was originally intended to provide a method of overriding author stylesheets. Users could define their own “user stylesheets” and could use this suffix to give their rules precedence over the author’s (website creator’s) styles. Unfortunately, and quite predictably, its usage has spread massively, but not in the right direction. Usage of this suffix could mean that, you are not using the ’selector specificity’ smartly enough.

Avoid ‘@import’

‘@import’, can be very handy when dealing with a project where there are a lot of CSS files depending on various modules. While this is very useful in organizing modular CSS, there are many downsides too associated with it. Importing stylesheets can significantly screw up your site download time and there are various instances where you can end up in some weird situations while using it. ‘Steven souders’ – a noted web performance guru has comprehensively noted down the effects of using ‘@import’ – http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

No ‘expressions’

CSS expressions are great to implement dynamic property implementation using javascript expressions inside CSS . As this is supported from IE5, we can smartly code an expression for IE family, since it is ignored by other browsers.  Since these  expressions are triggered more times that we normally expect them to …. this generates a lot of HTTP requests which in turn would slow down the website / page performance. There are other alternatives though for not completely avoiding expressions from your CSS. This is by using a one-time expression that sets the CSS value explicitly.

Inline Codes

The dirtiest way to code a beautiful XHTML page – including inline styles into the tags ! Finding a single inline code in your page can question the credibility of your web standard compatibility. So walk tat xtra mile and get rid of those ugly little ’style’ tags.

Design based selector names

I have been through various stages of CSS skill levels, and walking back a couple of years, i normally ended up coming up with some really interesting names for my selectors. Let me list some of them :)

• .padding50px
• .border3right
• .redbg
• .height300px
• .gotohell :P

Naming conventions / practices can reveal the standard of coder in you. CSS is meant to seperate the Content and Presentation, and the red background that your visual design had given can change to a yellow one, 2 years down the line. Keeping scalability in mind while developing an optimal CSS framework is the attribute of a smart web developer. Find some names that are related to the element based on an overall architecture of the page. For eg. ‘.redBg’, can be given ‘.note’, where it represents a text which can be  a note to the reader … Chose the names smartly and the next time someone sees your code, the standard will talk volumes of your efficiency.

Comments

Adding comments to your code as you go on coding is a great attribute never to be given away. Comprehensive and ‘to the point’ commenting can really be a turning point in some critical changes when some one else would be required to make some quick changes to the style you have coded. ‘Scalability’ – is again the keyword here  !

There are numerous other best practices in coding a stylesheet and adhering to the above points would mean that you have got a strong framework to start with a colorful career in web development :)

Having originated for different reasons, each of these are slowly changing the face of the worldwideweb, together, for a noble cause – Web Standards! Just like the 5 elements of life, now it is possible to define the 3 elements of scalable UI design – ‘Content’ ‘Presentation’ & ‘Behaviour’. ‘Content’ – gracefully degraded by semantic HTML/XHTML, ‘Presentation’ – smartly rendered by an optimized Cascading Style Sheet, ‘Behaviour’ – brought to life by unobtrusive Javascript !

Each of these topics are as vast as the worldwideweb itself, and each minute, a new way of doing things is discovered and re-discovered. The pace at which the network is growing, poses a great challenge for those preachers and soldiers guarding the universal standard of web, and the challenge lies in flourishing the awareness of standards among the community and to build a standard compliant world. Everyday a new page with some dirty inline styles / semantically wrong html tag finds its place on the web and this adds to the vicious cycle of design – undesign – redesign. But whatever be the cause of a wrongly coded page / site on web, these 3 dashing kids of UI design are here to stay and to win the heart of all.

Lets vow towards a better web for tomorrow and for god’s sake, lets walk that extra mile to make that complex XHTML structure a semantic one ;)

REFERENCE

http://www.w3.org/TR/REC-html40/interact/forms.html#adef-accesskey

SYNTAX

Access keys can be implemented, by including the keyword <accesskey = character > within the tag, where the character will be a single character from the document set.

Eg.

<FORM action=”…” method=”post”>
<P>
<LABEL for=”fuser” accesskey=”U”> User Name </LABEL>
<INPUT type=”text” name=”user” id=”fuser”>
</P>
</FORM>

This would implement the accesskey for the label, and enables the user to navigate to the corresponding textbox, by pressing ‘browser-specific key’ + ‘U’. This means there are some browser keys/Key combinations, that needs to be pressed before the character mentioned in the accesskey tag, inorder to activate the element.

Here are some keys for accesskey activation in various common browsers

IE – ‘Alt’ + ‘character’
FF – ‘Shift+ Alt’ + ‘character’

HOW IT WORKS ?

Pressing an access key assigned to an element gives focus to the element. The action that occurs when an element receives focus depends on the element. For example, when a user activates a link defined by the A element, the user agent generally follows the link. When a user activates a radio button, the user agent changes the value of the radio button. When the user activates a text field, it allows input, etc.

BROWSER SUPPORT

Again there are some differences in the way ‘accesskey’ works in various browsers.

• In IE, using the access key typically only gives focus to the element. If the element is a link, it is not followed. The user can thus move to a link (e.g., in order to proceed by tabbing then), as separately from following it, which can be activating by hitting the Enter key when the focus is on the link. The implementation of accesskeys on IE is not very consistent. For example, using an accesskey for a checkbox does not just focus on it but also toggles its setting.

• FF follows the link, when accesskey is specified in an anchor tag.
• Opera doesn’t support access keys
• Netscape follows a link when an access key is used
• On Netscape 6, the support is similar. Using an access key to select a link causes the link to be followed. And it seems that access keys are not supported for form buttons
• In IE on the Mac platform, access key is performed with the control key, in combination with the key specified in the accesskey attribute. For links, the implementation follows the link rather than just setting focus on it.

MORE RESOURCES

http://juicystudio.com/article/firefox2-accesskeys.php
http://www.cs.tut.fi/~jkorpela/forms/accesskey.html

more

Cascading Style Sheets (CSS) are the modern standard for website presentation. When combined with structural markup language like HTML, XHTML, or XML (though not limited to these), CSS provide Internet browsers with the information that enables them to present all the  visual aspects and elements of a web document. CSS apply things like borders, spacing between paragraphs, margins, headings on images, control of font faces or colors, background colors and images, textual effects like underlined or strike-through text, layering, positioning, and a number of other presentational effects. CSS controls the presentational aspects of a web page’s design, whereas HTML, XHTML, or XML control the
 structure of a webpage, which means more than determining that certain text is a heading, other text is a paragraph, other text os a list of hyperlinks, and so on.

 By using modern standards like CSS and XHTML, you can dramatically reduce the cost of building and maintaining a website when compared to legacy HTML-only pages. You can also greatly reduce the amount of physical bandwidth and hard disk space required, resulting in immediate long-term benefits for any webmasters and web visitor

CSS TUTORIAL

 Cascading Style Sheets, commonly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable. Put simply, CSS handles the look and feel part of a web page or a whole website. With CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, as well as a variery of other effects and styles explained here.

The term cascading in Cascading Style Sheets refers to a specific way in which browsers determine which styles to apply to a specific part of the page. This method is called “the cascade”, and it’s from the cascade that CSS takes its name.

I like the way all properties were easy to reach before. I will add a list of each one of them to the side menu very soon.

Also, Ive noticed I should have made each one of the properties a “page” and not a “post”. Is there a way to easily change that on wp? 

Any comments?