Chrome 49: Custom CSS properties, background sync and save-data client hint

Key Takeaways

[Music] Chrome 49 adds support for CSS custom properties sometimes referred to as CSS variables background sync makes it easy to reliably send data to the server even if the user leaves the page closes the browser or loses their network connection and the new save data client hint header enables you to deliver fast and light applications to users who want them these are just some of the new features for developers in Chrome 49 let's dive in and see what's new in Chrome every site has CSS files filled with repeated values colors margins padding Etc repeating these values over and over again in your CSS is not only a chore but it's also error prone if at some point one of the those values needs to be changed your best option is probably to find and replace all the things but on a project that's large enough this is dangerous Chrome now supports CSS custom properties sometimes referred to CSS variables allowing you to Define property values in the CSS without a pre-processor once defined you can use the VAR function to reference these custom properties any anywhere in the document one of the more powerful features of custom properties is the ability to define or change them wherever you want for example you could Define a variable in a media query or use JavaScript to change it you simply can't do that with a pre-processor well CSS custom properties just landed in Chrome 49 it's already available in Firefox 42 Safari 91 iOS far 993 so check it out one of the cool features of service workers is the ability to cash Pages ensuring that your page loads fast even on slow or non-existent networks but what about the case where you need to send something to the server in the past we'd probably use on before unload to prevent the user from leaving the page before we finish the send and if there was no network connection hold hopefully we'd fail gracefully but graceful is hard the new background Sync API improves Network reliability by allowing service workers to schedule a one-off sync of the user's local changes when the device next connects to the network even if the page isn't open to use background sync we need to add a sync event listener to our service worker that calls a sync method our sync method should then return a promise indicating success or failure if it fulfills the sync is complete but if it fails the browser will try again later until it successfully sends the data then to request a sync we grab the service workers registration in our app and request a sync check out this article for more details and try out emojoy a simple Emoji only Chat thing every day hundreds of millions of users rely on proxy browsers and various transcoding services to access the web and reduce their bandwidth enabling a faster browser experience but the popularity of proxy browsers and transcoding services is an indicator that we are ignoring the high user demand for fast and light applications and Pages the new save data client hint request header available in Chrome Opera and Yandex browsers enables us to deliver fast and light applications to users who have opted in to data savings mode in their browser by identifying this request header your app should respond with a lighter version for example reduce the number of image byes sent by sending fewer images or using higher compression ratios or or switch to OnDemand loading of expensive content these are just a few of the new features in Chrome 49 for developers be sure to check out the description below to get links to more details and learn about some of the other new features if you haven't already subscribe to our Chrome Developers YouTube channel to stay up to dat with the latest news I'm Pete leage and as soon as Chrome 50 is released I'll be right here to tell you what's new in Chrome home [Music]