Web
Article

What’s New in Chrome 37

By Craig Buckler

It’s been some time since I wrote about Chrome, but version 37 was released on all platforms in the last week of August 2014. The browser celebrated it’s sixth birthday on September 2, so perhaps it’s a good time to delve a little deeper into the new features. Unlike Apple, Opera, Microsoft and Mozilla, Google downplays the latest enhancements. Either that, or they can’t be bothered to create a better “What’s New” page!

Let’s look at gems lurking below Blink’s surface.

Windows DirectWrite Support

Windows users have suffered with woeful font rendering for several years. For some reason, Chrome 36 and below used the ancient Graphics Device Interface to display text and it never compared well to other browsers. Thankfully, following an extensive re-engineering exercise, Chrome now use DirectWrite for better-looking and faster performing fonts.

Chrome DirectWrite rendering

CSS Shapes

The CSS Shapes module allows text to flow around the inside or outside of an irregular area such as a circle or polygon. The age of rectangular blocks is over and we’ll all be producing magazine-like layouts everywhere!

The module was proposed by Adobe and the company has produced several interesting demonstrations. We’ve also previously covered the spec on SitePoint. Support is currently limited to Chrome but I hope CSS Shapes becomes a priority for other browser vendors.

CSS shapes

The HTML5 <dialog> Element

dialog has a checkered history. It was originally intended to denote conversations but was dropped from the specifications five years ago. Its new functionality is far more useful; you can create pop-up dialogs in a page without resorting to complex CSS or scripting.

The bad news: at the time of writing, only Chrome 37+ supports dialog. The Chrome team has released a polyfill for other browsers but the specification’s in a state of flux and the element is unlikely to be reliable for a while.

However, the following demonstration should work in Chrome 37+:

See the Pen mauhq by Craig Buckler (@craigbuckler) on CodePen.

A dialog can be added as a parent element to any HTML. If it includes a form, the method attribute should be set to "dialog" to ensure the form doesn’t cause a full-page submit, e.g.

<dialog id="myDialog">
  <form method="dialog">
    <div>
      <p><label>Name: <input name="name" id="name" /></label></p>
      <button type="submit">Submit</button>
    </div>
  </form>
</dialog>

<button id="showDialog">show dialog</button>

The HTMLDialogElement interface provides the following methods:

  • show() — display a non-modal dialog. The user can view and interact with page behind the dialog.
  • showModal() — display a modal dialog. The dialog must be closed before the user can use the page.
  • close([returnValue]) — closes the dialog

and properties:

  • open — returns true if the dialog is currently displayed
  • returnValue — the value, if any, passed to the close() method

For example:

document.getElementById("showDialog").onclick = function() {
  document.getElementById("myDialog").showModal();
};

You can also attach a close event listener to the dialog and style the modal backdrop using the ::backdrop pseudo-element.

For more information, refer to the specification, MDN or view a demonstration page.

Web Cryptography API

The specification states this is:

a JavaScript API for performing basic cryptographic operations in web applications, such as hashing, signature generation and verification, and encryption and decryption.

It sounds scarily complex but, in essence, it will permit validated, encrypted messages to be sent between the browser and web server. For example, your banking transactions or webmail messages could be limited to access from a pre-approved browser on a specific device.

Some elements of the Web Cryptography API are also supported by IE11.

Miscellaneous Updates

More minor changes in Chrome 37 include:

  • Unprefixed zoom-in and zoom-out CSS3 cursor styles.
  • Touch event co-ordinates are now real-number Double values rather than Long integers for higher-fidelity on Retina-like screens.
  • Sub-pixel font scaling allows smoother animation of text between font sizes.
  • The default windows monospace font is now Consolas rather than Courier New.
  • A count of your device’s processing cores can be retrieved using navigator.hardwareConcurrency. (No — I can’t think of a reason to use it either!)

Chrome 37 is a solid release of Google’s flagship browser. It’s become the most-used web application on desktop and mobile and other vendors are finding it increasingly difficult to complete.

Which new Chrome feature are you most excited about?

  • Aurelio De Rosa

    It’s worth noting that Chrome 37 and Opera 24 have two major issues in regard of the dialog element as I reported: https://code.google.com/p/chromium/issues/detail?id=410344 and https://code.google.com/p/chromium/issues/detail?id=410346

    • Craig Buckler

      Interesting. Perhaps that’s another reason why Google didn’t publicise the element?

      • Aurelio De Rosa

        I think they were genuinely unaware of the issues.

  • http://raymondmoul.com rmmoul

    I hope that they add an option to turn off mouse wheel tag scrolling soon.

  • Sinisa Perovic

    In Linux they finally remove that pesty panel icon. I’ve never seen a single notification.

  • jokeyrhyme

    If `navigator.hardwareConcurrency` becomes widely available, it’ll make it easier to start the right number of WebWorkers for parallel processing. This will make tasks like processing images and video in the client just that little bit better.

    • Craig Buckler

      Possibly, although what would you do if, say, you required 5 workers and only had 4 cores? You’d probably launch that fifth process anyway because it’d still be non-blocking.

      • jokeyrhyme

        I’d think of that in reverse: if hardwareConcurrency == 4, then I might start with 3 workers, leaving enough resources free to keep the UI responsive. This doesn’t take other applications into account, but it’s still a better guess than without it.

        Or, if I always start conservatively with 1 worker and slowly ramp up over time, then I know that I shouldn’t bother going any further than my self-imposed limit based on hardwareConcurrency.

        I’m not saying hardwareConcurrency solves every concurrency and system-loading problem we’ll ever face, but it’s a handy hint that I’m sure can be put to use to improve user experience.

        • Craig Buckler

          There are certainly some options although, given JS normally relies on non-blocking callbacks, I can’t think of many use cases?

  • Tatsh

    ‘For example, your banking transactions or webmail messages could be limited to access from a pre-approved browser on a specific device.’

    Did you mean to say something else? This is considered good?

    • Craig Buckler

      It depends what you want. For absolutely secure messaging, limiting the number of devices which can access those messages is a security enhancement. But I’m not saying that’s the only use…

      • Tatsh

        But you are aware ‘Approved browser’ takes us back to the old days of ‘Best viewed in Internet Explorer’ pretty much?

        • Craig Buckler

          Ahh, no – it’s not what you’re thinking.

          You would nominate a specific device or devices, e.g. please ensure messages can only be seen if I’m logged on using this installation of Firefox on my mobile, this installation of Chrome on my desktop, etc. Messages wouldn’t be available on any other devices regardless of what they were running. If you switched browser or PC you’d need to re-register.

          In essence, it’s an extra level of device-specific security.

  • Samuel Hinton

    Hi Craig, thought it might be useful to your blog, I am currently using the navigator.hardwareConcurrency feature so that, in my data processing web application, I can spawn the right amount of background Web Workers to effectively utilise the client browsers CPU usage over at https://github.com/Samreay/ThesisZ.

    • Craig Buckler

      Interesting. Does it work effectively or better than launching any number of workers? While you know the number of cores, not all will be idle. After all, you have the OS, other apps and tabs running at the same time as your application.

      • Samuel Hinton

        Too many workers will cause the threads to cycle, as expected, but this can lead to stuttering and lagging in the interface as the interface process can get stuck in the queue. I use (numCores – 1) web workers to keep the interface (somewhat) snappy and data crunching performance still high. Doesn’t always work, but I find it helps (anecdotally).

  • Gemma W.

    Very cool! I’m most excited about DirectWrite because I’ve waited for a long time for it to come to Chrome, and finally, it’s here! The CSS Shapes module is my second favourite. :)

  • Расел

    Not long ago, Forbes Officer Ian Morris (Ian Morris) drew public
    attention to the mistake in Google Chrome for Windows, which led to a
    significantly higher consumption of energy by the browser than its
    competitors. The problem is, that does not return the processor to the
    idle state when there is a special burden. Chrome even in the background
    sets the Windows system clock instead of the standard value of 15.625
    ms 1 ms – as a result of the processor wakes up not 64 times per second,
    1,000 times per second.

    At the same time With Internet Explorer, for example, activates this
    mode when intensive tasks like YouTube, and then returns to normal
    timer. Permanent timer for 1 ms can increase energy consumption by 25%,
    depending on the configuration. According to Mr. Morris, his laptop
    consumes 15-20 watts running Chrome and 12-15 W with this browser. So if
    the laptop is running Windows-not as long as we would like – maybe it’s
    in Chrome.

    Error would not be too surprising if there were in some of last
    update. But, according to Jan Morris, the first report of it dates from
    the distant year 2010, and more recent error message in Chromium is
    seeking comments from November 2012. Anyway, but Google has now
    announced that such an error does exist, and the development team is
    working on its removal. Due note Mr. Morris old bug has now received a
    note from a high priority.

  • http://dragonlancers.com Thomas Patrick Jensen

    Wow! :D so happy to hear shapes is going to get real <3 happy to read your articles as always Greg (y)

  • Chibuike iGBO

    I don’t care about the new features in this browser, if there is anyway that I can downgrade my chrome browser to the previous version, I will gladly do it. It is too slow. To navigate from one tab to the next takes almost 5 sec, I don’t know if am the only one experiencing this problem. my laptop runs on core i3.Both IE and safari and firefox runs perfectly on my Pc.

  • Christian Z.

    Hopefully web developers are smart enough to use more than one browser.

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Instant Website Review

Use Woorank to analyze and optimize your website to improve your website to improve your ranking!

Run a review to see how your site can improve across 70+ metrics!

Get the latest in Front-end, once a week, for free.