cssvault - inspiring creativity

Zebra striping—also known as candy striping or half-shadow—is the application of faint shading to alternate lines or rows in data tables or forms. Examples of websites that use zebra striping include the currency site XE, the CIA World Factbook, and Monster.com. Zebra striping on the web is actually a carryover from print days: one of the first mentions of the technique appeared in 1961 [1]. Unfortunately according to this article on A List Apart, there really is no proof which demonstrates zebra striping as having a large, significant benefit over the other.

CSS Globe has come up with a list of Do’s and Dont’s of CSS. This series’ part 1 covers the Do’s and Dont’s of CSS Selection, summed up as:

Summary

Do

• When choosing use class names, use class names that describe content’s meaning or purpose, not it’s appearance.
• Use few class names and use them on various elements.
• Use type selectors to (re)set default styling. If you wish, use proper reset techniques (mentioned above).
• Use multiple class names on single element to optimize your css.
• Use combined selectors and precisely target your element

Don’t

• Don’t use descriptive class names like "red", "blueDot" etc.
• Don’t use complicated class names or id’s like "sideIntroSecondaryContentTop". Use descendant selectors instead.
• Don’t use universal selector for resetting entire document.
• Don’t use browser dependent selectors.
• Don’t add unnecessary class names.

Check out the full article.

I have been receiving a couple of inquiries on how to create do CSS forms so let me direct you to Jeff Howden’s two year old CSS-Only, Table-less Forms article. Yes you heard me right folks: two years old! Yet it still displays properly on the newest browsers, which only shows how resilient the code is.

By now you must be wondering about the “almost perfect” part in the title. This is simply because the CSS code does not validate. The culprit? Of course, it’s IE again, with the JavaScript-in-CSS expression() hack.

Oh, and if you have questions or suggestions for articles, you may reach me via dennison [at] cssvault dot com

Have fun!

jQuery happens to be my favorite JavaScript framework, so I was very happy when Noupe came up with a list of 50+ Amazing Jquery Examples. The article has “Part 1″ attached to it so expect to see more. The list ranges from useful to awesome to just cool, such as the following:

• Date Picker - a flexible unobtrusive calendar component for jQuery
• Style Switcher - allows your visitors to choose which stylesheet they would like to view your site with. It uses cookies so that when they return to the site or visit a different page they still get their chosen stylesheet
• Table Sorter - turns your standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes
• Form Validation
• Image Galleries
• and more …

CSS guru Eric Meyer has spent some time rethinking CSS reset and has come up with a new stylesheet:


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}


This will probably change but for those who are looking for a good, understandable CSS reset, this is a good start.

I personally am not a big fan of frameworks, but if you work with a team enforcing frameworks is a good way of getting things done consistently and getting everyone up to par when it comes to CSS standards. This article highlights the pros and cons of using frameworks, and is a good reference for the top CSS frameworks available on the net.

After searching the web for a CSS Cheat Sheet to give to her students, Dawn eventually decided to come up with her own. The thing I like about this one is that it is stripped down to the very basics. Unlike other cheat sheets I’ve seen that may be a bit overwhelming for beginners, this one does not try to answer all questions, but covers enough ground to launch one into the world of CSS.

It comes with both an online version and a printable version. Take your pick.

Taken from DrunkenFist.com: Basically inline-block does what it sounds like it does. It’s an inline element (it’s displayed within a containing block and flows in the same line) that behaves like a block (which in practical terms means it can have explicit height, width, padding and margins, etc.)

Display: inline-block is the bee’s knees. CSS 2.1

Devlounge has compiled a good list of 30 high quality fonts, both free and premium. It’s a very good list, though it is composed mostly of seriff fonts.

Smashing Magazine has a huge list of 53 CSS Techniques ranging from simple image replacement to PHP style switchers and vertical centering. Essential for those who are just getting started with CSS. CSS gurus should find this to be a handy reference as well.