▲ 526 points
back
221 comments
I have just started doing web programming in the last month after several years of applications programming.
It feels like to me, and someone please tell me why I'm wrong, that the amount of hackery that goes into making webpages look the way web designers want them to is astounding. I google for solutions to various problems and the top rated comment on StackOverflow says "...there isn't a good way to do this in CSS, but here is this hack...".
I feel like somewhere in the universal programming ether there exists a beautiful unification of HTML, CSS, and JS that doesn't rely on any ugly hackery, and it's just waiting to be found and start a brave new world of web programming...
As someone who's done an insane amount of front-end programming, you're entirely right.
Sometimes I wish I could get back all the brain cells that I've wasted on the hundreds of "little tricks" you need to know to get things working -- and then working cross-browser.
Short answer: CSS is just a horribly, horribly, terribly badly designed language. It's the absolute worst. Don't let anybody tell you otherwise. It's that, it's what we've got, and it is awfully powerful in many ways. But it's complete rubbish in others, which include a lot of incredibly basic layout things.
My journey:
See this well trafficked "CSS sucks"-type article, Ctrl-F the comments for John Nagle, be tantalized at the hints of how it could be so much better: http://www.raizlabs.com/blog/2006/09/25/ten-reasons-why-css-...
Look up "constraint-based layout" and more specifically "constraint cascading style sheets". You'll find papers such as this one: http://citeseer.ist.psu.edu/viewdoc/summary?doi=10.1.1.101.4... and this one: http://csis.pace.edu/~marchese/CS835/Lec7/mmJournal.pdf thoroughly describing such a system.
Find "GSS - Grid Style Sheets" at http://gridstylesheets.org/ , "an implementation of Badros & Borning's Constraint Cascading Style Sheets". This is still half on my todo list, but it seems like the real thing. The catch? Relies on Javascript.
Dream of a world in which this kind of system was built into browsers as the primary way of doing layout <insert Simpsons happy dancing people gif here>.
It's absolutely stupid and frustrating. Almost nothing in modern web design just works and it's because of both a badly written standard and badly written implementations.
I get it that HTML is supposed to be for content, CSS for layout and JS for programmatic logic, but the house of cards, duct tape, bailing wire and chewing gum that goes into making a web application is astonishing.
I almost think it would be easier for somebody to come up with an entirely different "web application/dynamic document layout" technology stack with a sane and well-working model all the way through, so that stupid basic things like vertical alignment don't go unfixed year after year after year and we end up with the teetering tower of hacks we have today. We pretty much know what we want out of the web, somebody should just go build it from top to bottom all over again and throw out the huge train wreck we have to deal with today. Sure it would take a while to catch on, but I bet a more efficient set of tools and display environments would rapidly catch on.
We've done it before and replaced older broken technologies with newer, why not do it again?
Purists will attack if you do this, but if you just want to get something done, using tables for layout often solves a lot of these headaches. Horizontal and vertical alignment of left, right, center, top, middle, bottom are quick and easy.
Edit: since you are a new developer, let me add that "ugly hackery" is what you quickly arrive at once you start doing anything of reasonable complexity (read: stuff that's actually useful). Handling the edge cases is what consumes most of the code in real production applications, and this is conveniently omitted from the beautifully clean code presented in tutorials and examples.
One of the problems is we often have people doing web design was if it's print design. Find yourself a focused web designer who really understands the medium and, chances are, you won't run into this sort of problem. A good web designer understands that different browsers are going to have different capabilities, and build graceful degradation into the design. A good web designer knows that screens come in all shapes and sizes, and will avoid raster graphics and px-units wherever possible.
CSS, from my experience, makes it very easy to do web design the right way and very hard to do it any other way. It's just that the right way is often a little different from what people expect. If you accept that <i>the browser is the boss</i>, you'll be a lot happier, and incidentally your users will be a lot happier as well. The trouble is people coming from other platforms or mediums often expect 100% control, and for that it really doesn't hold your hand.
"...the amount of hackery that goes into making webpages look the way web designers want them to is astounding."
I totally agree. For example, the CSS box model sounds so simple and elegant at first, but when you add dozens of styles and elements to your page, the interaction between different styles can quickly become horribly messy no matter how disciplined you are with your CSS code. Beyond a certain number of styles, CSS inheritance turns into a black art.
CSS simply doesn't scale well for anything beyond relatively simple pages. A huge part of designing web pages is layout and spacing and yet positioning and spacing elements remains ridiculously messy and convoluted (even with CSS3).
You could also argue that tools like SASS and LESS are in effect sticking-plasters for inadequacies in CSS.
I know hindsight is a wonderful thing, but if we were designing CSS today from scratch, I think it would be designed very differently.
We're working on solving these problems with new tools (flexbox in this particular case), but it takes time for those tools to become widely usable. You can look at e.g. Google's Polymer project for a glimpse at the vision for web programming in the future.
90% of webdesign is dealing with errant behaviour.
It's why it's so frustrating when people treat front-end design with disdain as something trivially easy. Of course, if you only decide to serve the newest version of Chrome and Safari, it can be easy to remember that there people out their who don't - or can't use them.
Some would argue that whole doing the web with markup and stylesheets thing is completely wrong (Bret Victor comes to mind). And I tend to agree. CSS is a hack, heck, HTML itself is a hack.
Some material:
http://www.raizlabs.com/blog/2006/09/25/ten-reasons-why-css-...
I'd love to know why just using tables is wrong.
The user gets what they want, the designer gets what they want, and the only people unhappy are some purists.
why? what about this is wrong?
Just wondering. Why did you decided to become a web developer after so many years?
Usually developers try to find a way to solve the problem because they are engineers and that is what engineers should do. HTML, CSS and JS wasn't invented to what it has become today. It has evolved thanks to people like you and me who has find ways to use to our advantage. Example AJAX was existed since dark ages (IE5+) but no one used/knew about it. Google used that in google maps in 2004. Now, pirates are using it in usenet/torrent applications (utorrent, sabnzbd, sickbeard etc), or 3d rendering in the cloud (http://home.lagoa.com/).
If you are waiting for something better to be found, i think you will have to wait long time. There is nothing on horizon that is as simple as HTML.
For me, hardest part is in the web development is to deal with designers and product managers.
We sorta had that already. It was called Flash (or Silverlight, etc. pick your poison) and while it was easier for authors to do many things, it sucked for users in more ways than I can count.
Be glad you did not have to do this when IE5/6 was still around and Firefox was starting to go strong. Sites with sole purpose todocument all the hacks you need to do to force IE to behave a still around.
Just in case anyone's unaware... it's entirely possible to vertically center elements of variable height too in pure CSS... it's just "unsemantic", because it relies on the fact that only table cells have "vertical-align:middle".
But that's how I center every one of my "modal dialogs" on a site -- the whole modal dialog is inside a <table> with position:fixed and top/bottom/left/right:0. Then, just give the <td> a "vertical-align:middle", and then put your desired visible dialog <div> inside it.
It's annoying to have to wrap something inside of a <table><tr><td> just to vertically center something, but it sure beats using JavaScript to do it. (You might be able to do it just with the display:table-cell property too, but it's been a long time since I checked browser compatibility.)
> It's annoying to have to wrap something inside of a
> <table><tr><td> just to vertically center something
It is not OK to use table and friends in you HTML just for styling purposes. It's totally OK to use display: table* in your CSS, because CSS has no semantics, its purpose is styling.
I'm surprised nobody has mentioned the display:inline-block approach to vertical centering. It's a bit awkward for a couple reasons but it is responsive to dynamic content (no fixed dimensions are required), and it does not require tables. It does require a non-semantic (albeit empty) "shim" div. I'm not sure how well it fares in Ye Olde IE 6.0 but hopefully this is not a concern to most webdevs today.
Here's a jsfiddle to illustrate it. http://jsfiddle.net/qu5jq/
At least in every browser I've tested, display:table-cell works, as long as that is inside another element with display:table. This allows one to retain pedantic purism of all divs.
using translate() you can center variable width/height stuff too (without the table stuff): http://css-tricks.com/centering-percentage-widthheight-eleme...
It confuses me that you have to specify things in terms of margins, I understand how that is technically correct but surely something like alignment: center should just align to the center of the parent element?
I've spent hours in the past the past getting correct centring behaviour in CSS, then tried by just putting the whole thing inside <center></center> and had it work immediately in all browsers. But apparently that's "cheating".
OMG, just use a table! It's not semantic but no one will die and your mom will still love you, I promise! And if you are using haml/jade/handlebars whatever it is so insanely easy to create a little mixin or whatever to keep your code clean.
Articles about how to do this should be summarized like this: "Vertical centering hard/hacky/messy unless you just put it in a table. So put it in a table".
(I do realize the article says this).
BTW, regarding the argument about the damage of using tables wrt screen readers, google themselves used tables to layout very basic buttons on their landing page until very recently. If you use it sparingly and just for this purpose, screen readers will do just fine. Now, using tables for other types of layout can and will break screen readers but a full old-school table-based layout is a long way from having a single TD to center stuff.
I haven't done any front end web work so I'm confused by this. Can someone please explain why it is noteworthy? It seems strange to me that something as simple as centring a box should require special attention. Why aren't such tasks trivial beginner stuff?
Can someone paste the code somewhere else please? The linked website is broken. And yes, I have Javascript enabled. But it's probably using localStorage (with no graceful degradation), which I won't allow. Is this becoming a thing? Either you give up your privacy, or you can't surf the web anymore?
When CSS reached a certain point, using tables for layout suddenly became evil. CSS was like some strange measure of your salt as a frontend dev. Very Emperor's New Clothes type stuff.
But, I can remember trying projects with tableless design at that point, and absolutely beating my head against a brick wall attempting things in CSS that required almost zero thought with tables. Then, I'd finally get it right in one browser only to find that it looked like garbage in another.
It was like having a toolbox with a hammer that I couldn't use, instead being forced to nail everything with a screwdriver. And it wasn't just that I was accustomed to tables. They were easier and more natural. When you think about it, layout is nearly always grid-like.
So, I confess that there were times when I said screw it and reverted to tables. I'd solve problems that weren't working after hours of trying with CSS in literally minutes.
And the challenge with CSS is still apparent. Here we are all of these years later, still trying to do something as simple and frequently necessary as center things vertically which, BTW, doesn't work in my stock Android browser.
CSS is a bloated, convoluted mess and just too much work for simple things. That's why I have always found it somewhat draconian that people insisted on CSS as if it didn't have its own significant issues. If there were a tag that operated just like tables, but indicated layout or, as I think someone else suggested, a simple attribute to mark a table as layout vs row/column data, most of the semantic/SEO problems could be solved.
For that matter, I am not convinced that we should be so bent on having html pull double duty as the source for semantic data and the source for a presentation engine's rendering. Maybe a different approach altogether could be more liberating and efficient on both fronts.
Does it seem a bit off to anyone else in chrome?
http://www.imgur.com/7JA69Ty.png
Or is the browser chrome considered usable real estate.
Why is such basic css hyped so much? Can someone technically explain it? Is the ratio of HN folks that need Web 101 greater than the ratio of people who need Startup advice, including technical and architecture solutions? (Been doing dev+webdev for >13y)
The fact that something so simple needs to be explained as "a thing" or "a trick", many years after HTML5 even came out, feels like a disgusting frontend failure.
Pretty nifty trick, but I think undoubtedly the best is the transform 2D method detailed in this CSS-Tricks article: http://css-tricks.com/centering-percentage-widthheight-eleme... — You don't need to know the height or the width, and the great thing is transform2d's are supported in most browsers that matter. If you're smart and have dropped IE8 support, then all browsers are mostly covered and is definitely a lot nicer/neater than needing a height/width or using display:table and display:table-cell hacks.
If IE8 and down matters, then there are polyfills available for this functionality.
I have written about a much better (IMHO) solution that does not need the height be declared and does not use tables.
Very nice. When I actually stop to think about it, it's amazing to me that this is not immediately easy to do. Things like this give credence to Bret Victor's most recent talk.
HTML/CSS is generally quite flexible when it comes to operations on text. No surprise since it was its intended purpose to be a format for documents.
Making any layouts and god forbid centering elements has always been a headache for me. Even by looking at the CSS examples provided by the link my first thought is how random they all seem and how ugly they are not to mention difficult to remember and use. There should be a single way to center an element. It should be an obvious operation given how important and common it is.
Some very useful CSS properties might take a lot of code and be hard to implement in native GUI toolkits like floats, overflow, height/width with percents, text wrapping etc. This is a sweet spot where HTML/CSS shines.
I have been playing with QML lately and decided to implement the Dialog (Absolute center within viewport) that pops after visiting the linked page just for comparison:
Here's the dialog equivalent that just fills the entire screen of an application done with QtQuick 2.0 for Desktop.
Layouting is easily done by anchors. Filling a rectangle to match a parent's container, centering an element inside a parent, etc. Other containers such as Rows, Columns or Grids are also provided. Property bindings are used for centering the dialog even if the viewport changes. Text wrapping is also done explicitly and binding was necessary to limit text width to the ScrollView for it to work.
One big difference compared to CSS is that by looking at the source I can see at glance what the layout structure is and what might be happening with the element.
Another cool thing about QML is that it's as simple as taking the code, creating a new file 'Dialog.qml', adding a few properties, a signal and some functions and we get a reusable standalone component:
that is very convinient to use:
result: http://i.minus.com/iGTQhAxP55bBP.gif (3MB gif)
This is interesting but I don't like it. It's a quirky non-idiomatic hack. Using vertical-align/line-height/inline-block is equally-effective and IMHO conceptual and readable/self-documenting.
Details: http://jsfiddle.net/uy64k/6/
This requires no extra markup, but it does require the font-size and line-height to be reset.
We use this same technique in Firefox to center images when viewing them standalone, inspect http://www.elizabethtownfamily.com/wp-content/uploads/2012/0... to see for yourself :)
Don't forget to sacrifice at least one goat, if you want cross-platform, standards-compliant code.
I came up with a similar solution a while back [1]
[1] http://stackoverflow.com/questions/5009864/using-all-four-po...
Vertically centering dialog boxes in a window is a minor pet peeve of mine. Boxes should be slightly above center.
If I recall correctly, the original Mac UI guidelines specified that the midpoint of the box should be 1/3 the distance from the top.
What is performance loss/gain compared to Javascript solution of this problem?
Those CSS class names are unacceptable. (:grin:)
Doesn't work with NoScript. Bad example.
It's a shame that we need to hack layouts to work with language designed for changing fonts and colors.
It's still impossible if you'd like to center a div that resizes itself depending on the content.
not sure how people who "know CSS" can work without knowing this...
There is anything new here ?
Why do you need this to center a box in css?
It can be done without this too.
How is this related to hacking now again?
this is good