ZooiblogCSS Comment Highlighting
- Turnip
- Rogier
- jamal
- screaming SiLENCE
Okay, since Mathias linked me on this, I’ll post up an article. What’s it about? Comment highlighting on the one you’ve selected. It works through the magics of anchors and some spiffy CSS3 (currently only supported by Firefox 1.0).
Markup
Hee hee! Don’t mess around with the markup! That’s why we have CSS…
Okay, style then
Yes, style. The code is fairly simple, and can be extended to any funny in some kind of sick way.
This is the situation: I’ve got an ordered list, called #commentlist. That contains list items, marked up with an id. Now, I know one thing of this id: it’s unique. Hooray. That’ll allow you to link to it, and that’s where the magic comes in.
Firefox 1.0 supports the new selector :target, and that’s cool. Really cool. (Blake Scarbrough has a good post on the new features. So does Andreas. Andreas inspired me to implement this, by the way.)
Now, for the comment, you should know what the class of the comment is, or at least what type of element you want to edit. I have a definition list for my comments, so I have dt, as it contains the author’s name. With some cool CSS, you can enter text, different styling or even just hide the comment, if you’re so queer. Lemme give you an example, as it is in use at this blog.
#commentlist li[id^="comment"]:target dt::after {
content: "This selected comment";
margin-left: 15px;
padding: 1px;
background: #B5D7F2;
border: 1px solid #9FCCEF;
-moz-border-radius: 2px;
text-transform: lowercase;
font-size: 12px;
}
I’ll split this up for ya. content is what I want as an indicator. It’s fairly simple. Remember to add ::after to your selector, as Firefox doesn’t support content on normal elements yet. Next. margin yadda yadda yadda. padding is important (a bit), as it increases the size of the visual indicator. Always handy. The text-transform is a bit pointless, as I could’ve entered the value of content in lowercase. *shrugs* That should be it.
Of course, it all depends on your blog system, or for whatever you want to use it, but key is that you know how to do it. And it’s even cooler to change the background of the comment, or the whole comment, or to add an image in a diplay: blocked ::after. Just some suggestions. To see it in action, check this out.
Anne told me ::after is better. So there you have it.
(And while you’re at it, sign up for a nicely recognizable Gravatar.)
