4 ms·
This article has lots of nice stuff in it but ... that first example in the tweet at the top, cool-thing { display: flex; &[shadow] {
by socalgal2 1y ago
This article has lots of nice stuff in it but ... that first example in the tweet at the top,
cool-thing {
display: flex;
&[shadow] {
box-shadow: 1px 1px #0007;
}
@media (width < 480px) {
flex-direction: column;
}
}
and html like
<cool-thing shadow>wow</cool-thing>
I pasted it into a file and it doesn't work. I honestly didn't expect it to work. I thought you needed more to get a cool-thing element but in any case, it's not encouraging to see the first example fail. Am I missing some context?
-- update --
my bad - I think it was just subtle and I thought it wasn't doing anything. Thanks for all the replies
- rebane2001 1y agoit should work, did you put the css between <style> tags? also the box-shadow is a box shadow, you might wanna change it to text-shadow if that's what you'd expect from it
- msie 1y agotext-shadow works. Was the use of box shadow a mistake?
- rebane2001 1y agothat snippet of code was never meant to be used, it was supposed to be illustrative code that fits in a tweet text-shadow does make more sense if you're actually trying out the code, but the original intention was to demonstrate a more complex element having a shadow modifier
- ZYbCRq22HbJ2y7 1y agoThat is just showing nesting with some older features - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting... - https://caniuse.com/css-media-range-syntax https://caniuse.com/css-media-range-syntax - https://caniuse.com/css-nesting https://caniuse.com/css-nesting - https://caniuse.com/flexbox https://caniuse.com/flexbox
- leoh 1y agoSeems to work fine https://plnkr.co/edit/Sor4x5BlMwmyRqZw?open=lib%2Fstyle.css&preview https://plnkr.co/edit/Sor4x5BlMwmyRqZw?open=lib%2Fstyle.css&...