SitePoint Sponsor

User Tag List

Page 1 of 3 123 LastLast
Results 1 to 25 of 62
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2009
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question What is a reset in CSS?

    What is a reset in CSS?
    FREE Web Consulting:
    I critique websites for free & offer advice on improvements!

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Enthusiast
    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!

  4. #4
    Mazel tov! bronze trophy kohoutek's Avatar
    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.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  5. #5
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RB! View Post
    Why would you need this?
    Different browsers apply different amounts of margins and/or padding to various elements by default, and relying on these gives rendering inconsistencies - a reset brings things back to a level playing field cross browser.

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RB! View Post
    Why would you need this?
    This post will explain it, and so much more... http://www.sitepoint.com/forums/show...78#post3935978

  7. #7
    SitePoint Member
    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

  8. #8
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 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.

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  10. #10
    SitePoint Member
    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

  11. #11
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    The NORMAL universal reset is

    *{margin:0;padding:0;} and must be placed at the top of your stylesheet so it can cascade down.
    Unlikely, since that selector has a specificity of 0,0,0,0 and will be overridden by any other selector. You can put it wherever you like, although I agree that it would be a good idea to place it first.
    Birnam wood is come to Dunsinane

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  13. #13
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    create seperate file will make nice and clean code,
    Waste of files. Seriously not worth a separate stylesheet. You ever see people trying to find out why something isn't working after making a change, that's someone with multiple stylesheets all conflicting with each other and nobody knows which hand is doing what.

  14. #14
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  15. #15
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 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 : )

  16. #16
    SitePoint Enthusiast
    Join Date
    Jan 2004
    Location
    Edinburgh, Scotland
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    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.
    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

  17. #17
    SitePoint Wizard silver trophybronze trophy
    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.

  18. #18
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 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.

  19. #19
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    What happened to the IE6 users (in that example)? .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  20. #20
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    ^ 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.
    Woah, thats pretty neat and this works?
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  21. #21
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 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 .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  22. #22
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    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 .
    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/


  23. #23
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  24. #24
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Her code, not his.

  25. #25
    Resident curmudgeon bronze trophy gary.turner's Avatar
    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;
    }
    Let's dissect this first ruleset and selectors.

    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;
    }
    This is just silly. Why make the text difficult to read. See the comments above about typographic scale.

    Code:
    ol, ul {
    	list-style: none;
    }
    Huh? If you don't like what the browser wants to give you, specify what you do want. Even if you do specify, it doesn't mean a disc will look the same x-browser and x-platform, or even x-user.

    Code:
    blockquote, q {
    	quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content: '';
    	content: none;
    }
    This is just wrong. It's dumbing down the markup to compensate for one braindead browser, IE<8. See Quotations in the html document.

    Code:
    /* remember to define focus styles! */
    :focus {
    	outline: 0;
    }
    Since this is an important accessibility feature, why kill it, only to turn around and resurrect it?

    Code:
    /* remember to highlight inserts somehow! */
    ins {
    	text-decoration: none;
    }
    del {
    	text-decoration: line-through;
    }
    Well, duh!

    Code:
    /* tables still need 'cellspacing="0"' in the markup */
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    If that's what you want, fine. If not, why take an intermediary step?

    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,

    gary
    Anyone 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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •