奇舞周刊第 471 期 现代 CSS 指南 -- at-rule 规则必知必会

记得点击文章末尾的“ 阅读原文 ”查看哟~

下面先一起看下本期周刊 摘要 吧~

奇舞推荐

■ ■ ■

 现代 CSS 指南 -- at-rule 规则必知必会

在 CSS 中，存在大量的以 @ 符号开头的规则。称之为 @ 规则 (at-rule)。本文就将介绍一下除去媒体查询之外，其他有意思的且在未来会越来越重要的 @ 规则规则。

 深入浅出 Performance 工具 & API

日常开发任务中，对于性能优化或多或少会接触到一些内容，可能也参照过雅虎 35 条军规 [1] 进行过相关的性能优化，但是具体的优化结果以及实际的页面速度如何，我们怎么去看呢？以及出现性能问题了，我们如何通过现有工具进行定位&解决？也就是今天我要给大家介绍的内容主题了

 精读《迭代器 Iterable》

本周精读的文章是 Iterables 与 Iteration protocols，按照为什么需要迭代器、迭代器是如何设计的，我们还能怎么利用迭代器展开来讲。

技术实践

■ ■ ■

 CSS 实现自适应文本的头像

Ant-design 中有一个这样的头像组件，当字符串较长时，字体大小可以根据头像宽度自动调整，Ant-design 是通过 js 控制的，但是你知道用 CSS 也能实现吗

 H5 移动端调试攻略

基于目前主流场景——H5 页面内嵌在 APP 端的应用，我们基于 H5 页面承载的平台，遇到很多设备的兼容性问题【如：ios13.6.1 页面一直循环请求问题、Android5.0 + ios10 白屏问题等】，针对特殊机型，我们并不能直接通过浏览器调试出其问题所在。因此，需要我们在真实的设备场景下，采用真机调试的方法，进行进一步问题的分析。

 Chrome DevTools 中的这些骚操作，你都知道吗？

今天来分享 Chrome DevTools 中一些非常实用的功能和调试技巧！

拓展边界

■ ■ ■

 关于 Web Component

作为现代前端开发者，拥抱框架是生存的不二法则，有些人一入场便投身框架的海洋，有些人则有幸见证过变革，从原生，到 jq，到各种框架大行其道的今天。而当前，国内占领市场份额最多的要数 vue、react 和 angular，他们都有着各自的特点，这也是它们一路走来的立足之本。那么作为使用者的我们，在使用框架高效处理业务的同时，对框架本身也是需要一定程度的理解，以此来辅助我们更好的学习、了解和应用框架。

 它的出现将统一所有浏览器存储 API？！

多年来，Web 生态系统中已经发展出很多可用于存储的 API，例如 IndexedDB、localStorage 和 showNotification () 等等。whatwg 的 Storage 标准通过定义存储的持久化、容量估算、过期时间等能力来整合这些 API。它的出现会让浏览器存储发生什么样的变化呢，我们今天就一起来看一下。

关于奇舞团

奇舞团是 360 集团最大的大前端团队，代表集团参与 W3C 和 ECMA 会员（TC39）工作。奇舞团非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。