SitePoint Sponsor |
|
User Tag List
Results 1 to 25 of 226
Thread: CSS Reset
-
Aug 19, 2008, 10:41 #1
- Join Date
- Jul 2008
- Location
- New York, NY
- Posts
- 1,432
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
CSS Reset
Here is my reset.css - Let me know what you guys think and what should be corrected.
Code:/************************************************************************************************************************************************ Reset Elements ************************************************************************************************************************************************/ 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; vertical-align: baseline; background: transparent; font-size: 100%; } body { font: 75%/1.2 arial, verdana, helvetica, sans-serif; } /************************************************************************************************************************************************ Layout Elements ************************************************************************************************************************************************/ .hide { overflow: hidden; display: block; zoom: 1; width: 0; height: 0; line-height: 0; font-size: 0; text-indent: -9999em; } hr { display: none; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } ul, ol { list-style: none; } ul.ul { list-style: inside disc; } ol.ol { list-style: inside decimal; } img { display: block; } a, a:link, a:visited, a:hover, a:active, button { cursor: pointer; text-decoration: none; } a:hover { text-decoration: underline; } address { font-style: normal; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } ins { text-decoration: none; } del { text-decoration: line-through; } acronym, abbr { cursor: help; border: 0.1em dotted #000; } object, embed { display: block; } /************************************************************************************************************************************************ Overlay Fixes ************************************************************************************************************************************************/ .png { filter: alpha(opacity=0); opacity: 0; -moz-opacity: 0; position: absolute; width: 100%; height: 100%; } .iframe { position: absolute; overflow: hidden; z-index: 100000; width: 100%; } .iframe iframe { position: absolute; display: none; display/**/: block; top: 0; left: 0; z-index: -1; filter:mask(); width: 30em; height: 30em; } /************************************************************************************************************************************************ Form Elements ************************************************************************************************************************************************/ label { cursor: pointer; } input, select, textarea { margin: 0; padding: 0.3em; border: 0.1em solid #666; background-color: #fff; font: 1em arial, sans-serif; } input[type="radio"], input[type="submit"], input[type="checkbox"], button { padding: 0.2em; width: auto; height: auto; } select { padding: 0; } textarea { overflow: auto; } *input.opt { border: 0; width: 1.33em; height: 1.33em; } :focus { background-color: #FEFF6F; color: #000; } /************************************************************************************************************************************************ Table Elements ************************************************************************************************************************************************/ table { *border-collapse: collapse; border-spacing: 0; } caption, th { text-align: left; } th { font-weight: normal; } th, td { vertical-align: middle; } /************************************************************************************************************************************************ CMS Tag Conversion ************************************************************************************************************************************************/ center { text-align: center; } font { color: inherit; font-size: inherit; } b { font-weight: bold; } i { font-style: italic; } big { font-size: large; } small { font-size: small; } menu { list-style: none; } applet { display: block; } blink { text-decoration: blink; } s, strike { text-decoration: line-through; } u { text-decoration: underline; } /************************************************************************************************************************************************ Clearing Fixes ************************************************************************************************************************************************/ .clear:after { clear: both; display: block; content: "."; visibility: hidden; height: 0; } .clear { *display: inline-block; _height: 1%; } br, .br { clear: both; display: block; overflow: hidden; zoom: 1; height: 0; line-height: 0; font-size: 0; text-indent: -9999em; }
Last edited by cooper.semantics; Aug 19, 2008 at 11:24.
-
Aug 19, 2008, 11:38 #2
- Join Date
- Aug 2008
- Location
- Essex, UK
- Posts
- 7
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Is it not perhaps a bit overkill?
Setting blink to actually blink is surely a bit of a waste as no one in their right mind would use the blink tag anymore.
I certainly support use of CSS resets but I tend to focus the reset styles towards the actual site I'm working on, that way you don't waste time resetting everything.
-
Aug 19, 2008, 11:54 #3
- Join Date
- Dec 2007
- Location
- Carlsbad, California, United States
- Posts
- 3,658
- Mentioned
- 15 Post(s)
- Tagged
- 0 Thread(s)
I'd say it's way overkill. Plus it doesn't validate. But, to each their own. Do what's easiest for you. But I found in the past when I had a larger reset than I currently use it ended up making it harder for me. Because when things went wrong, as they sometimes tend to do, and I had to do a little trouble shooting, I found it a lot harder to track down the problem when I had so many different rules telling so many different browsers what to do. So I find it easier to take a somewhat minimalist approach to my css resets. It works for me!
-
Aug 19, 2008, 11:59 #4
- Join Date
- Jul 2008
- Location
- New York, NY
- Posts
- 1,432
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Aug 19, 2008, 12:00 #5
- Join Date
- Nov 2004
- Location
- Ankh-Morpork
- Posts
- 12,158
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
My personal opinion?
Code::1,$ d
Birnam wood is come to Dunsinane
-
Aug 19, 2008, 12:04 #6
- Join Date
- Jul 2008
- Location
- New York, NY
- Posts
- 1,432
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Everything else is in all good use though. You guys agree, if not state what is not needed.
-
Aug 19, 2008, 12:05 #7
- Join Date
- Jul 2008
- Location
- New York, NY
- Posts
- 1,432
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Aug 19, 2008, 12:15 #8
- Join Date
- Jul 2008
- Location
- New York, NY
- Posts
- 1,432
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Aug 19, 2008, 13:06 #9
- Join Date
- Nov 2004
- Location
- Ankh-Morpork
- Posts
- 12,158
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
It was a lame geeky joke. That command would delete everything if used in the ex(1) or vi(1) *nix editors.
I'm not a graphic designer, and I tend not to do the type of very precise designs where every pixel must be perfectly aligned to prevent the layout from falling apart. Therefore I'll let browser defaults prevail in many instances. I do understand the desire for a 'reset' style sheet, though, if you're doing more advanced designs.
So don't mind me. Just trying to be funny.Birnam wood is come to Dunsinane
-
Aug 19, 2008, 13:28 #10
- Join Date
- Jun 2008
- Location
- cincinnati
- Posts
- 15
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I'm just learning css. Maybe you could help me out, I'm intrigued by this post. What would be the purpose of this css file? This isn't used for hacks to get around browser bugs? right? Is this just very common css code that you tend to use over and over again?
thanks
-
Aug 19, 2008, 14:08 #11
- Join Date
- Jul 2008
- Location
- New York, NY
- Posts
- 1,432
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Well it does provide some hacks for clearing elements and reduces some of the inconsistencies that default elements have. A reset.css is basically for over-riding browser stylesheets. I use this one for speeding up workload with advanced designs.
If you are new to css I would basically start off not using a reset to get the feel of how elements work/cross browse. Once you learn the differences then you should build a reset.css that fits your style.
The one I have provided is pretty large and covers more than is needed on most sites.
The sites I build need this because they are usually 40-70 page websites.
The CMS section is basically not needed for any sites - just a friendly reminder.
-
Aug 19, 2008, 14:55 #12
- Join Date
- Dec 2007
- Location
- Carlsbad, California, United States
- Posts
- 3,658
- Mentioned
- 15 Post(s)
- Tagged
- 0 Thread(s)
Hi,
"what would you remove"
Well is it important to you that it validates? If so, for starters remove the zooms. And I think I saw a couple other things in there that don't validate as well.
z-index: 100000; doesn't z-index only go up to 1000? I don't know for sure but I'm guessing it's a safe bet that it doesn't go up to 100,000
I like these type of threads as well. I'm always looking for ways to make my reset even better.
-
Aug 19, 2008, 15:12 #13
If I were to use a reset css style sheet I would have to pick Eric Meyer's.
http://meyerweb.com/eric/thoughts/20...eset-reloaded/
-
Aug 19, 2008, 15:21 #14
- Join Date
- Jul 2008
- Location
- New York, NY
- Posts
- 1,432
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Aug 19, 2008, 15:31 #15
- Join Date
- Jul 2008
- Location
- New York, NY
- Posts
- 1,432
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
If I am not mistaken his reset has changed again http://meyerweb.com/eric/thoughts/20...setting-again/
The reset has outline: 0; set to all specified elements. Not good for usability
Also, I would adjust the line-height but I think Eric said that would probably be the case
Other than that his reset is good for tweaking for your own preferences.
-
Aug 19, 2008, 17:40 #16
-
Aug 19, 2008, 17:56 #17
- Join Date
- Dec 2007
- Location
- Carlsbad, California, United States
- Posts
- 3,658
- Mentioned
- 15 Post(s)
- Tagged
- 0 Thread(s)
It's still a work in progress, but I'm pretty happy with mine! Although after looking over Eric's resets I may add a thing or two to it. But his are a little overkill for my taste as well. Also, primarily because of all of our long discussion on relative font sizes, I'll probably end up changing my 62.5% on the body (because of the associated nesting issues) to 81.25% and therefore the typography section will change a little bit also. I'll give it a trial run on my next project.
Last edited by PicnicTutorials; Aug 19, 2008 at 18:34.
-
Aug 19, 2008, 20:33 #18
- Join Date
- Jul 2008
- Location
- New York, NY
- Posts
- 1,432
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Are you asking why I defined a focus rule?
I defined a focus rule to alert screen viewers which form element they have selected.
How would this effect usability in a negative way? If you know something I don't know please share the good news. I am always up for learning some new knowledge
-
Aug 19, 2008, 20:50 #19
- Join Date
- Jul 2008
- Location
- New York, NY
- Posts
- 1,432
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Yeah your reset is not bad man. A few things I see that need fixing.
http://juicystudio.com/article/scree...splay-none.php
This link refers to this .hidden style.
Also, I would omit your stylesheet from using outline: 0;
.inline, .floatleft, .floatright I would get rid of.
You are a good coder and know your stuff. I have been looking at your site. Keep up the good work. Lets put our minds together and come up with an even better reset.css. I see from yours and mine combined that we could complete the missing pieces
-
Aug 19, 2008, 21:11 #20
-
Aug 19, 2008, 21:20 #21
- Join Date
- Jul 2008
- Location
- New York, NY
- Posts
- 1,432
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Aug 19, 2008, 22:23 #22
- Join Date
- Jun 2007
- Location
- Sydney, Australia
- Posts
- 253
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Actually, there has been another update.
http://meyerweb.com/eric/tools/css/reset/
But personally, I just remove the margin, padding and border from each element, and that's it for me.
-
Aug 20, 2008, 00:57 #23
- Join Date
- Jun 2007
- Posts
- 396
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
Code CSS:* { padding: 0; margin: 0}
-
Aug 20, 2008, 01:19 #24
- Join Date
- Jul 2005
- Posts
- 606
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Reset on a case by case, element by element basis. I can't stand working on sites that have a million inherited rules on every element, makes debugging a pain.
-
Aug 20, 2008, 02:16 #25
- Join Date
- Apr 2006
- Location
- Honolulu, HI
- Posts
- 329
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
<< blinks at the blink attribute.
Ummm, I'd have to agree with overkill. I have another slant on the question: Is there anything really that the Eric Meyer reset stylesheet doesn't address?
HTML Code: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, 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-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } /* remember to define focus styles! */ :focus { outline: 0; } body { line-height: 1; color: black; background: white; } ol, ul { list-style: none; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; }
Last edited by nukeemusn; Aug 20, 2008 at 02:19. Reason: Own personal stupidity
Bookmarks