--- title: "#317: How To Gracefully Deal With Browsers That Don't Support Grid" publication: "Frontend Focus" issue: 317 published_at: "2017-11-22" canonical_url: "https://frontendfoc.us/issues/317" --- #317: How To Gracefully Deal With Browsers That Don't Support Grid This Week's HTML5, CSS, Browser, and Frontend News — [Read this e-mail on the Web](http://frontendfoc.us/issues/317) Frontend FocusIssue 317 — November 22, 2017 A slightly shorter than usual issue today in respect of Thanksgiving. We hope you have a good one if you celebrate it.[Using CSS Grid: Supporting Browsers Without Grid](https://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid/?utm_source=frontendfocus&utm_medium=email)CSS Grid might provide one of the biggest recent improvements in front-end development, but how can we gracefully deal with browsers that don’t support it? Rachel Andrew [What's New in Firefox 58: Developer Edition](https://hacks.mozilla.org/2017/11/new-in-firefox-58-developer-edition/?utm_source=frontendfocus&utm_medium=email)After the successful launch of Quantum, we’re already thinking about the _next_ Firefox which includes a CSS Shapes highlighter, font-display support, and a better debugger. Mozilla Hacks [![Frontend Masters\](https://copm.s3.amazonaws.com/4cf37b30.png)](https://frontendmasters.com/courses/javascript-foundations/?utm_source=frontendfocus&utm_medium=email)[🎉 New, Updated: Deep JavaScript Foundations with Kyle Simpson](https://frontendmasters.com/courses/javascript-foundations/?utm_source=frontendfocus&utm_medium=email)Join Kyle Simpson, author of the popular “You Don’t Know JavaScript” book series, as he deep dives into JavaScript's core mechanics like scope, closure, this and prototypes ..plus new features in ES6 and more. Frontend MastersSponsor [How to Reduce the Cost of JavaScript](https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e?utm_source=frontendfocus&utm_medium=email)An increasing reliance on JS can result in needless performance issues for our users. Addy Osmani looks at how a little discipline can help. Addy Osmani [A Comprehensive Guide to Web Design](https://www.smashingmagazine.com/2017/11/comprehensive-guide-web-design/?utm_source=frontendfocus&utm_medium=email)In this article Nick Babich focuses on the main principles, heuristics, and approaches to help create a great user experience. Smashing Magazine [Of SVG, Minification and Gzip](https://blog.usejournal.com/of-svg-minification-and-gzip-21cd26a5d007?utm_source=frontendfocus&utm_medium=email)This isn’t necessarily all _useful_ but it’s a cute introduction to some of the principles of compression using reducing an SVG file’s size as an example. Anton Khlynovskiy [Take Control of Your Scroll: Customizing Pull-to-Refresh and Overflow Effects](https://developers.google.com/web/updates/2017/11/overscroll-behavior?utm_source=frontendfocus&utm_medium=email)The `overscroll-behavior` property overrides the browser’s default overflow scroll behavior when reaching the top/bottom of content. Currently in Chrome 63+ only. Google Developers In Brief [Content Security Policy: The Easy Way to Prevent Mixed Content](https://css-tricks.com/content-security-policy-easy-way-prevent-mixed-content/?utm_source=frontendfocus&utm_medium=email) tutorial A special HTTP header can tell browsers to report on mixed content problems. Scott Fennell [How To Make a Chart using AJAX, REST APIs, and ZingChart](https://blog.zingchart.com/2017/11/16/how-to-make-a-chart-using-ajax-rest-apis/?utm_source=frontendfocus&utm_medium=email) tutorial Derek Fletes [Developing a Chrome Extension using Angular 4](https://www.red-gate.com/simple-talk/dotnet/software-tools/developing-google-chrome-extension-using-angular-4/?utm_source=frontendfocus&utm_medium=email) tutorial Jakub Kaczmarek [How to 'Disable' Links](https://css-tricks.com/how-to-disable-links/?utm_source=frontendfocus&utm_medium=email) tutorial In short, try not to, but if you have to, then… Gerard Cohen [Fun With WebGL 2.0: A Screencast Series](https://www.youtube.com/playlist?list=PLMinhigDWz6emRKVkVIEAaePW7vtIkaIF#funwithwebgl2) video An extensive on-going series digging into what you can do with WebGL. YouTube [Image Filters using WebGL](https://www.youtube.com/watch?v=yyUuW9VQYqw) video Google Chrome Developers [The 'F-Shaped' Pattern of Reading on the Web Revisited](https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/?utm_source=frontendfocus&utm_medium=email) opinion “Eleven years after discovering the F-shaped reading pattern, we revisit what it means today.” Kara Pernice [Ask HN: What Are Some Rigorous Ways to Review and Test Usability of Webapps?](https://news.ycombinator.com/item?id=15733629) opinion Hacker News [The Nine Best JavaScript Charting Libraries](https://dashbouquet.com/blog/frontend-development/9-best-javascript-charting-libraries?utm_source=frontendfocus&utm_medium=email) tools A collection of JavaScript libraries for data visualization. Anton Shaleynikov [QSS: A Simple Query Syntax for CSS Element Queries](https://github.com/tomhodgins/qss?utm_source=frontendfocus&utm_medium=email) code Tommy Hodgins Curated by [Peter Cooper](http://twitter.com/peterc) and [Chris Brandrick](http://twitter.com/chrisbrandrick) and published by [Cooperpress](https://cooperpress.com/). [Stop getting FrontEnd Focus](*|UNSUB|*) : [Change email address](*|UPDATE_PROFILE|*) : [Read this issue on the Web](http://frontendfoc.us/issues/317) Cooper Press Ltd. Office 30, Lincoln Way, Louth, LN11 0LS, UK