MyDimension

Inspired by Tamara, I went searching for the origins of her micro icons to indicate external links. My search turned up micro icons at webgraphics. Along with the external links icon, I also grabbed the email icon.

My implementation is a bit different then Tamara’s though. I used a set of CSS3 selectors to select links that are external.

a[href^="mailto:"] {
background: transparent url('/images/aemail.gif') 100% 50% no-repeat;
padding-right: 10px;
}
div.content a[href^="http:"] {
background: transparent url('/images/aoutside.gif') 100% 50% no-repeat;
padding-right: 10px;
}
div.content a[href^="http://my-dimension.com"],
div.content a[href^="http://www.my-dimension.com"] {
background: inherit;
padding-right: 0px;
}

That last selector disables the icon on links to this site but that use a ful URL instead of a relative one. This won’t work in most browsers (not sure which though) but then again this is my persoanl playground. Not to mention it is a feature which is not required to interact with this site.

Update[04/18/2003]: It seems a lot of feedback is being generated by this attribute selector method. Something I need to clarify though, I did not create this method. I found it on as days pass by. I apolgize for not crediting this earlier.

There is an interesting conversation brewing over on dive into mark about object and Internet Explorer. Mark’s problem comes from IE’s poor support for the object tag. object was added to the HTML 4.0 specification to provide a method of including a wide array of media types into a web document. Unfortunately, Microsoft has been sluggish to provide proper support for this tag.

But the saga doesn’t end there. Other browsers support this tag in different ways. One person noted this issue in Opera:

Opera appears to handle all objects like plugins, even those that are handled internally (and thus cannot be disabled by disabling plugins!).

And, according to an anonymous comment, Mozilla appears to not completely render the object beyond displaying the image:

I’m wondering why I can select the IMG one, but not the OBJECT one (in Mozilla 1.3). If I paste it in Word for example, the Img is pasted as image, the Object is pasted as HTML code. So it’s not quite all right in Mozilla neither I think.

I for one would love to see browsers come out with reliable support for this highly versatile tag. Robin Lionheart has an object test page which also shows some very interesting ways of using the object tag, such as providing layered, alternate content in the case of a lack of support for the primary content. In doing so you can provide varying levels of content and the browser “chooses” which one it can handle.

But alas, developers are hampered by poor browser support and as such are kept from providing, to their readers, a highly usable interface.

Eric Meyer has re-released his CSS Support Charts over on DevEdge. He has also taken steps to ensure this information is forever avialable to the web development world by licensing his work under a Creative Commons license. When I get the chance I am going to pour over these charts to see what I can see.

Thanks Eric 🙂 !