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.