Login

Recent searches

No recent searches

Search options

Not available on mastodon.xyz.
mastodon.xyz is one of the many independent Mastodon servers you can use to participate in the fediverse.
A Mastodon instance, open to everyone, but mainly English and French speaking.

Administered by:

Server stats:

819
active users

mastodon.xyz: AboutProfiles directoryPrivacy policy

Mastodon: AboutGet the appKeyboard shortcutsView source codev4.3.4

#CssWg

1 post1 participant0 posts today
Public
Amelia Bellamy-Royds

OK, #CSSWG folks, whose brilliant idea was it to make auto-generated heading IDs for anchor links in the CSS spec end with ① or ② or ⑤ characters (for the 1st, 2nd, or 5th heading in a section without an otherwise specified ID).

Looks very cute in a URL bar, but gets copy & pasted as URL encoded character barf. And then there's the likely screen-reader mangling of special characters.

This had better be for Editor's drafts only & prompt a warning to add custom IDs before publication.

🤨

Public
westbrook

Does your app have excellent `:focus-visible` states?

Are they the sort of fancy something or other that extends beyond the padding-box of the currently focused element? Read: outline with outline-offset or similar.

Do you notice how those element within a CSS clipping element get...clipped?

What do you do in the face of this reality?

Should we be able to promote elements to the top layer (developer.mozilla.org/en-US/do) via CSS to mitigate this sort of thing?

MDN Web DocsTop layer - MDN Web Docs Glossary: Definitions of Web-related terms | MDNThe top layer is a specific layer that spans the entire width and height of the viewport and sits on top of all other layers displayed in a web document. It is created by the browser to contain elements that should appear on top of all other content on the page.
#CSS#CSSWG#OpenUI
Public
westbrook

Does anyone know if there's active spec work going into a `matchMedia()` (developer.mozilla.org/en-US/do) equivalent object for Container Style Queries (caniuse.com/css-container-quer)?

I'm thinking about when Content-Aware Components will be able to pass their knowledge about state down to child elements with CSS Custom Properties and have the JS be reactive to that data in cases where the actual DOM should change based on that state.

MDN Web DocsWindow: matchMedia() method - Web APIs | MDNThe Window interface's matchMedia() method returns a new MediaQueryList object that can then be used to determine if the document matches the media query string, as well as to monitor the document to detect when it matches (or stops matching) that media query.
#CSSWG#DOMWG
Public
Sara Joy :happy_pepper:

Hey #CSS people, or #CssWg people --

I know there's discussion about light-dark() eventually being able to do more than just colours. And that in another part of CSS, maybe container queries could include state (like is sticky thing stuck) - mostly I'm like Oooh, could it also get color-scheme state?

Where would I best look up discussions or articles about such things?

Thank yoouuu

Public *
Andreu Botella :verified_enby:

Hey! CSS developers! I want to hear from you.

I'm improving the way line clamping works in Chrome and in the specs. The existing -webkit-line-clamp property is a mess, because it will only do something if you have other properties (which are legacy versions of flexbox properties), and we can't fix that because of web compat. But we can add a new line-clamp property without those issues!

But right now I'm dealing with what should happen if you have both properties set on the same element:

display: block;
line-clamp: 3;
-webkit-line-clamp: 4;

(Note that if we remove line-clamp: 3, this wouldn't clamp, because display: block prevents -webkit-line-clamp from working.)

So what do you think should happen?

· 192 people · Closed
#css#CSSWG
Public
westbrook

This seems reasonable, right #CSSWG ?

```css
custom-element::part(interactive-part) {
&:hover {
/* Please sir, can I have some styles? */
}
}
```

Feels like this was maybe an accidental side effect of specifically preventing things like:

```css
div:after {
&:hover {
/* Nothing to style here... */
}
}
```

Glad to see Tab looking for a second pass on this conversation before fully closing! 🔥

#webComponents#webComponentsCG
ExploreLive feeds
About