The new website looks more attractive and organized. 10 minutes tour of new website can be found here. In contrast with the previous version, this new website uses rich content presentation, including JavaScript.

The website uses jQuery 1.3.2, a very known and popular JavaScript library, instead of pure JavaScript. This is very good news and a big leap towards streamlining the use of JavaScript frameworks, specially in case of jQuery. In addition of core jQuery framework, beta.w3.org also uses jQuery plugins (e.g.: http://malsup.com/jquery/cycle/), to enhance the user experience.

The biggest news of the day is w3.org beta website doesn’t render correctly in IE6. It’s supposed to be a strong argument for web developers in order to inspire and take initiative towards to stop exclusive coding to render their websites correctly in IE6.

:

All CSS developers know this fact there are verity of CSS selectors, CSS rules can be applied by using any one or combination of available selectors. We can apply CSS rules by inline CSS as value of style attribute of HTML tags or internal CSS by using style tag, or we can go for external style sheet. Inline CSS is bad and must be avoided. Inline style declarations should be limited to for some run time CSS manipulation only.

In summery using external CSS is preferred way, Its success depends on use of inline or internal CSS, since in effectiveness of application of CSS rules hierarchy, inline CSS is topmost level after that comes internal CSS and external CSS comes bellow them.

Same way ‘id’ is above ‘class’ in hierarchy of effectiveness of CSS selectors. Id can’t be used more than once in a page (its preferred to use one id for same element throughout application not only withing page).

Rigid element’s CSS should be served by using ‘id’ CSS selectors, which will be used only once e.g. header, footer etc. Elements with dynamic nature having shared or inherited property with possible multiple occurrence need fetch CSS rules by ‘class’ selectors.

Use of ‘tag’ selectors can be decided by doing some research on default look and feel of elements of application. psudo CSS selectors can be used if backward compatibility with older browsers not needed.

Inheritance playes a great role in  in this that’s why planning is uttermost important. we should always keep in mind we are just contributing in development of some application which might have multiple developers hence coding must stick to requirements and standards of application so any one can understand and edit code of each other.

Modular CSS needs to be developed and all inherited properties needs to commented within CSS declaration so one don’t repeat same CSS again and selectors needs to named by some naming convention (e.g. prefixing every declaration by module).

Modules needs to be devised in such way so it remain plug and play if plugged in different application.

Resources

:

• Make your markup clean
• Don’t fear to java script RIA is future. Jquery might be good place to start (and possibly end of search).
• Keep a tab on latest, fresh and trust worthy tips, tricks, trends, news etc related to web development.
• Get benefit and give benefit by being active part of revolution in web development. Join the wiki maintained by web developers for web developer from Google.
• Know more about standards, stick to them and force them upon you, make web development your passion and web standards your religion.

Here I am with second part of 3-part CSS primer.

In my previous post, I briefly described importance of planning and resetting CSS, some possible ‘Do’s and ‘Don’t’ s. I believe in outlining thing and let your mind fly in free space. My outline for CSS primer can be visualized by connecting following dots.

Object Oriented approach:

Adopting object-oriented philosophy is always beneficial for development…and CSS is no exception. How? I tell you. Object oriented approach in terms of CSS translates as knowing and taking advantage of parent-child relation in DOM and inheriting CSS rules, by designing CSS optimized way, less repeated and multiple times used code indicates more object oriented CSS.

Progressive Enhancement AKA Graceful degradation:

There is a term progressive enhancement, that is “incremental addition of elements”. Which means we should categorize content and content containers, parametrized by accessibility of content, covering target audience.

We should first care about, any content should not be missing which our target audience must get, by keeping in mind what would be possible access terminal for navigating the web page. e.g. PC, PDA etc. It includes low configured and not up to date browsers. Afterward one can enhance page by adding CSS and Javascript cylinders.

Categorization, flexibility and re-usability:

By thinking this way we can get mostly auto categorized content. From here we can start implementing re-usability. We can aaply progressive enhancement with CSS by dividing one big-fat-utf8 CSS into multiple CSS files. e.g. IE specific CSS and print CSS and also CSS responsible for particulars like color and typography css.

If project demands we can keep ‘themes’ too in mind. CSSZenGarden is extreme example of this. To implement this we should deeply think about DOM structure, basic skeleton X/HTML and naming of class/ids. naming of class/id should be content dependent, not on how its going to render or where its going to positioned.

Always try to minimize the unnecessary  tags. e.g. wrapping everything in a div or adding extra wrappers for display purpose only. I suggest to add extra divs to stylize things by Javascript in run time, e.g. rounded corners, or multiple background images, or its not always required to wrap ul and set of inks or img tags into any box level container like div…since CSS rules can be applied on any X/HTML element.

Use multiple class and loosely coupled classes massively.  Multiple classes help to increase re-usability.

example:
<span class="block fs20">Multiple class</span>

use of ‘!important’ keyword is very useful in case of using multiple class, where we might need to override few css rules. but ‘!important’ should be used carefully. Personally I prefer to use ‘!important’ with loosely coupled classes declared against inherited property.
e.g.: following will always work disregarding its position in CSS file against inherited bold property of font.

font-weight:normal !important;

Code Management:

Organize your code in properly commented grouped sections…e.g. header, body, navigation, footer etc.

here we know the importance of neutral class names. If naming of CSS classes will be accoring common template not according page wise us its easy to group related CSS.

example:

What if we name common right panel of web page ‘homecol’ without thinking too much? either we have to rename it on every page its appearing and duplicating same css to render it identicaly, or we have to use ‘homecol’ even in contact page.

After all…

Always try to understand any rendering issue, before throwing some random code to increase vertical length of your CSS file. Every browser supports CSS (If I am not wrong 90% identically) if application of CSS is pure and CSS rules are plugged in right socket. So think twice before re-searching on Google for some hacks to override something which might fill dirt on your accessible web page. Ya of course there are many of known bugs (e.g. IE6 PNG) but id doesn’t mean every issue, you are facing is a bug and you can’t overcome them until import some hack from Venus.

The last word before I end this second post from 3 part series on CSS, I want to say is…

Not every validated web page is accessible or ideal but every invalid web page is bad. So always try to validate. First by validating from validators and then by common sense, because technically a page with thousands of nested DIVs are valid. button stimulated out of div is valid. But question is… Is it really?

Think on it, till I am cooking third post CSS Go

In order to extract maximum pulp from CSS fruit there are few things needs to keep in mind. Although rule of thumb is efficiency is directly proportional to experience but I’ll point out few options 3-part post series See, Yes! Yes! – READY,  See, Yes! Yes! – STEADY and See, Yes! Yes! – GO. which can help novice CSS developers to take right diversions.

All of following points are optional and one can modify them according to needs and/or simply drop the idea.

Big Picture:

Planning is a must for mid or big projects…for small projects one can instantly start coding.

While coding for new design, web designer must analyze the design mock-up and slice the design by keeping in mind the facts which are resultant of observation and guideline of website/blog/web application.

e.g.

• What portion of design mock can be translated by using CSS rules instead of image?
• Whether background is repeating? Design is fixed width or liquid?
• What element of design is going to change dimension dynamically?
• Re-usability issues needs to be addressed so back-end developer (if any) don’t face any difficulty to plug reusable components.
• Sliced images need to save as optimized for  web, as PNG if element is using alpha transparency and if it uses square shape without tranparency JPG images work better in most cases.

CSS Reset:

Purpose of using CSS Reset is to neutralize default rendering of browser, in order to equalize rendering of web page across different browsers.

Its entirly optional for web developers whether to use one or not. Even if Web Designer is very keen to use one, s/he must consider the big picture where the CSS is going to be used (including some future prediction).

In few cases i prefer not to use CSS reset as in Blogs where content is generated by user and web designer don’t have exact control over X/HTML tags.
Following is my reset.css. I have cooked this starter dish by borrowing some spices from here and few from experience.

/* Common CSS and CSS reset Start */
html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
vertical-align: baseline;
font-family: inherit;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/*links*/
a{
text-decoration:none;
}
a:hover{
text-decoration:none;
}
/*List*/
ol, ul {
list-style: none;
}
/* tables still need cellspacing="0" in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
font-weight: normal;
text-align: left;
}
/* Common Display Rules*/
.block{
display:block;
}
.none{
display:none;
}
.inline{
display:inline;
}
.clear{
clear:both;
}
.relative{
position:relative;
}
.absolute{
position:absolute;
}
.floatleft{
float:left;
}
.floatright{
float:right;
}
.center_div{
margin:0 auto;
}
.bold{
font-weight:700;
}
.normal{
font-weight:normal !important;
}
.underline, .underline:hover{
text-decoration:underline;
}
/* Headings*/
h1, h2, h3, h4, h5, h6{
font-family:Arial, HelveticaNeue, Helvetica, sans-serif;
font-weight:700;
}
h1{
font-size:18px;
}
h2{
font-size:17px;
}
h3{
font-size:16px;
}
h4{
font-size:14px;
}
h5{
font-size:15px;
}
h6{
font-size:13px;
}
/* Font Size */
.fs8{
font-size:8px;
}
.fs9{
font-size:9px;
}
.fs10{
font-size:10px;
}
.fs11{
font-size:11px;
}
.fs12{
font-size:12px;
}
.fs13{
font-size:13px;
}
.fs14{
font-size:14px;
}
.fs15{
font-size:15px;
}
.fs16{
font-size:16px;
}
.fs17{
font-size:17px;
}
.fs18{
font-size:18px;
}
.fs19{
font-size:19px;
}
.fs20{
font-size:20px;
}
.fs21{
font-size:21px;
}
.fs22{
font-size:22px;
}
.fs23{
font-size:23px;
}
.fs24{
font-size:24px;
}
.fs25{
font-size:25px;
}
.fs26{
font-size:26px;
}
.fs27{
font-size:27px;
}
.fs28{
font-size:28px;
}
.fs29{
font-size:29px;
}
.fs30{
font-size:30px;
}
/* Remove Inherited Style*/
.no_margin{
margin:0 !important;
}
.no_padding{
padding:0 !important;
}
.no_border{
border:none !important;
}
.no_dec{
text-decoration:none !important;
}
/* Common CSS and CSS reset End */

Hmm…I think its a good breakfast.

So guys allow me to take a break…I’ll be digging further into CSS mine very soon on my next post See, Yes! Yes! – STEADY .