5 ms·

Yeah it's weird. My web developer side is impressed by the technical detail that go behind it. But my other web developer side asks why the f*ck should achievin

by borplk 14y ago

Yeah it's weird. My web developer side is impressed by the technical detail that go behind it. But my other web developer side asks why the f*ck should achieving a simple video effect on a web page should be this hard in 2012? There is a whole pattern of similar things like this in web that is killing me a little bit every day. Want to center a div on the page? No worries just wrap it in these 5 divs and apply these 20 css properties and you are good to go. Oh btw, IE doesn't like that, you need this. Honestly I think we developers should stop putting up with crap like this, and accepting the burden of broken technologies using hacks, etc... If we become less tolerant of crap, there will be less crap. As long as we accept it by using workarounds, etc... there will be more shitty things to come.

wahnfrieden 14y ago
CSS's flexible box model will eliminate that issue once it has wider support. There is a solution in the pipeline, it's just a matter of time. Not the best link, but here's some more recent info: http://css-tricks.com/old-flexbox-and-new-flexbox/ http://css-tricks.com/old-flexbox-and-new-flexbox/
rglover 14y ago
What's difficult about centering a box? Was that just sarcasm? A couple of approaches: Margin Auto w/ a fixed width Absolute 50% w/ negative margins Text-align center parent w/ inline-block display on children If it was sarcasm, disregard my stupidity.
- TruthElixirX 14y ago
  I think it was a hyperbole, but there really is a lot of dumb shit in web design.
- borplk 14y ago
  That's still non-intuitive. Just do a search about centering (or X problem in CSS) and see the thousands of threads and questions and corner cases, hacks and exceptions. The whole thing feels like you are stretching something beyond what it was intended to be used for. Things like element positioning should be so so simple that if you search about it, you get nothing back because no one had a problem to ask for solutions. Although I must say I'm not mocking CSS in particular, most web technologies feel this way because they were designed many years ago for a web that was supposed to have simple 'documents' like an article, text and paragraphs and today each component of it is expected to do a lot more. It's not getting all that much better either because each new version and improvement is building on top of the previous decisions, etc...
  - deleted 14y ago
    [deleted]
  - rimantas 14y ago
    > most web technologies feel this way Most technologies you don't know feel this way. And the reason—you don't know them. > It's not getting all that much better either because each > new version and improvement is building on top of the > previous decisions In this case: no.
  - rglover 14y ago
    If that wasn't intuitive enough, feel free to email me and I'd be glad to teach/walk you through the many unfortunate ways to go about this: me@ryanglover.net.
- scotty79 14y ago
  Right. Now center it vertically. Also don't make any assumptions (like fixed height, or display: block) about container and the box to be centered.
  - rimantas 14y ago
    http://cssdeck.com/labs/aqdw0l21/0 http://cssdeck.com/labs/aqdw0l21/0 Container has fixed dimensions in my example, but it does not matter in this case.
    - shawndumas 14y ago
      removing them matters...
    - scotty79 14y ago
      If container height is given by percentage you have to wrap it in another div with display: table. And if container is supposed to behave like inline-block you have to wrap it in yet another one. If you need to sprinkle around some margins and paddings (esp. with percentage height) you have to choose boilerplate divs to apply them to carefully. Btw. your approach is exactly same that we had 10 years ago but with CSS table behavior faking rather than table tag. Yay. Progress.
- conradfr 14y ago
  I think I am waiting for simple vertical alignment since CSS1. It's like variables (yeah I know, LESS / SASS ...).
- batista 14y ago
  >Margin Auto w/ a fixed width Absolute 50% w/ negative margins Text-align center parent w/ inline-block display on children Yes, totally intuitive and logical solutions all of them. If you have w3c Stockholm syndrome, that is. E.g "Just absolute 50% it with a negative margin" (oh, yes, and you would have to know the width beforehand). >If it was sarcasm, disregard my stupidity. It's not the stupidity, is the willingness to put up with BS convoluted inelegant workarounds for lack of basic, bread and butter, features. If you value elegant APIs, KISS and DSLs, you should run screaming in the opposite direction in all those three, horrible, horrible, techniques. W3C first came up with their (broken) model, and then they kludged solutions to use cases with it, instead of starting from the use cases first. That's why we have had the tables before and the need for the flexbox and grid layout now.
  - rglover 14y ago
    It's not the stupidity, is the willingness to put up with BS convoluted inelegant workarounds for lack of basic, bread and butter, features. You're right, there is a willingness to put up with it. Mainly because I understand how these solutions work, how to debug them, and make everything nice and peachy. Do I wish things were better? Of course! Who wouldn't?
    - batista 14y ago
      Well, we're in the same boat then.
- maerek 14y ago
  Centering a box horizontally is simple. The original comment was referring to centering an element _vertically_, which is a much greater PITA.
cageface 14y ago
Android's XML layouts feel a lot like a non-braindead web. There are a lot of similarities really, but simple things like vertically centering an element are as easy as they should be. Text scaling can be a PITA though.
- eckyptang 14y ago
  Same with XAML/WPF on Windows platforms which is very refreshing if you've been building for the web for years.
  - cageface 14y ago
    Yeah I've dabbled just a bit with these and they seem like a nice way to build UIs, also making data binding a lot cleaner than on the web or in the various mobile SDKs. Honestly I think Microsoft has the best developer toolkit in the business right now but they haven't yet had the product design prowess to put that technology in the consumer's hands in any significant numbers.
ricardobeat 14y ago
May I present you the flexbox model! http://www.w3.org/TR/css3-flexbox/ http://www.w3.org/TR/css3-flexbox/ http://www.html5rocks.com/en/tutorials/flexbox/quick/ http://www.html5rocks.com/en/tutorials/flexbox/quick/ If you need IE8+ support, there is also display:table and family.

by borplk 14y ago

wahnfrieden 14y ago

CSS's flexible box model will eliminate that issue once it has wider support. There is a solution in the pipeline, it's just a matter of time. Not the best link, but here's some more recent info: http://css-tricks.com/old-flexbox-and-new-flexbox/ http://css-tricks.com/old-flexbox-and-new-flexbox/

rglover 14y ago

What's difficult about centering a box? Was that just sarcasm? A couple of approaches: Margin Auto w/ a fixed width Absolute 50% w/ negative margins Text-align center parent w/ inline-block display on children If it was sarcasm, disregard my stupidity.

TruthElixirX 14y ago
I think it was a hyperbole, but there really is a lot of dumb shit in web design.
borplk 14y ago
That's still non-intuitive. Just do a search about centering (or X problem in CSS) and see the thousands of threads and questions and corner cases, hacks and exceptions. The whole thing feels like you are stretching something beyond what it was intended to be used for. Things like element positioning should be so so simple that if you search about it, you get nothing back because no one had a problem to ask for solutions. Although I must say I'm not mocking CSS in particular, most web technologies feel this way because they were designed many years ago for a web that was supposed to have simple 'documents' like an article, text and paragraphs and today each component of it is expected to do a lot more. It's not getting all that much better either because each new version and improvement is building on top of the previous decisions, etc...
- deleted 14y ago
  [deleted]
- rimantas 14y ago
  > most web technologies feel this way Most technologies you don't know feel this way. And the reason—you don't know them. > It's not getting all that much better either because each > new version and improvement is building on top of the > previous decisions In this case: no.
- rglover 14y ago
  If that wasn't intuitive enough, feel free to email me and I'd be glad to teach/walk you through the many unfortunate ways to go about this: me@ryanglover.net.
scotty79 14y ago
Right. Now center it vertically. Also don't make any assumptions (like fixed height, or display: block) about container and the box to be centered.
- rimantas 14y ago
  http://cssdeck.com/labs/aqdw0l21/0 http://cssdeck.com/labs/aqdw0l21/0 Container has fixed dimensions in my example, but it does not matter in this case.
  - shawndumas 14y ago
    removing them matters...
  - scotty79 14y ago
    If container height is given by percentage you have to wrap it in another div with display: table. And if container is supposed to behave like inline-block you have to wrap it in yet another one. If you need to sprinkle around some margins and paddings (esp. with percentage height) you have to choose boilerplate divs to apply them to carefully. Btw. your approach is exactly same that we had 10 years ago but with CSS table behavior faking rather than table tag. Yay. Progress.
conradfr 14y ago
I think I am waiting for simple vertical alignment since CSS1. It's like variables (yeah I know, LESS / SASS ...).
batista 14y ago
>Margin Auto w/ a fixed width Absolute 50% w/ negative margins Text-align center parent w/ inline-block display on children Yes, totally intuitive and logical solutions all of them. If you have w3c Stockholm syndrome, that is. E.g "Just absolute 50% it with a negative margin" (oh, yes, and you would have to know the width beforehand). >If it was sarcasm, disregard my stupidity. It's not the stupidity, is the willingness to put up with BS convoluted inelegant workarounds for lack of basic, bread and butter, features. If you value elegant APIs, KISS and DSLs, you should run screaming in the opposite direction in all those three, horrible, horrible, techniques. W3C first came up with their (broken) model, and then they kludged solutions to use cases with it, instead of starting from the use cases first. That's why we have had the tables before and the need for the flexbox and grid layout now.
- rglover 14y ago
  It's not the stupidity, is the willingness to put up with BS convoluted inelegant workarounds for lack of basic, bread and butter, features. You're right, there is a willingness to put up with it. Mainly because I understand how these solutions work, how to debug them, and make everything nice and peachy. Do I wish things were better? Of course! Who wouldn't?
  - batista 14y ago
    Well, we're in the same boat then.
maerek 14y ago
Centering a box horizontally is simple. The original comment was referring to centering an element _vertically_, which is a much greater PITA.

cageface 14y ago

Android's XML layouts feel a lot like a non-braindead web. There are a lot of similarities really, but simple things like vertically centering an element are as easy as they should be. Text scaling can be a PITA though.

eckyptang 14y ago
Same with XAML/WPF on Windows platforms which is very refreshing if you've been building for the web for years.
- cageface 14y ago
  Yeah I've dabbled just a bit with these and they seem like a nice way to build UIs, also making data binding a lot cleaner than on the web or in the various mobile SDKs. Honestly I think Microsoft has the best developer toolkit in the business right now but they haven't yet had the product design prowess to put that technology in the consumer's hands in any significant numbers.

ricardobeat 14y ago

May I present you the flexbox model! http://www.w3.org/TR/css3-flexbox/ http://www.w3.org/TR/css3-flexbox/ http://www.html5rocks.com/en/tutorials/flexbox/quick/ http://www.html5rocks.com/en/tutorials/flexbox/quick/ If you need IE8+ support, there is also display:table and family.