Need to be caught up to date

Hello everyone. Long time no see. I am trying to get back into the web design business, as I’ve decided that I’m going to make this my full time career. Currently waiting on job applications to pull through and hopefully get me my first job in this industry. That being said, I would like it if someone could kinda give me a list of any new big bugs that are frequent with newer browsers. Last time I was here, was when IE6 was dying. Is IE7 done for as well? Or is it minimal. Can someone list any frequent FF bugs? Opera? Safari? Chrome? I realize this may be a big request but I’d appreciate it :). Any differences that I should know about from a few years ago, to now, would be appreciated. Is CSS3 still patchy and should be avoided? Or is use kinda like “if you have a good browser, you can benefit from it, but if not, then a fallback will be provided.” I tended to use the latter approach when I was here. I can do my own independent research on the bugs to learn about it and everything, I just want to know what to look up.

That being said, if anyone has a job opening at their firm then you know where to find an applicant!

Hi Ryan,

Things have changed in the last few years and most people have dropped support for ie6 and 7 and offer only basic support to IE8 (depending on your intended market of course).

CSS3 is widely used and browsers like Chrome, Firefox and IE11 are auto updating so you can use newer things more quickly than before but still have to be careful with fallbacks for ie10 and under. Vendor extensions are in use for the newer stuff but can be dropped for things like border-radius which is natively supported by modern browsers.

For support tables the caniuse site is worth a visit when you need to know what and where something is supported.

There are bugs in Firefox and Chrome but these tend to get fixed pretty quickly in the new versions and those browsers are updated automatically so its not an issue of maintaining separate code for various browser versions otherwise you would need 36 versions for chrome alone.

The big change since you were here is responsive design/ media queries and catering for mobiles and tablets as well as desktops and it is this process that takes up most of the time these days rather than fixing bugs.

Thanks for the timely answer Paul. Is there a website you can go to which helps emulate multiple platforms on mobile devices? I know Opera offered mobile version of their website a few years back, have others followed suite? I’m not too familiar with mobile rendering engines, I assume Opera isn’t the only one. Chrome has one (I have a smartphone with it)…On my Samsung Galaxy S3, there is an “Internet” app, which I assume is IE?

Are IEs behaving? IE8 didn’t have too many bugs, so I assume IE9 and up are pretty much caught up with proper rendering now?

Chrome has this built in by default. You should familiarize yourself with Chrome Development tools. Once you do, you’ll wonder how you ever did it any other way. Firefox has something similar, but it’s not quite as good imho.

Are IEs behaving? IE8 didn’t have too many bugs, so I assume IE9 and up are pretty much caught up with proper rendering now?

IE8/IE9 don’t have a lot of bugs (at least not like 6 or 7), however it has terrible support for any of the newer CSS3/HTML5 specifications which can cause quite a bit of headache. CanIUse.com that Paul listed above is your best friend in this area. The numbers I’ve seen have listed IE8 at 1.5-6% of the other all browser population. It varies by where you look. Many places have started phasing out IE8 support all together.

IE is still crap in general (11 is better, still not good), but fortunately for the open internet Chrome and Firefox outnumber IE greatly. The best thing about Chrome and Firefox, is they auto update so you don’t have to worry about your users running extremely old versions of the browser and can start using new specs almost immediately. Your audience may differ on what browser they use the most of course, I know alot of enterprise environments still haven’t moved away from IE8.

Thanks! IE has always been slow on getting on the CSS3/HTML5 train. Ah, I’m happy to hear that Chrome and FF are doing auto updating. I had to have 4-5 old versions of FF back on my old setup :D. Thanks mawburn.

Also, Chrome is now the biggest player out there, and Firefox has just hit its lowest user level ever.
Makes you wonder where the web is going. Exciting times :slight_smile:

Other things you will face a lot more in forums now are—

  • questions about CSS frameworks (like Bootstrap and Foundation). It’s kind of annoying to see people having so many problems with unnecessary software like this. O well.

  • another, more depressing feature of CSS questions is that more and more people are using preprocessors like Sass and LESS, and they post their code in that form … meaning that they are not posting CSS any more. IMHO, no one should post pre-processor code and call it a CSS question.

What are preprocessors? How are they in use in correlation with CSS? What happened to the good old days of Notepad?

Google Sass or LESS. Basically, they let you write style variables and stuff like that, and then process an actual CSS file out of all that.

Heh, here is a snippet from their example code over at SASS.


[COLOR=#008080][FONT=source-code-pro]$font-stack[/FONT][/COLOR][COLOR=#003366][FONT=source-code-pro]:[/FONT][/COLOR][COLOR=#003366][FONT=source-code-pro]Helvetica[/FONT][/COLOR][COLOR=#000000][FONT=source-code-pro][B],[/B][/FONT][/COLOR][FONT=source-code-pro][COLOR=#0086b3]sans-serif[/COLOR][COLOR=#003366];
[/COLOR][/FONT][COLOR=#008080]$primary-color[/COLOR]: [COLOR=#009999]#333[/COLOR];

[COLOR=#000080]body[/COLOR] {
  [COLOR=#990000][B]font[/B][/COLOR]: [COLOR=#009999]100%[/COLOR] [COLOR=#008080]$font-stack[/COLOR];
  [COLOR=#990000][B]color[/B][/COLOR]: [COLOR=#008080]$primary-color[/COLOR];
}

Totally useful…it supposedly makes CSS “fun again.” Thanks Ralph.

It does, I won’t ever write CSS files by hand again if I can help it.

What’s even cooler is math manipulations, like changing the color:


$base-color: #0F0;

#content {
   background-color: lighten($base-color, 15%);
}

Renders to:


#content {
  background-color: #4dff4d;
}

Which is amazing for stuff like borders of buttons and other colors objects where you just want it a little darker/lighter than the inner background.

Frontend Frameworks are pretty popular now, like Ralph mentioned earlier. They take alot of the boring repeated overhead out and make it clean. If you stick the base styles, your sites start looking like every other site though, so you should really override them alot.

The 2 most popular are:
Bootstrap is based in LESS and most used. There is a SASS version though.
Foundation is based on SASS and my favorite.

Imgur is a “Bootstrapped” site. Heavily modified and customized of course.

Also something else you probably missed, jQuery is used pretty much everywhere. It makes basic DOM Javascript not suck. jQuery UI is a frontend framework built on top of it, but it’s not a full framework like the 2 above. It’s pretty good for picking pieces out that you like or need.