Browser Advice and Opinions

[phoebex2]

I know that one of the most important things about site design is making sure it looks right on every browser. What I'd like to hear from others concers their experience in keeping up with changing browser standards (or lack thereof) and just how far it should go.

What's the oldest/worst browser you'd try to keep up compatibility with?
In your opinion, what's the best way to keep up with changing standards?
What are the biggest no-nos in satisfying browser demands?
And where do you draw the line?

In my experience, aside from a few homebrew browsers made by intrepid coders who might have studied a little more before building, Internet Explorer is by far the most difficult to deal with. I think sometimes that it's part of their plan to punish everyone who wants the web to crawl out of the dark ages or something.

My favorite is Firefox and its cousins, mostly because they obviously really care about improving things. Even if I have to keep learning things over and over to keep up sometimes, it's still better than everyone's pages looking like the 90's or breaking horribly because the browser doesn't care about css changes or whatever.

Anyway, if anyone has an opinion on this (and I know they do), let it fly. I appreciate any input that's offered, as long as it's sincere and polite.

 

[essellar]

I actually remember when Internet Explorer was the good browser to code for. That was a long time ago, though, so it's hard for me to convey the degree of hatred I once had for Netscape 4.x to folks who weren't there. Being cross-browser today, even going to the extent of supporting IE6, is a cakewalk in comparison.

The standard modern approach is:

(1) Pick a good browser (that might be Firefox or Chrome) that has reasonable facilities to let you see what's going on as the main browser to use while coding. The Developer Tools in Chrome are second-best to none; Firefox is very close these days, and there are plugins to make up for any deficiencies there may be. Honestly, most of what might be missing would be useful when you're doing some pretty esoteric stuff (full-on web applications rather than web sites), but you won't be missing much by sticking with Firefox unless you get all esoteric and stuff. (And there's a pretty good chance that in a month or two, the situation will be temporarily reversed again.)
(2) Make your site work well and look good in that browser, trying as much as possible to stick to things that are standard (avoiding things like browser-prefixed CSS properties wherever you can). It's handy to have bookmarks pointing you to things like HTML5 Doctor and HTML5 Please to keep track of what's safe to use. Remember to use a valid HTML document type and, having told the browser which dialect of HTML your page is going to be speaking, keeping to things that are allowed in that dialect. (No fair saying, "I will be speaking French," then trying to sneak in a bit of Afrikaans and hoping the listener understands.)
(3) Give it a quick check in another good browser just to make sure you haven't accidentally relied on the way your browser handles any errors in your code. Most browsers will handle errors gracefully, but each is turned sullen and moody by something or other, and they're all a bit different in that respect. Fix anything you may find. (Keep in mind that Chrome on Windows will have ugly rendering of non-standard fonts, to the point that they may be illegible at smaller sizes. The only fixes are to go much bigger or to choose another font.)
(4) Swear softly under your breath. Or pray, if you have faith that some entity will be listening. Either action will have similar results at this point.
(5) Open the page in Internet Explorer. If you're using the most recent version, you may be pleasantly surprised. You won't be seeing what people on IE7, IE8 or IE9 will be seeing; their surprises are likely to be less pleasant unless your site is pretty basic. If you want to support old versions of IE, it would be a good idea to have an XP box handy. It can be a pretty hopeless machine as computers go; as long as it can run a browser, you're good. (Don't worry about IE6 unless somebody is paying you a lot of money to make things work in IE6.) "Basic" doesn't necessarily mean "functionless" or "ugly". Provided that you aren't using anything from CSS3 (that doesn't have a good polyfill¹), aren't handcrafting complex JavaScript (jQuery will reduce the load on you if you are scripting heavy-duty thngs in the client), and don't need things to render in exactly the same way across browsers, you may already be okay. There is a good chance, though, that you will have to load additional style sheets or JavaScript using conditional comments to make the "old IE" experience a good one. On the other hand, you can simply decide that people using WinXP+IE or refusing to upgrade their browsers on Win7/8 are not part of your target audience.

Things aren't nearly as bad as they once were, and most of the problems these days come from trying to do cutting-edge clever things rather than simply trying to get a web page up. There are a few things that IE10/11 still don't quite understand (mostly newer CSS selectors), but for the most part there are other ways to do the same thing. If you're not doing anything terribly tricksy, you ought to be able to live with the differences you find.
______________________
¹ A polyfill or shim (sometimes called a "shiv" by people who are more concerned with cool than knowing what words like "shiv" mean) is a bit of code that either forces a browser to believe it knew how to do something all along (the JavaScript global environment is cool that way) or that substitutes one behaviour for another if the desired behaviour isn't actually possible.

 

[phoebex2]

...
Holy moly, you're like a human Google or something.

The shim bit is something I've heard of but know nothing about. It's highly interesting, though, and I'm going to do some research on the subject just to learn about it (I do that a lot). No intention of trying to fool browsers into doing what they're told, just a desire for knowledge. I do get into the esoterica of it all, just not with anything I've ever put out there for anyone else. More for myself and the sake of learning, yeah.

As for IE6, I have awful memories of it. And yeah, someone would have to pay me a LOT. I don't even want to know how bad Netscape was, I've met more than one person that has literally, physically, cringed upon hearing its name. It reminds me that one day everything I think is hot stuff will be considered junk, and that keeps me down to earth, I think, and that's good.

I remember learning about Firefox and being reluctant to try it out, and how impressed I was just with how much more secure it was right out of the box, cookie-wise, etc. And the fact that it's only crashed on me 3 times in my life makes me quite loyal, but what you're saying about Chrome makes me want to give it a chance, at least for the purposes we're discussing.

I do appreciate the part about browser-specific CSS also, it tells me I'm thinking in the right directions myself.

On a related note, I got to look at my own site last night via a friend's (somewhat outdated version of the) iPhone, and was surprised to find that it works at least as well as several popular, cutting-edge sites. True, it's probably because phones are being made better for browsing these days and not because I have some magical ability to turn old PHP code into something use-able, but it felt good anyway.

For the record, I for one can tell a shim from a shiv. If you shiv your car's starter, it could get you arrested for assault, and if you shim a prison inmate, he simply becomes slightly taller. XD

Thanks for the awesome post, essellar, that was really enlightening.

And thanks for being here, I think you add a lot to this place.

 

[leafypiggy]

What he said.

And: Use a CSS reset stylesheet. It will save your life.

 

[phoebex2]

I was going to ask you what that is, but I followed my own advice from earlier (I Googled it).

I'm definitely looking into that further, and thanks. I never even knew it existed until just then.

 

[essellar]

I love that shiv/shim disambiguation line, and may be caught at some point in the future using it without proper attribution. I remember a lot of useful things, but I can rarely remember how I learned them.

 

[phoebex2]

I remember a lot of useful things, but I can rarely remember how I learned them.

Don't feel bad, it happens to me too. Sometimes the information is so obscure it's like I'm the only one who knows it amongst the people I know, and they wind up quoting me on it like it was me who thought of it in the first place.

As for my disambiguation (I've always loved that word), you're more than welcome to let people think it's yours if you forget who said it. Just don't forget I said you were welcome to do that and you'll be fine.