Jan 17, 2015

Remember CSS Resets? They haven't gone anywhere, but they've gotten way smaller!

Okay if you don't know what CSS resets are, I'll explain them in this paragraph, which you can skip if you do know what they are: You know how every browser under the sun has a somewhat different interpretation of how things should look? You say "make this thing go this far away from that thing" and some browsers go "ok I'll make the middle of the edge of this thing this far away from the middle of the edge of that thing" and another one goes "ok I'll make the outside of the edge this far away from the outside of the other edge" and so on. Maybe you do know, maybe you don't know, but if you're making layouts with HTML and CSS, you probably have noticed that. And you're either not required to be precise enough to have to care about it (that's awesome, you lucky, evil designer) or you do have to care (you poor, unfortunate soul). CSS resets tell every single browser to shut up about all those little variations, by neutralizing everything out, so that nothing looks like anything. Everything has no style. Which is great. It's not great if you want to not really do much in the way of CSS work, but if you want you CSS work to be what you think it's going to be, and be the same everywhere, and your boss/client/broke friend to be happy about their site, then it's wonderful. It's totally wonderful.

The old Eric Meyer reset was massively long. It was like... you'd have to explain it to your person who pays you, type long. The "minified" version, these days, is super short. Here it is:

/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */ 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,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,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

So what you do with this is, you put it at the beginning of your <style> tag. Or in your first imported/linked .css file. Or, hey, as a prank, put it right at the end, or in your last import. Great prank.

So obviously, nothing has style. So you have to write in every single aspect of style that you want for every single type of element. Don't muck about in Dreamweaver with it. Don't grab your silly list of what's what, just open up your Dom Inspector (sounds kinky, I know) that's built into your web browser. You can invoke it by right-clicking on something, or on a mac it's in some developer menu, maybe hitting "inspect element" will do it, they each have their own silly word for it. But in there, somewhere, probably on the right, you'll be able to find which HTML elements you want to mess with, and you'll be able to try adding different characteristics to their CSS, and then you just copy the code back into your authoring program. Then open it up in a different browser, and see whether that evil monster interpreted things in the same way. If you need two different versions of the same code, like you do for some esoteric, not-yet-integrated selectors or whatever they're called, then go ahead. Use two or three different repetitions of the same thing. Sure, we're all supposed to be using CSS frameworks now, so none of that is necessary, and our lives are rosy and perfect and of course nothing ever goes wrong with those frameworks, so knowing anything about actual CSS is perfectly useless and embarrassing. In the magical, mystical world of proposals, and inside the minds of creative directors. There are whole universes of beautiful impossibilities locked in there along with your imaginary day. In your actual day as a web designer, this is all a total lifesaver.

Love you, have a good one!