Responsive Web Design with DevTools' Device Mode

Monday, September 08, 2014

We all develop websites on our desktop and laptop machines, so we tend to initially develop for the desktop experience. But that's increasingly out of sync with our users who, more and more, consume the web on mobile. To deliver a great experience for the web, we need to accurately experience it on mobile. Chrome DevTools has had mobile emulation features for awhile, but it's still too disconnected from real device conditions and requires too much trial and error. Chrome 38 Beta includes a new Device Mode that puts you one click away from emulating mobile devices, inspecting media queries, and emulating flaky network conditions.




Now, you can turn on Device Mode right next to the "inspect element" icon. Once enabled, it automatically emulates a mobile viewport, along with complete emulation of touch events. You can test various viewport sizes easily with the large drag handles instead of resizing the whole browser window. You can select from popular device presets to automatically set viewport, touch, user agent and screen density settings in one fell swoop.

2014-09-06 20_47_44.gif

Every media query gets represented visually, so you can correlate your breakpoints with the viewport. Clicking one resizes the viewport, making it easier to iterate on your associated styles. If you want to edit the media queries themselves, right-click and jump to the line of CSS where it's defined.

Lastly, device emulation needs to accurately represent the connectivity of your mobile users. For example, a 3G connection significantly limits the experience of your website compared to your speedy office WiFi. The DevTools can now help you emulate the network conditions (both throughput and latency) of connectivity like EDGE, 3G, 4G – and even go offline.
 
Screen Shot 2014-08-22 at 3.44.13 PM.png
While typical system-wide network conditioning throttles everything, DevTools will only throttle the current tab. This enables you to take your app offline and try out AppCache and Service Worker scenarios, and meanwhile browse documentation in another tab.

Please try out Device Mode your development workflow and let us know what you think. And if you're hungry for more DevTools goodness, check out my Google I/O 2014 talk: Developing Across Devices.

Posted by Paul Bakaus, Developer Advocate and Device Diviner

Gradually Sunsetting SHA-1

Friday, September 05, 2014

The SHA-1 cryptographic hash algorithm has been known to be considerably weaker than it was designed to be since at least 2005 — 9 years ago. Collision attacks against SHA-1 are too affordable for us to consider it safe for the public web PKI. We can only expect that attacks will get cheaper.

That’s why Chrome will start the process of sunsetting SHA-1 (as used in certificate signatures for HTTPS) with Chrome 39 in November. HTTPS sites whose certificate chains use SHA-1 and are valid past 1 January 2017 will no longer appear to be fully trustworthy in Chrome’s user interface.

SHA-1's use on the Internet has been deprecated since 2011, when the CA/Browser Forum, an industry group of leading web browsers and certificate authorities (CAs) working together to establish basic security requirements for SSL certificates, published their Baseline Requirements for SSL. These Requirements recommended that all CAs transition away from SHA-1 as soon as possible, and followed similar events in other industries and sectors, such as NIST deprecating SHA-1 for government use in 2010.

We have seen this type of weakness turn into a practical attack before, with the MD5 hash algorithm. We need to ensure that by the time an attack against SHA-1 is demonstrated publicly, the web has already moved away from it. Unfortunately, this can be quite challenging. For example, when Chrome disabled MD5, a number of enterprises, schools, and small businesses were affected when their proxy software — from leading vendors — continued to use the insecure algorithms, and were left scrambling for updates. Users who used personal firewall software were also affected.

We plan to surface, in the HTTPS security indicator in Chrome, the fact that SHA-1 does not meet its design guarantee. We are taking a measured approach, gradually ratcheting down the security indicator and gradually moving the timetable up (keep in mind that we release stable versions of Chrome about 6 – 8 weeks after their branch point):

Chrome 39 (Branch point 26 September 2014)

Sites with end-entity (“leaf”) certificates that expire on or after 1 January 2017, and which include a SHA-1-based signature as part of the certificate chain, will be treated as “secure, but with minor errors”.

The current visual display for “secure, but with minor errors” is a lock with a yellow triangle, and is used to highlight other deprecated and insecure practices, such as passive mixed content.

yellow-triangle.png

Chrome 40 (Branch point 7 November 2014; Stable after holiday season)

Sites with end-entity certificates that expire between 1 June 2016 to 31 December 2016 (inclusive), and which include a SHA-1-based signature as part of the certificate chain, will be treated as “secure, but with minor errors”.

Sites with end-entity certificates that expire on or after 1 January 2017, and which include a SHA-1-based signature as part of the certificate chain, will be treated as “neutral, lacking security”.

The current visual display for “neutral, lacking security” is a blank page icon, and is used in other situations, such as HTTP.

Screen Shot 2014-09-05 at 12.05.52 PM.png

Chrome 41 (Branch point in Q1 2015)

Sites with end-entity certificates that expire between 1 January 2016 and 31 December 2016 (inclusive), and which include a SHA-1-based signature as part of the certificate chain, will be treated as “secure, but with minor errors”.

Sites with end-entity certificates that expire on or after 1 January 2017, and which include a SHA-1-based signature as part of the certificate chain, will be treated as “affirmatively insecure”. Subresources from such domain will be treated as “active mixed content”.

The current visual display for “affirmatively insecure” is a lock with a red X, and a red strike-through text treatment in the URL scheme.

Screen Shot 2014-08-29 at 1.26.59 PM.png

Note: SHA-1-based signatures for trusted root certificates are not a problem because TLS clients trust them by their identity, rather than by the signature of their hash.

Posted by Chris Palmer, Secure Socket Lover and Ryan Sleevi, Transport Layer Securer

Moving Towards a Single Cloud Messaging API

Wednesday, September 03, 2014

In April we released chrome.gcm, an API that allows Chrome apps and extensions to use the Google Cloud Messaging (GCM) service to interact with their server-side components via push messaging. Since the new API offers significant improvements and has been used for push messaging in Chrome apps and extensions since May 2014, we are now deprecating the legacy chrome.pushMessaging API.

Developers will start to see a deprecation message in the console if they use chrome.pushMessaging, and no new Chrome apps and extensions will be accepted to the Chrome Web Store if they use the deprecated API. Beginning in mid-January 2015, Chrome apps and extensions that continue to use chrome.pushMessaging will be delisted in the Chrome Web Store. When upgraded to use chrome.gcm, these apps will once again be discoverable via searching and browsing the Web Store. In early March, the chrome.pushMessaging API will be removed and all Chrome apps and extensions that continue to reference it will be automatically disabled. They can be enabled once again when upgraded to use chrome.gcm.

For a high level overview of how an app or extension can leverage chrome.gcm, check out our Google I/O Bytes video. Learn how to upgrade your Chrome apps and extensions by consulting the chrome.gcm API documentation and following this tutorial. Lastly, subscribe to the GCM for Chrome Feedback group to ask questions, get help, and learn more about the transition.

Posted by Jake Leichtling and Filip Gorski, Product Manager and Software Engineer

Chrome 38 Beta: New primitives for the next-generation web

Thursday, August 28, 2014

Today’s Chrome Beta channel release includes a ton of new primitives and APIs to simplify development and give developers more control over their web applications. Unless otherwise noted, changes described below apply to Chrome for Android, Windows, Mac, Linux, and Chrome OS.

New HTML element: <picture>

This release adds support for the new <picture> element thanks to the hard work of community contributor Yoav Weiss, who was able to dedicate his time to implementing this feature in multiple rendering engines because of a successful crowdfunding campaign that raised 50% more than its funding goal.

The <picture> element takes the concept of responsive design, previously solved by sending duplicate resources to the client, and bakes an elegant solution right into the web platform. It allows developers to list multiple versions of images that may be appropriate for the browser to display based on screen size, pixel density, or other factors.


<picture>
    <source media="(min-width: 45em)" srcset="large.jpg">
    <source media="(min-width: 32em)" srcset="med.jpg">
    <img src="small.jpg" alt="The president giving an award.">
</picture>


New JavaScript features

Chrome 38 also enables by default several new JavaScript language features from the draft ECMAScript 6 (ES6) specification. Additions include:
  • Maps and sets, two highly-requested data structures which make storing and interacting with data simpler and more rational.
  • Iterators now provide an easy and extensible way to iterate over sequenced data types such as arrays and strings, as well as the new maps and sets.
  • Symbols, which help prevent object properties from unintentionally interfering with each other.
  • Math functions such as Math.sign and Math.log10, which prevents developers from having to re-implement these functions and provides the performance boost of built-in functions. Take a look at the full list of new functions.
Future releases of Chrome will contain even more ES6 features as the specification matures. Stay posted!

Other updates in this release
  • The Network Information ("NetInfo") API is now enabled, giving web applications access to the current type of network on a device running Android, iOS, or Chrome OS. This could allow an app to only do data-intensive activities such as syncing when connected to a Wi-Fi connection.
  • The addition of the Screen Orientation API allows developers to not only detect whether a device is in portrait or landscape mode, but also lock the screen orientation while a user is within that app.
  • The CSS value "image-rendering: pixelated" is now supported, which allows scaled images to appear to be composed of very large pixels. Example use cases include high-performance display of zoomed photos in image editing software without large bandwidth or load time costs.
  • The Encoding API enables the encoding and decoding of data from binary streams, such as converting between a raw ArrayBuffer and a string.
  • The new File interface allows developers to create and interact with File objects in the same way as Blob objects.
  • SVG fonts are no longer supported, except on Windows systems older than Windows 7. Note that while the feature works on those systems, it is considered deprecated.
As always, visit chromestatus.com/features for a complete overview of Chrome’s developer features, and circle +Google Chrome Developers for more frequent updates!

Posted by Andreas Rossberg, Senior Symbolic Software Engineer

Mac Chrome: When I’m Sixty-Four (Bits)

Thursday, August 28, 2014

On the heels of Tuesday’s release of 64-bit Chrome for Windows, all Mac Chrome users on the beta channel will be updated to a new 64-bit version of Chrome 38. Previously, Chrome was a 32-bit app on Macs. While doubling the number of bits won’t make things twice as good, it does allow us to make a number of speed and security improvements.

64-bit Chrome has become faster as a result of having access to a superior instruction set, more registers, and a more efficient function calling convention. Improved opportunities for ASLR enhance this version’s security. Another major benefit of this change comes from the fact that most programs on a modern Mac are already 64-bit apps. In cases where Chrome was the last remaining 32-bit app, there were launch-time and memory-footprint penalties as 32-bit copies of all of the system libraries needed to be loaded to support Chrome. Now that Chrome’s a 64-bit app too, we expect you’ll find that it launches more quickly and that overall system memory use decreases.

Because of this change, Chrome for Mac will no longer support 32-bit NPAPI plugins, although their 64-bit counterparts are supported. Users shouldn’t notice any changes, because most major plugins are available in both 32-bit and 64-bit form, and many major websites have been switching from NPAPI towards more modern HTML5 APIs. This is also a good time to remind everyone that NPAPI support will be removed from Chrome later this year.

Nearly every Mac user has a computer capable of running this 64-bit version, so we’re automatically updating all Mac Chrome beta channel users. Those few users with first-generation Intel Macs will miss out on the fun, but as we bid them farewell, we’ll remind them that they’ll still be able to run the latest version on the stable channel, Chrome 37.

You can check to see if the Chrome you’re running is a 64-bit version by checking Chrome’s About page (chrome://help) and looking next to the version number. If it says “64-bit” there, that’s a sure sign that you’re running one of these new builds. We hope that this is the only visible difference that you’ll find between the old 32-bit and new 64-bit versions, but in case you find anything amiss during the beta period, please let us know.

Posted by Mark Mentovai, Software Engineer and Register Doubler

64 bits of awesome: 64-bit Windows Support, now in Stable!

Tuesday, August 26, 2014

Today, after a successful experiment with Chrome 64-bit Windows in our Dev and Canary channels in June, 64-bit Windows support is coming to Chrome Stable with the release of Chrome 37.

64-bit Chrome offers many benefits for speed, stability and security. Our measurements have shown that the native 64-bit version of Chrome has improved speed on many of our graphics and media benchmarks. For example, the VP9 codec that’s used in High Definition YouTube videos shows a 15% improvement in decoding performance. Stability measurements from people opted into our Canary, Dev and Beta 64-bit channels confirm that 64-bit rendering engines are almost twice as stable as 32-bit engines when handling typical web content. Finally, on 64-bit, our defense in depth security mitigations such as Partition Alloc are able to far more effectively defend against vulnerabilities that rely on controlling the memory layout of objects.

At this point 64-bit will remain opt-in, so to take advantage of the improvements click on the new “Windows 64-bit” link on the Chrome download page. Currently, the only significant known issue is the lack of 32-bit NPAPI plugin support. The 32-bit channel will remain fully supported for the foreseeable future and we will continue to support 32-bit plugins until NPAPI is removed from Chrome.

We encourage you to give 64-bit Chrome a try. We’re looking forward to hearing your feedback so we can continue to make Chrome the fastest, most secure and stable browser.

Posted by Will Harris, Software Engineer and Embiggener of Bits

Chrome 37 Beta: DirectWrite on Windows and the <dialog> element

Thursday, July 17, 2014

Today’s Chrome Beta channel release includes a slew of new developer features to help you make richer, faster and more compelling web content and apps, especially for mobile devices. Unless otherwise noted, changes described below apply to Chrome for Android, Windows, Mac, Linux, and Chrome OS.

DirectWrite on Windows

Chrome 37 adds support for DirectWrite, an API on Windows for clear, high-quality text rendering even on high DPI displays. Before DirectWrite, Chrome used the Graphics Device Interface (GDI) to render text. GDI dates back to the mid-80's and reflects the engineering tradeoffs of that time, particularly for slower, lower-resolution machines. The switch to DirectWrite has been a top user request for years, and required extensive re-architecting and streamlining of Chrome's font rendering engine.

Some users should begin seeing better-looking fonts and increased rendering performance as we roll out DirectWrite, with no changes required by web developers. Assuming everything goes smoothly, all users will experience the improvements by the Chrome 37 stable release.

Compare the below screenshots, taken with and without DirectWrite enabled.



New HTML element: <dialog>

In this release we're also adding support for the <dialog> HTML5 element, which enables developers to create styled dialog boxes in their web applications and control them via a JavaScript API. For more details, check out some code samples and see <dialog> in action. The <dialog> element is a better-designed alternative to showModalDialog(), which is now disabled as we recently announced.

Other updates in this release

  • The Web Cryptography JavaScript API is enabled by default starting in Chrome 37, allowing developers to perform cryptographic operations such as hashing, signature generation/verification, and encryption.
  • Subpixel font scaling is now supported, which enables smooth animations of text between font sizes.  
  • TouchEvent co-ordinates are now doubles instead of longs, enabling higher-fidelity touch interactions on high-DPI displays.
  • CSS cursor values "zoom-in" and "zoom-out" are now unprefixed.
  • The number of cores on a physical machine can now be accessed by navigator.hardwareConcurrency.
  • The user's preferred languages are now accessible by navigator.languages, and the languagechange event is fired when this is updated.
  • The CSS Shapes Module allows developers to define non-rectangular text wrapping boundaries around floated elements.
  • NPAPI deprecation continues according to our previously-announced plan with a harder-to-bypass blocking UI
  • The default monospace font on Windows is now Consolas instead of Courier New.
  • Cross-origin fonts are now blocked unless the response includes the appropriate CORS headers.
As always, visit chromestatus.com/features for a complete overview of Chrome’s developer features,  and circle +Google Chrome Developers for more frequent updates!

Posted by Emil A Eklund, Software Engineer and Senior Blog DirectWriter