5 ms·

I don't know anything about the history of CSS's design, but I'm perpetually amazed that positioning (and specifically centering) requires so much CSS magic. I

I don't know anything about the history of CSS's design, but I'm perpetually amazed that positioning (and specifically centering) requires so much CSS magic. I would think CSS positioning would be a one-liner, but instead it's a collection of context-dependent, browser-dependent recipes. I wonder if there's a good reason for the madness, or if it's just poor design. (FWIW, I'm a backend engineer and have only dabbled with front-end code.)

masklinn 13y ago
> I wonder if there's a good reason for the madness Well the reason is that CSS originally wasn't intended for layout…. But since there was no other tool for layout, once the web design community decided to remove tables from layout it got drafted despite being severely insufficient. Layout modules have just started being developed, fought upon and implemented in the last few years. Here's how vertical centering looks like when using flexbox (http://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ http://philipwalton.github.io/solved-by-flexbox/demos/vertic...): .parent { display: flex; align-items: center; justify-content: center; } .centered { max-width: 50%; } (note: this ignores prefixing, specs differences and browser-specific issues, here's the component https://github.com/philipwalton/solved-by-flexbox/blob/master/_sass/components/_aligner.scss https://github.com/philipwalton/solved-by-flexbox/blob/maste... which is itself expanded to suit browsers)
hamburglar 13y ago
The sad thing is that I'm going to bookmark this.
- cema 13y ago
  Well, I have bookmarked it both for the article contents and for the discussion. As is often the case.
Tloewald 13y ago
The thing that boggles my mind is that we're over ten years and three major versions in and we can't center stuff reliably or conveniently, images won't scale up to fit (only down...), multi-column text is barely implemented and Google is ripping it out, the box model is borked by default, it's non-trivial to determine the layering of UI elements, and so on. It's amazing that we get solutions for things that no-one really needs (animated 3d transitions...) while bread and butter stuff still requires rocket science. Back in 2005 I used to joke that 90% of the world's Javascript was just doing button rollovers (probably a conservative estimate) — well, CSS eventually fixed that, kind of — now Javascript is mostly doing similarly idiotic stuff like handling resizing, making things that aren't lists impersonate lists because multi-selects are borked, centering stuff, and trying to reliably hook up event handlers. All of which were solved problems before the web was born.
- GhotiFish 13y ago
  Good thing we are practically putting all our eggs in this basket. HTML and CSS will be our document structure, and javascript will describe how the document behaves. Truly a universal standard for the ages. Humans are dumb.
  - Tloewald 13y ago
    Javascript gets a lot of shit, but really the biggest WTFs are HTML and especially CSS. Javascript at least has Crockford. No-one really has a handle on how to deal with CSS -- it's a wall-to-wall disaster.
    - cheapsteak 13y ago
      Preprocessing languages like SASS help a little. They don't really fix the ugly parts, but do help shove them under the bed a little more
- magicalist 13y ago
  > we can't center stuff reliably or conveniently Yes we can. The problem is not the lack of ability, it's that no one is backporting to IE8 or IE9 but lots of people still run them. > images won't scale up to fit (only down...) I don't understand what you mean here > multi-column text is barely implemented and Google is ripping it out No, the currently shipping implementation of multicol will be staying. I think you're confused about the rewrite tied to CSS Regions, which has never been turned on in Chrome. > the box model is borked by default box-sizing > it's non-trivial to determine the layering of UI elements I don't know what this means either. You do have to know what a stacking context is, true, but a quick trip to MDN and browser developer tools will help you out if you're confused.
  - Tloewald 13y ago
    You're completely missing the point. Having elaborate workarounds for utterly common problems that have all kinds of edge cases is exactly where we were with button rollovers in 2005. All the W3C had to do for CSS2 was look at Mac App or Cocoa or any other decent GUI framework and figure out what needed to be added to make all that stuff work simply. Instead we get ridiculous crap that sort of half solves the problem if you do it in just the right way and apply a couple of rolls of duct tape to it. We're at CSS3 (?) partially implemented with stuff being proposed for CSS4, and none of these common problems have been solved.

masklinn 13y ago

> I wonder if there's a good reason for the madness Well the reason is that CSS originally wasn't intended for layout…. But since there was no other tool for layout, once the web design community decided to remove tables from layout it got drafted despite being severely insufficient. Layout modules have just started being developed, fought upon and implemented in the last few years. Here's how vertical centering looks like when using flexbox (http://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ http://philipwalton.github.io/solved-by-flexbox/demos/vertic...): .parent { display: flex; align-items: center; justify-content: center; } .centered { max-width: 50%; } (note: this ignores prefixing, specs differences and browser-specific issues, here's the component https://github.com/philipwalton/solved-by-flexbox/blob/master/_sass/components/_aligner.scss https://github.com/philipwalton/solved-by-flexbox/blob/maste... which is itself expanded to suit browsers)

hamburglar 13y ago

The sad thing is that I'm going to bookmark this.

cema 13y ago
Well, I have bookmarked it both for the article contents and for the discussion. As is often the case.

Tloewald 13y ago

The thing that boggles my mind is that we're over ten years and three major versions in and we can't center stuff reliably or conveniently, images won't scale up to fit (only down...), multi-column text is barely implemented and Google is ripping it out, the box model is borked by default, it's non-trivial to determine the layering of UI elements, and so on. It's amazing that we get solutions for things that no-one really needs (animated 3d transitions...) while bread and butter stuff still requires rocket science. Back in 2005 I used to joke that 90% of the world's Javascript was just doing button rollovers (probably a conservative estimate) — well, CSS eventually fixed that, kind of — now Javascript is mostly doing similarly idiotic stuff like handling resizing, making things that aren't lists impersonate lists because multi-selects are borked, centering stuff, and trying to reliably hook up event handlers. All of which were solved problems before the web was born.

GhotiFish 13y ago
Good thing we are practically putting all our eggs in this basket. HTML and CSS will be our document structure, and javascript will describe how the document behaves. Truly a universal standard for the ages. Humans are dumb.
- Tloewald 13y ago
  Javascript gets a lot of shit, but really the biggest WTFs are HTML and especially CSS. Javascript at least has Crockford. No-one really has a handle on how to deal with CSS -- it's a wall-to-wall disaster.
  - cheapsteak 13y ago
    Preprocessing languages like SASS help a little. They don't really fix the ugly parts, but do help shove them under the bed a little more
magicalist 13y ago
> we can't center stuff reliably or conveniently Yes we can. The problem is not the lack of ability, it's that no one is backporting to IE8 or IE9 but lots of people still run them. > images won't scale up to fit (only down...) I don't understand what you mean here > multi-column text is barely implemented and Google is ripping it out No, the currently shipping implementation of multicol will be staying. I think you're confused about the rewrite tied to CSS Regions, which has never been turned on in Chrome. > the box model is borked by default box-sizing > it's non-trivial to determine the layering of UI elements I don't know what this means either. You do have to know what a stacking context is, true, but a quick trip to MDN and browser developer tools will help you out if you're confused.
- Tloewald 13y ago
  You're completely missing the point. Having elaborate workarounds for utterly common problems that have all kinds of edge cases is exactly where we were with button rollovers in 2005. All the W3C had to do for CSS2 was look at Mac App or Cocoa or any other decent GUI framework and figure out what needed to be added to make all that stuff work simply. Instead we get ridiculous crap that sort of half solves the problem if you do it in just the right way and apply a couple of rolls of duct tape to it. We're at CSS3 (?) partially implemented with stuff being proposed for CSS4, and none of these common problems have been solved.