@tech

CSS is Awesome Awful A Real Challenge.

CSS is a lot of things.  What it’s not is perfect.  Far from it in fact.  Yet in spite of it’s short comings, in spite of the inconsistent browser support, both of which cause many a designer to jump through countless hoops in an attempt to achieve a consistent layout across all browsers, it’s hailed as the ONLY method to use for all web page layout.  Is that fair?

Fair or not, it’s certainly not reasonable.

CSS has thankfully come a long way since it’s beginning.  Fortunately so has browser support.  Yet there are nearly as many holes in browser support as there are reasons to use only CSS for page layout.  Some CSS features are barely, or not at all supported as of this writing.

One of the very best additions to CSS is grids.  How many of us have long waited for a reliable way of table-like layout to come to CSS.  We can get close, but one of the biggest problems is in getting a CSS box or column to extend to the bottom of a page to match all of the other columns on that page, in spite of not having any content to fill the space.  Let’s face it, this is one of the biggest issues that frustrates so many designers.  I wrote about this problem a while back, offering a couple of solutions I’ve found that seem to work.  Yet even those work-arounds don’t work in all cases.  And browser support borders on insanity.  Internet Explorer has always been one of the worst for supporting what most other browsers do including CSS.  Even though it’s been killed off by Microsoft and replaced with something that’s no better, IE support is still a plague to the development community, because so many still use it.

Of course there’s mobile device support, which admittedly CSS is fairly adept at handling, at least where a basic layout is concerned.  This is where a pure CSS layout is a must, forcing us to deal with it’s many browser support shortcomings on computer screens.

Many will argue, maybe rightfully so, that computer and browser use is on the decline as more and more people are using mobile devices on the web.  Yet, while it’s a growing market there are many of us who still prefer a desktop experience, and also must perform our work on a desktop machine.  This alone demands continued development in the various browsers to support the current CSS specification in full.

When you consider the level of technology we have available to us now, the tremendous advancements over the past decade, it’s ridiculous CSS 3 does not have full browser support today.  It’s time we all press browser developers to halt development on any new features until they first come to terms with supporting CSS 3 in full.

<table> So, even though it’s taboo, strongly ill advised, shunned, and not very mobile friendly, I have personally reached the conclusion that I will no longer spend countless hours attempting to get a complex tabular/grid layout to display properly using CSS.  I’m going back to tables for really complex layouts until grid and flex are fully supported.  Both properties offer a great future in page layout but that future is not now.  Tables are not only easy and quick to layout, they allow complex layouts and always display properly across ALL browsers.  They also display properly on mobile devices, the user just has to zoom in to read in many cases, which we all know how to do.  My decision to do this came after fighting a complex layout in CSS for a single page for an entire day.  Who has time to do this?  If we’re supposed to use only CSS for layout, then make it work properly!  I will always try CSS first but no more will I spend an entire day to only fail in the end.

I’m certain there have been others who have also come to this conclusion.  And I know there are those who will call us hacks and amateurs.  That’s okay with me.  My complex table layout loads every time, on every browser, and in far less time with far less overhead than the same layout in 100% CSS.  You know what?  I’m good with that!