Post ASBJAxDGvdO9zfpdJo by categulario@mstdn.mx
(DIR) More posts by categulario@mstdn.mx
(DIR) Post #ASBGnglbi2NCPyfcdU by simon@fedi.simonwillison.net
2023-01-30T21:09:38Z
0 likes, 0 repeats
CSS media query question: if I write a bunch of CSS that I want to apply if a specific media query matches, is there a way I can say "but also apply if the body element has this specific class" without needing to duplicate the CSS twice, once in a body.specidfic-class .blah { ... } block and once in a @media only screen and (max-width: 576px) { ... } block?I'm not using a CSS pre-processor. Am I going to have to duplicate my code in two places?
(DIR) Post #ASBH2IrGspEWbuHwFU by dansinker@omfg.town
2023-01-30T21:12:13Z
0 likes, 0 repeats
@simon apply as a css variable where you need it?
(DIR) Post #ASBHN5vm8rjmb9JEjA by simon@fedi.simonwillison.net
2023-01-30T21:16:10Z
0 likes, 0 repeats
@dansinker Those only work for individual properties though, right? I have a whole block of stuff I want to apply - it's basically this bit: https://github.com/simonw/datasette/blob/0b4a28691468b5c758df74fa1d72a823813c96bf/datasette/static/app.css#L719-L757
(DIR) Post #ASBHnYdQ2n6j9QLFRY by simon@fedi.simonwillison.net
2023-01-30T21:16:48Z
0 likes, 0 repeats
Ideally I'd like a way to say "if this media query matches, then behave as if this class was present on the body element" - but I'd rather not use JavaScript to do that, since my stuff mostly works with JavaScript disabled at the moment
(DIR) Post #ASBIU3G8Zb9gIGiMU4 by floby@mastodon.social
2023-01-30T21:19:25Z
0 likes, 0 repeats
@simon this looks like a dark mode kind of question and yes, you have to duplicate as far as I know with plain css
(DIR) Post #ASBIvmE7UdwPZnzWUq by shanetheking@techhub.social
2023-01-30T21:21:45Z
0 likes, 0 repeats
@simon without a pre processor, yes, you’ll need to duplicate it. With a pre-processor there would be ways to make it DRY, but not in your case unfortunately.
(DIR) Post #ASBJAxDGvdO9zfpdJo by categulario@mstdn.mx
2023-01-30T21:22:10Z
0 likes, 0 repeats
@simon i'm guessing you also want to achieve that without CSS preprocessors
(DIR) Post #ASBJvWvOUB5S4Xg8PI by AndrewO@rls.social
2023-01-30T21:27:50Z
0 likes, 0 repeats
@simon Last time I checked (a year ago), sorry, no.I wanted to have a dark mode that was set by both media queries and classes and ended up using this postcss plugin: https://www.npmjs.com/package/postcss-dark-theme-class I don't know of a way to do that without a prepocessor that doesn't involve some duplication.
(DIR) Post #ASBKOyznCJaBWxmQm8 by sil@mastodon.social
2023-01-30T21:29:57Z
0 likes, 0 repeats
@simon I can't think of a non-hacky way to do it. Hacky way: maybe something likebody.myclass .box { --myvar: true }@container style(--myvar: true) or (max-width: 576px) { ...styles...}not at all sure this works, and I don't think @container style is well supported, and even if it works it's quite horrid.
(DIR) Post #ASBKdsGMVoGczddCFM by Schepp@mastodon.social
2023-01-30T21:31:14Z
0 likes, 0 repeats
@simon yes, you can. You would create a CSS toggle via Custom Property an toggle it "on" in the class and inside the media query. Here is how that works: https://lea.verou.me/2020/10/the-var-space-hack-to-toggle-multiple-values-with-one-custom-property/ h/t @leaverou And then there is also proper CSS Toggles coming to CSS soon™®©: https://github.com/w3c/csswg-drafts/issues/6991
(DIR) Post #ASBL8Uu1PnkXWGmfZY by dvogel@mastodon.social
2023-01-30T21:37:23Z
0 likes, 0 repeats
@simon is this not what @import is for? Write out the styling in one stylesheet and then @import it within the context of each selector. I haven't done CSS stuff in a while but I feel like this worked across modern browsers as of a couple years ago.
(DIR) Post #ASBLMzCrXiOdYkVOc4 by ryan@social.lol
2023-01-30T21:37:49Z
0 likes, 0 repeats
@simon In this case would the existence of the class on the `body` mean it should essentially ignore/override the media query?
(DIR) Post #ASBLN0IZTyYawkBT9M by ryan@social.lol
2023-01-30T21:55:55Z
0 likes, 0 repeats
@simon Forgot you cannot use CSS variables within media queries so my question is less important now. 😔 Such a tricky problem!I think what other folks have said is right — you're probably stuck having to duplicate it for now.
(DIR) Post #ASBMtSzGSEEx8xCFiC by simon@fedi.simonwillison.net
2023-01-30T22:06:38Z
0 likes, 0 repeats
It looks like this isn't possible - you need to duplicate your whole blocks of CSS if you want them to apply using both a class AND a media queryIn my particular case I've decided to change my HTML entirely in a way which means I won't need to solve this problem as a side-effect
(DIR) Post #ASBQDg3Zs5JVKeXiwC by simon@fedi.simonwillison.net
2023-01-30T22:46:58Z
0 likes, 0 repeats
@essentialrandom I changed my mind about how I was going to build the feature entirely!Previously I was planning to reuse my mobile CSS on one specific desktop page, but I realized I would be better off coming up with entirely new HTML and CSS instead https://github.com/simonw/datasette/issues/2010#issuecomment-1409406327
(DIR) Post #ASBRSvAa41SIVBeREW by eeeps@front-end.social
2023-01-30T23:08:49Z
0 likes, 0 repeats
@simon IIUC, this was a use case for @apply; abandoned. https://tabatkins.github.io/specs/css-apply-rule/#usingPossible soonish in a slightly less elegant way using (experimental) style queries; you'll need to have the Experimental Web Platform Features flag on in Canary > M111 for this to work though.Code: https://codepen.io/eeeps/pen/JjBaLppVideo: https://o.img.rodeo/video/upload/q_auto,f_mp4/v1675119921/Screen_Recording_2023-01-30_at_15.03.02cc: @mia
(DIR) Post #ASCOcsbaLcsijwIcfA by adactio@mastodon.social
2023-01-31T10:11:47Z
0 likes, 0 repeats
@simon Maybe the proposal for a CSS `:toggle` pseudo-class could solve this?https://tabatkins.github.io/css-toggle/🔗 https://adactio.com/notes/19865