ChunkySoup.net Serving hearty nuggets since 2001

Most Wanted Browser Features

Its been a while since I've read any bitching about browsers. I feel it is a direct result of how good things are these days. That doesn't mean that browsers are all perfect yet. It just means that instead of an unqualified all browsers suck, I'm find myself frustrated with specific features remaining unsupported. What follows is a list of the things that bother me most at the moment, along with an attempt to classify which browsers are holding me back.

These items came to the top of my list for two reasons. Most are on this list because they will make my life as a developer easier. Any feature that would save me from horrifyingly ugly hacks, or significant cross platform testing is a godsend. I'm also a bit of an idealist, especially when it comes to the original intent of web standards. I find myself cringing anytime I have to make a technology decision that detracts from a site's availability or accessibility, but ultimately I have to take my clients' priorities and demands above those of a potential site visitor. If there's something out there that will allow me to cater to both then I want it.

I welcome any and all comments on the composition of this list. Think I missed something? Am I wrong in my evaluation or a particular browser? Think I should just start building Flash sites and give this whole crusade up? Let me know.

No browser is perfect. I am not looking for perfect. In the classifications below Bad is unusable, most times because it's completely unsupported. The Good category is for implementations that are complete enough for the feature to be useful.

Just as no browser is perfect, none is beyond repair. Most are in active development. This means that over time some of the browsers listed below may transition from the Bad to the Good. Hopefully one day this list will be obsolete. I will try to keep the list updated, but when no update is mentioned consider this a state of browsers on or about 10/26/2001.

The List

Full PNG Support

I want to use PNG images with complex transparencies. I want to put them on layers. I want to move them around on the screen. I want to reuse images from page to page, or on different parts of the same page regardless of what the background color might be. I don't want to have to remake 100 transparent GIFs if i'm making slight alterations to a site's color scheme. I want to deliver to visitors who override my sites page colors [see below] a page that isn't covered in GIFs that were saved over the wrong color. I've wanted all this for a long, long time. Bad: IE/PC Good: Mozilla, IE/Mac, Opera, iCab. Several have mentioned that transparent PNGs can be rendered in IE/PC using hacks such as this JavaScript snippet from youngpup.net. Not to take anything away from Aaron, but from the browser end this doesn't quite cut it in my book, JavaScript should not required to make PNGs work properly.

Support for CSS2 psuedo-elements :before & :after

What could be the most useful feature in the CSS2 spec as it pertains to maintaining stylistic conventions across a large scale web site is still out of reach. I see very little time spent on sites today to define graphical conventions. Small touches like icons denoting paragraphs, quotes, or associated with links are in my experience dropped due to the difficulty of applying them consistently and cleanly across a site. Generated content could one day become a large tool in our toolbox, but I don't see it happening anytime soon, and that is quite unfortunate. Bad: IE/PC, IE/Mac, iCab Good: Mozilla, Opera.

Appropriate application of z-indexes to iframe, form and object based content

But it worked fine in my browser, so I built the whole site. Then I looked at it on a mac and I wanted to cry. I have heard this at least half a dozen times in relation to content sneaking to the top, defying it's specified z-index. It's not very intuitive and there is really little one can do besides redesign the page to get around it. Bad: Mozilla, IE/Mac, Opera, iCab Good: IE/PC. This has been fixed with the 0.9.9 release of Mozilla.

Interface for selection of user specific & author based alternate style sheets

I can count a half dozen sites that have a 'feature' to customize their 'look', and in each case its done through a complex system of JavaScript, server side logic, and cookies. YUCK! All this The same functionality could be provided if browsers just supported Alternate Style Sheets. A rare few sites have even gone as far as developing an alternate style sheet document to aide the vision impaired while maintaining their identity. But browsers vendors just haven't figured out a way to make them useful yet.

I would hope that I wouldn't have to explain the request for user defined Cascading Style Sheets. That should have been covered long ago in CSS 101. Bad: Mozilla, IE/Mac, IE/PC, Opera, iCab. For those interested in tracking Mozilla's progress refer to bug #107023

Implementation of proper error handling in parsing and scripting modules

I'd like to say I give everyone a chance. As a regular user of Mozilla I have grown to detest sites that block visitors based on some predetermined set of criteria. Too many times that criteria was either developed out of ignorance, or has become obsolete. As a java programmer in another life I am drawn to the idea of handling an error when it occurs rather then preventing it from happening in the first place. This method can only work if every user agent is on board. This means following the recommendations for handling unknown CSS properties or values instead of coming up with inventive ways to try and parse it. On the JavaScript side it would start with support for the onerror event.

With these tools in place I could be much more confident in allowing visitors on untested user agents to at least attempt to access a site I build. Gone would be the days of splash pages with embedded browser sniffers, being replaced with the blessing to let the browser do the best it can. Good: Mozilla, IE/Mac, IE/PC Bad: Opera, iCab

Clicking on labels should bring focus to associated form element

Yes, there's a <label> tag. From my experience it's one of those rarely used tags that people don't seem to bother with because it adds nothing to the visual display of a document. One of those tags that folks might find unnecessary to their everyday work. The advent of CSS makes them marginally more useful by allowing a designer to specify styles for all field labels on a page or a site. If, however, there was some visible benefit to using them in all user agents, perhaps there would become more widespread. Bad: Mozilla, Opera, iCab Good: IE/Mac Need to test: IE/PC. For those interested in tracking Mozilla's progress refer to bugs #28657, #106344, #107621.

Support for min/max heights & widths on box elements

The greatest advance in web page design since liquid tables is just barely out of reach. The tableless designs of the web are wonderful alternatives to using tables to create a layout grid, but they also seem to have a lot of the same design flaws. A document that looks good and reads well at 800px wide may not at 300px wide or 1600px wide. The ability to add constraints to the range of motion of a layout is something that at this moment can only be achieved through JavaScript. But this is an overly complex solution, even for someone as comfortable with JavaScript as I am. Min & max CSS properties are a much more approachable solution, they just need to be implemented. Bad: IE/PC, IE/Mac, iCab Good: Mozilla, Opera. For those that can't wait for IE to come around Andrew Clover has put together this fascinating JavaScript hack.