CSS Reset Stylesheets

Hi,

So on the way home from work I was listening to an Audio book that I purchased on CSS and somewhere in that audio book it mentioned CSS reset stylesheets.

Basically it resets all the browsers default settings as different browsers have slightly different settings: margins, borders and padding.

Does anyone do this?

Regards,
Chris

 

Resets are common, however, there are lots of different ways of doing this, and some does more than others, some removes EVERYTHING, and all of them involves redoing a bit of the standard styling on specific elements.
The simplest reset is

* {
margin: 0;
padding: 0;
}

Code (markup):

This, however, removes quite a bit of styling that you might want to keep, and leaves you having to redo things to every single element that is in use on the page.

There are less intrusive resets, like this one (stolen from @deathshadow ):

/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
   margin: 0;
   padding: 0;
}
* { //specific settings applied to all elements
   background-repeat: no-repeat;
}
hr {
   display: none;
}
/* fix for legacy iOS and windows Mobile devices */
@media (max-width:512px) {
   * {
     -webkit-text-size-adjust:none;
     -ms-text-size-adjust:none;
   }
}
/* fix for HDX displays like the Kindle Fire HDX */
@media (-webkit-min-device-pixel-ratio:2) and (min-width:1600px), (min-resolution:172dpi) and (min-width:1600px) {
   html { font-size:200%; }
}

Code (markup):

Which resets the most obnoxious elements, removes some specific common styles, and redoes some settings based on specific @media-queries. It's a solid, non-intrusive reset which allows for a clean start on most pages.

 

What I used in my latest project is normalize.css from nicolas gallagher.
It is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements.
See more info at http://nicolasgallagher.com/about-normalize-css/

 

I use a reset css file and then build all css from scratch the way I want it for each site or project.

 

If you're going to set everything from scratch anyway, why waste time and bits on a reset? Set things to what you want and be done with it; no need for an intermediate step.

gary

 

Because the new CSS does not need every setting. Just the ones the site uses. Makes a cleaner site and gives me more control over what the end user sees.

 

A CSS Reset Stylesheet resets the styling of all HTML elements to a consistent baseline.

 

Nowadays you must use either normalize.css or reset.css. It's a must have for CSS. But, e.x., normalize.css is already included in bootstrap.

 

I didn't say it did. You did.

The point is, if you want something different from the default, then set it that way and don't go through zero on the way unless zero is what you want (which I doubt for most elements). The whole idea of resets is a waste.

gary

Bulsh!

 

Maybe, but then you'll need to make sure that the page is looking identically in dozen browsers.

So what does really save your time?

 

I guess we will just have to agree that we disagree on this subject. No problem with that at all.

 

I usually just make my own as needed, but for the most part I usually have something like this at the top of my stylesheet.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-size: 100%;
  font-family: sans-serif;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale; 
}

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  font-size: 1em;
  line-height: 1.2;
}

a {
  text-decoration: none;
}

a:hover, button:hover, input[type="submit"]:hover {
  cursor: pointer;
}

input, textarea, select {
  font-family: sans-serif;
  font-size: 100%;
  outline: none;
  background-color: transparent;
  border: none;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
}

Code (markup):

 

Please be very careful with things like text-rendering: optimizeLegibility. There are too many bugs and differences between browsers and various operating systems. In worst cases it may lead to illegible text.

Also, outline: none is a big no-no. See http://outlinenone.com/

 

Nah. Removing outline WITHOUT redefining :focus with some type of highlight, either color, background or border colors, is a no no.

Personally I remove outline because I find the rendering really annoying and ugly. However, I provide a lot of other ways of visualising it. Also, if it's needed, I provide a high contrast stylesheet which the user can chose.

 

I personally still have doubts if this is really a good idea. Color alone is definitely not enough but together with other visual effects it will probably suffice. However, users, and keyboard only users in particular are just used to the default outline styling (which also varies between browsers) and changing it may cause unnecessary confusion.

My views on this matter are identical to those expressed here: https://www.tjvantoll.com/2013/01/28/stop-messing-with-the-browsers-default-focus-outline/

The real problem is that too many people just blindly copy various reset stylesheets from the Internet and do not re-set the styles. This is probably the main reason I would be very careful with including anti accessibility patterns there.

 

I've written at great length about resets, so I'll just point you at the relevant parts of my "what's wrong with your website" series:
http://www.cutcodedown.com/article/whats_wrong_with_YOUR_website_part4#section_4_2a

You'll find I cover both the pro's and the con's. Like a great many things you have extremists on both sides, when you're actually best off trying to find a nice safe middle-ground. Going without tends to lead to broken sites somewhere at some time, whilst not all resets were created equal and a great many of them just give resets a bad name.

Shock to my ears, this song's so lame... you give rock, a bad name.

... and yeah, try not to screw with outline on :focus. It exists for a reason, and people should be used to seeing it when you hit "back" by now.

Oh, and @PoPSiCLe, you changed it, and not necessarily in a good way.

... and @KewL, you do know starting you with the so called "universal reset" utterly and completely shtups you at styling form elements consistently between IE, FF and "rest of world", right? What with FF inheriting nyetscape 4's retarded pt padding you have no control over, IE having a pixel padding you have no control over, and other differences that zeroing the padding (or even playing with the padding) on inputs can REALLY screw you on? That's why the one I use (made by Dan Schulz shortly before his passing) targets specific elements for margins/padding/border, and not everything en-masse.