What's new for Web Developers in Firefox 7

Today we’re releasing Firefox Update 7. This update contains work that’s been stabilizing over the last 3 months and there are quite a few interesting things to talk about.

To be clear, this is not the canonical list of changes, just highlights. As always, we’ve created a page to track the changes that web developers will care about. For the full list please see the Firefox 7 for developers page.

Firefox now supports text-overflow: ellipsis

Firefox now supports the <a href="https://developer.mozilla.org/En/CSS/text-overflow">ellipsis</a> mode for the text-overflow property. This property is supported in other browsers which means developers should be able to start using it in the wild. Here’s an example of how text-overflow ellipsis works:

HTML:



      
I am some very long text!

CSS:

div.inner {
    width: 120px;
    text-overflow: ellipsis;
    white-space:nowrap;
    overflow:hidden;

    color: red;
    border: 1px dashed #333;
    margin: 20px;
    padding: 10px;
}

Result:

As you can see, it’s pretty easy to make text that cuts off in a sane way with this new property. Our developer page for the property also contains sample syntax for other browsers.

WebSockets: Updated protocol and available on mobile

First, WebSockets is now enabled by default for Firefox for Mobile. For mobile networks that are high-latency and have high connection setup-up costs, WebSockets offers an opportunity to create a much better experience than is available with polling HTTP.

Second, we’ve updated to the most recent draft version of the WebSockets protocol from the IETF. Somewhat confusingly, this is version 8 of the protocol, but is draft version 10. This will be mostly of interest to people who are building applications on top of WebSockets and tool vendors, but is worth calling out since it affects backwards compatibility.

Since the WebSockets work is ongoing, the namespace for WebSockets remains moz-prefixed to indicate that it’s not yet finalized.

An even faster Canvas element

The canvas element in Firefox 7 is even faster. We’ve revised our code for Canvas based on what we learned in previous Firefox releases and how people are using Canvas in the wild. Based on that you are likely to see much snappier performance on many demos when drawing to canvas elements. For an example, see our Runfield demo.

Web sites can no longer resize your main browser window

It’s no longer possible for a web site to change the default size of a window in a browser, according to the following rules:

  1. You can’t resize a window or tab that wasn’t created by window.open.
  2. You can’t resize a window or tab when it’s in a window with more than one tab.

Support for the new Navigation Web Timing Spec

Firefox Update 7 now supports the Navigation Timing spec. This allows a web page author to monitor parts of web page performance in the page itself. For people who are interested in page load and navigation performance, they can send that back to the server which can give them a better view into real-world performance.

There are a couple of other specs in this space – the User Timing and Resource Timing – but those are still under discussion in working groups and as such we have not yet implemented them.

About Christopher Blizzard

Making the web better, one release at a time.

More articles by Christopher Blizzard…


23 comments

  1. Der Caspers

    Still doesn’t do text-overflow: ellipsis; in table cells though …

    September 27th, 2011 at 09:17

  2. Olivier clémene

    I’will try this one. I hope it’s better tha chrome.

    September 27th, 2011 at 11:12

  3. melchior blausand

    You are definitely still doing the hot shit, guys! No matter what versioning arguments are ongoing. I was really looking forward to canvas performance improvements.
    Couldn’t you maybe sent one or two guys over to lighning team during lunch time? They fail so hard to rock…

    blausand

    September 27th, 2011 at 11:23

  4. mohammad

    O, come on! Only one new CSS property? When are you going to support CSS 3D transform properties? It is not that difficult. (BTW, it’s the only reason I have to switch to webkit, sometimes)

    September 27th, 2011 at 11:25

    1. Boris

      > When are you going to support CSS 3D transform properties?

      Firefox 9, I believe.

      > It is not that difficult.

      Hard to say. WebKit doesn’t always support them. When it does, what it implements doesn’t match the spec they themselves wrote.

      In general, saying “it is not that difficult” if you haven’t written the code to do it is a bad idea….

      September 28th, 2011 at 12:34

    2. Paul Rouget

      > When are you going to support CSS 3D transform properties?
      Firefox 10.

      > It is not that difficult.

      Ouch…

      September 30th, 2011 at 01:39

  5. Francis

    I see Firefox is still the only major browser not to support CSS run-in. Even IE has had this since version 8 (http://www.quirksmode.org/css/display.html).

    September 27th, 2011 at 11:27

    1. Boris

      The other browsers all do wildly different things with run-in, none of which match anything resembling the spec. We’re not willing to play that game, so would want to actually implement the spec.

      Unfortunately, the spec for run-in doesn’t make sense either. So we’re waiting on the CSS working group to fix that before implementing.

      September 28th, 2011 at 12:32

  6. Div Diverson

    > table cells

    Those are still used?!

    Seriously, though, it seems to me that if you’re using CSS3, it’s highly likely that you’re not using tables.

    September 27th, 2011 at 13:19

    1. Der Caspers

      > Seriously, though, it seems to me that if you’re using CSS3,
      > it’s highly likely that you’re not using tables.

      Unless, of course, you need to mark up tabular data, right?

      September 28th, 2011 at 22:54

  7. Boris

    Sure seems to work for me:

    data:text/html,aaa fgdf gdfg dfgdfgg

    What testcase do you see it not working on?

    September 27th, 2011 at 14:16

    1. Boris

      Er, silly blog eating the markup…. Try this:

      data:text/html,<table style=”table-layout: fixed; width: 100px;” border><tr>&lttd nowrap style=”overflow: hidden; text-overflow: ellipsis”>aaa fgdf gdfg dfgdfgg

      September 27th, 2011 at 14:17

  8. Boris

    Er, silly blog eating the markup…. Try this:

    data:text/html,<table style=”table-layout: fixed; width: 100px;” border><tr><td nowrap style=”overflow: hidden; text-overflow: ellipsis”>aaa fgdf gdfg dfgdfgg

    September 27th, 2011 at 14:17

  9. Skoua

    Web sites can no longer resize your main browser window

    o/

    That’ll make porn websites creators sad but this was really needed.

    September 27th, 2011 at 15:04

  10. maciej

    suprisingly, I cannot modify window size that was opened by window.open

    as it seems only the opener window can modify it.

    If you have a script to modify the window size in the window that was opened by window.open – it is blocked.

    stupid !

    September 28th, 2011 at 13:10

    1. Demian

      Same thing happening to me.
      Firefox 7 doesn’t care if I open a new window via a script (in particular, I’m using this one on a new window created with a window.open), it won’l let the new window maximize itself.

      What’s the deal?

      I’m trying to maximize a new window for a corporate site, and the only browser giving me headaches is FF7. :(

      October 5th, 2011 at 05:22

      1. Demian

        I missed the script URL: http://www.codingforums.com/showpost.php?p=761672&postcount=1

        October 5th, 2011 at 05:24

      2. Boris

        Do you have Firebug installed? Firebug lies to Firefox about its panels being tabs, and that screws up resizing… If you do have it installed, try disabling it.

        October 6th, 2011 at 19:18

  11. Francis

    re: css run-in. Why not introduce it with vendor prefixes if you’re unhappy with things as they are at the moment. That way developers can take advantage of it in the same way that we’re all using vendor prefixes for gradients, drop shadows, and so on.

    September 28th, 2011 at 16:44

    1. Boris

      Because implementing it in any sane way is a huge amount work, and it would have to be redone once the spec settles down. Unlike gradients, drop shadows, etc, no one really knows how it _should_ work and the various proposals have not much in common.

      If we had infinite resources, we might consider it, but we don’t, and other things are way more bang for the buck than run-in.

      September 28th, 2011 at 18:31

  12. Johan

    Any chance this bug:
    https://bugzilla.mozilla.org/show_bug.cgi?id=116083 will get fixed before its 10th birthday? It’s really annoying.

    October 1st, 2011 at 08:14

    1. Boris

      Unlikely; that whole area of code is not really owned at the moment. Need more people. :(

      October 1st, 2011 at 20:28

  13. Jordi

    We have noted that new windows that don’t specify the size, get the smallest size that firefox can give. It’s noising me to have to manually resize windows. It happens since we upgraded to firefox7. May be this 2 rules about resize?

    October 19th, 2011 at 00:09

Comments are closed for this article.