Gregory's Server
Bramus
Can you Syntax Highlight a code snippet on the web without overloading the DOM with a ton of `<span>` elements wrapped around the tokens?
Thanks to the Custom Highlight API, you can!
|
5 posts total
Bramus
Psst, you no longer need JavaScript to create an exclusive accordion! As of Chrome 120 you can give `<details>` elements a `name` value. Just like radio buttons, those with the same name will form a group, of which only one can be chosen at the same time. https://developer.chrome.com/docs/css-ui/exclusive-accordion Exclusive Accordion (aka “named <details>”) is also supported in Safari 17.2 and up.
Bramus
And oh, we’re also looking into making it more easy for you to add animations `<details>` … but more on that later ;) 
Matt Wilcox
@bramus There are a11y concerns around this pattern which have not yet been addressed, so I'm not going to be using or encouraging this pattern until that's done. 
Dusty Pomerleau
@bramus Exclusive accordions aren't good for the user. It shouldn't be someone else's choice whether you can expand all the content on a page. See this discussion:
Bramus
To change a color based on Light Mode or Dark Mode, you’d typically use a `prefers-color-scheme` Media Query. To make things easier, CSS now comes with a `light-dark()` utility function. Read https://brm.us/light-dark to get to know the details. Browser Support: Firefox 120.
Show previous comments
p01
@bramus gotta read the details, but was there some consideration to have a syntax that supports more color scheme like forced-colors? Or who knows, there could be color schemes for common color blindness. Would be nice to have a unified syntax to define colors, and other values for the different color schemes 
Roma Komarov
@bramus One day it would be very easy to replace my var(--LIGHT, …) var(--DARK, …) space-toggles-based solution with this :D (which we use in production for around a year with zero issues!)
Bramus
Just a moment ago, CSS View Transitions Module Level 1 got published as Candidate Recommendation. Congrats @jaffathecake et al on reaching this HUGE MILESTONE! |
@bramus This demo is incredibly cool.
I see a huge value in this API. I am wondering more about the trade-off: more spans vs more tokenization logic. What if code blocks can be rendered on the server? Is it worth the effort? I have so many questions about this…
Thanks for sharing this snippet dude!
@bramus Do CSS Highlights support bold/italic? I saw those in your code but had a play and couldn't get it to work. MDN lists a stricter set of allowed properties. Is that changing?
https://developer.mozilla.org/en-US/docs/Web/CSS/::highlight#allowable_properties
@bramus that's brilliant!