Connecting Arterys

Nuts and Bolts

I learn something new and exciting every day! I’ve used this attribute before, but I never realised how effective and important it can be the workings of a URL-laden website.


Any attribute selector that uses the operator ^= selects elements based on the beginning of their attribute values. Thus we can select any href that starts with a slash and insert enough text to fill out the value.

#content a[href^="/"]:after {
 content: " (http://www.alistapart.com" attr(href) ") ";
}

This rule transforms a value like /issues/144/ into http://www.alistapart.com/issues/144/. It won’t help with relative URLs that don’t start with slashes, but fortunately ALA doesn’t use those kinds of URLs.

!IMPORTANT: As mentioned, ^= is a CSS3 selector. The W3C CSS validator can only test for compliance with CSS1 and CSS2. Unable to understand the CSS3 selector, the W3C validator will report it as an error, even though it is perfectly valid per the CSS3 Selectors Candidate Recommendation.


Extract from Going to Print

Advertisements