outline is supported in MozillaIn recent nightlies Mozilla now supports the outline property. You can find some information about outline in the CSS3 Basic User Interface draft and in CSS2.1. Mozilla supports the following outline related properties:
outline
outline-width
outline-style
outline-color
outline-offset (not part of the outline shorthand property)
Note that although outline works similar to border it is a bit different. You can not paint each side separately, it does not take part in the box model and does not affect formatting. (At least, it should not.) Mozilla did support the outline properties before, but never without a prefix. Now most of the outline bugs are fixed the prefix is dropped.
Mozilla also supports some non-standard outline variants that do not make much sense to me. (I heard Safari supports similar properties?)
-moz-outline-radius
-moz-outline-radius-topleft
-moz-outline-radius-topright
-moz-outline-radius-bottomleft
-moz-outline-radius-bottomright
Oh, and yes, it was enabled right in time for Firefox 1.1!
Great news. outline is a tremendously useful property when debugging the box model of a layout. It is superior to border in that it avoids heisenbugs.
Oh, nice! I already occasionally used -moz-outline for some tests, but non-experimental support and without the prefix is nice to have!
~Grauw
Aren't the Mozilla-specific radius values for rounded corners?
The -radius property is a nice add-on to have, and is useful to simulate the Mac OS X style focussing ring.
I always had a problem with making a horizontal list that used percentage width for the list items. That part always worked fine, but when adding a border the numbers wouldn't add up and the last element would fall off. The fix was always to use something like width: 24.8%. But the outline problems seem to fix it altogether. a shame though that you can't define each side seperatly
A shame though that you can't define each side seperatly
Why? AFAIR, you'd use outline mostly for input elements, and you cannot specify "each side" of a radio button, for example. border should be sufficient in other cases. [...]
Why AFAIR, you'd use outline mostly for input elements, and you cannot specify "each side" of a radio button, for example. border should be sufficient in other cases. [...]
Well the point is that border (because it takes up space in the boxmodel) is not sufficient for everything. I made a tescase for something I've been trying to do with borders for a long time but couldn't be done in a clean way but can be done with the outline propety: testcase
That is possible by using box-sizing or waiting for calc() to become an actual value. outline is there to solve different problems. Note that outline is there for all kinds of shapes, not just rectangular ones.
Hm. I just downloaded the Firefox update today, and I'm still not getting outline support... and it's showing in Opera, so I assume I'm doing it correctly.
Tim, so you downloaded a very recent nightly trunk, version 1.0+ (not 1.0.1 or 1.0.2) and it did not work? I can not really believe that, actually.
Well, apparently Firefox has a confusing system regarding downloads, because it actually was 1.0.2 - but it appeared to be a reinstall of the whole browser. I'll have to go to FF's home page and see what's going on.
Okay, Anne, I'm definitely confused. I was just at Mozilla's download page, and the current version on offer is the one I've got - 1.0.2. Where is this "nightly trunk" you're talking about? (I'm not familiar with this trunk terminology, to be honest.)
Currently Firefox is being built from a branch of the main code. New features were generally added to the trunk to minimize debugging time for the 1.0 release. 1.0.1, 1.0.2, etc., are only security patches to the 1.0 release and as such don't contain any of the new features added to the trunk.
Firefox 1.1 will be based on a new branch that will be split from the current trunk on April 1st (currently). This will therefore contain all the core patches (such as outline support) that the 1.0.x releases don't have.
It will happen next week, most likely. Not tomorrow.
It will happen next week, most likely. Not tomorrow.
By my knowledge we get a month long freeze first on the trunk, Peter(6) sent me an article about the TB en FF 1.1 planning
And what do we read in that e-mail: That period of open development will come to an end on April 5.
Anne, you are right but the branching will occur after the month long freeze so defiantly not the 5th or the 1st (as Robin stated) but more likely somewhere in May (if I read the schedule correctly it will be the 16th of may).
Joël, I suggested the 1st April as the split date marked on the current roadmap diagram. That is pretty old now though.
Just downloaded latest trunk:
firefox-1.0+.en-US.win32.zip (31-Mar-2005)
Outline (not -outline) still doesn't work.
Sorry, it was my mistake. I forgot to close current version of Firefox before open the new one.
Outline property working fine. :)
I'll probably wait until the official release comes out. For those who have installed, does this version fully support the "invert" style for the color property? Opera's outline support doesn't seem to extend to that.
For those who have installed, does this version fully support the "invert" style for the color property? Opera's outline support doesn't seem to extend to that.
I'm not sure how it's supposed to work, but the getComputedStyle DOM CSS method returns 'invert', so maybe it's a bug in Opera?
Yes, I'd say it's probably a bug in Opera (hard to complain, since Opera has been about the only browser that's supported the property at all). On the other hand, I've seen so little information (I learned about outline from Eric Meyer's Cascading Style Sheets: The Definitive Guide), perhaps I was doing something wrong.
The idea with invert is that colours invert "through" the border so that it doesn't hide elements "below" - particularly useful, since outline is not in the flow.
