Kiers
KPCKevin Powell - Community
•Created by Kiers on 7/19/2023 in #front-end
CSS Nesting Conventions
Makes a lot of sense - good point. Thanks
11 replies
KPCKevin Powell - Community
•Created by Kiers on 7/19/2023 in #front-end
CSS Nesting Conventions
Thanks very much Kevin - that's really helpful. I'm never sure whether to do a big media query which defines all the changes for that breakpoint, or focus on how grouping behaviour for individual elements.
That custom media tag sounds like it'll make life clearer. I do like the idea of using a label in the MQ so it has meaning beyond just a number.
11 replies
KPCKevin Powell - Community
•Created by Kiers on 7/19/2023 in #front-end
CSS Nesting Conventions
Thanks - I'll take a look 🙂
11 replies
KPCKevin Powell - Community
•Created by Å Marlon G on 2/16/2023 in #front-end
::before & ::after
Ah! The plot thickens!
20 replies
KPCKevin Powell - Community
•Created by Å Marlon G on 2/16/2023 in #front-end
::before & ::after
Wow, never thought it would be an actual bug... 🙂 I mean, it looked like one but I just figured I was missing something.
Cheers Kevin 🙂
20 replies
KPCKevin Powell - Community
•Created by Å Marlon G on 2/16/2023 in #front-end
::before & ::after
Hi, yeah - I've not used containers in anger as yet, so I'm not familiar with why it affects
::after and not other content...
The \201D is the character code for a closing quote - to be honest, I'd have expected the two to produce exactly the same result, so there must be something weird going on... it might even be a bug 🙂20 replies
KPCKevin Powell - Community
•Created by Å Marlon G on 2/16/2023 in #front-end
::before & ::after
Ah! the close-quote works if you remove the
container-type: inline-size;
from the content class.
not sure why that clashes though...\
20 replies
KPCKevin Powell - Community
•Created by Å Marlon G on 2/16/2023 in #front-end
::before & ::after
Really not sure why 'close-quote' isn't being recognised, but
content: '\201D';
seems to work instead.
As to the height of the ::before - I think that the extra space is just the blank part of the " glyph. As you see in a sentence, it sits high above the baseline, so it's just that gap.
20 replies