Here’s a thing I did in CSS, thought other people might find it useful. I kept on opening iTunes store links when I didn’t want to and I was too brain-dead to see the URL before hitting it. Adding the following code to your user stylesheet will append “(iTunes store link)” to any url that begins with http://itunes.apple.com:
a[href^=' http://itunes.apple.com']:after
{
content: ' (iTunes store link)';
}
Which results in this:
The Good Shepherd (iTunes store link)
Won’t work in IE but all other browsers should be fine.
So what is it?
The above code is an example of a CSS3 attribute selector, specifically a “substring matching attribute selectors”, and will match an anchor element with an href attribute, the value of which must begin with ‘http://itunes.apple.com’.
It then uses the pseudo-element ‘:after’ to target the area after the anchor element, and finally uses the content property to insert a space, followed by some helpful text.
Other substring matching attribute selectors are available
You can also match a value that ends with a named value by using this:
a[href$='.apple.com']
which matches any href value that ends with ‘.apple.com’, and you can match a value whose value contains at least one instance of the named value:
a[class*='apple']
which matches any anchor with a class attribute that contains ‘apple’ somewhere within it.
Awesome little tip. It’ll be cool to see what people do with HTML5 & CSS3. Perhaps we’ll go to web 8.0?