September 23, 2003 | View Comments (21) | Category: CSS Focus
Summary: Explains the use of :focus and :not in CSS
We are all familiar with the pseudo classes :link, :active, :visited, and :hover that can effect the properties of links on our page. But while going through some geek reading of the W3C CSS-3 recommendations I found a pseudo class called :focus. From the W3C site:
The :focus pseudo-class applies while an element has the focus (accepts keyboard or mouse events, or other forms of input).
So :focus would not be helpful when used with links, but it can be very useful on form inputs. When clicking on a textbox you can change the property of that textbox. For example, click on the textbox and the background color should change to a light gray.
This can be very useful for all forms because it gives the user an idea of where they are on the form. If they decide to leave they can easily come back and continue filling out the form. If your users like to TAB through their forms they no longer have to guess where the next TAB is going to take them, they will see it right before their eyes without searching for the cursor. The CSS used to implement this:
input:focus, textarea:focus { background-color: #eee; }
First I got this idea from reading Andy Budd's entry on CSS attribute selectors and also Jason's beautiful blog where he places external images to links that go outside of his site. I wanted to have images on my links to tell readers which links go outside of my site because I have lot of links that reference both external and internal material and it could be helpful to differentiate between the two. Jason uses classes in his links to depict which ones are external. Being the lazy person I am I knew there would be more than a couple of times that I would forget to use the class within the link. I then saw Andy's blog and read a comment (first one) showing how you can add images to links that are pdf's (another useful feature). I could easily do this with links on my site. The problem occurs when I want to differentiate between external and internal. I could easily show the internal links through:
a[href*="9rules"] {
padding-right: 12px;
background: transparent url("images/aoutside.gif") center right no-repeat;
white-space: nowrap;
}
This places the image on all links that contain "9rules" in their href. That is obviously what I did not want to do. I needed a "not equals" function in CSS. Well there is one, it just took me a while to find it. Here is the code.
a:not[href*="9rules"] {
padding-right: 12px;
background: transparent url("images/aoutside.gif") center right no-repeat;
white-space: nowrap;
}
An alternative that does not place any space between the image and link:
a:not([href*="wolverine"])::after {
content: url("images/aoutside.gif");
}
Now I am getting the desired effect. Users who read my link heavy entries will know just by looking at the link whether it is external or internal. The possibilites of this are endless. You can have different colors, sizes, decorations or anything else you could think of all at the power of one stylesheet.
I have only seen these in action on Firebird 0.61 so please provide feedback for other browsers. Thanks.
Trackback URL: http://9rules.com/cgi-bin/mt/mt-tb.cgi/8
Well the good thing about that is it doesn't take away from the design for users who use browsers that do not support this feature.
Scrivs (http://www.9rules.com/whitespace/)
Ha, I didn't even think about it, but it will show on the comment footers also so everyone will know that I am the creator of the site (because I have know image next to my name) and others who are not associated (everyone else) with this site will have the image.
Scrivs (http://www.9rules.com/whitespace/)
Now that's pretty cool.
Okay, so here's an idea: Use the voice-family hack to only apply the code of the external link class for IE and then use attribute selectors for Gecko browsers.
May be considered redundant CSS for the same effect, but does provide that extra something for those that properly support selectors.
Jason (http://izzywizzy.org)
Sounds like a great idea Jason, but you lost me. Because everytime I try to picture it all I see is redundance. Maybe I am picturing it all wrong. I will play with the code some and see what I can do...or maybe one of you guys will :)
Scrivs (http://www.9rules.com/whitespace/)
Nevermind, I see where you are getting at. Have to play with some code.
Scrivs (http://www.9rules.com/whitespace/)
Really smart idea. I like it a lot.
Unfortunately Safari doesn't seem to like a:not so i can't see it working on my browser of choice. :-(
However I was wondering if you actually need to use a:not. Could you not simply apply the off link style to all your links, but then remove that style on any links that point internally?
Maybe something like this (completely untested btw)
a[href] {
padding-right: 12px;
background: transparent url("images/aoutside.gif") center right no-repeat;
white-space: nowrap;
}
a[href*="9rules"] {
padding-right: 0px;
background: transparent url(none);
}
No where near as elegant, but will probably work or more browsers.
Andy Budd (http://www.andybudd.com/blog/)
That's weird,
Seems to be working on Safari now.
p.s. really like the new site!
Andy Budd (http://www.andybudd.com/blog/)
Thanks Andy. When I get home I will have to try that. Of course I was looking for a more elegant solution and found it, but stupid IE doesn't want to support it. Anyways, I will play with the code some more when I get home. At least it is a good start for everyone I believe.
Scrivs (http://www.9rules.com/whitespace/)
Well Andy I did your method and it seems to be working on my side. Let me know how it is in Safari.
Scrivs (http://www.9rules.com/whitespace/)
Hmm. Doesn't work in opera. BTW, the blog is still tiny in opera.
And why won't :focus and :not work in Lynx?????
JC (http://www.thelionsweb.com/weblog)
Just checked it in IE 6 and it ignores the second rule and adds the image to every link so it's back to the drawing board. Just seems that those users are out of luck.
Scrivs (http://www.9rules.com/whitespace/)
If the blog is still tiny in Opera that is Opera's fault. The default font-size should be 16px and I am using 75% for that as the default. So the fonts should be 12px unless specified differently somewhere else in the stylesheet.
In regards to Lynx, I can't really tell ya :)
Scrivs (http://www.9rules.com/whitespace/)
I'm still fairly sure that the problem in opera is the use of percentages without having an overall container percentage. Try setting body height and body width to 100% and see if anything changes...
It's not just the font size, it's the entire blog. Grab a copy of Opera and take a look. Everything's about half the size it is in IE or Moz.
The font size is an opera bug though... font sizes set in percentages are 1px smaller than they should otherwise be.
JC (http://thelionsweb.com/weblog)
I've been using :focus for filling up forms for quite a while and I've always really liked it a lot that I was disappointed (though not surprised) that it doesn't work on IE. :hover for submission buttons is also something that's very nice to have and I put it in for the benefit of Mozilla users, even if the majority of users (on IE) won't see the effect.
Very nice on that external links thing. I'll be sure to implement that sometime. I've been looking for something like that that doesn't require me to use a class (or rather 2 classes).
Cheah Chu Yeow (http://blog.codefront.net/)
hmm... now if that outgoing link thing worked in IE...and could be used to throw a javascript alert, too... (standard corporate disclaimer nonsense)... that'd make my life much easier.
JC (http://thelionsweb.com)
JC: I have been meaning to signup for browsercam so I can have better idea for all my sites in different browsers. Since my main browser is Firebird sometimes I get caught up in thinking that everyone uses Firebird. Why can't the world be so perfect?
Cheah: Actually I think it was your site that I saw it in first and just thought it was cool and did not give it a second thought.
Scrivs (http://www.9rules.com/whitespace/)
You should just download all the browsers. They're all free, and it's more reliable than some simulation.
I was going to say "It looks fine in the new opera 7.2" but I see you fixed it already.
JC
>> Cheah: Actually I think it was your site that I saw it in first and just thought it was cool and did not give it a second thought.
Oh I didn't know that. I got it off somewhere too and didn't give it a 2nd thought either.
Btw, call me Chu Yeow :)
Cheah Chu Yeow (http://blog.codefront.net/)
Those are very cool properties. I'm a Firebird user through and through, so it's all good. The backwards compatibility is the biggest bonus, though.
Mark (http://shinyplasticbag.com)
Keep track of comments to all entries with the Comments Feed
©2003-06 9rules, Inc. | Thoughts Feed | Notes Feed
Amazon Stores: Powertools | Jewelry | Books | Health | Landscaping | Kitchen | Movies
#1
Tried viewing this using IE6 and not surprisingly, neither the :focus nor :not pseudo classes are supported.
I only use Firebird, so it looks great to me. I'm fairly sure that right now, this is only supported in Gecko browsers period.
Jason (http://izzywizzy.org)