grid-template-areas is one of my personal favorite parts of CSS Grid as it lets you specify layouts in the form of strings of text that visually represent the outcome you want. This is a thorough introduction to the idea.
A great resource from CSS Tricks with a lot to digest here. Starts with the basic implementation of both but quickly moves into accessibility, UX flourishes, and styling.
Unless you are some sort of CSS gradient expert, you are going to learn something here. Avoiding repetition by not having to repeat colors anymore is a huge win, IMHO.
Last year we mentioned the Text Fragments spec which will let you link directly to specific content within Web pages that doesn’t have an associated anchor element.. and Chrome now supports it although the formatting of the fragment name isn’t particularly elegant.
来源：Chrome Platform Status
An interesting new spec from the W3C (based on the same concept as MutationObserver or IntersectionObserver) that lets you observe for changes to an element’s size.
This is a step-by-step tutorial based on a concept from the old CSS Zen Garden site: Creating different designs via CSS while never touching the markup.
A technical writeup of the key things to consider performance-wise when building a front-end.
介绍了如下四种方法：Web Worker 中使用无限同步循环、CSS 动画、SVG 标签、Web Animations API。
Interesting alternatives for
Creating a simple SVG-based map is one thing, but if you want the best performance, leaning on WebGL and your GPU is a good option. This tutorial covers how to approach moving from SVG to WebGL by way of Three.js.
This goes beyond your typical image gallery with an interesting 3D effect. Lots of bits and pieces here to learn.
The Fetch API didn’t have the ability to abort a request in its early days (unlike
XMLHttpRequest) but AbortController and AbortSignal can help you get the job done on all modern browsers.
来源：Ganapati V S
A neat trick for applying CSS3 transforms (rotating and skewing elements) to your backgrounds.
Help your visitors know which links they already visited. I can’t really argue with this.
You can (but shouldn’t) change how people copy text from your site.
If you’re reading this newsletter you’re probably building your own pages from scratch or with a framework, but have you ever wondered just how good pages produced by tools like Squarespace or Wix are?
From the creators of many a popular IDE comes a free and open source font specifically aimed at developers. I admit I’m a sucker for a monospaced font on the Web, but your mileage may vary.
A simple online tool for creating elements matching the new design trend/fad.
There are two nifty tools here, a type scale calculator, and a CSS generator - both designed for scaling type and space without breakpoints.
来源：James Gilyead and Trys Mudford
This is really cool. Run this code at a console on a ‘busy’ Web page with lots of DOM changes and updates and you’ll be able to ‘hear’ them taking place.
These sorts of quick online tools sometimes seem a dime and dozen but this is so quick and simple, I had to recommend it.
The popular accessibility testing toolkit is now at 3.5. Includes a better color contrast test, several new rules, bug fixes, and Danish localisation.