What’s New In Chrome 56? Position Sticky, Bluetooth API and Death of Flash


You can now update your Google Chrome browsers to version 56, a major release that will add a few features and behaviors to the popular browser.  I will attempt to breakdown what they are and how they will affect you as a user and/or a developer.

Position Sticky

For as long as I’ve been a web developer, I’ve been implementing sticky navigation multiple times, the sidebar of this website is an example of that (it stickies when you scroll pass a certain point). Historically, this is done via javascript, you would check user scroll position and when the element you want to sticky is on the top of the viewport, you change it’s position to fixed, it’s a simple concept but implementing it is not so trivial.  The Chrome dev team finally implemented the position: sticky rule to make our lives easier.

sticky: the box position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its flow root and containing block and in all cases, including table elements, does not affect the position of any following boxes. When a box B is stickily positioned, the position of the following box is calculated as though B were not offset. The effect of ‘position: sticky’ on table elements is the same as for ‘position: relative’.

Here’s a simple jsbin I made to demonstrate this new rule.

Of course, you cannot use this rule if you’re supporting legacy browsers, but I’m confident the future and in time, this rule will become as widely used as any other standard CSS rules.

Web Bluetooth API

You can now take advantage of Web Bluetooth API to communicate securely and privately with nearby bluetooth enabled devices.

The Web Bluetooth API uses the GATT protocol, which enables your app to connect to devices such as light bulbs, toys, heart-rate monitors, LED displays and more with just a few lines of JavaScript. Web Bluetooth can also be combined with physical web beacons to discover and control nearby devices.

You can read more about it here

Marking HTTP Connections Insecure

It’s been long time coming, Chrome will push the movement towards secure connection by marking websites that contains form submissions as Insecure.  This is a great move to prevent easy data sniffing due to un-encrypted connections.

You can read more about this on ArsTechnica

Death of Flash

Chrome made Flash a “click to enable” feature on a previous version of Chrome, but now it’s back again.  Flash will be disabled by default on Chrome 56.  On websites you havn’t visited and have not explicitly allowed to display Flash, Flash will be disabled.  This is a movement towards HTML5 adoption.  While killing Flash is great, there are still quite a bit of content made with Flash: Ads, games, online tools, cartoons animations, etc.  This release will definitely impact those sites but it’s a good thing because it will encourage them to migrate their content to HTML5.

28% Faster Reloads

Chrome reloads will now be 28% faster compared to previous versions.  This is great because behind the scenes, the browser only reloads critical resources and avoids re-downloading the same content, of course you can always do a hard refresh if you want to force refresh of those contents. Below is a video of the speed comparison:

Comments Or Questions? Discuss In Our Discord

If you enjoyed this tutorial, make sure to subscribe to our Youtube Channel and follow us on Twitter @pentacodevids for latest updates!

More from PentaCode