Normalize.css v1.0.0

http://necolas.github.com/normalize.css/#v1

by necolas • 14 years ago

146 30 14 years ago

necolas.github.com

madmikey3• 14 years ago

Well, for beginners, this will kill the basic idea to remember necessary things, But hey.. good job!

On the one hand, true, but on the other, it'll let them get started developing their actual site, rather than dig through obscure browser differences - thus making work more fun and easier to learn. At least in my experience.

madmikey3• 14 years ago

you are true.. My boss always tells me, "REAL MEN DO JAVASCRIPT", Well, jquery still is the best. peace.

MattBearman• 14 years ago

I have to respectfully disagree here - this is like saying you shouldn't use jQuery, as it will kill the idea of remembering basic JavaScript.

I'd rather just get shit done (tm) than spend time learning all the nuances of cross browser css.

wtetzner• 14 years ago

I agree, plus remembering implementation nuances isn't the same as knowing a language.

madmikey3• 14 years ago

you are true.. My boss always tells me, "REAL MEN DO JAVASCRIPT", Well, jquery still is the best. peace.

kondro• 14 years ago

Looks pretty good. Need to back-port a couple of my projects to use a reset like this because the slight variations between Chrome/Firefox/IE are starting to get on my nerves. Now just have to find some time for such a low-priority backlog item.

aidos• 14 years ago

This looks nice - will have to try it out later to see how it behaves. It's good to see a detailed breakdown and justification for each of the rules instead of a blanket styling dumped in with no thought.

I'm working on a project at the moment that has div {float:left} in the reset and it makes me weep.

grandpoobah• 14 years ago

I agree, it's great to be able to read it and actually know what it's doing. Much better than other resets which strip defaults.

espeed2• 14 years ago

For more on Normalize.css, see "About Normalize" (http://nicolasgallagher.com/about-normalize-css/), esp "Normalize vs Reset".

branola• 14 years ago

Is this something one could use as an alternative to "HTML5 Boilerplate" or does it serve a different purpose?

espeed2• 14 years ago

HTML5 Boilerplate uses normalize.css. See http://html5boilerplate.com/docs/The-style/

ErikHuisman• 14 years ago

Uhm, the largest "html5 boilerplate" actually uses normalize. Normalize.css straightens the subtle differences in the default stylesheets for the different browsers. It is css only, not really a template. It is like giving different car manufacturers specs and designs to build a car. They all build the same car but slightly different. Normalize tries to make them look all exact the same (they still behave different though)

VMG2• 14 years ago

I'm kind of suspicious of these kinds of things. Especially the "subtle improvements" can have unintended effects.

Can I really just include without worrying about it?

Skalman2• 14 years ago

I believe that all of the CSS in there is the default CSS in at least one browser. It really intends to only normalize between browsers.

VMG2• 14 years ago

Well the page says Improves usability with subtle improvements.

jakobe3• 14 years ago

Please don't use this file. Use it for inspiration and take the parts that make sense for your website, but don't just copy the entire file without examining it closely.

For example, this file disables the webkit text size adjustment on the iPhone. Text size adjustment is what makes most websites readable on the iPhone without excessive zooming / scrolling. You should disable it only if you are making a mobile optimized version of your website and the automatic text size adjustment actually causes problems.

necolas• 14 years ago

> this file disables the webkit text size adjustment on the iPhone.

No it doesn't.

timdorr• 14 years ago

Incorrect:

  /*
   * 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using    
   *    `em` units.    
   * 2. Prevents iOS text size adjust after orientation change, without disabling    
   *    user zoom.    
   */

  html {    
      font-size: 100%; /* 1 */    
      -webkit-text-size-adjust: 100%; /* 2 */    
      -ms-text-size-adjust: 100%; /* 2 */    
  }

Your statement would be true if it was setting -webkit-text-size-adjust:none, but 100% does as the comment says and only prevents resizing when changing orientations.

dt7• 14 years ago

No- in fact I'm sure the readme used to say "don't use this as a black box", instead use it as a starting point.

TazeTSchnitzel• 14 years ago

They make textarea display in sans-serif?[0]

No thanks. rows and cols should mean something :(

[0] https://github.com/necolas/normalize.css/blob/master/normali...

iaskwhy• 14 years ago

C'mon, it's CSS, you can easily remove that line with the textarea declaration and you're done leaving it to whatever is used by a browser. Or make it all serif, it's that easy.

mrspeaker• 14 years ago

Don't know why you're getting downvoted: the author explicitly encourages the file not to be used as is but modified to suit your purpose.

ceejayoz• 14 years ago

I don't see many textareas sized by row/col attributes anymore. Usually they're set to an explicit height and width.

drivingmenuts• 14 years ago

Rows and columns became meaningless and outdated the moment browsers added those little grabbers in the corners.

joshfraser• 14 years ago

I'm torn on this. There's a lot of code in here that most sites will never need. I hate bloat, especially on the frontend which is responsible for 90% of site speed. On the other hand, using this as your starting point for a new project will probably save you a fair amount of time. Perhaps start with this then rip out the stuff you don't end up using?

casr• 14 years ago

> There's a lot of code in here that most sites will never need. [...] Perhaps start with this then rip out the stuff you don't end up using?

It’s designed to be used as a reference. i.e. if my website uses an <em> element, I'll want to make sure I’ve ripped out those styles from normalize.css and placed them in my own CSS file. They will serve as a starting point. You should not be including the normalize.css directly on a page.

Personally, I prefer this kind of approach as opposed to a style reset. Style resets lose all visual information that originally came with the element. If a client wanted to use an <h4> but I didn’t style it in the first place it ends up looking like regular body text with no additional padding or margins. A normalise approach forgives me for my lack of forethought allowing an almost right for 90% of cases.

Normalize.css v1.0.0

Related Stories