CSS

marsha grasett
marsha grasett
9,995 Points

CSS resets --- modernizr ... normalize ....

Which should one use if you have minimal HTML5. I see both being used.

7 Answers

James Barnett
James Barnett
39,199 Points

Short Answer: Yes

Long Answer:

Modernizr is solving a different issue then normalize.

The issue normalize.css is solving, is that all browsers have a base stylesheet, yet these defaults differ.

The issue modernir is solving, is that browsers implement the new CSS3 & HTML5 features are different rates, so a CSS3 feature that works in Chrome might not work in IE.

Javascript to the rescue

Devs have created javascript fallbacks, called polyfills that you can include in your page, to imimitate the a CSS3 (or HTML5) feature that hasn't yet been implemented in all of the browsers.

What modernizr does

Is conditionally serve up these JavaScript polyfills based on what browser a user is viewing your site with.

You can read the docs to learn more about what modernizr does.

Hi,

I'd like to watch that video, with HTML 5 forms utilizing modernizr, can I have the link?

and will I learn how to use modernizr from watching that video? I would really like to learn this.

Jeremy Hilder
PRO
Jeremy Hilder
Pro Student 9,084 Points

Well alot depends on what problem you are trying to solve.

But in my view

Reset CSS - Removes all default line heights, margins and font sizes of headings, and so on to reduce browser inconsistencies. Meaning that you will need to add this back to make the design work as needed.

Or

Normalize.css - Only resets elements that might cause consistent problems across browsers.

Then if you need to

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser that then allow you to put in place fallback solutions. But as its Javascript it will only run if the user's browser has Javascript enabled.

Hope it helps

James Barnett
James Barnett
39,199 Points

I think you should always use normalize.css over an arbitrary set of CSS reset code. normalize.css is in many ways is the next generation of a CSS reset.

As Eric Meyers famous reset code predates the existence of normalize. Using normalize usually means you end up having to write less code because it provides a consistent cross-browser starting point.

You can checkout this quick tip video from @Guil where he talks about the benefits of using normalize.css

marsha grasett
marsha grasett
9,995 Points

I have normalize. But, some HTML5 form tutorials use modernizr. Can I use both?

(And then there is Pie)

grrrrrrr

marsha grasett
marsha grasett
9,995 Points

Thanks Jeremy.

James, thanks for the clear explanation :)

James Barnett
James Barnett
39,199 Points

@Marsha - I think that covers everything, let us know if you've still got questions.