This article should really be titled "What No One Told You About Opacity". I think all the z-index stuff is pretty well-understood. At least by people who consider themselves pretty good at css.
What No One Told You About Z-Index
91–100 of 100 posts
Re: What No One Told You About Z-Index
#92Earlier 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 think they're good reasons, just reasons) 1. Unlike print layout, the dimensions of a webpage can change, and so we slowly invented an evolving layout framework for something without fixed dimensions. I've done typesetting since it was exacto knives and hot wax, and if you told me then to imagine a stretchable paper for news I would have cried in the corner. 2. The layout framework was independently built by…
Imagine if Ford, GM and Chrysler had to build cars that shared the same roads, used the same fuel, fit in the same overall dimensions for parking and driving, accepted the same basic controls: Steering, foot pedals, etc. It would be madness.
Re: What No One Told You About Z-Index
#93Earlier quoted context omitted.
"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/
It's still not precisely centered. Check out this version using a table.
I added a background image with a grid that extends 80px from top and bottom. There's also a small margin/padding/border reset and doctype just to make sure defaults and quirks aren't messing with anything.
Re: What No One Told You About Z-Index
#94Earlier 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.
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 language…
Would you consider writing a post that explains the high-level (conceptual) differences between CSS, DSSL, FOSI and Word?
Re: What No One Told You About Z-Index
#95Earlier quoted context omitted.
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/
It's still not precisely centered. Check out this version using a table. http://jsfiddle.net/nJy8t/ I added a background image with a grid that extends 80px from top and bottom. There's also a small margin/padding/border reset and doctype just to make sure defaults and quirks aren't messing with anything.
Yeah, I concede mine wasn't pixel-perfect.
To continue down this path of the "natural" way to vertically-center, font-size must also be explicitly set. This works http://jsfiddle.net/nJy8t/3/ . Though it's certainly not without it's flaws (we lose font-size cascading).
Re: What No One Told You About Z-Index
#96This seems more like a bug in opacity than anything. Logically, opacity should have no impact at all on layout positioning, only on blending. So this is more of a workaround created to speed up processing of elements with opacity less than 1 that introduces a design bug in the spec.
I'm no expert on the matter, as I just learned about this about 90 seconds ago… but here's my guess: My understanding of it is that if an element has I'd be curious to see some source code to know for sure, but that's my best guess.
Here is the explanation:
http://www.w3.org/TR/2010/PR-css3-color-20101028/#transparen...
The CSS3 spec describes that the element with opacity Let's say you'd have a rule that pokes a hole in a layer. If that layer contains several pieces of paper, then the spec would say to take the layer with those pieces of paper aside, poke a hole though all of them, then place the layer back where you found it. This way, other layers on the page are not damaged. /end analogy.
Re: What No One Told You About Z-Index
#97Earlier quoted context omitted.
(I don't think they're good reasons, just reasons) 1. Unlike print layout, the dimensions of a webpage can change, and so we slowly invented an evolving layout framework for something without fixed dimensions. I've done typesetting since it was exacto knives and hot wax, and if you told me then to imagine a stretchable paper for news I would have cried in the corner. 2. The layout framework was independently built by…
Imagine if Ford, GM and Chrysler had to build cars that shared the same roads, used the same fuel, fit in the same overall dimensions for parking and driving, accepted the same basic controls: Steering, foot pedals, etc. It would be madness.
Those features are the madness of standards enforced under penalty of law. CSS is a recommendation, and the only penalty is a competitive disadvantage.
Back when the Internet was a graphically simpler place with a browser monopoly, there was little disadvantage to implement CSS however they damn felt. If Ford sold 90% of cars and a consortium recommended they add 12 new safety features, imagine how they'd respond.
Re: What No One Told You About Z-Index
#98Earlier quoted context omitted.
Imagine if Ford, GM and Chrysler had to build cars that shared the same roads, used the same fuel, fit in the same overall dimensions for parking and driving, accepted the same basic controls: Steering, foot pedals, etc. It would be madness.
Those features are the madness of standards enforced under penalty of law. CSS is a recommendation, and the only penalty is a competitive disadvantage. Back when the Internet was a graphically simpler place with a browser monopoly, there was little disadvantage to implement CSS however they damn felt. If Ford sold 90% of cars and a consortium recommended they add 12 new safety features, imagine how they'd respond.
In case of CSS, the important browser was IE.
This reminds me of DOCTYPE switching. From http://hsivonen.iki.fi/almost-precedent/: "Back when the Quirks Mode and the Almost Standards Mode were introduced ... committees created specs and that were enshrined as W3C Recommendations before there was solid implementation experience. Then the Web Standards Project lobbied browser-makers to implement the W3C specs as they were. The mindset was that the specs given from above couldn’t and shouldn’t change. People thought that vigorous upgrade evangelism would work and make Web authors change their existing sites."
Note that the Web Standards Project was also the one petitioning Netscape to cancel Mariner, which ended up contributing to the problem. Why did non-IE browsers have to implement document.all?
Re: What No One Told You About Z-Index
#99Earlier quoted context omitted.
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…
I think generally speaking, reading the spec is useful when trying to figure out the details of more complex topics, I think this holds true for most languages. I used to pull out the C spec regularly, and even the c++ draft spec on occasion, it gets better for smaller languages, for Scheme for instance, I would pull out the spec rather quite often.
Since I imagine the CSS spec is relatively small (compared to say C++) I imagine it would be useful for solving more adavnced use cases.
Re: What No One Told You About Z-Index
#100Long 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.
That goes without saying.