I’m a typophile. I also like standard semantics. Take for example this: “links should be recognisable as links”. I don’t like kicking dead horses, but Jeff made me.
A bit of history for ya, kids
Many of you should know by now that the underline is one of the last, most-used typewriter remnants. In lieu of putting a special italic letterset on the apparatus, you would just make clear that a part is italicised by putting a line under it. Because that also didn’t work out best, they figured: “why not put the beginning and end of the line on both sides?” That’s where we got the _underline_ by underscores from. Correct me if I’m wrong, though. This is what I was told :)
Dude, sod history. I live now!
Alright alright. The underline became an identifier for a ‘hyperlink’, and the perceived semantics of “it’s italic when underlined” got killed.
Then, Jeff showed up with his silly suggestion. Why not make links italic? Well, some simple reasons:
- Screen italics can be totally illegible. We don’t want that.
- How about italics with semantic meaning? Like emphasis?
- The underlining of links has no connection to the underline due to lack of italics anymore.
There. Dead horse should be one nasty corpse by now.
The fixed positioning of backgrounds is a nice technique and it adds some perspective to the page. But play around a bit, and the results are pretty amazing.
How does that work then?
First of all, keep in mind that IE does not get position: fixed. And that’s the real trick in this. But it won’t work as it should as I use PNG (yes, <abbr> as I pronounce it as pee-en-gee
). There are numerous workarounds though.
When you use backgrounds on elements, you can give them a certain position, just as with any other element. You can position it fixed as well, which is pretty neat. The background stays where it is on the viewport, and that’s an important element. This allows you to do some crazy shit.
Now, this one is not so much of teaching you stuff, but I think this does show what is possible when you use the elements HTML and BODY for independent backgrounds. I shall try and post up some examples soon of what else you can do with these techniques.
Now, here it is: it does not work in IE. Devnull’s method seems to work, and there’s also a PNG hack. If you like, you can have it work in IE. Whatever :) Also, don’t start at me about its looks: it’s just a proof of concept, nothing more.
Do tell me if things break, and make sure to check it on IE for laughs.
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.)
Zooiblog