::before & ::after
Hi people!
Two questions:
1. Why isn't my
::after showing up (or to be precise, why is it sized 0 x 0)
2. Why is the height of the ::before so tall?
https://github.com/AMarlonG/Quote-by-the-artist-Beck13 Replies
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.
Ah! the close-quote works if you remove the
container-type: inline-size;
from the content class.
not sure why that clashes though...\
Wow! This is so interesting ...
So the close-quote is visible in Firefox, but FF doesn´t allow for container type and units. This is quite essential for this project, but at least the container stuff will work from 14th of mMarch with the release of FF 111...
So why does Chrome allow all the container stuff but that then somehow affects the
::after, unless you use that weird code you put in under content. What kind of code unit is that?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 🙂I'm gonna get back to this project after 14th of March, cause it will be very interesting to see how FF deals with this issue.
Thanx for the answers and solutions so far! 👏
Saw the YT suggestion, but I don't think it has anything to do with container queries here (if it is, it's a bug with them), but if I change the content away from close-quote, it works for me, even with the
container-type: inline-size
the only thing that isn't working is close-quote, and for me, it doesn't work regardless... which I'm not sure what's causing it.
I also tested in Safari, and it does show up there.
I'm struggling to figure out what's going wrong here tbh...
Oh wait, it is coming from the container-type: inline-size.
It's a bug, I'll file a bug reportWow, never thought it would be an actual bug... 🙂 I mean, it looked like one but I just figured I was missing something.
Cheers Kevin 🙂
Except now I can't recreate it in another situation 😅
Ah! The plot thickens!
can confirm, no issues in Safari or FF, only in Chrome, so 100% an edge-case bug there.
This has opened up a rabbit-hole for me 😂
In FF, an
open-quote followed by a \201D doesn't close the quote (so if you have another quote afterwards, it acts like a nested one with a single ', even though it shows the closed quote character, but in Chrome it does act as a close-quote 😂
If you're curious, you can follow the bug report here... I have a feeling it won't be a fast moving one though 😅 https://bugs.chromium.org/p/chromium/issues/detail?id=1417207... so I'v actually uncovered a bug. Jeez. That's a bit daunting. How do you figure out it is a bug? And how do your report them?
It will be interesting to see what happens when FF 111 is released ...
And ... is there any reason the
::before works, and not the ::after?
Sorry for the rabbit hole, but hey, it's a little bit fun as well I think! Kind of fun to be bug hunting! 😎If ever you find a bug, if you go to the link above, you'll see a new issue button to report one.
Best way to know it's a bug is recreate it with a simple example, so you know it's not something else causing it, and then testing it in other browsers. If it works in others, but not the 3rd one, then chances are it is
In this case I tested it in FF Nightly, which has container queries, and Safari, and it worked fine in both
In this case I tested it in FF Nightly, which has container queries, and Safari, and it worked fine in both
Sweet! Thank you! For some reason this really hyped my motivation to learn CSS even more.
Enjoy the weekend! 😃