It is necessarily better for sites code to be semantic and accessible to all browsers in all platforms, however it is asinine to withhold any added functionality or design that can gracefully degrade. CSS can add backwards compatible, gracefully degrading, and future proof improved user experience and navigation. Utilization of attribute selectors and pseudo-classes can add functionality and aesthetic user experience to a website.
Attribute selectors
Attribute selectors allow CSS to further traverse the document tree using HTML tag attributes to increase specificity. Support by modern browsers and CSS 2/3 allow you to specify context based portions of document: meaning, the later gives you the ability to dole out CSS in a quasi dynamic context based fashion using attribute logical conditions. The three following examples are possible the most powerful and the most useful.
Logical attribute “Begins With”
[Attr^=”value”]{
property:value;
}
This snippet will make all anchor tags within a page that have an ‘href’ attribute beginning with “http://” the color red.
a[href^=”http://”]{
color:#ff0000;
}
With this attribute you can create visual cues to alert users to secure pages, FTP sites, or sub-domains.
Logical attribute “Ends With”
[Attr$=”value”]{
property:value;
}
This snippet will give all anchor tags within a page that have an ‘href’ attribute ending with “.PDF” the background color of green.
a[ href$=”.pdf”]{
background-color:green;
}
This is extremely useful to demarcate .PDFs, .DOCs, image files, organization links, or country sites. A simple feature such as this can save users the grief of trying to open a PDF document from within the browser.
Logical attribute “Contains”
[Attr*=”value”]{
property:value;
}
This snippet will make all image tags within a page that have an ‘title’ attribute containing the word “home” a blue border.
img[title*=”home”]{
border:1px solid blue;
}
Pseudo Classes
Pseudo classes are traditionally used to further style the nature and history of anchor tags. With CSS2/3 style design can add interesting levels of usefulness and application. Pseudo-classes like ‘:hover’ and ‘:focus’ are common to use. There are in CSS3 and in modern browsers are a list of supported pseudo-classes that have yet to be utilized for user experience and design.
:target
Will select the incoming target of any URI (page link)
This example will highlight the span, ‘light,’ when the link is clicked.
<style>
#light:target{
background:#ff0000;
}
</style>
<p>Lorem <a href=”#highlight”>ipsum</a> dolor set amet <span id=”light”>sit</span> concesutor. </p>
:focus
‘:focus’ is similar to the ‘:hover’ class of an anchor tag. The style is active when an element content box becomes the recipient of keystroke events and ends when it no longer accepts them.
input:focus{
color:#333333;
}
This example will alter the color of all input fields when they receive the cursor for typing.
:only-child
<style>
span:only-child{
background:#66ff00;
}
</style>
<p>Lorem ipsum dolor set amet <span>sit</span> concesutor. </p>
<p>Concesutor <span>sit</span> set amet <span>ipsum</span> dolor concesutor. </p>
This pseudo-class will select the only(single) decedent of a node in the document: e.g. the only anchor tag in a paragraph or the only h3 tag in a body tag.
:not ()
This pseudo-class represents a logical ‘not.’ Can be very powerful when used creatively.
:not(p){
color:#666666;
}
This bit of code will make all text that is not within a paragraph tag dark grey.
The Point
These samples are in no way stretching the functionality of the snippets you see here above. The useful engineering of the code comes in creative combinations of the multiple tags here.
a[href]:not([href^=”http://www.yoursite.com”]){
background: url(/images/external.gif) no-repeat right center;
padding-right:-8px;
}
a[src^=”#”]{
border:1px solid black;
}
span:only-child{
background-color:#333333;
}
input:not(:focus){
color:#999999;
background-color:#CCCCCC;
}
This snippet of code will attach an iconic image representing an external link to all anchor tags with href attributes that are do not begin with the url of your site. The logic being that all external links in your website will have an icon next to them alerting users of navigation away from your site. The snippet will also outline in black any in-page links or URIs. It will apply a grey background to any orphaned span tags. And the snippet will gey out the text and the back ground of any input field that does not have the cursor focus.
There is no reason not to use advanced CSS 2 and 3 code to compliment the functionality and aesthetics of the web. Active use of this code will encourage support of these technique in browsers. It should be used regularly and documented as often as possible. Take care to use this CSS code were applicable and to not hinge major functionality on this code, but use it to extend functionality were possible.
Creative use of CSS supported by IE7 and the “modern browsers” can extend usability and experience to people who have adopted newer more advanced browsers and technologies. It is more proper to create a site for the most advanced browser and the most advanced monitor, then through proper markup allow for clean degrading code and visual design. Everyone wins.
