CSS Techniques I Wish I Knew When I Started Designing Websites(noupe.com)
noupe.com
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
9 comments
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]-->
Brilliant!
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.
Apparently I need to start doing that. Like, yesterday.
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.
EDIT: or full overhaul of an existing site.
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.
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?"
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.
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.
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.
That’s a fair point, they are useful as a learning aid. It’s just important to bear in mind that not only are reset stylesheets not required in the long run but they’re actively inefficient.
A reset is a form of future-proofing. If a new browser, or new browser version, appears with its own ideas about default values for margin, padding, etc., then so long as its CSS support is decent your existing reset will make it either mostly or completely work from day one.
This does not mean "never do browser testing" -- you should (and you should do it smartly, based on what's known about both the browsers and your demographics) -- but it does mean that you're less likely to get caught with your pants down.
Also, for my money, the best regime out there for classifying browsers and organizing a testing system is Yahoo's graded browser support. And oddly enough, they seem to like resets...
This does not mean "never do browser testing" -- you should (and you should do it smartly, based on what's known about both the browsers and your demographics) -- but it does mean that you're less likely to get caught with your pants down.
Also, for my money, the best regime out there for classifying browsers and organizing a testing system is Yahoo's graded browser support. And oddly enough, they seem to like resets...
A good point. Still, it always comes down to a cost/benefit equation. Balancing the cost of a sending every user a set of reset styles in terms of extra page weight against the benefit of some possible future-proofing against some possible browsers then my choice would be to go with the lighter site.
If your CSS is minified and compressed, a reset is almost unnoticeably small. The YUI 3 reset stylesheet, for example, is 858 bytes uncompressed.
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.
A reset stylesheeet gets rid of those. I don't start a site w/o one.
Yes, they do, but you don’t need to reset them first then set them again. You can just set them to your own choice and be done with it.
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.
So you’re saying you don’t support all these browsers? A reset stylesheet isn’t a magical fix for every issue - you still need to check in the browsers your users have chosen. That’s part of the pain of being a front end developer: you’re not just coding for one consumer.
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.
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.
Incidentally there is incorrectly styled example code in this post that breaks out of the bounds of the page.
I own a coffee mug with a similar problem !
http://www.zazzle.com/css_is_awesome_mug-168716435071981928
http://www.zazzle.com/css_is_awesome_mug-168716435071981928
Hahaha love it!
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.)
http://www.flownet.com/ron/css-rant.html
(How do you do links in HN comments? Markdown syntax doesn't seem to work.)
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.
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.
That is indeed a better rant :-)
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
[1]:http://news.ycombinator.com/formatdoc
Oh, sorry, that's not what I meant. What I meant was how do I make a link with some text other than the URL. (Apparently it's not possible in HN comments.)
I think the reason is so you know where the link goes before clicking, which prevents rickrolling.
Can't help but ask: is rickrolling a serious concern around here? If so, a followup question: Really?
1. No. See #2.
2. Yes.
2. Yes.
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.
I guess I should clarify a bit: every modern browser (and in this case IE8 is also counted in) has support for display: table-* property.
On the other hand, 2003 was the last year when I did layout using table. I did pixel-perfect cross browser layouts with CSS five years ago, and they had to work in IE5 back then. So yes, I do know what I am talking about and stand by my position.
On the other hand, 2003 was the last year when I did layout using table. I did pixel-perfect cross browser layouts with CSS five years ago, and they had to work in IE5 back then. So yes, I do know what I am talking about and stand by my position.
I did pixel-perfect cross browser layouts with CSS five years ago
Using just semantic markup, or with lots of divs within divs that have no justification to be there except to allow styles to be attached to them?
"Great pyramids of DIV" based layout is at most marginally better than table based layout.
Using just semantic markup, or with lots of divs within divs that have no justification to be there except to allow styles to be attached to them?
"Great pyramids of DIV" based layout is at most marginally better than table based layout.
Yep, mostly semantic markup. Sure then you could not avoid
some extra div there and here, but that did not come even near the <td> mess. I've tried to stay away from divitis and classitis as much as possible.
And your rant is still misinformed, one-sided, and extremely overreaching in its conclusions.
Sadly, you probably won't win. People who can recite from memory dozens of combinations of obscure compiler flags to make their code build have collectively decided that CSS is just too hard and inconsistent to learn and work with.
(or, in the case of the particular HN username here, people who'd like you to think they know all the differences between multiple Lisp families and multiple implementations within families)
(or, in the case of the particular HN username here, people who'd like you to think they know all the differences between multiple Lisp families and multiple implementations within families)
Are you referring to me? I certainly don't want anyone to think that I "know all the differences between multiple Lisp families and multiple implementations within families". Life is much too short to spend a lot of cycles on trivia.
[deleted]
For me it is easier to understand that line without it wrapping.
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).
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).
Seriously that's the lamest sort of reply we see here on Hacker News. Sniping other peoples work is low (this isn't Slashdot).
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.
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.
So only those who are perfect are allowed in a debate? Somehow (despite my karma hit) I doubt I'm the only one who doesn't believe that. Sometimes we can discuss ideas even if we aren't fully compliant ourselves.
You've twisted my intention and words and the karma hit is probably because of your unsupported attack. I actually assumed the author had some authority and was pointing out a) a small error needed correcting and b) that even the best have trouble taming CSS.
For reference i'm slowly building up articles about things I don't pretend to be an authority on which you can happily attack in due course.
For reference i'm slowly building up articles about things I don't pretend to be an authority on which you can happily attack in due course.
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/
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.
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; }
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; }
[deleted]
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.