Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Absolute Horizontal And Vertical Centering In CSS

coding.smashingmagazine.com

Post reply on HN
Print view View original

51–60 of 62 posts

Re: Absolute Horizontal And Vertical Centering In CSS

#51

Post by pstuart »

svachalek wrote: post #35
Aldo_MX wrote: post #29

Earlier quoted context omitted.

> It was poorly designed by a group of people who chose to ignore existing understanding of layout models. Can you please elaborate how tables were the understanding of layout models 15 years ago? The web was not thought to be interactive at that era, but to be printed, it's not the fault of the old specs that the web progressed significantly fast.

Who said the web was designed to be printed? (1) The "H" in HTML stands for hypertext. (2) When has a web page ever printed well?

But there was no client side language to do anything with it.

Re: Absolute Horizontal And Vertical Centering In CSS

#52

Post by Pxtl »

nostrademons wrote: post #45
Pxtl wrote: post #27

Earlier quoted context omitted.

I like to point to the failure of keeping table headers visible at the top of a page as you scroll down a table. If I had a book where a table spanned multiple pages and the header row wasn't included at the top of the page, I would throw the book out. A scrollable table with fixed headers is something that Visual Basic supported in 1997.

Position:sticky will fix that once it's supported in a critical mass of browsers.

And it only took a decade or two!

Re: Absolute Horizontal And Vertical Centering In CSS

#53

Post by swordfish0321 »

aschearer wrote: post #47

I'm curious why there isn't something like TypeScript or Coffeescript for CSS? I'm aware of LESS and SASS but to my knowledge they don't go as far as their JavaScript complements in adding future-looking functionality. Is it simply not possible to add CSS grid or flexbox (or both!) support to LESS and have it compile down to plain ol' CSS?

Not sure what you mean by "future-looking functionality". I don't know anything about TypeScript but CoffeeScript is just an opinionated way to generate JavaScript. Isn't that what both LESS and SASS do for CSS? Regarding grid or flexbox, that is ultimately a design decision/preference of the architect.

So using your example, if SASS inherently used grid that would be like CoffeeScript introducing MVC into your project.

Re: Absolute Horizontal And Vertical Centering In CSS

#54

Post by masklinn »

RaphiePS wrote: post #48
Zikes wrote: post #40

Earlier quoted context omitted.

There have been attempts to fix this by creating languages which compile to each of those: HAML for HTML, CoffeeScript/Dart for JS, SASS/LESS for CSS. The language benefits tend to be fairly obvious, but there hasn't been much of anything in the way of native browser adoption that I've seen yet, apart from Google's plans for Chrome & Dart.

Now, I haven't used SASS/LESS that much, so feel free to correct me, but it seems like they're solving a different problem. They keep your code DRYer, add nice things like mixins, etc. However, they don't abstract over tasks like layout--you're still stuck with hacky CSS tricks and semantics.

> Now, I haven't used SASS/LESS that much, so feel free to correct me, but it seems like they're solving a different problem.

You're correct, but that hasn't stopped people from trying.

Re: Absolute Horizontal And Vertical Centering In CSS

#55

Post by gcv »

Aldo_MX wrote: post #29
gcv wrote: post #19

Earlier quoted context omitted.

CSS is not great for its original use case. It was poorly designed by a group of people who chose to ignore existing understanding of layout models. The TeX boxes+glue model, had it been adapted for CSS, would have made all the absurdities and nasty layout workarounds of the last 20 years unnecessary.

> It was poorly designed by a group of people who chose to ignore existing understanding of layout models. Can you please elaborate how tables were the understanding of layout models 15 years ago? The web was not thought to be interactive at that era, but to be printed, it's not the fault of the old specs that the web progressed significantly fast.

I said nothing about tables. I specifically referred to the TeX boxes+glue model.

In addition, if the web was truly meant to be printed — an assertion I have never heard before; it sounds blatantly false — then not adopting the massively successful TeX system sounds even more insane.

Re: Absolute Horizontal And Vertical Centering In CSS

#56

Post by Pxtl »

hnriot wrote: post #50
brandonbloom wrote: post #8

Earlier quoted context omitted.

I've been saying this of JS/HTML/CSS for years, but people seem to suffer from severe stockholm syndrome.

yet, despite this the web seems to be doing just fine, apps are powerful, often better than native and nobody (else) seems to be complaining that much. Sure, some things take actual skill to implement. We live in an imperfect world, and while it's always easy to blame the tools, it's far better to just get on with improving things and making the best of what we have. It's a far better world today that the setup.exe d…

The entire combined might of the 21st century computing industry has managed to make the dominant application platform provide a tolerably good application experience on a dual-core multi-gigahertz machine.

Whoopee.

Re: Absolute Horizontal And Vertical Centering In CSS

#57

Post by Pxtl »

yannis wrote: post #37
gcv wrote: post #19

Earlier quoted context omitted.

CSS is not great for its original use case. It was poorly designed by a group of people who chose to ignore existing understanding of layout models. The TeX boxes+glue model, had it been adapted for CSS, would have made all the absurdities and nasty layout workarounds of the last 20 years unnecessary.

Please read Håkon Wium Lie's PhD thesis http://people.opera.com/howcome/2006/phd/ to understand the reasoning behind the development of CSS. I think it was going in the right direction, although the ride got bumpy when committees and commercial interests started getting involved. Its major objective was to achieve separation of content from presentation which it achieved and I think you being unfair in your statement…

> Its major objective was to achieve separation of content from presentation which it achieved and I think you being unfair in your statement about CSS not being great for its original use case.

I have never seen this fully implemented except in the simplest of blog-engine layouts and toy examples. There is always some pollution of the markup, at the very least in the form of the ordering of elements.

A template-based approach would've provided the same semantics a lot sooner than a decade of half-baked CSS hacks.

Re: Absolute Horizontal And Vertical Centering In CSS

#58

Post by lambda »

brandonbloom wrote: post #8
pmichaud wrote: post #6

The fact that this is an interesting article is a huge indictment of CSS. It was developed for a different, simpler use case, and it's obviously the wrong abstraction at this point. Too bad it's entrenched.

I've been saying this of JS/HTML/CSS for years, but people seem to suffer from severe stockholm syndrome.

CSS was originally designed only for inline and block layout in a traditional single column of text with left or right floated figures. It has never had any features specifically designed for full page layout, but people have done lots of hacks to use inline, block, margins, padding, and floats to achieve full-page layouts they were never designed for.

There have been improvements in CSS2 and CSS3, like adding table layout so people could at least use the table layout features on div elements rather than abusing tables for layout, and CSS flexbox that work well for standard UI widget layouts.

But the big fixes to layout have been harder to specify and agree upon. They've been in the works for many years, but it's taken a while to figure out how they really should work, and which parts should be fundamental. It looks like it's getting a lot closer; the CSS Grid Module http://dev.w3.org/csswg/css-grid/ is being treated as the fundamental part of the stack on which others will build, it is being worked on by several browser vendors and is in highly active development, and several browsers have implementations in development. It seems to draw elements from IE's experimental CSS grid, as well as the templates of the earlier template layout proposal.

So, yeah, for many years CSS has had a big deficiency in specifying page layout. It's going to get better very soon, however, once the CSS Grid Module is finished and implemented. I'd imagine we'll start seeing implementations within a year; here's Webkit's tracking bug for it: https://bugs.webkit.org/showdependencytree.cgi?id=60731&hide... here's Chromium's: https://code.google.com/p/chromium/issues/detail?id=79180 . Mozilla doesn't seem to be working on it yet, though they have had some preliminary discussion: https://bugzilla.mozilla.org/show_bug.cgi?id=616605 . IE had implemented an experimental Grid Layout proposal that the current work is based on, so while the syntax won't be exactly the same, they have most of the underlying functionality working: http://msdn.microsoft.com/en-us/library/ie/hh673533(v=vs.85)...

Re: Absolute Horizontal And Vertical Centering In CSS

#59

Post by masklinn »

lambda wrote: post #58
brandonbloom wrote: post #8

Earlier quoted context omitted.

I've been saying this of JS/HTML/CSS for years, but people seem to suffer from severe stockholm syndrome.

CSS was originally designed only for inline and block layout in a traditional single column of text with left or right floated figures. It has never had any features specifically designed for full page layout, but people have done lots of hacks to use inline, block, margins, padding, and floats to achieve full-page layouts they were never designed for. There have been improvements in CSS2 and CSS3, like adding table…

> But the big fixes to layout have been harder to specify and agree upon. They've been in the works for many years, but it's taken a while to figure out how they really should work, and which parts should be fundamental. It looks like it's getting a lot closer; the CSS Grid Module

Although lower-level and not as modular, flexbox can already be used with great success for a number of layout sections (media objects, vertical centering, input inserts) or full layouts ("holy grail", sticky footers and grids): http://philipwalton.github.io/solved-by-flexbox/

Flexbox is a CR, and it's starting to get pretty well supported: http://caniuse.com/#feat=flexbox

Re: Absolute Horizontal And Vertical Centering In CSS

#60

Post by Aldo_MX »

svachalek wrote: post #35
Aldo_MX wrote: post #29

Earlier quoted context omitted.

> It was poorly designed by a group of people who chose to ignore existing understanding of layout models. Can you please elaborate how tables were the understanding of layout models 15 years ago? The web was not thought to be interactive at that era, but to be printed, it's not the fault of the old specs that the web progressed significantly fast.

Who said the web was designed to be printed? (1) The "H" in HTML stands for hypertext. (2) When has a web page ever printed well?

Who said the web was designed to be printed?

I said the web was tought to be printed, all the effort of CSS (circa 98) was about styling the web in a way that made sense for print, not for interaction.

Post reply on HN