3 ms·

This is extraordinary. While JavaScript is needed now, I’d encourage the author to see what needs to be added to CSS to allow a CSS-only solution, and promote i

This is extraordinary. While JavaScript is needed now, I’d encourage the author to see what needs to be added to CSS to allow a CSS-only solution, and promote it in the CSS community. For example, repeating the clef when wrapping is akin to a sticky table header, and would have more applications than only music. Some CSS notation is wholly new to me: > .stave > [data-pitch^="A"][data-pitch$="5"] { grid-row-start: A5; } I’ve never seen CSS selectors with square brackets before. Apparently it’s an attribute selector: https://css-tricks.com/attribute-selectors/ https://css-tricks.com/attribute-selectors/

firexcy 2y ago
> CSS selectors with square brackets They are also extremely useful when it comes to adblocking. Without their partial matching capabilities it'd have been almost impossible to target ad-containing elements in most of these days' js and framework-ladden websites.
wizzwizz4 3y ago
I'd suggest a ::line pseudoelement for that. We already have ::first-line, which could perhaps be considered an abbreviated ::line:first-of-type. Though, ::first-line doesn't seem to support enough properties to be useful here, so maybe another approach is needed.
- stephbd 3y ago
  My only thought on this was to have a strip down the side with a vertically repeating background of an SVG data URL with the clef in it. But I don't like it. It'll be brittle. And it wouldn't support clef / key / time changes very easily.
- mananaysiempre 2y ago
  I don’t know that this could be done cleanly without intertwining stlying and line breaking, which quite honestly sounds like a nightmare. (Line breaking is enough of a horror show as is, what with ligatures and bidi and ...)
mewpmewp2 3y ago
These css selectors are actually fairly common I would say. They were used for querySelector a lot before Angular, React, etc. In addition in current times they are frequently used to grab elements by their data-testid either for jest tests or e2e tests.

firexcy 2y ago

> CSS selectors with square brackets They are also extremely useful when it comes to adblocking. Without their partial matching capabilities it'd have been almost impossible to target ad-containing elements in most of these days' js and framework-ladden websites.

wizzwizz4 3y ago

I'd suggest a ::line pseudoelement for that. We already have ::first-line, which could perhaps be considered an abbreviated ::line:first-of-type. Though, ::first-line doesn't seem to support enough properties to be useful here, so maybe another approach is needed.

stephbd 3y ago
My only thought on this was to have a strip down the side with a vertically repeating background of an SVG data URL with the clef in it. But I don't like it. It'll be brittle. And it wouldn't support clef / key / time changes very easily.
mananaysiempre 2y ago
I don’t know that this could be done cleanly without intertwining stlying and line breaking, which quite honestly sounds like a nightmare. (Line breaking is enough of a horror show as is, what with ligatures and bidi and ...)

mewpmewp2 3y ago

These css selectors are actually fairly common I would say. They were used for querySelector a lot before Angular, React, etc. In addition in current times they are frequently used to grab elements by their data-testid either for jest tests or e2e tests.