I just found this article on google after struggling with some z-index issues today, came to hacker news, and it's on the front page. The last time I read it was three years ago. What a coincidence.
What No One Told You About Z-Index (2013)
11–20 of 27 posts
Re: What No One Told You About Z-Index (2013)
#12Ha ha ha what a great and simple markup language we have
Do you have a proposal for a system that properly integrates alpha and layering without the notion of a stacking context?
If by "stacking context" you mean "one global context," then no. But if you mean stacking contextS as described by the article, then Win32, Cocoa, Swing, Qt, wxWidgets, and probably Gtk are all examples of a system where z-index doesn't involve reading an article.
I've come to the conclusion that HTML is great for content that looks like 1999. But in 2016, every time I use HTML and CSS I end up dealing with some subset of
- width/height are ignored for div/span, so I have to make a div or span, set display:inline-block to completely undo that. Nothing like ' to suggest your language needs help.
- Actually, it turns out that width is still ignored for inline-block if you have no content in the tag, but if you put any content, then it is honored. (Unless you have more content than fits, in which case it is ignored again, but at least that is somewhat sensible)
- vertical centering? That should be pretty easy, right? Hahahaha!
- to get z-indexing to work, you need an absolutely positioned outer element with relatively positioned inner elements. Win32, Cocoa, Qt, Swing, despite their flaws aren't that user-unfriendly (and by "user" that would be the developer). I get why it has to be that way, but a language where it has to be that way is no end of frustration.
- don't want to duplicate your CSS colors all over the place? Great, use CSS vars. Want your variables to be accessible to all your classes? No problem, just use the :root class, totally obvious. Oh, need support for slightly older browsers? Bummer.
- Well, you could put all your colors in a separate class. Great, I'll just have my classes inherit or mixin that color class. Actually, no, I'll be putting that class all over my HTML, which kind of violates separation of concerns, which was the whole point of CSS.
- Want borders on the cells of your table, but not "3D" borders that looked terrible even in 1996? Oh, that's fun!
It's like HTML fights me at every turn. It's high time we take the ideas that UI libraries have had for decades and make an HTML that is actually usable.
(Probably some of the details here are inaccurate, because they are so convoluted that it's hard to actually remember them)
Re: What No One Told You About Z-Index (2013)
#13So, is Firefox breaking the spec, then? The `opacity:0.99` edit doesn't change the appearance of the boxes at all in Firefox 45 on Linux. https://ipfs.pics/ipfs/QmeuVESo8gBmsuPY7S1TaqBjfzSch8Wu3nJ2J...
Re: What No One Told You About Z-Index (2013)
#14Another solution of to the problem is to change the background-color property, which isn't against his rules ;)
Also allowing for breaking the rules, rules that don't exist in 'real life', was just to move the z-index property to the block defining all 3 colours. But it was breaking the rules that were there to illustrate the problem.
Re: What No One Told You About Z-Index (2013)
#15Earlier quoted context omitted.
Do you have a proposal for a system that properly integrates alpha and layering without the notion of a stacking context?
If by "stacking context" you mean "one global context," then no. But if you mean stacking contextS as described by the article, then Win32, Cocoa, Swing, Qt, wxWidgets, and probably Gtk are all examples of a system where z-index doesn't involve reading an article. I've come to the conclusion that HTML is great for content that looks like 1999. But in 2016, every time I use HTML and CSS I end up dealing with some subs…
Most of your comments are addressed by the fact that CSS2 was designed originally for documents, while the other widget systems never were and simply don't support that type of layout. Nowadays, with flexbox, CSS fully supports natural UI layouts too.
If we adopted your suggestion of using a legacy toolkit like Win32 as the basis of a new HTML/CSS and throwing out the old, it would be much worse than HTML and CSS as they exist today. Win32, Cocoa, Swing, Qt, wxWidgets, and GTK are much worse than CSS for rendering, as far as both performance and layout are concerned.
You didn't address the z-index issue either, as none of these toolkits have things like opacity, which is what causes stacking contexts. To the extent that they do, it's backed by Core Animation as in Cocoa, and that in fact does have the notion of stacking contexts, just as CSS does. The Web isn't significantly more complex in this area. (CSS 2.1 Appendix E is too complex, to be sure, but not in the area you describe.)
Re: What No One Told You About Z-Index (2013)
#16Earlier quoted context omitted.
Do you have a proposal for a system that properly integrates alpha and layering without the notion of a stacking context?
If by "stacking context" you mean "one global context," then no. But if you mean stacking contextS as described by the article, then Win32, Cocoa, Swing, Qt, wxWidgets, and probably Gtk are all examples of a system where z-index doesn't involve reading an article. I've come to the conclusion that HTML is great for content that looks like 1999. But in 2016, every time I use HTML and CSS I end up dealing with some subs…
I've never encountered width/height being ignored for a div, which defaults to display block btw. Unless you are talking about emails, which is a whole different ball game.
Re: What No One Told You About Z-Index (2013)
#17So, is Firefox breaking the spec, then? The `opacity:0.99` edit doesn't change the appearance of the boxes at all in Firefox 45 on Linux. https://ipfs.pics/ipfs/QmeuVESo8gBmsuPY7S1TaqBjfzSch8Wu3nJ2J...
Firefox 45 on Windows, the boxes are displayed as expected: http://i.imgur.com/HaKqrcG.png
Re: What No One Told You About Z-Index (2013)
#18I think the problem is not that few people reads the spec, but having picked a name that was now declarative. Something like 'context-order' would give a better hint that the stacking is not as simple as one might think. Choosing css property names is like designing the UI of css
vertical-align is another example of the "this is not as simple as you might think" problem.
Re: What No One Told You About Z-Index (2013)
#19Earlier quoted context omitted.
If by "stacking context" you mean "one global context," then no. But if you mean stacking contextS as described by the article, then Win32, Cocoa, Swing, Qt, wxWidgets, and probably Gtk are all examples of a system where z-index doesn't involve reading an article. I've come to the conclusion that HTML is great for content that looks like 1999. But in 2016, every time I use HTML and CSS I end up dealing with some subs…
Most of your comments are addressed by the fact that CSS2 was designed originally for documents, while the other widget systems never were and simply don't support that type of layout. Nowadays, with flexbox, CSS fully supports natural UI layouts too. If we adopted your suggestion of using a legacy toolkit like Win32 as the basis of a new HTML/CSS and throwing out the old, it would be much worse than HTML and CSS as…
I think several core HTML5 and CSS features actually come from Cocoa (via WebKit/Safari), notably Canvas, transforms and CSS animation.
The whole stacking context business basically seems to describe WebKit's rendering model (and maybe other browsers too, but did they have hardware acceleration before Safari?). I think the W3C spec was derived from the implementation, to a greater extent than the impl being driven by the spec.
Re: What No One Told You About Z-Index (2013)
#20There is another way to solve this using just CSS transform property!