Roel NieskensI've had this image forever, and I refer to it all the time.
For some reason, even with all the CSSing I do, I continuously forget which parts are called what. Thank you, kind JPG, for reminding me!
Marius Gundersen - mdg 🌻@pixelambacht I'm always confused if there should be : or :: for some pseudo things, and I never learn since before and after support both, for legacy reasons. This image is very helpful!
Marijke Luttekes@gundersen @pixelambacht It's officially a double colon for pseudo-elements, but it's still accepted as a single colon for backward compatibility reasons.
I would use doubles in the new code, though.
@pixelambacht I can't recall how often I've seen this particular graph and similar ones, but it's definitely multiple times a year, and I've been doing CSS for like 15+ years now?
Good stuff, I might want to frame it someday.
Jonathan Dallas@pixelambacht this image should be updated to include custom idents now that those are starting to be used in a lot of new specs
@pixelambacht so I went and checked myself on this and turns out I was thinking of dashed-ident instead. This is sort of blowing my mind but it looks like custom-ident is the old version of this concept (e.g. values for animation-name, counter-name) and dashed-idents are the newer version of the same thing with the requirement of the double dashes upfront (e.g. custom properties, anchor-name, etc) https://developer.mozilla.org/en-US/docs/Web/CSS/dashed-ident TIL!
@doctype_jon Hmm, yeah, I guess that needs a spot on the cheat sheet! I don't have time to make one, but it'd be nice to include that, indeed.