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

81–90 of 100 posts

Re: What No One Told You About Z-Index

#81

Post by VMG »

rimantas wrote: post #79
VMG wrote: post #78

Earlier quoted context omitted.

You have to enable flexbox in about:config in Firefox and then you get partial support. You make his rant even more funny.

How about checking your assumptions before stating them as facts? How about display:table-*?

display:table- is exactly the kind of hack the parent is ranting about.

https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexi...

[2] Firefox supports only single-line flexbox. To activate flexbox support, for Firefox 18 and 19, the user has to change the about:config preference "layout.css.flexbox.enabled" to true.

Re: What No One Told You About Z-Index

#82

Post by thiagobrandam »

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…

> Actually this is false, as last in code is displayed on top

If it's a stack, then the last one _is_ displayed on top.

Re: What No One Told You About Z-Index

#83

Post by ajanuary »

Arelius wrote: post #60
Camillo wrote: post #42

Earlier quoted context omitted.

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.

Hence new layout techniques in CSS3.

Re: What No One Told You About Z-Index

#84

Post by rivd »

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…

plus: these kind of "tricks" (changing opacity to alter the stacking order) will not always be (mostly not) accepted at work, because the logic behind it is not immediately clear and its not portable.

Re: What No One Told You About Z-Index

#85

Post by olavk »

ned wrote: post #70
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,…

The CSS layout model (with float/clear, display:block|inline|table-cell, vertical align and so on) was based closely on how browsers already rendered layout. For example float, clear and align were attributes on image and table tags before the invention of CSS. CSS just allowed you to decouple these layout properties from the HTML elements.

So basically the CSS layout model were designed by Netscape before the CSS spec were developed.

Should the developers of CSS have discarded this model and instead proposed a different model would require the browser vendors to redesign their rendering engines? I think this would never have worked - remember this was at the height of the browser war, where Netscape and Microsoft routinely ignored W3C standard to pursue proprietary alternatives. We should probably be happy that we got something like CSS at all.

Re: What No One Told You About Z-Index

#86

Post by Deestan »

rivd wrote: post #84
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…

plus: these kind of "tricks" (changing opacity to alter the stacking order) will not always be (mostly not) accepted at work, because the logic behind it is not immediately clear and its not portable.

> not portable.

How not? It's strictly and clearly defined in the standard.

Re: What No One Told You About Z-Index

#87

Post by mcgwiz »

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.

There may or may not be Great CSS books out there, but in 10 years, I never found any. They invariably teach you recipes, but not how to to think in the terms the language was designed.

The ruby community is one of the most active and rigorously analyzed in contemporary programming. Blog articles are well vetted, and Google search can reliably point you to decent articles. Further, ruby belongs to a class of languages (interpreted, general purpose, imperative/OO) that is very well understood. Languages from this broader ecosystem include python, perl and even JavaScript, all contributing to a deeper analysis of each.

CSS is a stylesheet system. There are no other popular systems in use. The comparison could be made to Microsoft Word's style system (which has a very different conceptual model). Such a comparison could yield interesting ideas. But such a comparison is never made. Other stylesheet languages for structured documents include the unknown FOSI and DSSSL. When was the last time anyone cited those referenced in a blog post, tutorial, or book about CSS?

I'm not saying the specs are a good teaching device either. But teaching and precise description are different ends. Regardless, because there doesn't exist a good community (incl blogs, books, personalities) to fall back on, the specs are your best bet. Ultimately, they (along with other implementations) are what inform browser implementations.

Re: What No One Told You About Z-Index

#88

Post by mcgwiz »

timb wrote: post #56
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…

"It's easy to idiomatically achieve vertical centering. http://jsfiddle.net/aMMxj/10/ " that solution 1. only works for text, which is part of eranation's rant. 2. only works if you know the exact height of the container. 3. isn't even centered: http://i.imgur.com/lz8Mq.png

1. Not true. Could have been an image, or even SVG element http://jsfiddle.net/aMMxj/55/

2. Fair enough. It would be nice to be able to set line-height to a percentage of height.

3. Bug, my bad. http://jsfiddle.net/aMMxj/51/

Re: What No One Told You About Z-Index

#89

Post by mcgwiz »

kevingadd wrote: post #62
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…

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 n…

You're right, I had a bug: http://jsfiddle.net/aMMxj/51/

Idiomatic solutions, by definition, cut out the non-semantic document structure. Certainly you will find layouts that cannot be achieved idiomatically in CSS, just as certain software patterns are more idiomatic in one OO language than another (e.g. observer pattern in C# vs Java). But the more scenarios you attempt to address with the language, the more complex it becomes. It's quite possible that extensions to CSS would open it further to the criticism that it's too complex.

Unfortunately, browser vendors do not support any other stylesheet language. Perhaps if this were different, there would be more effort to understand stylesheets from an engineering perspective. Since it's not, we're stuck with poorly-thought conventions and a community that's been trained to despise the language.

CSS is not a happy language, that much I'll agree with. But I find it no more painful than other computer languages. I reassert the lack of rigorous analysis by CSS users and the collective community as the main solvable problem. I have worked at extremely pricey consultancies, and the only thing I learned about CSS from them is that the more senior of a developer you are, the less respect you have toward CSS as an engineerable technology.

Re: What No One Told You About Z-Index

#90

Post by olavk »

strictfp wrote: post #65
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?

CSS was not based on any specific theory, but rather on the actual rendering model of browsers at the time. This in turn was presumably based on ad-hoc decisions by Netscape when they added features. For example, the float/clear model were created as a way to allow text to float around images when Netscape added support for embedded images at the dawn of time.
Post reply on HN