CSS3 outline property

Posted by Quinn at January 21st, 2006 5:58pm under web 1 Comment Permalink

UPDATED: outline property is there since CSS2. I was wrong..

I found out that there is CSS3 property "outline" that recent Mozilla supports. I think the recent change on how outline of an active element is drawn in Mozilla browsers are in favor of this statement.

CSS3 Working Draft 18.4 Dynamic outlines:

The outline is drawn starting just outside the border edge.

However, it also says:

CSS3 Working Draft 18.4 Dynamic outlines:

The outline created with the outline properties is drawn "over" a box, i.e., the outline is always on top, and doesn't influence the position or size of the box, or of any other boxes. Therefore, displaying or suppressing outlines does not cause reflow.

These two rules should go together, but the later is not well behaved in Firefox1.5. It seems to work fine as long as the element is not inside of a box with overflaw:auto or these two elements are not the same size. So, in many cases, experimenting using this property may give you some fun. There are basically three properties to style the outline.

outline-width
keywords: thin, medium, thick
size: px and ?
example: :focus { outline-width: 2px; }
outline-style
keywords: none, dotted, dashed, solid, double, and more..
example: :focus { outline-style: dotted; }
outline-color
color: #fff, and more..
example: :focus { outline-color: #fff; }

There is also a shorthand property: outline. Cool!

outline
example: :focus { outline: 2px dotted #fff; }

I added new style on the cicada on top of this page. So, you will see the outline when you click it if you are using Firefox1.5 or other Mozilla browsers.

I also found out the way to get away with the problem I wrote last year on this post using another CSS property outline-offset with negative value. 

:focus {
	outline:1px dotted #000;
	outline-offset: -1px;
}

Please, check out these examples if you are using Firefox1.5. You will find the annoying problem we were facing is gone happily. Or was this just me?

Anyways, outline-offset is not in the W3C Draft, though I am glad that Mozilla supports this. I hope it stays this way.

In conclusion, I hope you now have a little more fun than yesterday. Moreover, we probably should specify the outline on every element if we want to have total control. Or probably, you could do this: 

*:focus {
	outline:none;
}

Some related documents on this subject are:

Quinn said (January 28th, 2006 7:58pm)

Ok, I now know it was there since CSS2. My apologies to those who are confused.
Your Response?

« Shiira Web Browser Latest Softwares »