A thing to keep in mind is that the performance of a native variant is likely to be worse than a polyfill (bindings overhead as DOMRect etc arent JS native objects)

`container-type` forces `layout` containment, which forces an independent formatting context for the subgrid (it'll be a separate grid layout). The other browsers are wrong here.

... you need a 16?-patch - e.g. various T-intersections, etc. Maybe that isn't needed, but don't want to repeat the usage problems of border-image.

cc/ @tabatkins.com

(I'm helping with this feature)

If you can come up with a good syntax let us know!

Supporting images is clearly a usecase that this should support at some stage - but I don't think I've met a webdev that can use border-image out of the box. The situation here is "worse" as instead of a 9-patch...

.... so if you can come up with a good syntax for this use-case please let us know!

(I don't think i've met a web-developer that can successfully use border-image first try).

This is a very good base proposal, e.g. it does what column-rule-* could already do with some minimal extensions. It covers a lot of use-cases.

There are some further extensions to the syntax - but are difficult. (supporting images). The prior art here (border-image) isn't really intuitive....

This is an awesome proposal that the Microsoft Edge engineers have been working on.

It extends the existing column-rule-* properties to work for all gaps in an intuitive way. If you are interested I'd encourage you to try it out.

The repeat() syntax is really nicely with arbitrary sized grid/flex.

selectors (classes/ids) are. (For clarification). Hits CSS tooling which does renaming that isn't aware of this; accidentally load something up in quirks mode and you generated class of ".aB" suddenly matches more things!

"except for the things we name ourselves" - except in quirks mode :)

A meta comment is that the "no comments" policy within WebKit that was present was super bad a ramping up new contributors - it was difficult to remove that policy within Blink but eventually got there - (was difficult to convince original WebKit contributors that it was harmful at the time).

Its scattered all over the place in WebKit, but a few examples:
github.com/WebKit/WebKi...
github.com/WebKit/WebKi...
github.com/WebKit/WebKi...

Make sure you disable the compressibility quirk! drafts.csswg.org/css-ui-4/#:~....

Google Maps changed the way we get around. It all began in a spare bedroom in Sydney This weekend, Google Maps turns 20 – and Stephen Ma is writing himself and his friends back into its origin story

www.theguardian.com/technology/2...

Arranging Invisible Icons in Quadratic Time Near the end of January I was pointed to a twitter thread where a Windows user with a powerful machine was hitting random hangs in explorer. Lots of unscientific theories were being proposed. I don…

Bruce Dawson has some great posts on this -
randomascii.wordpress.com/2021/02/16/a....

Quadratic complexity is truly the worst complexity. At small N its close enough to linear time that it doesn't matter, for large N it hangs the CPU.

... just for consistency. E.g. if a developer is happy using "display:inline-flex" its a pretty major sharp edge if suddenly "display:inline-new-thing" doesn't work. You shouldn't need to learn a new thing if you are happy with the old.

(IMO people got way too excited about the new syntax)

"no point in the new syntax" - It was more for allowing "other" display-outside types (namely "run-in"... which nobody has shipped yet), not "this is the way you should do it". The "new" syntax in itself doesn't provide much (any?) value.

We'll likely always provide the "legacy" inline-* types...

What browser did you test in (that kinda looks like FF?)

Group similar acting properties together. Most things are prefixed which helps, eg grid-*, but things like align-self, justify-self, the inset properties mentioned above dont have common prefix. Additionally there are set of properties which only have a paint affect for example, (vs a layout affect)

A lot of places avoid using the short hands excessively (e.g. inset) as it's more difficult to read in that form for newer developers (you need to be familiar with the exact order).

It spreads similar acting properties in a non-logical order. E.g. if you are trying to position something via inset properties, you might not see that "top" and "bottom" are both set in a long rule.

Smarter ordering. Alphabetical ordering is typically confusing. E.g. top/right/bottom/left should be grouped together (in that order).

As an example of quality - after implementing+shipping the new grid layout algorithm - Grid bugs dropped significantly, and Blink has had very few *new* grid bugs reported over the past year or so.
e

Massive congratulations to the Edge team for sending out the intent to ship for subgrid. The Edge team always impresses me with the attention to detail they bring to a project, and quality of implementation.

https://groups.google.com/a/chromium.org/g/blink-dev/c/qvfOyAVePfs/m/S04XMmTlCwAJ