SitePoint Sponsor |
|
User Tag List
Results 1 to 25 of 62
Thread: What is a reset in CSS?
-
Mar 2, 2009, 18:17 #1
- Join Date
- Feb 2009
- Posts
- 46
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
What is a reset in CSS?
What is a reset in CSS?
FREE Web Consulting:
I critique websites for free & offer advice on improvements!
-
Mar 2, 2009, 18:21 #2
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
It is a way to reset margins and paddings on a webpage to 0, and ignore the browser default.
The NORMAL universal reset is
*{margin:0;padding:0;} and must be placed at the top of your stylesheet so it can cascade down.
Eric Meyer has compiled a better reset though.Always looking for web design/development work.
http://www.CodeFundamentals.com
-
Mar 2, 2009, 19:02 #3
- Join Date
- Feb 2009
- Posts
- 46
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Why would you need this?
FREE Web Consulting:
I critique websites for free & offer advice on improvements!
-
Mar 2, 2009, 19:45 #4
- Join Date
- Aug 2004
- Location
- Hamburg, Germany
- Posts
- 4,248
- Mentioned
- 30 Post(s)
- Tagged
- 0 Thread(s)
Browsers have their own default stylesheets. Reset rules set by the CSS author of a page override the browser's default stylesheet. It isn't needed but can come in useful if you would like to reduce the amount of inconsistencies brought forward by the default settings of browser xy. An example is Eric Meyer's CSS Reset.
-
Mar 2, 2009, 19:57 #5
- Join Date
- May 2007
- Location
- Newcastle, Australia
- Posts
- 3,718
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Mar 2, 2009, 20:02 #6
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
This post will explain it, and so much more... http://www.sitepoint.com/forums/show...78#post3935978
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Mar 2, 2009, 20:16 #7
- Join Date
- Feb 2009
- Posts
- 24
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
to make it simple every browser has his own default style, css reset is used to make ALL browser have your own default style.
without it your website will morelikely get messed up in, since every browser have his own style apply
-
Mar 3, 2009, 02:53 #8
- Join Date
- Aug 2007
- Location
- Netherlands
- Posts
- 10,287
- Mentioned
- 51 Post(s)
- Tagged
- 2 Thread(s)
I like to use my own reset, but if you look carefully at the Eric Meyer one listed above, you'll see some things just aren't right.
Deprecated elements are listed-- why would you ever have those on your page? (applet???? seriously even commenting visitors are not going to introduce that garbage into your code) and elements nobody even remembers how to use anymore are listed (like tt). Padding is zeroed on inline elements who don't even get padding. Table elements are getting their backgrounds set to "transparent".... I don't remember ever making a table and being unexpectedly presented with some unwanted background colour. What the?
If you DO use a reset, don't have some "reserve" reset sitting around somewhere prepared to do battle with any and every page in existence. That's called BLOAT and bloat is never necessary (did I just repeat myself?). There's no point, and even worse is doing it the Yahoo way (a separate stylesheet JUST for the reset!!).
Do your visitors a favour: yes, they will only load your CSS sheet once because browsers cache. But why make them load more than necessary? Why make them do more than the minimum number of GET requests than absolutely necessary? Set your reset at the beginning of your SINLGE stylesheet, and only mention the elements you're even bothering to use on your site.
Some day, I'll use ins and del. Someday, somewhere, but until then, I will not have CSS for them in my css sheet. IF I ever DO have those elements, they will be styled as Meyer and some others here have them (the strike-through for del etc). But listing elements who don't exist on your page is talking to yourself.
Like old men in the park with their paper bags. It's okay, they're not hurting anyone by talking to themselves. It's just weird.
-
Mar 3, 2009, 06:39 #9
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
I like Eric Meyers: my sites use some forms and to lose that depressed look on inputs when you click them is just too big to lose. Accessibility wise Eric Meyers is much beter.
Always looking for web design/development work.
http://www.CodeFundamentals.com
-
Mar 3, 2009, 07:39 #10
- Join Date
- Feb 2009
- Posts
- 24
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
@stomme
yup it was Accessibility, create seperate file will make nice and clean code, and why would you bother with only one more request. the user dont care about the way your websitework.
they dont say hey this website make my browser request one more css, make the loading 1 second slower......
rather than that if you sell your template other develpment, they want something clean and easy to change, that is why I prefer creating 2 css
-
Mar 3, 2009, 09:27 #11
- Join Date
- Nov 2004
- Location
- Ankh-Morpork
- Posts
- 12,158
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Mar 3, 2009, 09:47 #12
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
I mean it doesn't HAVE to be at the top but I put it at the top because I put everything in markup way..(explained bad).
AKA global styles first, then I put header CSS below that and go all the way down. If you just speghetti the CSS..well.Always looking for web design/development work.
http://www.CodeFundamentals.com
-
Mar 4, 2009, 06:26 #13
- Join Date
- Aug 2007
- Location
- Netherlands
- Posts
- 10,287
- Mentioned
- 51 Post(s)
- Tagged
- 2 Thread(s)
create seperate file will make nice and clean code,
-
Mar 4, 2009, 08:13 #14
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
I personally hate trying to debug sites with multiple stylesheets. I have to guess by the file name to determine which one to look at first. I don't see a reason for seperate stylesheets unless it's for print media or screen, etc.
Always looking for web design/development work.
http://www.CodeFundamentals.com
-
Mar 4, 2009, 09:46 #15
- Join Date
- Aug 2007
- Location
- Netherlands
- Posts
- 10,287
- Mentioned
- 51 Post(s)
- Tagged
- 2 Thread(s)
Yeah, if I'm debugging someone else's site (usually a template and yes, I understand why they do the multiple sheets thing but I think ultimately it makes MORE work, not less, unless different pages are calling different types of styles) I use the Web Dev Toolbar to View CSS which gathers all the sheets together and I can do a ctrl+f to find things.
That's prolly why I like one super long stylesheet than a couple of smaller ones-- easier searching, and I can gather all my styles for something (like a form) so they're all together. Any anchors in my form, I don't want their styling over on the anchor-styling page, I want it with the form styles. My reset is a few (not many) globals listed near the top, where they're all together and easily found and changed if needed.
kirie I want to apologise if I sounded crabby. I appreciate your viewpoint : )
-
Mar 4, 2009, 15:05 #16
- Join Date
- Jan 2004
- Location
- Edinburgh, Scotland
- Posts
- 90
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I know that some people go to the extreme of having the reset as a seperate stylesheet, but to my mind, the most sensible way to use them is as your starting point - instead of a blank page.
Part of your final clean up before releasing a page is to tidy up unused stuff, whether it is CSS, extra DIV's or whatever.
(The dustMeSelectors extension for FireFox is quite a useful tool at this stage.)Throw away your Calculator -
get instant results from www.calcResult.com
-
Mar 5, 2009, 12:16 #17
- Join Date
- Jul 2008
- Location
- New York, NY
- Posts
- 1,432
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Be careful of just using a css reset if you do not know exactly what is going on beneath the seams.
Eric Meyer reset is a good start. One thing that is drawn to my attention is this declaration:
vertical-align: baseline;
Drop this from the css ruleset as it will cause issues down the line with tabular data.
-
Mar 5, 2009, 15:30 #18
- Join Date
- Aug 2007
- Location
- Netherlands
- Posts
- 10,287
- Mentioned
- 51 Post(s)
- Tagged
- 2 Thread(s)
^ yeah, and usually you the developer want vertical-align: middle. So you'll override it just about every time. And if you're always overriding it, it shouldn't be a global cause it isn't saving you the time it's meant to.
The whole purpose of the resets was lazy people didn't want to keep writing
element {
margin: 0;
padding: 0;
}
all the time. So someone thought, hey, I can just make all of them zero in one declaration! Yay!
And the few (the minority) who DO need margins or padding, you added in.
If you were already stating the margins and padding of every element anyway, the reset doesn't save you any time and takes up some lines in your code.
I knew someone who always wanted about a half em of space around every major page element, and was tired of writing it out. So he made his own reset:
body>* {
margin: .5em;
padding: 1px;
}
the only direct children of the body in his case were the main wrapping elements: header, sidebars, navbar, main content and footer. Nothing inside them got the rule though.
It saved him time and code, so it was worth it for him.
-
Mar 5, 2009, 17:47 #19
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
What happened to the IE6 users (in that example)?
.
Always looking for web design/development work.
http://www.CodeFundamentals.com
-
Mar 5, 2009, 19:02 #20
- Join Date
- Jun 2008
- Location
- Cuyahoga Falls, Ohio.
- Posts
- 1,511
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Blake Tallos - Software Engineer for Sanctuary
Software Studio, Inc. C# - Fanatic!
http://www.sancsoft.com/
-
Mar 5, 2009, 19:04 #21
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
Yes, considering it will select everythinig that is a child of the body.
But I was (in the above post) wondering what would he do for IE6 users.
Always looking for web design/development work.
http://www.CodeFundamentals.com
-
Mar 5, 2009, 19:09 #22
- Join Date
- Jun 2008
- Location
- Cuyahoga Falls, Ohio.
- Posts
- 1,511
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
This is pretty neat stuff. I think it's going to be a deff time saver. When having to do margin//padding to my elements. Now I dont even have mess with the padding at all. Theres up's and then theres downs to using this "technique". I'm sure you know what they are Ryan.
Blake Tallos - Software Engineer for Sanctuary
Software Studio, Inc. C# - Fanatic!
http://www.sancsoft.com/
-
Mar 5, 2009, 19:22 #23
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
I'm not trying to poke fun at his code: I legiminately want to know how the coder compensated for IE6. I have several ways to do this in my head but none of them are good for large scale sites. I have one that is good but I want to see how he did it.
Always looking for web design/development work.
http://www.CodeFundamentals.com
-
Mar 5, 2009, 22:17 #24
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Her code, not his.
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Mar 5, 2009, 22:28 #25
- Join Date
- Jan 2009
- Location
- Dallas
- Posts
- 990
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
There must be something in the water. This is at least the third time this question has arisen in various forums over the last few weeks.
People who know me know that I think the idea of a general reset to zero, or some baseline, as one debater called it, is asinine. Here is a summary of my argument:
People have been "resetting" default values for quite a while to some degree or another. It was Meyer and his articles,
here,
here,
here,
and finally
here,
who served as the primary "name" source for the methodology.
Read the articles. You will find them full of unnecessary style rules; essentially make-work for yourself. Let's look at his final version of reset:Code:/* v1.0 | 20080212 */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
I'll grant you html and body usually have margin and padding zeroed.
What are applet and center even doing here? They're deprecated and should not be used.
"a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, div and span": What differences are you dealing with here? None of these have default padding or margin.
"dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td": For these that have or require margins, you need to set them to the required values; not to zero, then to another value. Font sizes are inherited, so no need to restate as 100%. (Yeah, I know about IE and tables, but in standards mode, tables do inherit.)
For inline boxes, baseline is the default, with a couple of exceptions I'll mention next. Table cells default to middle, and that or top is more commonly the desired alignment. So set it. Don't make it baseline, then have to redefine vertical alignment. What about sub and sup? They certainly don't default to baseline, nor will that be where you want them. Why screw around?
Font sizes and vertical margins for "h1, h2, h3, h4, h5, h6, p, blockquote, pre", etc. are likely not what you want by default. So set them. If you care enough about typography to not like the defaults, you will have worked out the scale you prefer, and will have computed the appropriate font-size, leading (line-height), and top and bottom margins to fit that scale. So set them.
Code:body { line-height: 1; }
Code:ol, ul { list-style: none; }
Code:blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
Code:/* remember to define focus styles! */ :focus { outline: 0; }
Code:/* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; }
Code:/* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; }
As one who closely controls typographic rhythm and scale when I can, I set specific size, leading (line-height), and margin values for nearly all text related elements. I can find no sane reason to set some intermediate boilerplate value on the way to setting my own.
One source of pro reset arguments even confuses IE's layout/margin-collapse bug with css defaults. Meyer's apologia simply makes no sense.
Compiled from comments I made at CSSCreator.
cheers,
garyAnyone can build a usable website. It takes a graphic
designer to make it slow, confusing, and painful to use.
Simple minded html & css demos and tutorials
Bookmarks