Mozilla

Articles by Jean-Yves Perrier

Sort by:

View:

  1. Firefox goes 2-digit, time to check your UA sniffing scripts

    We all know it: UA-based browser detection is bad, the right way is feature-detection. Regardless, legacy code relies upon UA sniffing and may need to be updated for Firefox 10’s release.

    Even if it looks simple, UA parsing has proven to be a headache for numerous script authors. Though the structure of an UA is defined in the HTTP specification, the way relevant information is conveyed varies from one vendor to another. Also, the information you want to extract from it is not always the same: sometimes you want to know the browser (Firefox, SeaMonkey, Safari, Chrome, IE, Opera…), but most of the time you want to know the engine that powers them (Gecko, Webkit, Trident,…). You also need to get the version of the browser or the engine.

    Old scripts often made some undue assumptions. Some are assuming that browser version numbers will never reach 10… This is not the case: Opera and Chrome have already crossed this landmark long ago, Firefox will reach it next week and IE soon after.

    A few examples of Firefox UAs that your scripts should allow:

    • Regular Firefox version: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:10.0) Gecko/20100101 Firefox/10.0
    • Nightly and Aurora Firefox versions: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:12.0a1) Gecko/20120122 Firefox/12.0a1
    • Chemspill Firefox version (three numbers) Mozilla/5.0 (Windows NT 6.2; rv:10.0.1) Gecko/20100101 Firefox/10.0.1

    So, it is the last moment to check your UA-based browser detection code before your site goes havoc!

    Last chance to check

    Do it right now, in two weeks it would be too late.

    What to do?

    1. Code inspection: check your code to see if there is some UA-based browser detection code. If so, check if it handles multi-digit versions. (At the same time you could check if it is useful at all. Some old UA-detection code has not worked in ages, or try to go around problems fixed since years in browser…)
    2. Library inspection: lots of libraries perform UA-based browser detection. If you are using any of them, check if it still is working with a version of Firefox with 2 digits. If not, notify the author of the lib and open a bug on bugzilla so that we can help others as all their customers are likely to suffer from the same problem.
    3. Check if your site is working with the next Firefox version: download the Beta release of Firefox 10 (you can run several versions of Firefox simultaneously) It is always a good idea to use the beta, or even the aurora, version of Firefox if you are maintaining a site: you’ll discover incompatibilities earlier and will get time to fix them before your users start complaining. We are doing our best to prevent problems, but sometimes old code rely on incorrect behavior and stop working even when we are only fixing bugs.
    4. Test other sites :-). Use the beta or aurora version of Firefox and surf the web. When you hit a UA-related problem report it with bugzilla. Give us as much info as possible like the importance of the site in your country and if you have conducted any action yourself. That way our evangelism team will be able to prioritize work adequately.

    Finally, you should plan to get rid of these UA-based browser detection mechanism. If you can’t — and I know it isn’t always possible — I would be glad to know why: so please let us know in the comments below.

    Now it is time to check your sites :-)

    Thank you very much for your help.

  2. Aurora 16 is out — Unprefixing time !

    Web developers, it is time to celebrate! In the upcoming Firefox 16, which reached the Aurora status today, a major enhancement is the unprefixing of several stable CSS features. Other notable features of interest to Web developers include several more HTML5-related APIs, better accessibility on Mac OS, and improvements to Firefox Developer Tools.

     

    So which CSS features are unprefixed?

    Specification Properties, functional notations, and at-rules More information
    CSS3 Animations animation, animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-play-state, animation-fill-mode, @keyframes Using CSS Animations
    CSS3 Transitions transition, transition-property, transition-delay, transition-duration, transition-timing-function Using CSS Transitions
    CSS3 Transforms transform, transform-origin, transform-style, backface-visibility, perspective, perspective-origin Using CSS Transforms
    CSS3 Image Values linear-gradient(), radial-gradient(), repeating-linear-gradient(), repeating-linear-gradient() Using CSS Gradients
    CSS3 Values & Units calc()

    Pay attention to the gradient syntax

    While the syntax of CSS animations, transitions and transforms has not changed lately, that is not the case of the CSS gradients syntax, which is significantly different than in most prefixed implementations.

    The definitive syntax for linear gradients is :

    <linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+ )
    <side-or-corner> = [left | right] || [top | bottom]

    If we break it down, its structure is :

    linear-gradient( direction , color-stop )

    As the color-stop syntax hasn’t evolved lately, the direction parameter is where most of the latest changes happened.

    The direction parameter can be defined either using a CSS <angle>, or using the to keyword followed by one or two keywords describing the side or the corner.

    That’s the major change! This to keyword wasn’t there before and it reverses the direction that was use previously: -prefix-linear-gradient( top left ) becomes linear-gradient( to bottom right ).

    Also the <angle> changed: before, 0deg pointed to the right; now it points, consistently with other angles in the CSS spec, to the top. Like this:

    0deg points to the top, 90deg to the right, 180deg to the bottom, and 270deg to the left

    So here again, you need to change -prefix-linear-gradient(0deg) to linear-gradient(90deg). Failure to adapt the angle will lead to the gradient to be oriented differently, like this:

    An horizontal gradient, blue at the far left, white at the far right.A vertical gradient, blue at the top, white at the bottom

    Similar changes have been made to the radial gradient syntax, with a newly introduced at keyword.

    More HTML5 & friends goodies

    Unprefixing mature CSS features is not the only improvement in the area of supporting standards:

    • IndexedDB has reached Candidate Recommendation status and has been unprefixed too. This is amazing.
    • Support for the HTML5 Microdata API landed.
    • Support for the HTML5 <meter> element landed.
    • We unprefixed the Battery API.
    • We unprefixed the Vibration API.
    • We improved our media queries support by adding support for the dppx unit.
    • The CSS properties height and width are now animatable.
    • The CSS animations can be “reversed“:  the reverse and alternate-reverse keywords have been added.
    • Our implementation of JavaScript improved with several new features in Harmony (the maybe future EcmaScript 6):
      • Support for direct proxies
      • Support for the Array‘s spread operator
      • Improvement of Number, supporting now toInteger(), isInteger() and isFinite()
    • Improvement of Keyboard (still prefixed as mozKeyboard), now supporting setSelectedOption(), setValue() and onfocuschange().

    Accessiblity

    A giant step has been done in making Firefox more accessible. Support for VoiceOver on Mac OS has landed. It was the last platform where our accessibility features where severely behind. This is very exciting for all people needing such features on the Mac. More information.

    Developers Tools

    Last but not least, we continued to improved our developer tools!

    Now you can toggle a developer toolbar: go to Tools > Web Developer > Developer Toolbar, or press Shift-F2. The toolbar itself looks like this:

    The toolbar has a command line interface and also nice buttons to the right to quickly reach useful tools. The command line interface is easy to expand and more commands are expected in the future. Typing help in it displays the supported commands.

    The Web Console also has been improved and displays now a nifty error count.

    Finally our Scratchpad gained a list of recently opened files. Always convenient.

    Other notable changes

    See more details in the release notes and in Firefox 16 for developers.

    Conclusion

    Firefox 16 is on the way to being a very strong release for Web developers, both on the support of standards, and with the nice improvements in our tools, maturing quickly. In the future, Web sites will be easier to do and more powerful!

  3. Aurora 14 is out! What’s new in it?

    We have just released Firefox Aurora 14, which includes a number of improvements. If all goes well, these features should be released in 12 weeks as part of Firefox 14.

    Highlights

    There are a few of things we’d like to shine some extra light on here:

    • Native Fullscreen Support in Mac OS X 10.7 “Lion”: Firefox can now use the native full-screen mode and button. It animates and behaves properly in that mode, like any other well-integrated application.
    • Great news for gamers! The Pointer Lock API, sometimes called the Mouse Lock API, lets games better control the mouse, by removing the pointer and letting the application capture and handle the mouse move coordinates directly.
    • The four default ways to search — using the search bar, the address bar, the contextual menu, or the home page, now all use the Google https search service in Aurora. This increase the security of your searches.
    • The dev tools now allow easily inspecting pseudo-classes states: when hovering over an element with the dev tools activated, the contextual menu now lists the different states of the element, like :hover, :active, and :focus. When selecting one of these items, the element is locked in the associated state and can be inspected. That feature was already there in Aurora 13, but the interface to access it is now very convenient!
      The menu allowing the pseudo-class state to be locked on an element
      The element with the :hover pseudo-class locked

    List of improvements

    Here is a (more or less) complete list of the improvements.

    DevTools

    • New keyboard shortcuts have been added to the Source Editor JS module (used by the Scratchpad or the Style Editor) to quickly jump to the code block start and end.
    • Still in the Source Editor module, it is now possible to add or remove a comment on a line or the current selection with one keystroke.
    • Beside the new pseudo-class inspector, several improvements have been made to the infobar which has now an inspect button to the left and a node menu to the right (for example, it may be used to set the pseudo-class state on the node!)

    DOM

    Plugins

    Layout

    User Interface

    • The popup bubble containing a link URL that appears on the bottom of the page when hovering over a link is now longer when the URL doesn’t fit in it.
    • As part of the Australis theme evolution project, the navigation bar buttons have been modified (on Windows only).
    • The identity block has been redesigned. The favicon has been changed to show an icon describing the connection used:
      • The page is served unencrypted (http).
        Nav bar with http (unencrypted)
      • The page is served encrypted (via https) but some of its content comes from unencrypted servers.
        Nav bar with https (and unencrypted content)
      • The page and its content is served encrypted (and the server uses a CV certificate).
        Nav bar with https and CV certificate
      • The page and its content is served encrypted (and the server uses an EV certificate).
        Nav bar with https and EV certificate

    Network

    Others

    • Both the Internet Explorer and Safari migrators have been rewritten in JavaScript. Using asynchronous I/O, they don’t block the browser when they run and it improves their maintainability. This has been done as part of the Snappy project.
    • On Linux, the $LANG system variable is now used when not able to locate a given dictionary in another way. Useful for system-wide installed dictionaries.
    • For add-ons writers, the js-ctypes library has been extended. Variadic ctypes functions — that is, support for functions with a variable number of arguments — have been added.
    • Several bugs in our WebGL implementation have been fixed (and workarounds for some common driver bugs added). We are close to WebGL 1.0.1 conformance, but your help is still needed.
    • Extra flexibility has been added to the Garbage Collector (GC): it could previously be applied on a single compartment or on all compartments. Now it can also be applied on a set of compartments. This will let it be launched in more cases in the future, leading to a finer control of memory and of GC pauses.

    Note: pdf.js and the new panel-based Download Manager, though they landed on Nightly, have not been lifted to Aurora 14 as they need further polishing. Similarly, support of GStreamer for videos, though it landed last week, has not been activated yet.

  4. HiDPI support, HTML5 notifications, Parallel JS, asm.js and more – Firefox Development Highlights

    Time for another look at the latest developments with Firefox. This is part of our Bleeding Edge and Firefox Development Highlights series, and most examples only work in Firefox Nightly (and could be subject to change).

    HiDPI support

    We’re happy to say that ico/icns with multiple images are now supported: the highest resolution icon is now used on HiDPI/Retina displays.

    Favicon implementation is described in bug 828508 and ico/icns is described in bug 419588.

    Performance improvements/Snappy:

    Numerous performance improvements have been made, such as faster startup, better scrolling on touchpads and smoother animations.

    The most important improvement, however, is probably multithreaded image decoder. The result should be faster page loads and tab switching. All the nitty-gritty detalis are described in bug 716140.

    HTML5

    When it comes to the world of HTML5 & friends, we have some good additional support:

    <input type=”range”>

    We now support the <input type="range"> element in forms. To style it, you can use the ::-moz-range-progress:

    ::-moz-range-progress {
        background: #f00;
    }
     
    <input type="range">

    You can see this <input type=”range”> demo in action on jsFiddle.

    HTML5 notifications

    HTML5 notifications have now been implemented. Basically, you ask for permission and then you can create a notification:

    function authorizeNotification() {
        Notification.requestPermission(function(perm) {
            alert(perm);
        });
    }
     
    function showNotification() {
        var notification = new Notification("This is a title", {
            dir: "auto",
            lang: "",
            body: "This is a notification body",
            tag: "sometag",
        });
    }

    See the HTML5 notification demo in action on jsFiddle.

    WebAudio API activated by default

    WebAudio API has been activated by default in Firefox Nightly. Testers welcome, though there are still work to be done before it can be released.

    JavaScript

    Parallel JS

    The first version of Parallel JS has landed for Firefox. A lot more details in the Parallel JS Lands article.

    asm.js

    We’re happy to say that asm.js is now in Firefox, scheduled to be released in Firefox 22! Luke Wagner has written more about it in asm.js in Firefox Nightly.

    ES6 Arrow function syntax

    We now support the ES6 Arrow function syntax

    let square = x => x*x;
    console.log(square(3));

    CSS

    @supports activated by default

    We plan on releasing this with Firefox 22. More about @supports on MDN.

    min-width and min-height ‘auto’ keyword

    min-width and min-height 'auto' keyword is no more supported. It has been removed from CSS3 Flexbox. More about that in bug 848539.

    CSS Flexbox has been re-enabled

    Happy to let you know that CSS Flexbox has been re-enabled by default in Firefox 22, which is currently in Firefox Aurora!

  5. Aurora 17 it out, bringing better security and support for new standards

    A new version of Firefox Aurora is released every six weeks. Every release includes important features for web developers like you, such as security improvements and support for new HTML5 and CSS3 features.

    Aurora 17 brings significant improvements to standards support:

    • The :dir(...) pseudo-class of Selectors Level 4, which allows you to easily style content differently based on text direction. This is more powerful than the attribute selector [dir=...], which only matched the value of the attribute and could not take inheritance or other factors into account. This will make it easier for you to write stylesheets friendly to both left-to-right and right-to-left languages.
    • The new @supports pseudo-class, which allows you to test support for specific CSS properties and values. This helps you fall back gracefully when a feature is not supported. The pseudo-class is unprefixed, but is only available behind a preference (layout.css.supports-rule.enable) because the specification is still young. Other vendors are in the procress of implementing this specification as well, so we expect it to move forward quickly towards the CR status. Wide support will greatly ease feature direction in the future.
    • The WheelEvent event of DOM Events Level 3. This is an important step towards DOM compatibility, and especially event compatibility. Until now, browsers implemented two non-interoperable wheel events, MouseWheelEvent and MouseScrollEvent. This move toward WheelEvent will lead to better interoperability once all other browsers support it. Support for the associated onwheel attribute has also been implemented.
    • CSS Animations are now calculated asynchronously, resulting in significant performance improvements.
    • Experimentally, Gecko now supports the inputmode attribute of the HTML <input> element. The supported values different from those defined by the WhatWG, but the draft is still young and discussions are ongoing.
    • Two big changes related to SVG: support for the FillPaint attribute and support for the StrokePaint attribute. More importantly, SVG display lists have been implemented.
    • JavaScript improvements through continued implementation of Harmony, the experimental EcmaScript 6 draft. Maps and Sets are now iterable, and the new string methods startsWith(), endsWith(), and contains() are now supported.
    • Blobs finally support ZIP content.

    Aurora 17 also brings two major security-related changes:

    • Support for the sandbox attribute of the <iframe> element. This lets you manage the security risk of embedding content in a page. For example, you could grant full privileges to an <iframe> that contains content you control, but fewer rights to an <iframe> that uses content from a third party, like an advertising service.
    • New handling of certain dialogs. In particular, prompt, alert, and confirm dialogs can no longer be launched from onunload, onbeforeunload, or onpagehide. Though there are some legitimate uses of this type of behavior, many Web sites were abusing it to prevent users from leaving a page.

    On the media side, we continue to improve our implementation of the Opus codec. For example, we now support multiple channels audio. These improvements are especially important due to upcoming real-time communication features.

    As with all recent Firefox releases, Aurora includes improvements to our developer tools:

    • A new Markup panel in the Page Inspector, allowing you to easily edit the DOM.
    • Improvements that make the Web Console, Debugger and Developer Toolbar faster and easier to use.

    This is an especially strong release in terms of user interface improvements.

    Numerous improvements have been made to Mac OS integration:

    • When available, Firefox now uses the Notification Center (in Mac OS Mountain Lion) instead of Growl to send notifications.
    • The background color of the tab bar now changes when inactive, just like other native Mac OS applications.
    • Light windows now have a new light color, matching the Mac OS theme.

    Users will also see improvements when copying images to other programs. Until now, copying from the content area to a program like Photoshop caused transparency information to be lost. This is no longer the case!

    Still on the user experience side, the look of location bar results has been greatly improved. Additionally, when fixed content is present in the header, scrolling with Page-DOWN and Page-UP now works correctly, allowing continuous reading and a far better scrolling experience.

    Like always, responsiveness and memory management have continued to improve this cycle. Even though no major changes were made, numerous small improvements have been made to make Firefox a little bit snappier as a whole.

    Again, this is a very strong Aurora release. As always, the final set of features released with Firefox 17 (scheduled for November 20th, 2012) may change slightly due to testing and user feedback, but nonetheless this is a very strong start.

  6. Helping with the MDN: what about linking to us?

    We are working toward writing the best documentation about the Open Web. That’s a huge task but, day by day, our docs improve. Javascript is already considered an excellent resource, our CSS reference is now in pretty good shape, and a lot of work goes into our HTML, SVG and MathML documentation.

    Our Open Web documentation is aimed at Web developers: we want it to be useful for you. To achieve this, we follow several principles:

    • The MDN Open Web documentation must be browser-agnostic. As a Web developer, you are writing Web sites for all. You aren’t designing for a specific browser. Gecko-only documentation would be next to useless. That’s why we started about one year ago the work on making our documentation independent of the browser. We are far from being finished but huge progress has been made.
    • Our documentation must be practical. We are documenting today’s Web, not the one of yesterday or tomorrow. We base our articles on what the standard says, whether it’s complete or still a work in progress, and we point out the differences in implementation, if any.
    • Our documentation is tailored for developers of different levels. We propose tutorials for beginners, more descriptive articles for intermediate users and reference articles for seasoned developers.
    • We keep the documentation up-to-date. That’s one of our most challenging goals: outdated articles are useless. So we follow standards development daily, as well as implementation improvements. With the fast release cycles adopted by several browser vendors, standards support improves quickly, but also our amount of work. (We are happy with that!)

    Thanks to the hard work based on these principles, we see a steady increase in number of readers. For us, that’s the best reward.

    Helping us

    We regularly get questions about how you can help us. Writing new content (during a doc sprint or any other time), correcting typos, writing examples or translating articles are great ways to improve the documentation. But not everybody has the time or the knowledge.

    You can also help us with link love: Link to us from your blogs, both in-context and in the sidebar mention. This will let us get more attention, attract more editors and will help us reach our goal to provide accurate and complete documentation about the Open Web.

    To help you, we have now written a small linking guide which gives you hints and information about how to link to MDN in a pertinent way for your readers.

    So, don’t hesitate to link to our technology entry pages (like the CSS page) or to very specific pages. But don’t forget the basic rule: you are adding links for your users, the links you choose should help them quickly find accurate information. Because your readers are the important people, not us, not you.

    One way to make this into an easy habit: each time you write a blog post about an Open Web technology, take five minutes to consider if adding one or the other link to the MDN would improve your article. If it does, please add those links!

    That way, together, we will be able to improve the Open Web documentation out there. Thank you very much for your support.

  7. Aurora 18: HiDPI & Touch Events

    In this Aurora cycle, Firefox gained several new interesting features:

    • HiDPI displays are now supported (like Mac’s Retina)
    • Performance and Memory improvements (with IonMonkey and a huge improvement for people using HTTP proxies)
    • Web standard support: HTML5, JS & CSS new features, with the full support of the W3C Touch events.

    Let’s look at this in more details!

    Some new HiDPI iconsMac users with a Retina displays will be pleased to have an adapted Firefox: support for HiDPI screens has landed and it is gorgeous. Not only the text is using the whole resolution, but all icons have been redone.

    A lot of performance improvements have landed during this cycle:

    • IonMonkey is the codename for the latest JavaScript improvements, and that’s a huge boost in our performance.
    • CSS Gradients use a new caching mechanism that leads to speed gains on page heavily using them.
    • Also work on reactivity led us to lower our start-up times: an unnecessary certificate validation has been removed, but the most significant gains will be seen by people using Firefox behind a proxy, like a lot of business users.
    • Finally, tab switching is quicker as Jared Wein replaced a costly regular expression by more efficient code.

    Memory management continues to get some significant work, though most progress is seen on special cases:

    • We introduced coalescing of inline style rules across nodes, when possible, leading to a significant reduction (up to 20%) of memory on pages with a lot of nodes.
    • Optimizations of our event queues led to less memory used by pages with a lot of HTML and CSS errors (when the console is closed).
    • Also tabs not yet restored are using less memory.

    As expected DThe new preset of the Responsive Design Vieweveloper Tools see steady improvements. Paul Rouget made some nice videos of these features. Of special notice we have:

    • The live preview of the DOM Tree is available.
    • The Responsive design view has now presets and the scroll bars behave more similarly of how they do on mobile phones.
    • On Mac OS, the Scratchpad now supports the native fullscreen feature.
    • New commands, dbg open & dbg close, have been added to our Command line.

    Implementation of CSS3, HTML5 & JavaScript features continues at a quick pace:

    • The W3C Touch events are now implemented on Windows too. That means that our experimental MozTouch event is no more necessary on any platform and should be replaced by the standard way of doing them. We plan to remove support of these deprecated events very soon.
    • The HTML5 reversed attribute of the <ol> element is implemented.
    • The EcmaScript 6 proxies landed.
    • WebWorkers now supports transferable objects.
    • CSS Animations have been adapted to the latest evolution of the CSS cascade.
    • SVG Glyphs can now be integrated into OpenType fonts.

    Like always, this cycle brought its fair share of novelties. And more to come in the future: CSS3 Flexible boxes layout landed and is in Aurora, but the implementation is still experimental and behind a pref, layout.css.flexbox.enable. Not yet ready for prime time, but we are getting close. Similarly WebRTC is available behind a pref, and feedback is welcomed.

    Exciting time ahead for Web developers.