Handling Overflow
In checking out Google Flights, a design element caught my attention.
I was intrigued that they decided to have the text fade out instead of using ellipses. Inspecting the code, I expected to find an element in each cell with an image background to create the overlay. This would certainly be the most browser-compatible approach to handling text overflow, which is why I thought they took this approach.
I've been a fan of text-overflow: ellipsis because of its browser support. Firefox was the last browser to support the feature, which didn't get it until version 7. Yes, Internet Explorer has support for it and has since version 6.
The Google implementation ended up using the ::after pseudo-element which isn't supported in IE6 through 8 (but better support in Firefox) and also uses a linear gradient which completely cut out IE and even older versions of Safari (the old gradient syntax wasn't used).
Often design decisions are dictated by technical constraints. This doesn't seem to be the case and makes me wonder if there was a point where the designer made a conscious choice between the two. When working on Yahoo! Mail, we chose to use text-overflow: ellipsis despite the lack of Firefox 3.6 support and we received bug reports that text would be awkwardly clipped and provided no other visual clue that there's more information. I wonder if Google suffers the same fate.
Conversation
I doubt that they get any support issues at all, since they don't have any way to post bug reports.
Correction: IE8 supports pseudo-elements.
Ellipses have a big drawback compared to this method: To accommodate for the ellipse, the browser has to cut off several more characters. This allows for more characters to be shown (albeit faded), so when space constraints are tight, it seems it's a better approach.
Lea Verou: Whoops. Yes, that's correct. I meant to say that ::after isn't supported in IE8 but :after is. Yes, I'm sure that's what I meant to say. :) As to allowing for more characters, yes. In a quick test, using the overlay allowed for 2 more characters to be visible. The overlay is also, arguably, less visual noise. It creates a softer and more consistent breakpoint. (Ellipsis won't line up but the overlay always will.)
They sometimes still have the faded out letters after you click on a flight to expand the info (at least for "United / US Airways"), which is definitely not good.
Interesting. Iyam, it doesn't look as good as ellipses. That aside, did you check to see what this does on, say, IE7? Do they implement some kind of fallback for less capable browsers?
I would imagine that it would be difficult to develop a web application with concerns for IE when your company also owns a web browser with better support for that feature. I'm sure there's some arrogance and/or rivalry involved in the decision making ("Well, it looks great in ours...").
FWIW, it doesn't get the fade-out in IE9, just a blunt cut-off into white.
I also fade out overflow. I got the idea from the Zune software many years ago. I implemented it inside of the DataTables jQuery plugin using nothing more than a gradient image and some css - and I always get great comments on it.
If your implementation is on solid backgrounds, even if that rows background changes, it can be done with an image, and yes, down to IE6 quite easily.
You should check out Zune, the UI is awesome. Oh, I suppose it is quite similar to Metro now, or whatever they are calling it.
The main difference is Zune had a left border on each column, so a cell would look as if it were fading out and under an actual column. Googles looks more messy, as there are less visual column hints.