5 ms·

> 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 cente

by _pmf_ 12y ago

> 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?

thangalin 12y ago
I believe Flexbox, which is supported by most major browsers, allows vertically centering content without hacks: http://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ http://philipwalton.github.io/solved-by-flexbox/demos/vertic...
- alexjeffrey 12y ago
  http://caniuse.com/#feat=flexbox 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.
  - khc 12y ago
    has caniuse.com replaced quirksmode now as the canonical source of this kind of information?
    - hobonumber1 12y ago
      Yes
    - dspillett 12y ago
      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.
    - masklinn 12y ago
      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?!?!?!!!"
  - rimantas 12y ago
    yeah, because users will die if content is not cantered strictly vertically in their IE10.
    - alexjeffrey 12y ago
      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.
  - acdha 12y ago
    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 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/ http://flexiejs.com/ for the people who are prevented by corporate policy from upgrading.
Yaggo 12y ago
Vertical centering (flexbox) support landed on IE two years ago, not to mention other browsers. Please upgrade your "facts".
boomlinde 12y ago
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`.
- scotty79 12y ago
  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.
rimantas 12y ago
Statements like this remind me of "MySQL does not support transactions".
- yeahbutbut 12y ago
  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_PostgreSQL:_A_Competitive_Analysis http://wiki.postgresql.org/wiki/Transactional_DDL_in_Postgre... http://dev.mysql.com/doc/refman/5.7/en/implicit-commit.html http://dev.mysql.com/doc/refman/5.7/en/implicit-commit.html
odonnellryan 12y ago
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.
- psychometry 12y ago
  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.
AustinG08 12y ago
elaborate hacks? 'position:absolute;top:0;bottom:0;margin:auto;'

by _pmf_ 12y ago

thangalin 12y ago

I believe Flexbox, which is supported by most major browsers, allows vertically centering content without hacks: http://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ http://philipwalton.github.io/solved-by-flexbox/demos/vertic...

alexjeffrey 12y ago
http://caniuse.com/#feat=flexbox 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.
- khc 12y ago
  has caniuse.com replaced quirksmode now as the canonical source of this kind of information?
  - hobonumber1 12y ago
    Yes
  - dspillett 12y ago
    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.
  - masklinn 12y ago
    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?!?!?!!!"
- rimantas 12y ago
  yeah, because users will die if content is not cantered strictly vertically in their IE10.
  - alexjeffrey 12y ago
    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.
- acdha 12y ago
  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 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/ http://flexiejs.com/ for the people who are prevented by corporate policy from upgrading.

Yaggo 12y ago

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

boomlinde 12y ago

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`.

scotty79 12y ago
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.

rimantas 12y ago

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

yeahbutbut 12y ago
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_PostgreSQL:_A_Competitive_Analysis http://wiki.postgresql.org/wiki/Transactional_DDL_in_Postgre... http://dev.mysql.com/doc/refman/5.7/en/implicit-commit.html http://dev.mysql.com/doc/refman/5.7/en/implicit-commit.html

odonnellryan 12y ago

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.

psychometry 12y ago
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.

AustinG08 12y ago

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