Change fullscreen CSS from `top`/`bottom`/`left`/`right` to `inset`

[mfreed7]

The fullscreen spec says this:

*|*:not(:root):fullscreen {
  top:0 !important; right:0 !important; bottom:0 !important; left:0 !important;
}
::backdrop {
  top:0; right:0; bottom:0; left:0;
}

For brevity and (small) performance improvement, would it be better to do this?

*|*:not(:root):fullscreen {
  inset:0 !important;
}
::backdrop {
  inset:0;
}

On at least Chromium, inset:0 can be faster than individual top/left/bottom/right properties. And the notation is easier to understand. This also seems like a web-compatible change to make.

@dbaron @bfgeek

[foolip]

This also seems like a web-compatible change to make.

Is this because top, right, bottom and left if specified still override inset? Or what kinds of breakage are possible here?

@annevk do you know who could look into this proposal for Apple?

For Gecko it looks like @EdgarChen and @marti4d have some recent fullscreen-related changes. Do either of you know who should weigh in from Mozilla's side?

[annevk]

This works for us.

I couldn't work out a way in which this would be observable, but maybe there is?

[mfreed7]

This also seems like a web-compatible change to make.

Is this because top, right, bottom and left if specified still override inset? Or what kinds of breakage are possible here?

Right - I think the behavior should be identical between inset:0 and top:0;left:0;..., and as @annevk said, likely not observable. (It will be "observable" in devtools.)

[EdgarChen]

cc @emilio.

[emilio]

Not opposed to this, and it shouldn't be observable, but I'm curious about the performance argument, is the claim that's faster to parse? I expect the performance difference to be close to none in practice, but worth the simplification I suppose.

[mfreed7]

Not opposed to this, and it shouldn't be observable, but I'm curious about the performance argument, is the claim that's faster to parse? I expect the performance difference to be close to none in practice, but worth the simplification I suppose.

@bfgeek can add more color, but it sounds like inset:0 is faster (again, very slightly!) for the layout engine. And of course fewer tokens for the parser, but that's also very small.

Again, since it's not observable and the effect is small, I debated not even opening this issue. But I did. 😄