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

What No One Told You About Z-Index

philipwalton.com

Post reply on HN
Print view View original

61–70 of 100 posts

Re: What No One Told You About Z-Index

#61

Post by Arelius »

Camillo wrote: post #42
moultano wrote: post #32

Earlier quoted context omitted.

Does anyone have any insight as to why it is this way? To me it seems insane, but I don't trust my own judgement in domains like this because I've never built anything comparable. Are there really good reasons for CSS to be the way it is?

I don't have a reference for this, but I always got the impression that CSS was intentionally limited to help browsers implementers write efficient layout engines with as few pathological cases as possible. For instance, if you could specify the value of object attributes using arbitrary expressions with other objects' attributes as input, it would be very easy to have circular dependencies, unexpectedly high computa…

I think that while that may have originally been the case, I feel that we've long since passed the point of particularly efficient layout engines with as few pathological cases as possible. Particularly computational costs, since I think you'll find many sites doing some part of layout in javascript.

Re: What No One Told You About Z-Index

#62

Post by kevingadd »

mcgwiz wrote: post #49
moultano wrote: post #32

Earlier quoted context omitted.

Does anyone have any insight as to why it is this way? To me it seems insane, but I don't trust my own judgement in domains like this because I've never built anything comparable. Are there really good reasons for CSS to be the way it is?

Let's clarify the question. "Does anyone have any insight as to why vertical centering of dynamic-height content is the way it is?" Yes. The original standards committee created a layout model (block, inline, and inline-block elements) that (they felt) adequately balanced language complexity with features. It's easy to idiomatically achieve vertical centering. http://jsfiddle.net/aMMxj/10/ "Does anyone have any insig…

Your argument might hold more water if your example actually vertically centered anything.

It's 2013 and it's still in many ways easier to do pixel-perfect, scalable layouts using tables than it is with CSS. It's so bad a common CSS 'layout technique' is to force elements to be laid out like table cells! I find that incredibly depressing.

Many of those so-called 'idiomatic conventions' that you blame developers for not devising are avoided because they're needlessly complex, easy to get wrong, and hard to maintain. Nobody likes having to wrap every piece of content in 3-5 nested divs/spans with complex style rules applied to them.

Re: What No One Told You About Z-Index

#63

Post by sandGorgon »

Arelius wrote: post #59
sandGorgon wrote: post #53

Earlier quoted context omitted.

genuine question as a non front end engineer- do you recommend reading the CSS spec as a reference guide? im basically asking whether someone learning to be good in CSS should read the spec or pick up one of the recommended books (that appear from time to time on HN). For example, i never had to read the spec for ruby to get jruby to work.

Does ruby even have a proper spec?

yes - http://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_...

there are other community-driven sources - like RubySpec [1], etc. but this is the (expensive!!) ISO standard.

FYI - I had intended it as an example. I'm really interested to know if the most effective way to work with CSS is to understand its spec... which is not the way it works with most programming languages.

But perhaps CSS is more similar to a rulebook (declarative) than a language.

[1] http://en.wikipedia.org/wiki/RubySpec

Re: What No One Told You About Z-Index

#64

Post by zevyoura »

sandGorgon wrote: post #53
mcgwiz wrote: post #49

Earlier quoted context omitted.

Let's clarify the question. "Does anyone have any insight as to why vertical centering of dynamic-height content is the way it is?" Yes. The original standards committee created a layout model (block, inline, and inline-block elements) that (they felt) adequately balanced language complexity with features. It's easy to idiomatically achieve vertical centering. http://jsfiddle.net/aMMxj/10/ "Does anyone have any insig…

genuine question as a non front end engineer- do you recommend reading the CSS spec as a reference guide? im basically asking whether someone learning to be good in CSS should read the spec or pick up one of the recommended books (that appear from time to time on HN). For example, i never had to read the spec for ruby to get jruby to work.

I'll admit I haven't read the CSS spec, but I have been reading the canvas element spec in detail, as there's little good, deep reference material for it. It's readable, or at least understandable, but it's challenging compared to more traditional reference books (like MDN's presentation, for example).

Re: What No One Told You About Z-Index

#65

Post by strictfp »

eranation wrote: post #31

Don't we love CSS? it's so easy to do both complex things like 3D animations but also simple things like position something centered horizontally or vertically by just saying align:center, oh, sorry, it's margin: 0 auto, right, no? it's left:50% with a relative inside an absolute div, or was that an absolute div inside a relative span? ok so doing it vertically is really easy, it's valign:middle, oh, wait, I'm confus…

I've tried to find some sort of backing theory to CSS, but I've only found references to authors, not rationales . You would expect it to be founded on some solid typesetting theory. It would be very interesting to hear how the authors reasoned. I personally find that it seems really flexible, but anything that you want to acheive is hard or inconvenient. So what is the flexibility good for?

Re: What No One Told You About Z-Index

#66

Post by No1 »

eranation wrote: post #31

Don't we love CSS? it's so easy to do both complex things like 3D animations but also simple things like position something centered horizontally or vertically by just saying align:center, oh, sorry, it's margin: 0 auto, right, no? it's left:50% with a relative inside an absolute div, or was that an absolute div inside a relative span? ok so doing it vertically is really easy, it's valign:middle, oh, wait, I'm confus…

Well put rant.

16 years after CSS was released unto the world, and it still lacks a decent way to center content. Makes me lose all faith in the W3C.

Re: What No One Told You About Z-Index

#68

Post by the_gipsy »

baby wrote: post #46

Long text for just a few explanation. As a developer I hate reading those kind of tips since it doesn't go straight to the point. Here's my tl;dr : > the stacking order is the same as the order of appearance in the HTML Actually this is false, as last in code is displayed on top > When you introduce the position property into the mix, any positioned elements (and their children) are displayed in front of any non-posi…

11 paragraphs + code snippets just to say: "opacity" creates a stacking context. And a really annoying way of teasing and dragging the "observation" until the end of the article.

Re: What No One Told You About Z-Index

#69

Post by rimantas »

eranation wrote: post #31

Don't we love CSS? it's so easy to do both complex things like 3D animations but also simple things like position something centered horizontally or vertically by just saying align:center, oh, sorry, it's margin: 0 auto, right, no? it's left:50% with a relative inside an absolute div, or was that an absolute div inside a relative span? ok so doing it vertically is really easy, it's valign:middle, oh, wait, I'm confus…

Somene tell this guy about display: table-* and flexbox please? These rants are as funny as jokes about Macs mice having only one button.

Re: What No One Told You About Z-Index

#70

Post by ned »

eranation wrote: post #31

Don't we love CSS? it's so easy to do both complex things like 3D animations but also simple things like position something centered horizontally or vertically by just saying align:center, oh, sorry, it's margin: 0 auto, right, no? it's left:50% with a relative inside an absolute div, or was that an absolute div inside a relative span? ok so doing it vertically is really easy, it's valign:middle, oh, wait, I'm confus…

The really crazy thing is that we had great proposals for much better layout systems, and they were rejected:

- First, the model with "springs and struts", employed by all major native GUIs for decades, and also implemented in Firefox as the first Flexbox model (for XUL, the UI description markup language) since ages.

- Second, the constraints-based layout model, now employed by OSX 10.8 and considered even superior, was proposed in 1999! http://www.cs.washington.edu/research/constraints/web/ccss-u...

The only explanation I can come up with is a giant disconnect between users (web developers) and implementors.

Post reply on HN