Anne van Kesteren

outline is supported in Mozilla

In 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:

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?)

Oh, and yes, it was enabled right in time for Firefox 1.1!

Comments

  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.

    Posted by Leons Petrazickis at

  2. Oh, nice! I already occasionally used -moz-outline for some tests, but non-experimental support and without the prefix is nice to have!

    ~Grauw

    Posted by Laurens Holst at

  3. Aren't the Mozilla-specific radius values for rounded corners?

    Posted by Justin Perkins at

  4. The -radius property is a nice add-on to have, and is useful to simulate the Mac OS X style focussing ring.

    Posted by Philippe at

  5. 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

    Posted by Joël Kuiper at

  6. 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. [...]

    Posted by Jens Meiert at

  7. 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

    Posted by Joël Kuiper at

  8. 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.

    Posted by Anne at

  9. 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.

    Posted by Tim G at

  10. 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.

    Posted by Anne at

  11. 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.

    Posted by Tim G at

  12. 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.)

    Posted by Tim G at

  13. latest-trunk

    Posted by Zoran at

  14. 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.

    Posted by Robin at

  15. It will happen next week, most likely. Not tomorrow.

    Posted by Anne at

  16. 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

    Posted by Joël Kuiper at

  17. And what do we read in that e-mail: That period of open development will come to an end on April 5.

    Posted by Anne at

  18. 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).

    Posted by Joël Kuiper at

  19. Joël, I suggested the 1st April as the split date marked on the current roadmap diagram. That is pretty old now though.

    Posted by Robin at

  20. Just downloaded latest trunk:
    firefox-1.0+.en-US.win32.zip (31-Mar-2005)

    Outline (not -outline) still doesn't work.

    Posted by FataL at

  21. Sorry, it was my mistake. I forgot to close current version of Firefox before open the new one.

    Outline property working fine. :)

    Posted by FataL at

  22. 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.

    Posted by Tim G at

  23. 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?

    Posted by J. King at

  24. 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.

    Posted by Tim G at