

CSS Techniques I Wish I Knew When I Started Designing Websites  - prakash
http://www.noupe.com/css/css-techniques-i-wish-i-knew-when-i-started-designing-websites.html

======
dpcan
The one bit of CSS I wish I had learned early on:

html {

overflow-y: scroll;

}

This puts the scroll bar on the right of the page regardless of whether or not
the page needs to scroll.

I hate watching my page bump 20px to the left just because I went from a page
that didn't scroll to a page that did.

------
Semiapies
Another trick I've seen that I wish I'd come across long ago - a particular
use of IE conditional comments to avoid having to break out IE CSS fixes into
different style sheets:

    
    
        <!--[if IE 6]><body class="ie ie6"><![endif]--><!--[if IE 7]><body class="ie ie7"><![endif]--><!--[if !IE]>--><body><!--<![endif]-->
    

This applies "ie" and version-specific classes to the body tag in IE browsers.
Therefore, if something about a button tag doesn't look right in IE in
general, I can use the ".ie button" selector to apply a fix right below my
button styling. If it's just IE 6 giving me grief, I can use the ".ie6 button"
selector.

~~~
somecanuck
Brilliant!

------
angelbob
Whoah. CSS Reset Styles make perfect sense, and I can totally see why people
use them... And yet, I'd never thought of that, and certainly never seen the
nice comprehensive one he posted (no, not the one-liner :-)

Apparently I need to start doing that. Like, yesterday.

~~~
robin_reala
They don’t really. If you’re browser checking your build then you should
uncover any inconsistencies that your actual stylesheet hasn’t covered. Once
you’ve fixed those then you have no need for the reset stylesheet in the first
place.

~~~
angelbob
Hm. I'm dubious about "testing will find all the problems" as a solution here.
Isn't that a little like saying "you need to check JavaScript in all browsers
anyway, so why use a compatibility library?"

~~~
robin_reala
The compatibility issues between JS implementations in browsers are much worse
than between CSS implementations. Besides, most JS libraries add additional
functionality. There is one library that just tries to normalise a base set of
JS across browsers (Dean Edward’s Base2) but no-one uses it.

------
samdk
I generally recommend HTML Dog (<http://htmldog.com/>) to people learning HTML
and CSS. It's fairly comprehensive (from what I remember it covers just about
everything mentioned in the article), teaches good practices, and has helpful
examples.

~~~
ilovecomputers
After learning HTML and CSS, a good followup book to recommend is Designing
with Web Standards by J. Zeldman (<http://www.zeldman.com/dwws/>). Even though
it's written for individuals who are designers or are serious about web
design, it has many helpful tips and information such as the box model that
the OP discussed.

------
nopassrecover
Incidentally there is incorrectly styled example code in this post that breaks
out of the bounds of the page.

~~~
lisper
Which is further evidence that CSS _still_ should not be used for layout.

<http://www.flownet.com/ron/css-rant.html>

(How do you do links in HN comments? Markdown syntax doesn't seem to work.)

~~~
isleyaardvark
I prefer this rant: [http://meyerweb.com/eric/thoughts/2009/02/17/wanted-
layout-s...](http://meyerweb.com/eric/thoughts/2009/02/17/wanted-layout-
system/)

CSS still has the advantage over tables of better separating content from
presentation. A big problem with CSS is it's still awkward to deal with
layout, so it's somewhat understandable some people just prefer to give up and
use tables.

~~~
lisper
That is indeed a better rant :-)

------
rapind
FYI you linked to blueprint CSS as "Google BluePrint CSS & Resets". Blueprint
CSS is not _by Google_ , it was just hosted on Google Code like many other
open source projects. See <http://www.blueprintcss.org/>

------
Semiapies
Something not mentioned that Eric Meyers and others have noticed about his CSS
reset script - style your a:focus, which it completely hides. Without a:focus
styling, someone using the keyboard can't tell what link s/he's tabbed to.

------
Vindexus
One way I get around the box model problem is to add a .padding div to the
inside of an object and apply any padding to that. It adds an extra div which
some people don't like, but I don't mind and it beats dealing with box model
weirdness.

html:

<div class="300pixelbox"> <div class="padding"> This is 300 pixels wide and
has 10px padding. </div> </div>

style:

.300pixelbox { width: 300px; }

.300pixelbox .padding { padding: 10px; }

