[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)
 

web link (developer.chrome.com)

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 
 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 `
` 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  and . 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:                  over  over
|  over 
| 
| 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 
 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)