@westbrook

527 Followers
173 Following
4.8K Posts
Open web enthusiast. Maker of things with HTML, CSS & JS. Trombonist. Food lover. 日本語OK. Opinions are owned by no one but my myself.
Websitehttps://westbrookjohnson.com
Musichttps://music.kwjtrio.com
Bloghttps://blog.westbrookjohnson.com
Other writinghttps://dev.to/westbrook
Trump’s Justice Department Dropped 23,000 Criminal Investigations in Shift to Immigration

Under Attorney General Pam Bondi, the DOJ abandoned a record number of cases — including hundreds of investigations into terrorism, white-collar crime and drugs — in just the first six months of President Donald Trump’s second term.

ProPublica
Blink: Intent to Ship: CSS Name-only Container Queries

Blink: Intent to Ship: CSS Na...
Intent to Ship: CSS Name-only Container Queries

Downbeat soon… #elephantroom #jazz
@zacky The fact that it works quite well in WebKit just leaves one wondering what about the Chrome CSS parsing is so...lacking? 🤣

@zacky A great question, and certainly a reason to hope that Chrome wouldn't have much issue getting into this style of selector!

However, these's no _self_ selector in `:host-context()`. Always it's interpreted as:

```css
:host {
.host-context & {
/* You're in a host context. */
}
}
```

It being deprecated, maybe the same intrepid implementor who was going to pull this out of Chromium would be interested in replacing it with extended `:host:has(...)` and `:host(:has(...))` support 🤞

Do I know any @developers devs that work close to #css that I could nerdsnipe into figuring out how chromium could catch up to webkit in so far as a `:host(:has(~ ul li)) {}` selector?

See it in action, here: https://codepen.io/Westbrook/pen/EayLZow

Checkout the #CSSWG convo, here: https://github.com/w3c/csswg-drafts/issues/11859#issuecomment-3834942939

#webComponents developers want all the same `:has()` goodies that anyone can leverage, and you could be the hero we both need and deserve!! 🦸

host has successive sibling with descendant

...

@bramus I'd argue the the use of `--arg` makes the application of the value local, which aligns more to this: https://codepen.io/Westbrook/pen/raMJByv than to what you've shared.

Maybe that's not _how_ mixins work, but it's definitely how I'd read them. Your example feels more like the mixin is:

```css
:root {
--foo: 10em;
}

@mixin --foo() {
@Result {
&, & > h2, & + p {
width: var(--foo);
}
}
}
```

Using the --arg makes it like this, instead...right?

...

@noleli What!?! 😲 How do you see it being a breaking change for `:has()`?

Naively, if we could normalize reporting of `:focus-visible` to be like `:focus` then we'd be able to get `:has(:focus-visible)` to work just like `:has(:focus)` works today, right?

I could see someone saying that's a breaking change to `:focus-visible`, but I'd argue it was "fixing" it, but that's certainly in the eye of the beholder. 🤣

@noleli Makes me think more on the state here. Maybe it's not that we should have a more introspective selector here. Maybe it's that we're not adequately reporting up the state. If a shadow host can be `:focus` when a child is focused, then why can't it be `:focus-visible`? With such a thing then `:has(:focus-visible)` would work in this case.

Not sure the right solutions, but something SHOULD be done here! 🤞

#webDev #CSSWG #a11y

2/2

@noleli That's interesting!

The sort of default response is that something intended to traverse the shadow boundaries is possibly content leaking. Which might also apply to the `:focus-visible-within` construct 🙈

1/x