[HN Gopher] The top layer: a solution to z-index:10000
___________________________________________________________________
The top layer: a solution to z-index:10000
Author : feross
Score : 74 points
Date : 2022-08-22 16:17 UTC (3 days ago)
(HTM) web link (developer.chrome.com)
(TXT) w3m dump (developer.chrome.com)
| pupppet wrote:
| 2 minutes after release- where's the top-top layer option.
| rafaelturk wrote:
| I'm still trying to grasp the real use of this.. IMO Looks like a
| bad solution for a problem that wasn't really that big
| dangrossman wrote:
| Small businesses build their websites by setting up on a
| platform like Shopify or Squarespace. They use a template and
| fill in the content. They add functionality to the site, like
| an email opt-in, a "free shipping if you order over $50" bar at
| the top of the page, a "contact us" button floating at the
| bottom, a bunch of social media icons floating on the side...
| via plug-ins/apps/scripts. They don't ever touch code. All
| those plug-ins/apps/scripts that provide this functionality to
| non-technical website owners as a service have no idea what the
| webpage DOM will look like, how it's coded, what other scripts
| you're loading on the page. They end up fighting to be on top
| with z-indexes, and that's how you end up with the website's
| main navigation being on top of instead of behind a modal
| dialog like a popup contact form, when the site owner wants it
| to be behind. This "top layer" means the stuff that isn't part
| of the page and should always be above the page can really be
| on top.
| jraph wrote:
| Obviously a clever act of resistance within the Chrome team,
| providing a fantastic crap-blocking tool to which crap will be
| registered willingly.
|
| "outside of the document flow": that can't be clearer. It's
| almost imprudent.
| jraph wrote:
| Neat. Yes please. The Web becomes usable again just by blocking
| the top layer.
| draw_down wrote:
| Wow, that would be great actually. Right now heuristics to
| block "please sign up for the newsletter" dialogs is difficult
| to do. But hopefully in the future we can just selectively
| allow access to top layer for certain domains.
| recursive wrote:
| Except if that happened, they just wouldn't use it.
| rekoil wrote:
| They don't care about the 1% of users who will figure this
| out.
| t0mas88 wrote:
| Indeed, this is great. All newsletter popups, cookie popups,
| "are you sure you want to leave" popups, give us feedback
| popups... They will all go on the top layer so your adblocker
| could hide it all at once.
| enbugger wrote:
| That is the reason why the top layer will not be chosen
| bhaney wrote:
| This feels like the same kind of kludge as "!important" and will
| probably be similarly abused.
| RunSet wrote:
| I am beginning to think that perhaps the world's largest
| advertising corporation should not be trusted with developing
| the leading web browser.
| blowski wrote:
| Beginning?
| a1369209993 wrote:
| Some people are slow on the uptake. Better late than never,
| though.
| [deleted]
| bastawhiz wrote:
| Unfortunately, you can't practically use this today because it
| has only very recently been added to Safari (March 2022). I guess
| something to look forward to in two to three years.
| danjc wrote:
| This amp goes to 11 (https://youtu.be/KOO5S4vxi0o)
| jaywalk wrote:
| The blog post keeps mentioning that you "promote" things to the
| top layer... but how do you do that? I see absolutely nothing in
| the HTML, CSS or JS of the examples in the post that references
| anything new.
|
| Is this just a new way the browser displays the <dialog> element
| exclusively? I'm pretty confused.
| ijidak wrote:
| Exact same question. I'm glad I'm not alone.
| mhink wrote:
| This post is sort of an introduction to a topic that has
| already existed (in a low-key sort of way) for some time. I'll
| grant that the article is a little unclear when it comes to
| getting to the point, but maybe this'll help:
|
| The CSS2.1 spec [1] describes how stacking contexts work when
| painting the browser window. Traditionally, our mechanism for
| interacting with an element's stacking context has been more or
| less exclusively to set its z-index.
|
| The Fullscreen API spec [2] introduces a new stacking context
| called the "top layer", which has some unique properties. Most
| notably, things rendered in the "top layer" are always rendered
| on top of everything else, _regardless of z-index_. There is
| exactly one top layer per document.
|
| Parts of this spec also describe operations which can add and
| remove elements from the top layer. For example, the
| "fullscreen an element" operation adds it to the document's top
| layer. [3] This operation is invoked as part of the steps taken
| when a developer calls `requestFullscreen()` on a DOM element
| [4].
|
| Now, the `<dialog>` element as specified in the latest HTML
| spec [5] also interacts with the page's top layer. When you
| call `.showModal()` on a dialog element, it gets added to the
| document's top layer. Note that although this is a completely
| different API, the commonality here is that we're also
| interacting with the top layer by adding and removing elements
| from it.
|
| The article also references some ongoing discussion [6] on a
| possible "popup" API which would also interact with the top
| layer, and which would be used for implementing various
| controls such as datepickers and dropdown lists.
|
| Hope that helps!
|
| 1: https://www.w3.org/TR/CSS2/zindex.html
|
| 2: https://fullscreen.spec.whatwg.org/
|
| 3: https://fullscreen.spec.whatwg.org/#fullscreen-an-element
|
| 4: https://developer.mozilla.org/en-
| US/docs/Web/API/Element/req...
|
| 5: https://html.spec.whatwg.org/multipage/interactive-
| elements....
|
| 6: https://open-ui.org/components/popup.research.explainer/
| aargh_aargh wrote:
| But why? And is this a new thing? Or an existing thing gaining
| visibility in devtools?
| rafaelturk wrote:
| yeah.. why?
| moralestapia wrote:
| Someone at Google had to justify its 6 figure salary. Plus s/he
| probably made a point about how this will ensure modal ads
| coming on top of everything else.
| immibis wrote:
| You joke but I've read this is literally how Google's
| internal politics work.
| [deleted]
| zerocrates wrote:
| I'm not saying they haven't earned this kind of treatment
| necessarily, but it is a little exhausting how much negativity
| and assumption of bad faith there is here in the commentary on
| more or less everything Google does. This even is just an
| explainer of a concept that's implemented by all the vendors, and
| as far as I know isn't something Google has railroaded.
| kingo55 wrote:
| Wait till we need to place elements higher than on the top layer.
| This will surely be abused by plugins.
| immibis wrote:
| I thought we went over this almost two decades ago.
| http://bytepointer.com/resources/old_new_thing/20050607_141_...
| notriddle wrote:
| 1. This is straight up <https://devblogs.microsoft.com/oldnewth
| ing/20110310-00/?p=11...> and <https://devblogs.microsoft.com/o
| ldnewthing/20050607-00/?p=35...>. Since the Chrome team
| probably have at least one team member who reads that blog,
| they'll probably do the same thing and make this the "the buck
| stops here" rule for anything that doesn't have special
| privileges, like the browser itself or extensions.
|
| 2. There should be a webext-exclusive API for placing items
| above the top layer.
| immibis wrote:
| I suggest using this archive: http://bytepointer.com/resource
| s/old_new_thing/20050607_141_... because
| devblogs.microsoft.com has repeatedly deleted all the
| comments and broken links and will do so again.
| jasonjayr wrote:
| From the oldnewthing blog:
|
| > And it'll try something nastier, like enumerating all the
| processes on the system, attaching to each one with debug
| privilege, and suspending all the threads.
|
| This is like playing corewars with Windows desktop software
| :)
|
| > "Note to self: Do not get into a walls-and-ladders contest
| with Raymond."
|
| Don't play with the person who knows all the lower levels :)
| [deleted]
| dataflow wrote:
| The problem with those blog posts is that they apply just as
| equally well to the existing "topmost" flag as they do to the
| hypothetical "super topmost" flags. The answer to "what if
| two programs have the topmost flag set?" wasn't "you violate
| the laws of metaphysics", it was "well then they order
| relative to each other the usual way". The same thing would
| presumably apply for even higher-level topmost flags; it's
| just a hierarchical ordering mechanism, which is in no way
| logically inconsistent as Raymond makes them appear.
|
| Moreover, Windows literally added support for the "even more
| topmost" feature later - they're called "bands", and
| supported by CreateWindowInBand(), except IIRC Microsoft
| later restricted support for that function to its own signed
| binaries, presumably to prevent vendors from abusing it.
| Needless to say, the addition of that function didn't violate
| the accepted rules of metaphysics.
| amluto wrote:
| top-layer-index: 1 will be the default, and on top of that will
| be top-layer-index: 2
| mattnewton wrote:
| .futureproofHeader {
|
| z-index: 999 !important; top-layer: 999 !important; -webKit-
| actually-paint-me-last: true !inportant;
| kingo55 wrote:
| .futureproofHeaderMax { z-index: 10000 !important; top-
| layer: 10000 !important; -webKit-actually-paint-me-last:
| true !important; -webkit-no-backsies: true !important;}
| snoopy_telex wrote:
| So last created layer wins the display? or can you indicate
| priority via css?
| gabereiser wrote:
| Yey! Now I can dismiss more notifications and adverts to
| subscribe to newsletters on every site I visit. Race to
| z-index:10001 has begun.
| eurasiantiger wrote:
| "z-index: 10000" is a solution employed by people who have no
| idea what a stacking context is, and, consequently, do not know
| that one can define their own "top layer" and have z-indexes
| inside that work completely separate from the rest of the
| document.
|
| Just set "position: relative" on an element and it will start a
| new stacking context, and stack it within the underlying context.
| It's like having a card in a card stack be another stack of
| cards.
| cyral wrote:
| I don't blame them when the rules for what creates a stacking
| context look like this: https://developer.mozilla.org/en-
| US/docs/Web/CSS/CSS_Positio...
| robocat wrote:
| I always wanted a relative z-index.
|
| Example: <year dropdown> over <date picker> over
| <modal form> over <desktop style app>
|
| A complex "desktop style" UI, that shows a modal form over it,
| and the modal form contains a custom date input component. Click
| the date input and a custom date entry pop up component is drawn
| above the modal form to pick the date. On the custom date entry
| pop up is a year picker, which you click and a custom year
| dropdown is shown. This was an actual example from my past (I'm
| not saying it couldn't have been done better, but this was before
| there were many better ways to do it). Using absolute z-index
| required complex coordination between components.
|
| The top-layer at least solves the problem of covering the
| viewport and providing a backdrop (10 years ago was difficult to
| do reliably). Although I can think of other issues one still
| needs to solve: disabling inputs and events behind "modal" pop
| up, disabling iPad background scrolling, must be accessibility,
| can need multiple layers of popups e.g. loading spinner, problem
| of tab key handling, et cetera.
| marcosdumay wrote:
| I believe CSS has an option that you set to make all z-indexes
| relative to the element. Making the page hierarchical.
|
| It's not exactly what you asked for, but it does void the need
| to coordinate between too many components.
| HaNdTriX wrote:
| Anyone ranting about this feature, has ever implemented an aria
| compliant website?
| dreadlordbone wrote:
| How is this triggered? showModal() on an element? Or is it using
| this: https://developer.mozilla.org/en-
| US/docs/Web/API/Element/req...
|
| Oh it's a feature of the <dialog> element I guess
| coldtea wrote:
| The "top layer" as a solution to the z-index: 10000 problem,
| sounds like "this goes to 11" as the solution to having a bigger
| guitar amp output...
| deathanatos wrote:
| I'm a dancer. "Take it from the top" means to start a run
| through of the current piece from the beginning.
|
| Except ... we were practicing a section of a piece. And then we
| started digging into the details on a very specific portion of
| footwork in the middle of that section. And our choreographer,
| instead of saying "start from the section", said, "start from
| the top". And humans being what they are, we all _understood_ ,
| somehow, and the right thing was done without complaint.
|
| But then came the need to start from the _beginning_ , at which
| point she now had to differentiate from what she had been
| calling (erroneously) "top", and uttered "start from the top
| top". Some amount of playful joshing followed ... and then the
| term _stuck_.
___________________________________________________________________
(page generated 2022-08-25 23:00 UTC)