CSS Techniques I Wish I Knew When I Started Designing Websites

http://www.noupe.com/css/css-techniques-i-wish-i-knew-when-i-started-designing-websites.html

by prakash • 17 years ago

146 46 17 years ago

noupe.com

nopassrecover5• 17 years ago

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

lisper4• 17 years ago

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.)

edd• 17 years ago

You write a url with a http:// and it will turn it in to a link for you. See the formatting document[1] for all the formatting available to you.

[1] http://news.ycombinator.com/formatdoc

isleyaardvark• 17 years ago

I prefer this rant: http://meyerweb.com/eric/thoughts/2009/02/17/wanted-layout-s...

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.

rimantas3• 17 years ago

Only if you do not know CSS or do not know the capabilities of modern browsers. But in this case you should be not writing HTML or CSS at all.

GHFigs• 17 years ago

And your rant is still misinformed, one-sided, and extremely overreaching in its conclusions.

walkon• 17 years ago

For me it is easier to understand that line without it wrapping.

nopassrecover5• 17 years ago

Perhaps but it's visually incorrect. If readability was the primary concern then the extending line should have a background, ideally in a way that fits the design (say having the appearance of a tab on the side of a notebook).

josefresco2• 17 years ago

Die troll die.

Seriously that's the lamest sort of reply we see here on Hacker News. Sniping other peoples work is low (this isn't Slashdot).

nopassrecover5• 17 years ago

When your post is about your expertise in CSS you better be demonstrating expertise in CSS.

While we're on the subject of adding little value, the impression I got from the article was that this was yet another Top-10 style compilation of commonsense that you could find on other sites like A List Apart. Instead, I would prefer to read more about the OP's actual experiences and growth, i.e. something unique and original.

There is nothing troll-like about criticism, particularly when an improvement is suggested. Instead, I would look towards yourself and your "Slashdot" witch-cry.

RevRal• 17 years ago

I own a coffee mug with a similar problem !

http://www.zazzle.com/css_is_awesome_mug-168716435071981928

nopassrecover5• 17 years ago

Hahaha love it!

samdk• 17 years ago

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• 17 years ago

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.

angelbob2• 17 years ago

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_reala6• 17 years ago

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.

euroclydon• 17 years ago

I guess you're correct, but it just feels better to me knowing I'm working from a clean slate, then accepting whatever padding, line spacing, font size, and margins that browser though would look nice.

I found that my CSS skills really improved when I added a style reset and was forced to contemplate all the styles which were previously given to me without consideration by the browser.

adamhowell• 17 years ago

Different browsers have different defaults for things like checkbox padding & margin, line-height, etc.

A reset stylesheeet gets rid of those. I don't start a site w/o one.

angelbob2• 17 years ago

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?"

abossy• 17 years ago

Quickly loading up Google Analytics shows me that visitors to my site have used 9 browsers (excluding version #), 6 OSes, and 41 screen resolutions in the past month. The time it takes to cover that matrix of viewing combinations simply isn't worth the investment and hence a reset sheet should save you a lot of time.

Semiapies3• 17 years ago

I wouldn't worry about it for existing sites, but it's a good start for the CSS in a new site.

EDIT: or full overhaul of an existing site.

rapind• 17 years ago

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/

dpcan• 17 years ago

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.

Semiapies3• 17 years ago

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.

Semiapies3• 17 years ago

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• 17 years ago

Brilliant!

Vindexus• 17 years ago

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; }

CSS Techniques I Wish I Knew When I Started Designing Websites

Related Stories