1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Whats types of css resets are people using in the beginning of their css stylesheets for html5

Discussion in 'CSS' started by leadinmarketing, Sep 19, 2014.

  1. #1
    Do you use a standard css reset in the beginning of your css documents? If so, which do you use?
    SEMrush
     
    leadinmarketing, Sep 19, 2014 IP
    SEMrush
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,498
    Likes Received:
    377
    Best Answers:
    29
    Trophy Points:
    335
    #2
    kk5st, Sep 19, 2014 IP
    COBOLdinosaur likes this.
  3. leadinmarketing

    leadinmarketing Greenhorn

    Messages:
    56
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    6
    #3
    Excellent article. Definitely opened my eyes up to more examination. The poster doors seem to be completely against css sets-fit good reason. I believe I am still going to use a very small portion of this reset I use. But he has showed that allot is unnecessary.

    Thanx for the share
     
    leadinmarketing, Sep 19, 2014 IP
  4. billzo

    billzo Well-Known Member

    Messages:
    961
    Likes Received:
    278
    Best Answers:
    15
    Trophy Points:
    113
    #4
    Some people use CSS resets for everything except form elements. Browser styling of form elements is too different, I guess.
     
    billzo, Sep 20, 2014 IP
  5. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #5
    I have never been a fan of Meyer. He has created a generation of misguided developers who do not even understand the basic specification from CSSOM.

    I use a basic setup for CSS st the beginning of my stylesheet, but that is primarily to define global defaults that are different from standard browser defaults, and be cause they are first and primarily element declarations they are easily override when a specific situation calls for something different than site defaults.
     
    COBOLdinosaur, Sep 20, 2014 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,375
    Likes Received:
    1,853
    Best Answers:
    245
    Trophy Points:
    515
    #6
    The problem with resets is NOT resets themselves; using a good one usually means less CSS overall and far, FAR less headaches. It's only an issue when they waste time setting values that don't need resetting.

    By design the HTML specification does NOT say what the default appearance of elements should be -- this meant that browser makers were free to do whatever appearance they wanted on elements; that's intentional as the whole concept of HTML from the beginning was to say what things are or would be in a professionally written document, so the user-agent (aka browser) could try to convey that meaning within the capabilities of whatever device it's being delivered on. This is why TBL's original browser actually had what today we'd call "user stylesheets"

    Generally speaking you only need to zero margins and paddings on non-form element block-level tags, and null the border on IMG and FIELDSET. The one I use (designed by Dan Schulz):

    html,body,address,blockquote,div,
    form,fieldset,caption,
    h1,h2,h3,h4,h5,h6,
    hr,ul,li,ol,ul,dd,dt,dl,
    table,tr,td,th,p,img {
    	margin:0;
    	padding:0;
    }
    
    img,fieldset {
    	border:none;
    }
    Code (markup):
    Is only 180 bytes, does NOT waste time setting things that don't need changing... not using this reset (for me at least) means more work, more cross-browser headaches and most importantly more code.

    It's only when you get into the fat bloated train wrecks like Meyer's "reset reloaded" that a reset becomes a problem as that wastes so much time setting things you're either going to override or never use, it's damned near a framework until itself... and by now you folks should know my opinion about frameworks. Basically resets like his are what gives resets a bad name. ...like pretty much everything else of his -- I swear between Eric Meyer wieners and Kevin Yankholes...

    The only reason for them to "make more work" or "have you write more code" is if you waste time "resetting" things that are NOT inconsistent cross browser or that you just flat out wouldn't use on 99%+ of your pages. That includes dicking with the default background, default font-size, default line-height (which you should be explicitly setting every time you change font-size anyways!), border-collapse on table, etc, etc...

    Basically the problem isn't with resets; I find not using one to be far more difficult once you start testing across different browsers. The problem is with some of the fat bloated pointless "resets" that waste time changing values you don't need to change!
     
    deathshadow, Sep 22, 2014 IP
  7. kk5st

    kk5st Prominent Member

    Messages:
    3,498
    Likes Received:
    377
    Best Answers:
    29
    Trophy Points:
    335
    #7
    Why not reduce it even more? The div, li, tr and img elements have no padding or margin by default. The td and th elements have no margin, but do have a 1px padding. Is that ever an issue?

    Are you really going to leave those other elements with no margin or padding? No list indentation, no separation for blockquote, headings or paragraphs? If not, why not set the default values you want in the first place instead of zeroing and redoing the values?

    I'll grant you html and body, but only because that's where you want them to end up; not as an intermediate value.

    It's one thing to have a boilerplate set of values that tend to be common across the sites you develop; it is quit different to apply some value you don't intend to keep, only to make it redundant when you set the desired value.

    cheers,

    gary
     
    kk5st, Sep 23, 2014 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,375
    Likes Received:
    1,853
    Best Answers:
    245
    Trophy Points:
    515
    #8
    DIV used to be for Blazer which treated them as P. That's probably a non-issue now that Palm has gone the way of the Dodo... but then again there's still the macOS version of iCab which has a lot of the same issues that I'm nice enough to at least TRY and support.

    TR can be a problem if you turn off their behavior with display, as can LI. Pretty much means if I set LI to display:inline it helps prevent the staircase bug in IE7.

    It's a lot more than 1px in older versions of FF... and saying both does no harm to them and is far simpler than saying:
    td, th { padding:0; }
    Code (markup):
    Separately from the rest. Like a lot of elements the reset doesn't apply to all browsers, but there's no harm in sending them anyways while covering the ones it does apply to.

    Remember that many of them are NOT consistent cross browser. Am I REALLY going to say "margin:0" and "padding:0" EVERY blasted time I want to use one of these elements?

    You even gave a great example:
    Only place I usually want indentation for the bullets is inside the content, so I nab the header menu, footer menus and sidebar menus from the reset declaration and then can apply a CONSISTENT padding for #content. YES., I'm changing it, but I'm also using it as is, AND it means I don't have to say margin:0; padding:0; two or three times in #mainMenu, .sideMenu, #footer UL, etc, etc -- AS WELL as saying margin:0 or padding:0 for whichever one I'm not using inside #content. (usually it's margin)

    That's LESS code, and less thinking about it.

    99% of my headings and paragraphs all I want is padding-bottom so I don't have to even THINK about margin collapse BS. As such I want to null side and top padding as well as margins on all sides. Again it's simpler to nab them all at the start so I know what I'm starting with than to say margin:0 on every single blasted one of them. What's less code and easier to understand?

    What you're suggesting:
    h1 {
    	margin:0;
    	padding:0 0 0.4em;
    }
    
    h2 {
    	margin:0;
    	padding:0 0 0.66em;
    }
    
    h3 {
    	margin:0;
    	padding:0 0 0.8em;
    
    p {
    	margin:0;
    	padding:0 0 1em;
    }
    Code (markup):
    Or using the reset?

    h1, h2, h3, p {
    	margin:0;
    	padding:0;
    }
    
    h1 {
    	padding-bottom:0.4em;
    }
    
    h2 {
    	padding-bottom:0.66em;
    }
    
    h3 {
    	padding-bottom:0.8em;
    
    p {
    	padding-bottom:1em;
    }
    Code (markup):
    Roughly 20% less code while using the more verbose padding-bottom. Even if I was stating side padding:

    h1, h2, h3, p {
    	margin:0;
    	padding:0;
    }
    
    h1 {
    	padding:0 0.4em 0.4em;
    }
    
    h2 {
    	padding:0 0.66em 0.66em;
    }
    
    h3 {
    	padding:0 0.8em 0.8em;
    
    p {
    	padding:0 1em 1em;
    }
    Code (markup):
    So that the padding declaration was redundant on those elements, it's STILL roughly 20% the size of saying margin on every blasted one of them each and every blasted time. SO WHAT if padding doesn't apply to those, it does apply to OTHER elements in that same list in the reset. It's just combined so there's LESS CODE involved and a consistent baseline to work from.

    Unless you are doing so to combine selectors so you don't have two sets to worry about; it's a technique for using less code overall and keeping it cleaner/simpler.

    Which I think is the part of it you're just not getting.

    It's like when you have DIV and UL that are both subsections of their parent, so you give them the class '.subSection'. You want to turn bullets off when it's a UL or OL are you REALLY going to make a new selector:

    .subSection {
      padding:1em;
      border:2px solid #ACE;
    }
    
    ul.subSection,
    ol.subSection {
      list-style:none;
    }
    Code (markup):
    Or are you going to go "oops, oh well" and send list-style to the DIV as well since it does no harm?

    .subSection {
      list-style:none;
      padding:1em;
      border:2px solid #ACE;
    }
    Code (markup):
    Me, I'd go with the latter. That's what the combined declarations of most resets do. Sure it sends some values you don't have to to some elements, but it's less code and far simpler than stating it every blasted time or maintaining two separate lists of what you're sending values to. There's no harm in sending the extra value and there's the benefit of using less code overall.

    I really don't get the appeal of saying "margin:0" every time I want to use a block-level element, or padding:0 every blasted time I want to use a TD/TH, or margin and padding every blasted time I want to use a fieldset or heading.

    It's less work, less code, and as such less headaches.

    Though I get why you are thinking that way -- I look at the bigger resets (or smaller ones like the so called universal one) and those DO make more work and more code; just like most of the fat bloated idiotic garbage known as "frameworks" do. I really wonder what the hell type of mouth-breathing re-re's it takes to crap all over websites making it harder to develop with idiocy like bootcrap; and to me Meyer's "reset reloaded" and it's kine are just as stupid...

    I'm just willing to accept a middle-ground that has served me well for what's very rapidly closing on a decade now... which is usually a contributor to why where most people waste 120k of CSS in 10 separate files I'm using 16k or less in one file.

    180 bytes to not even have to THINK about it? Worth it in my book -- but then I've watched WAY too many people struggle with layout issues in certain browsers (mostly FF and IE, though they ALL have issues -- even today!) than to even consider going into making a layout barefoot.

    Dan used to call it that, "Time to chain up"
     
    Last edited: Sep 23, 2014
    deathshadow, Sep 23, 2014 IP
  9. leadinmarketing

    leadinmarketing Greenhorn

    Messages:
    56
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    6
    #9
    Excellent points!!! I'm with you on this. Resets, yes, just minimalistic ones that make sense. Do you use any services to test your sites in different browsers/versions?? Im looking into this now
     
    leadinmarketing, Sep 23, 2014 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,375
    Likes Received:
    1,853
    Best Answers:
    245
    Trophy Points:
    515
    #10
    Services (like browsershots) have two major flaws that make them useless to me.

    1) All they provide is a static screen-shot. You can't test functionality in them.

    2) They usually have a delay that just takes too damned long and I like to test every major layout change and CSS section as I write them.

    That's why I test in the actual browsers. Browsers are free, download them and install them. I prefer doing development on Windows, but really the host OS doesn't matter.

    Regardless of whatever OS you are working in, I consider it best practice to install a VM like Oracle Virtualbox, M$ VirtualPC, Parallels Fusion or VMWare (I prefer VirtualBox and hate VMWare) and then install all the other operating systems in them. Find a Hackintosh distro to run OSuX, find an old copy of Winblows XP to test IE6/7/8 (dead laptops are a great source for unusued XP keys), pick yourself a Linsux distro or two (or eight) -- that way you are testing the actual differences in OS and rendering engines, as well as the different behaviors of OS specific versions; for example how Firefox behaves differently on OSuX than it does Winblows.

    You can even then install an Android VM for testing that, and xCode on OSuX which has a iOS emulator in it. (though the multi-gig download on the latter is a royal PITA -- there's something wrong when a development suite is ten times the size of the OS)

    Side note, they all suck, just in different ways. For me when it comes to a desktop OS, Winblows just sucks the least.

    Of course, to run all that you'll want plenty of disk space and RAM, and a multi-core CPU with virtualization tech built in is a good idea in a workstation.

    I actually just turned my old workstation (i7 4770k with GTX 770 video -- which was WAY overkill) into my media center, and built a whole new low-power workstation around a J1900 Celeron with 16 gigs of RAM (ASRock Q1900M mobo) -- which as a machine I leave on 24/7 as my workstation and LAN file server, the 28 watt idle and 50 watt "under load" performance knocked $50 off my power bill. (even with a GTX 560ti in it to drive three displays at 2560x1440 and quintet of 4tb drives the power draw is bupkis!). Shame it only has VT-x and no VT-d; but honestly I've not really noticed.

    Mind you, that's still probably overkill, but if you gutted down to a single 2tb drive and could live with the internal video (that can drive three displays at 1920x1200 using the on-board intel HD) I'm loving the idea of ultra-low wattage (22 idle/38 under load) workstations for well under four-hundred bucks.

    Bottom line, test in the real browsers -- set up a local testing server either as a real distro in a VM, or using something like XAMPP, then set up a bunch of OS in VM's so you can quickly switch between them.

    It's also fun if you're an OS whore like me when you start playing with fringe operating systems like ReactOS, Menuet and Haiku.
     
    Last edited: Sep 24, 2014
    deathshadow, Sep 24, 2014 IP
  11. leadinmarketing

    leadinmarketing Greenhorn

    Messages:
    56
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    6
    #11
    This guy said Celeron !!! I really had to Google that processor just now. Didnt know Celeron had a Quad core 64-bit version. Interesting! Only 2M l2 cache though..... Yes. My plan was to virtualize everything myself, then checked out the paid services. If they only do screenshots, then thats nobueno for me. So I am continuing with my plan of VirtualBox. I have a SSD with space for this. I figure 4 or 5 VMs with the last 4 or 5 browsers. Dont have any old keys and dont pirate stuff and DEFINITELY not buying multiple OSs for testing. I stumpled upon https://gist.github.com/magnetikonline/5274656

    VMs provided by Microsoft to Install on Linux, and test the most recent IE browsers as far back as IE7. Think I will start from there. I am going to try to do as much testing on Linux as I can. Dont have the funds to build a dedicated testing machine.
     
    leadinmarketing, Sep 24, 2014 IP