2 Useful CSS tips

"Don't look for water when something burns, just don't play with fire" - My Mom.

Preventing bugs before they happen, that's the key.
If you don’t prevent bug, they will start a snow ball that will force you on and on with ridiculous patch-work and what i basically call the "fire extinguishing loop", there will be a lot of them interacting with each other, making it difficult to figure out what’s what, and were it all began from.
The majority of bugs reside in JS differences between browsers and CSS and DOM interpretation, so i'll try to specify some methods and techniques we use here at my company, who make our lives a lot more easier.

CSS Resets

asterisk CSS selector:

* {margin: 0; padding: 0;}

But, it's too rough. Using this technique cause my forms to get messy and got me upset since i had to define every single padding and margin specification.
ince then, I’ve been using the popular CSS reset by Eric Meyer, which collects a set of such reset attributes, for several common HTML tags.
Of course i had to tweak it to fully match my needs, but still , it's a must-have baseline for cross browser CSS development.

Clearing floats

IE6 does not like floats too much, IE8RC1 is not a big fan either, especially when those floats are not clear.
Uncleared floats are often the cause of major bugs. however, it’s a bug that is easy to fix.
Setting an HR element with width of %1 and setting it to clear:both, will solve the problem.
<div id="container">
  <div class="floater">
    floating.
  </div>
  <div class="floater">
    floating.
  </div>
  <hr class="clear"/>
</div>
<span>I am below!!</span>

and the CSS:
#container{
}
.floater{float:left, width:60px; margin:6px; padding:6px; border:2px solid #888;}
hr.clear{clear:both;width:1%;}


ther clear:both definition orders the HR element to go down one line if the is any other element on it's left or on it's right, read more on the clear CSS attribute.

CSS Frameworks Tutorials and getting started guides

First thing, it helps.
Exactly the same as in Server side languages and client side languages, frameworks are a great improvement (in most cases) to a regular off the board development.
There are a lot of CSS frameworks these days, Noupe guide to CSS framework gathers the best of the guides and tutorials for each of the major frameworks.
I personally tried to use several of them and i guess the 960 CSS framework proven to be the easiest to handle (for me, and i usually don't do CSS).

CSS Sprites: onilne sprite generator

The CSS sprites technique is basically a technique that reduces the CSS requests when dealing with background images.
Example: Lets say you have 2 selectors in your CSS,

div#first
{
  background: url(first_bg.png);
}  

div#second
{
  background: url(second_bg.png);
}

when loading your CSS file will preform 2 requests, one for each image you specified as background, so when dealing with a complete design, you are probably talking about 40-50+ image requests as such.

CSS sprites solves this problem by loading only one image, that contains all the images you will use on your site within, and displaying the correct image by playing with a combination of a background offset (background-position CSS attribute) and the size of the element.
This technique can be very effective for improving site performance, particularly in situations where many small images, such as menu icons, are used. The Yahoo! home page, for example, employs the technique for exactly this.
Examples and full explanation can be found here at the CSS Tricks.com - CSS Sprites: HowTo or here at the List Apart: Image Slicing's kiss of death article.

Today, i found a Sprite image generator that actually generates this Sprite image file from a zip file you upload and containing all the images, and produces the image as said before, but also the output CSS statements.
very useful.

Which fonts are the best for web usage?

A great article from sitepoint, about 8 definitive web font stacks for a better and cleaner web typography .

Printer Friendly Pages

CSS is a great new tool for web designers. Now it is more widely supported, and browser-makers are sticking to the
W3C standards, we can begin to explore the possibilities it has offered us since the 90s but that we could not make
use of.
CSS allows you to separate your design from your markup, making maintenance infinitely easier, and your site more
likely to work in different devices, both of which are definite pluses. It also, however, allows you to tell a page to
display a different way depending upon what device is being used to render it.
This is achieved using the "media" attribute of the "<link>" or "<style>" tags, like so:
There are several media types available to you - all, aural, braille, handheld, print, projection, screen, tty, tv - and a
list of available media types with more detail is available from W3C (where you can find out more about media
groups, as well).
With such a range of options, you can, if you like, create one HTML document that will display exactly as you like
depending entirely upon which device is being used to view it. You can hide large images from PDAs, you can specify
seperate font styling for overhead projectors - you can write your site so that it works well with the technology at the <link media="screen" href="style.css" type="text/css">
<style media="screen" type="text/css">
user's disposal. And one very useful side effect of this is that you can specify an entire print style without the need
for copies of every page of your content, like the following, that will use the "normal.css" style sheet for screens, and
the "printer.css" style sheet when printing.

 <link media="screen" href="normal.css" type="text/css"> 
 <link media="print" href="printer.css" type="text/css">

For print styling, there are a lot of factors to consider. Are many users going to want to print out your header? No.
But do you want your logo on the page? Yes. Is the navigation worth printing? No. Each item on a web page serves a
purpose, and on paper, that may not be worth much.
It is best, then, to start at the beginning. With an unstyled HTML document. Pick a page to start working on, and
remove all styles from it. With an unformatted page in front of you, it should be pretty easy to see what needs styling
and how, but don't rush in. There's a lot to think about.

FONTS
Fonts are very different on the web to print. Sans-serif fonts are, allegedly, the best to use on the web. Serif fonts
are, apparently, better on paper. So first things first, set your font to a serif font you like (personally, I like Georgia
for Windows). As with picking all fonts, make sure you provide alternatives for those without the first-choice font.
Font sizing is a bit different on paper too. It's usually best just to leave this to the default, but if you want to specify a
font, make sure you run plenty of tests to make sure it's easily legible.

* { 
    font-family: Georgia, "Times New Roman", Times, serif; 
    font-size: 12pt; 
} 

LINKS
Links are not going to be a lot of use on paper, by their very nature. But that does not make them useless.

a { 
    color:#000000; 
    text-decoration: underline; 
} 
 
a:after { 
    content: " ( "attr(href)" )";
}

The above, if added to a printer style sheet, will make all links black and underlined, and add the address of the link
in brackets afterwards, meaning that if a user did want to visit any site linked to from that page at a later date, they
can.

SPACING
In print, margins and spacings are as important as with the web. There is no harm in adding in a little space
between words and lines, and a decent gap around the edges, if it will make a print-version easier to read.

HIDE USELESS STUFF
You can hide elements in this style sheet easily enough, using display none. This will save some space on the paper,
and reduce useless junk on the page, something the user will be very grateful for. Elements worth hiding are usually
form elements, some images, marquees, and flash content. If you are unsure, print the page and then work through
that page deciding what is useful and what is not.

body { 
    padding: 10%; 
    line-height: 1.2; 
    word-spacing: 1px; 
} 

COLORS
Print colors will show up very differently to screen colors, especially as a high proportion still have black and
white printers. Even those who don't will be grateful to you if you keep the proportion of color to a minimum,
simply because of the expense.
Highlight and emphasize things using italics, underlining, boldness and size in your print style sheet. Remove all references to colors where you can, save to set colors to black.

PAGE ADDRESS
You may want to add the address of the page itself to the page, and hide it, except when the page is printed, so that
the user can return to your page later if they wish.

TELL THE USER
A user may see a page without a "printer friendly" link and print anyway, but they may be put off. Try and add a note
to your page explaining that the page they are now viewing is printer friendly, and encouraging them to print it.

CSS Graphs Helper for Ruby on Rails

source: http://nubyonrails.com/pages/css_graphs
A Ruby on Rails helper for making simple graphs. The graphs use only CSS/HTML (and an optional gradient image).
Vertical bar graphs, horizontal bar graphs, and complex bar graphs with an image marker.



Install:

./script/plugin install http://topfunky.net/svn/plugins/css_graphs

Generate:

# No arguments are needed
./script/generate css_graphs

Examples:



Find out more on the source @ Nuby on Rails

Is Web2.0 ever going to arrive in Israel

Ok, so the title is a little bit harsh, there are some great sites being done here in Israel, but there are some things i just can't understand.

walla.co.il is one of the biggest sites in Israel, huge traffic and many many services to the regular israeli web-surfer. One of these services is Walla's webmail, which gives you a 5gb free mailbox.

but, and there is a huge but... take a look how my compose page looks like. nothing more to add.
although it's in hebrew, nobody including a native hebrew speaker can't understand what the h**l the layout is all about.