Michael G
@g12n.de
UI-Designer, using Code to create in CSS, SVG and JS. Technology enthusiast, fan of Smart Home, Humanist and dweller in the marvelous city of Cologne.
I tried to create a scroll button component. I was actually contemplating the use of invoker commands. However, there is an architectural hurdle: the element cannot communicate with the button to tell it about its internal state. Let's deconstruct the details element, for example: (1/2)
December 1, 2025 at 2:46 PM
I tried to create a scroll button component. I was actually contemplating the use of invoker commands. However, there is an architectural hurdle: the element cannot communicate with the button to tell it about its internal state. Let's deconstruct the details element, for example: (1/2)
And nobody actually did. In over a decade if friendly speaking disastrous results. Form the slightly annoying to the ludicrously stupid (see screenshot, that we already talked about)
Maybe it's time to meet css on its terms.
Maybe it's time to meet css on its terms.
December 1, 2025 at 7:14 AM
And nobody actually did. In over a decade if friendly speaking disastrous results. Form the slightly annoying to the ludicrously stupid (see screenshot, that we already talked about)
Maybe it's time to meet css on its terms.
Maybe it's time to meet css on its terms.
All descendants (of a type). Which is actually pretty useful especially in cases when the detailed structure of the descendants can vary.
With child selectors you often end up with spaghetti selectors.
`ul.cards>li>a,ul.cards>li>span>a{}` instead of
`ul.cards a{}`
With child selectors you often end up with spaghetti selectors.
`ul.cards>li>a,ul.cards>li>span>a{}` instead of
`ul.cards a{}`
November 30, 2025 at 7:29 PM
All descendants (of a type). Which is actually pretty useful especially in cases when the detailed structure of the descendants can vary.
With child selectors you often end up with spaghetti selectors.
`ul.cards>li>a,ul.cards>li>span>a{}` instead of
`ul.cards a{}`
With child selectors you often end up with spaghetti selectors.
`ul.cards>li>a,ul.cards>li>span>a{}` instead of
`ul.cards a{}`
In the end we end up at the same question again: why propose a declarative markup solution for segmented or pages overflows if you wouldn’t even think of is for plain scrolling overflows? Or shall we make scrollbars as markup? (Please don’t.)
![Code screenshot of declarative scroll bars
<div id="longtext">
<!-- [images or long text] -->
</div>
<button commandfor="longtext" command="next">
Next Thing
</button>
<input class="scrolbar" type="range" commandfor="longtext" command="scroll-to-position"/>](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:gilu7o4lu2uhhh2sztjeo47i/bafkreifwieqt2dezhg64okbti4km6gm2j54olq3ddbqohmuolnezscrlh4@jpeg)
November 30, 2025 at 4:52 PM
In the end we end up at the same question again: why propose a declarative markup solution for segmented or pages overflows if you wouldn’t even think of is for plain scrolling overflows? Or shall we make scrollbars as markup? (Please don’t.)
Re reading @dbushell.com comment on pseudo-elements.
Still wondering how this code example is supposed not to break separation of concerns.
This "content" actually makes layout decisions. Which is supposed to be part of #CSS.
And breaks on paged and static media.
dbushell.com/2025/05/23/p...
Still wondering how this code example is supposed not to break separation of concerns.
This "content" actually makes layout decisions. Which is supposed to be part of #CSS.
And breaks on paged and static media.
dbushell.com/2025/05/23/p...
November 30, 2025 at 2:31 PM
Re reading @dbushell.com comment on pseudo-elements.
Still wondering how this code example is supposed not to break separation of concerns.
This "content" actually makes layout decisions. Which is supposed to be part of #CSS.
And breaks on paged and static media.
dbushell.com/2025/05/23/p...
Still wondering how this code example is supposed not to break separation of concerns.
This "content" actually makes layout decisions. Which is supposed to be part of #CSS.
And breaks on paged and static media.
dbushell.com/2025/05/23/p...
I think there is only one issue there: you don't need shadow Dom to make an html custom elements. Actually using this term instead of `webcomponents` helps a lot to not stumble into this confusion with frameworks.
In your hierarchy these are on the same level as semantic html tags.
In your hierarchy these are on the same level as semantic html tags.
November 28, 2025 at 11:57 AM
I think there is only one issue there: you don't need shadow Dom to make an html custom elements. Actually using this term instead of `webcomponents` helps a lot to not stumble into this confusion with frameworks.
In your hierarchy these are on the same level as semantic html tags.
In your hierarchy these are on the same level as semantic html tags.
![Code screenshot of a js doc style comment
/** @essprop {color} [--my-color=#ff6600] - property description */
mark{
text-decoration-color: var(--my-property, #ff6600);
｝](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:gilu7o4lu2uhhh2sztjeo47i/bafkreibms57k72ctqkdh3ih7mam6jndwwlvioml7x2ux6e6wbcxnpxpwne@jpeg)
To be honest: I barely register a custom property at all, if I don't have to for animation. Comparing different options this feels like a bot of overhead. And even when registering the property we still need a comment to say "That's the color for attention grabbing decorations. Don't use for copy"
![Code Screenshot js doc style comment on an element:
/** @essprop {color} I--my-color=#000000] - property description */
mark{
text-decoration-color: var(--my-property, #ff6600);
｝](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:gilu7o4lu2uhhh2sztjeo47i/bafkreiacqzwxc3wwqwn43wtmgt2rqqrgwjk4qaw4depyuuwln2mpxn5xfq@jpeg)
November 27, 2025 at 6:34 PM
To be honest: I barely register a custom property at all, if I don't have to for animation. Comparing different options this feels like a bot of overhead. And even when registering the property we still need a comment to say "That's the color for attention grabbing decorations. Don't use for copy"
![Code Screenshot
/**
* @tag button
* @summary Default button element used for primary and secondary actions.
*
* @cssProp --button-radius - Border radius of the button component.
* @cssProp --button-block-padding - Vertical (block) padding inside the button.
* @cssProp --button-inline-padding - Horizontal (inline) padding inside the button.
*
* @cssProp --button-stroke-width - Border width of the button.
* @cssProp --button-color-stroke - Border color of the button in its default state.
*
* @cssProp --button-font-size - Font size of the button label.
* @cssProp --button-font-weight - Font weight of the button label.
*
* @cssProp --button-color-fill - Background color of the button in its default state.
* @cssProp --button-color-fill--hover - Background color when the button is hovered.
* @cssProp --button-color-fill--active - Background color while the button is actively pressed.
* @cssProp --button-color-fill--pressed - Background color when the button is in a pressed / selected state (`aria-pressed`, `aria-checked`, `aria-selected`).
*
* @cssProp --button-color-text - Text color of the button in its default state.
* @cssProp --button-color-text--pressed - Text color when the button is in a pressed / selected state.
*
* @cssProp --icon-size - Logical size used to derive icon width and height.
*/
button,
[class~="button"]{
--_icon-width: var(--icon-size, 24px);
--_icon-height: var(--icon-size, 24px);
display: inline-flex;
gap: 4px;](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:gilu7o4lu2uhhh2sztjeo47i/bafkreibo7ixgk7cpvxdrupwvvljqqmikqs6gk2npdbtk3ag2gda5hbjvia@jpeg)
Oh yeah! They are!
But when I use them I mentally have to make a gear shift because I am tempted to use --custom-properties similar to the way I use class names.
@una.im used a card-container element in the dom.
😅 This really bugs me a little.
developer.chrome.com/docs/css-ui/...
But when I use them I mentally have to make a gear shift because I am tempted to use --custom-properties similar to the way I use class names.
@una.im used a card-container element in the dom.
😅 This really bugs me a little.
developer.chrome.com/docs/css-ui/...
November 14, 2025 at 6:10 AM
Oh yeah! They are!
But when I use them I mentally have to make a gear shift because I am tempted to use --custom-properties similar to the way I use class names.
@una.im used a card-container element in the dom.
😅 This really bugs me a little.
developer.chrome.com/docs/css-ui/...
But when I use them I mentally have to make a gear shift because I am tempted to use --custom-properties similar to the way I use class names.
@una.im used a card-container element in the dom.
😅 This really bugs me a little.
developer.chrome.com/docs/css-ui/...
Here you go: on Safari zooming in and out is basically grinding the ui to a hold. On Chrome this effect is less pronounced but still noticeable on bigger documents. The cause of this is in essence the page being an inline svg. We have similar problems with our out editor on our site.
November 12, 2025 at 6:58 PM
Here you go: on Safari zooming in and out is basically grinding the ui to a hold. On Chrome this effect is less pronounced but still noticeable on bigger documents. The cause of this is in essence the page being an inline svg. We have similar problems with our out editor on our site.
Das wäre als Installation interessant. Es wäre super, das modular zu bekommen. Bei uns ist die Weihnachtsbeleuchtung modular. Sie wird einfach an die Laternenpfähle geklemmt. Wenn man über den Tag die Turbine genug Energie für eine Nacht LED-Licht zusammenbekommt, wäre das ne Alternative.
November 10, 2025 at 10:14 AM
Das wäre als Installation interessant. Es wäre super, das modular zu bekommen. Bei uns ist die Weihnachtsbeleuchtung modular. Sie wird einfach an die Laternenpfähle geklemmt. Wenn man über den Tag die Turbine genug Energie für eine Nacht LED-Licht zusammenbekommt, wäre das ne Alternative.
Woher kommt eigentlich der Drang, Kritik an Grünen Vorstellungen, entweder zu infantilisieren („Heuliheuli“) oder zu pathologischeren?
October 28, 2025 at 4:10 PM
Woher kommt eigentlich der Drang, Kritik an Grünen Vorstellungen, entweder zu infantilisieren („Heuliheuli“) oder zu pathologischeren?
Remind me to try that one next time I am on a laptop 😅
I see the point. But often the contents of a social media teaser and the ones on the DOM of the site have different ways to talk.
I see the point. But often the contents of a social media teaser and the ones on the DOM of the site have different ways to talk.
October 28, 2025 at 3:07 PM
Remind me to try that one next time I am on a laptop 😅
I see the point. But often the contents of a social media teaser and the ones on the DOM of the site have different ways to talk.
I see the point. But often the contents of a social media teaser and the ones on the DOM of the site have different ways to talk.
Should we go in o a class diet?
In #CSS Devs use way to often class names. Patterns like BEM have encouraged an explosion of class names, that often rely on Javascript to be updated.
Using pseudo classes, and semantic attributes helps us to work closer with the DOM.
In #CSS Devs use way to often class names. Patterns like BEM have encouraged an explosion of class names, that often rely on Javascript to be updated.
Using pseudo classes, and semantic attributes helps us to work closer with the DOM.
![Code Screenshot. CSS
/* instead of class names */
.checked{
…
}
/* use pseudo-classes */
:checked {
…
}
:has(:checked){
}
/* or semantic attributes */
[aria-checked]{
}](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:gilu7o4lu2uhhh2sztjeo47i/bafkreibgzg4pqocyvug6dns3azcnmyzgncxe6pmfkobp6gxco3jpmfeylm@jpeg)
October 16, 2025 at 5:56 AM
Should we go in o a class diet?
In #CSS Devs use way to often class names. Patterns like BEM have encouraged an explosion of class names, that often rely on Javascript to be updated.
Using pseudo classes, and semantic attributes helps us to work closer with the DOM.
In #CSS Devs use way to often class names. Patterns like BEM have encouraged an explosion of class names, that often rely on Javascript to be updated.
Using pseudo classes, and semantic attributes helps us to work closer with the DOM.
So. How would I add documentation for custom invoker commands in custom elements manifest and jsDoc?
#customElements #webcomponents
#customElements #webcomponents
October 2, 2025 at 3:29 PM
So. How would I add documentation for custom invoker commands in custom elements manifest and jsDoc?
#customElements #webcomponents
#customElements #webcomponents
While Custom Elements Manifest (CEM) seems to be a really powerful tool for documenting javascript based elements. For my current design System Work I am a little bit lost for options to documents #CSS Custom Properties and plain class names that reside outside of javascript pipelines. Any tipps?
September 26, 2025 at 1:53 PM
While Custom Elements Manifest (CEM) seems to be a really powerful tool for documenting javascript based elements. For my current design System Work I am a little bit lost for options to documents #CSS Custom Properties and plain class names that reside outside of javascript pipelines. Any tipps?
Exactly. Every argument you make for segmented scroll controls and indicators you got to make for linear scroll controls and indicators as well.
There isn’t any reason to not treat them consistently. Including their focus behaviors, keyboard and voice controls.
There isn’t any reason to not treat them consistently. Including their focus behaviors, keyboard and voice controls.
September 15, 2025 at 11:17 PM
Exactly. Every argument you make for segmented scroll controls and indicators you got to make for linear scroll controls and indicators as well.
There isn’t any reason to not treat them consistently. Including their focus behaviors, keyboard and voice controls.
There isn’t any reason to not treat them consistently. Including their focus behaviors, keyboard and voice controls.
Why and how should the lower element be in the html while the upper isn't. Why and how would we treat indicators for continuous scroll differently to indicators for segmented (snapping or paginated) scroll?
September 15, 2025 at 2:26 PM
Why and how should the lower element be in the html while the upper isn't. Why and how would we treat indicators for continuous scroll differently to indicators for segmented (snapping or paginated) scroll?
I don't understand why we should treat linear and segmented scroll indicators and controls differently. The only real difference is that we call the part that indicates the position and approximate size of the overflow the 'scroll-thumb', and the other the 'scroll-marker'.
September 15, 2025 at 1:53 PM
I don't understand why we should treat linear and segmented scroll indicators and controls differently. The only real difference is that we call the part that indicates the position and approximate size of the overflow the 'scroll-thumb', and the other the 'scroll-marker'.
Scroll markers serve the same role as scroll bars. Just for pages scroll. Scroll buttons are the same elements that were placed at the ends of scroll bars. The only difference is that they can now have other positions. Of course they should be controllable by assisistive technology. But not as html
September 15, 2025 at 1:04 PM
Scroll markers serve the same role as scroll bars. Just for pages scroll. Scroll buttons are the same elements that were placed at the ends of scroll bars. The only difference is that they can now have other positions. Of course they should be controllable by assisistive technology. But not as html
I am really, REALLY uncomfortable to clutter static DOM with elements that only work if javascript is present. Accessible and sustainable Code must as well be prepared for bad bandwidth, missing Javascript support and even dramatic layout changes based on device size or preferred UI settings.
September 11, 2025 at 6:07 AM
I am really, REALLY uncomfortable to clutter static DOM with elements that only work if javascript is present. Accessible and sustainable Code must as well be prepared for bad bandwidth, missing Javascript support and even dramatic layout changes based on device size or preferred UI settings.