(Nice work, btw, like the animations =)

That's kind of the point.. you should not need to have a page to showcase different techniques for something this basic.

I, for one, does not have to deal with this. But as and outsider it seems strange that simple things are so hard. Maybe web developers have gotten so used to dealing with things like this that they don't see how convoluted it is?

Not really, most of the complexity is of the ill-thought design they started with, and the LACK of options for certain things.

Initially the envisioned CSS as a styling technology, so layout was an afterthought. Even the messy floats hacks (those one that replaced tables) wasn't something that was though of specifically as a complete layout solution.

We had to wait 10+ years, to have actual layout solutions catering to the needs of web designers: Flexbox, Regions, Multi-Column layout and Grid Layout -- and of course those are still not implemented totally by browser vendors, give a few years wait for that too.

EDIT: I mean, what freedom would have been lost when it was designed to work like this, not talking of changing it now.

  .outer {height: 1200px; width: 800px;}
  .inner {margin: auto;}

  <div class="outer">
    <p class="inner">This is centered vertically</p>
    <p>But where should this go?</p>
  </div>

The use "currently" itself should set of a number of alarms in a sane person.

Then, to top it, you add: "showcases a number of techniques".

Centering should be an built-in, simple, capability. As simple as making some div red or adding a 2px border.

Not a "technique" or a "workaround" and surely not "many of them" (incompatible and each with different tradebacks).

You don't see "techniques" for making divs have a certain background color -- that's because there's a single instruction for that, and it bloody works all the time.

Also, auto-flowing text split between columns as a "column" property of some kind would be nice.

The list you provided is handy, but it shouldn't require knowing that you have to look up specific cases.

http://jsfiddle.net/BZuu9/

Which unfortunately looks like crap, as there is no (standard) way to get browsers to hyphenate words in a sane way :-(

[edit: I wish CSS Regions was (or was likely to become) a viable solution, as it actually does what a lot of people want: a sane and standard way to lay out text, based on experiences from dtp. Sadly, afaik, it's unlikely to be accepted, and I'm not sure if there's even a decent way to get it to work with a polyfill (suitable for production):

http://dev.w3.org/csswg/css-regions/Overview.src.html

https://github.com/adobe-webplatform/css-regions-polyfill

In theory css-regions along with hyphenator or hypher should be enough to have layouts that are both semantic, look good, and are simple to implement. It's been a while since I tried to get it to actually work, and I don't remember it as "just working" (that would include proper pagination both on small screens and on print outs, without too much effort):

http://code.google.com/p/hyphenator/

https://github.com/bramstein/hypher

]

Ah, but unfortunately CSS isn't about layout at all. Hence proposals like css-regions (see comment below) -- which are about layout. It's a common mistake: We came to html (with our designer hats on), and thought: Oh, we can layout text with tables! We were wrong, and we got css -- and we thought: Oh, we can layout text with CSS -- but we were still wrong. We could do some minor (and as it turned out pretty major) styling with CSS -- but it was never really meant for layout. We do need a system for layout, and perhaps the most sane thing to do these days is to wrap CSS into a tool that does styling and layout. But CSS of today isn't quite there.

See: http://www.w3.org/TR/WD-css1-951117.html#abstract

"This document specifies level 1 of the Cascading Style Sheet machanism (CSS1). CSS1 is a simple style sheet language that allows authors and readers to influence the presentation of HTML documents. E.g., a publisher can suggest font families, colors and layout for a document, while the reader can ask for the document to be magnified. By attaching style to HTML elements, document structure and device-independence is preserved."

Over-eager use of emphasis mine. While it contains the word layout, it's set in the context of HTML documents -- and I think that was a mistake. Still it brought us forward from what things was like before the mid 90s!

I'm glad you get to work in UI-world all day long that CSS' idiosyncrasies are something you can memorize inside and out. Personally, I'm required to know a lot more about mathematics and databases. My clients can deal with not-very-pretty UI, they can't deal with lost or incorrect data.

But if you want to make analogies about tools, one should always use the right tool for the job and not employ hacks. To me, "margin:auto" is a hack. It doesn't express that the object in question is being put in the middle of something else. It hides the intent of the action behind insider jargon. Or, to continue your analogy, it's using the handle of a screw driver to hammer in a nail.

Not all of us are "workmen" here, that have to get used to our tools, etc.

Some of us are actual scientists and engineers, with lots of experience in identifying broken APIs and tools. Some of us even PROGRAM the tools you get to use, from CSS implementations in browsers to editors and such. Heck, there are people on HN from Mozilla, Google, Apple and MS.

CSS, with regards to layout, has been broken from the start.

That's not up for debate just because someone has mastered all the intricasies. Even the original authors and the W3C agree and have taking corrective steps in later CSS versions (still not widely supported).

So "Stop whining and learn this stuff" is not really an answer in a technical debate.

http://jsfiddle.net/J88tz/

(scnr)

Those are called "indeterminate progress indicators".

Not everything on the web has some specific state info or progress percentage to declare.

Just showing that "something is running" is still very useful for those situations, and can have a huge impact on the users perception of the page responsiveness.

(As has lots of other "theater", which is not to be dismissed -- e.g the mobile practice of showing a screenshots of the apps last state while you load it, making the user thing it loaded faster).

Windows 8 Loading with pure CSS3

http://codepen.io/surjithctly/details/Kfqak

.spinner > div { width: 22px; height: 18px; background-color: #333;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
  animation: bouncedelay 1.4s infinite ease-in-out;

.spinner .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; }

.spinner .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; }

@-webkit-keyframes bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0.0) } 40% { -webkit-transform: scale(1.0) } }

@keyframes bouncedelay { 0%, 80%, 100% { transform: scale(0.0) } 40% { transform: scale(1.0) } }

Oh and it doesn't work in Opera 12 .

(HTTP overheads are not factored since HTML + CSS is one less request than HTML + CSS + Image resource.)

https://github.com/dawjan/Open_Me/tree/master/JQ%20busy%20in...

Sorry no preview

On a project that targeted tablets (iPads and Androids), we eventually went back to good ol' gifs because of how bad SVG and CSS animations rendered and performed.

http://rendro.github.io/SVG-Spinner/

Ugly aliasing in Firefox though.