Apr. 20th, 2014

marahmarie: my initials (MM) (Default)

The thing is, if you disable your favorite browser's default styles (I use Firefox with the Web Developer add-on to do this under CSS-->Disable Styles-->Disable Default Browser Styles), then check your style sheet's display for inconsistencies and correct them as needed (I use resource://gre-resources/html.css and resource://gre-resources/forms.css to see what's going on) then haven't you effectively coded your CSS to work with the default styles of any modern browser? Because with that one browser's defaults disabled you're effectively coding with no default styles enabled for any browser at all, so you're forcing yourself to write bulletproof code without performing any cross-browser checks beforehand.

For added bulletproofedness you can use Web Dev to check Box Model compliance (Web Dev - CSS-->Use Border Box Model) - an exercise in torture for me because my entire blog narrows when I do that, but it's helped me solve two or three otherwise elusive bugs ETA: fixed; needed to remove padding from #wrap.

So no need to zero out everything and its brother before you start styling, no need to perform a reset, and no need for endless cross-browser checking. And before you whisper "IE OLD" at me, forget it. No browser designed to work in Quirks Mode to this day for backward support of websites made when IE1 was still popular should count for much unless you really care that slightly more than 50% of the population still uses some version of it (over 30% use IE8 on Vista, if you really must know, and yes...Vista, seriously). Besides which, anything at or above IE9 should work with what I'm suggesting.

For more bulletproofedness you can make sure your DOC type supports Standards, and for the most bulletproofedness possible you can make IE use IE Edge so when someone goes to click the Compatibility View button, it's greyed out and completely disabled, with no workaround to bring it back unless they use IE's built-in (and in my personal experience, quite hellish) Dev Tools.

In fairness to the zero-out-and-reset-it-all crowd, the main benefit of doing one or both is it might allow you to use less code overall; less code means smaller style sheets, and smaller style sheets mean faster page loads (and I want every page to load, at most, in a billionth of a second if it must take that long, so this is an Objective, for sure). If you zero out line heights you can set one line height on body and be done with it; margins and padding might work the same way depending on what you hope to accomplish and how good you are at pulling it off without adding an entire rat's nest of code to your style sheet.

Or if you don't want your code all that bulletproof? Your webpages don't have to look the same in every browser, anyway, so why bother? If it were up to me I'd have an unstyled, utterly resizable page for mobile and a much simpler design for IE - I have zero desire to be matchy-matchy across all the many browsers out there today. I simply want my code to work (and work as intended), wherever someone might see it.

marahmarie: my initials (MM) (Default)

It's the one true Christian holiday of the year and my favorite for that reason. Today your hostess will be doing marinated, boneless roast leg of lamb with fresh garlic, fresh string beans and - I don't know, perhaps jasmine rice with brown/lamb gravy, a side salad and some toasted French bread with butter. Kinda can't wait...