Hacker News Reader

Comment by anateus | Hacker News Reader

I haven't seen so much nay-saying on HN in a while. It's like because there's an artistic element this or it's pure-web tech the appreciation of a cool hack and interesting exploration of a technology is completely gone. This is a classic example of a "hack", pushing CSS slightly beyond what it was intended for and potentially what is practical.

But it's beautiful and clever, and if you truly can't appreciate it, that's sad.

View on HN

Scanning through the comments, it looks like most of the naysaying was downvoted and the comments about how it's neat floated to the top, including yours.

This is pretty common comment pattern on reddit (everyone hand-wringing self-righteously over the "problem" of a few, heavily downvoted comments). It's disappointing to see it here. And yes, I realize there is some irony in this comment.

I posted my comment when those that are now downvoted were at the top, and the link had already been up for 3 hours and was near the top of the homepage. If it had been just a few unfortunate comments on a fresh thread, I would not have bothered. I'm glad things adjusted, but I was providing a point of view that was barely represented at the time.

Then it did its job! When I first came to this thread I felt super sorry for the original author of the page, who most likely didn't post it to HN. Such off-hand, unconstructive cynicism can crush somebody's self-esteem.

People are just tired of all the legacy technologies push. The web should become actually open to new technologies and languages.

> But it's beautiful and clever, and if you truly can't appreciate it, that's sad.

Interesting. Is it as sad as the fact that one still cannot vertically center a div in CSS without using elaborate hacks?

I believe Flexbox, which is supported by most major browsers, allows vertically centering content without hacks:

http://philipwalton.github.io/solved-by-flexbox/demos/vertic...

http://caniuse.com/#feat=flexbox

Until most IE users upgrade to 11, it's not usable by those of us who can't exclude a large chunk of our users.

has caniuse.com replaced quirksmode now as the canonical source of this kind of information?

Yes

For simple lookups, pretty much in my experience, especially as it doesn't seem to have seen much by way of updates since IE9.

Though quirksmode does go into more detailed analysis in places which can be pretty useful, particularly for when you are stuck supporting legacy browsers, so caniuse isn't a complete drop-in replacement.

caniuse.com provides broad outlines, quirksmode is much more specific and PPK hasn't really worked on the new non-mobile stuff so far, as far as I've seen. Nothing on flexbox for instance, although he does have box-sizing: padding-box.

caniuse is good for "is there a chance this will work?" or "could I use $some_feature in my new project?", quirksmode is "why doesn't my use of $some_feature work in $pile_of_shit_browser?!?!?!!!"

yeah, because users will die if content is not cantered strictly vertically in their IE10.

ignoring your frankly unnecessary sarcasm, I'd have to point out that some of us are held to the expectation that websites should look almost the same in older browsers. My previous employer, for example, required full support of all features in IE7, and that the product should even bear some resemblance to a website in IE6. In that situation (combined with AJAXed content making polyfills difficult), flexbox isn't usable. I'm sure I'm not the only one who has been in the situation of having to support non-bleeding-edge browsers.

The minimum threshold is IE10 since nothing prevents you from using the old spec which was implemented in that release:

https://gist.github.com/acdha/a91a46706de02c37566a

This is a little tedious but a CSS preprocessor makes it pretty easy and you only need to do it once for something this simple.

Since Microsoft is pushing automatic upgrades to IE11 hard for security reasons, I see over 80% of our users having a browser which supports flexbox. At that point, it's a manageable problem because you can deploy http://flexiejs.com/ for the people who are prevented by corporate policy from upgrading.

Vertical centering (flexbox) support landed on IE two years ago, not to mention other browsers. Please upgrade your "facts".

What constitutes an elaborate hack? You can do it with a hack, but it isn't really elaborate. Put the div in an outer div. The outer div has `display: table-cell` and `vertical-align: middle`.

That's all good and fine unless you also have some requirements about the geometry and behavior of outer div. Then you need to add another div and give it display: table but that interferes with the structure of your document.

Also you might want outer div to fit the space it lies in and height: 100% does not always work.

Basically somewhere around transition from IE to Firefox and from transitional to strict DOCTYPE tables were broken beyond repair for layout purposes. We have not recovered since. Flexbox brings some hope but not necessarily salvation.

Statements like this remind me of "MySQL does not support transactions".

It depends on what you mean by "supports". If you use myisam or need DDL statement rollback MySQL is still not a great option.

http://wiki.postgresql.org/wiki/Transactional_DDL_in_Postgre...

http://dev.mysql.com/doc/refman/5.7/en/implicit-commit.html

There's a good reason for that.

Traditionally, HTML layouts are not designed to specify any kind of vertical behavior. There is no "vertical" in HTML. How the interface works (your browser) and how it is used (up-down scrolling) naturally imposed a scaling on width, not on height.

I'm not sure why that's a "good" reason. It's possible to vertically center something using hacks and there are obvious use cases for doing so. The fact that CSS doesn't allow us to do so is a failing of the language, plain and simple.

Traditionally, people used tables for layout and <blink> tags for emphasis. That doesn't make it right, either.

elaborate hacks? 'position:absolute;top:0;bottom:0;margin:auto;'

Well said. Surprised this is the top comment!

It's been done before (and posted here) http://marvelapp.github.io/devices.css/

Edit: Changed link

MalwareBytes doesn't like your link.

Odd, no problem for me.

There's a lot of ads on the page , so maybe that's why.

Here's another one

http://marvelapp.github.io/devices.css/

Cool, thanks for the new link.

You're probably right though. It's the ad-heavy pages that always seem to cause problems.

Sure, look up "single div" on codepen and you'll find tons (http://codepen.io/search?q=%22single+div%22&limit=all&order=...). I don't think this website claims any new technique, It just shows off a collection of things made using it...

Not true - none of those are a single div

None of these devices are one div... http://i.imgur.com/IwhB56A.png

Reply on news.ycombinator.com