8
技术周刊 2020-12-10：2020 年的 CSS，我知道的太少了
source link: https://zhuanlan.zhihu.com/p/335541074
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
前端快爆
- State of CSS 2020 调查结果出炉，调查统计了开发者对一些新 CSS 技术的使用情况，同时，该调查也是一份实用的 CSS 新特性汇总：
- 已经有 73.3% 的用户使用过 grid 布局，比去年多了 20%，而 flex 布局则已被几乎所有前端开发者使用
- 一些 CSS 图形相关的属性应用已经颇为广泛：例如
object-fit、clip-path、filter，但 CSS Shapes 了解的人还不多 - 值得一提的是，调研中提到的 5 个交互相关的 CSS 属性有时很有用处，但使用率并不高，它们分别是：
- Scroll Snap：能通过纯 CSS 实现类似抖音翻页的效果
- overscroll-behavior：设置此项能防止子容器滚动到头时继续滚动会引起父级滚动
- overflow-anchor：可以通过它关闭浏览器默认的滚动锚定
- touch-action：可以通过它禁用某些浏览器原生的手势交互操作
- pointer-events：设置为 none 会让指定元素忽略鼠标的事件
- 在相关工具方面，PostCSS、Styled Components、Sass、BEM 被广泛使用，Ant Design 也进入了调查名单
- 在CSS 常用资源投票 中，评比出了 CSS 开发者最常用的网站合集
- 在尚未实现的 CSS 能力中大家最期待 Container Queries（Chrome已经在实现中了）、父类选择器以及原生的选择器嵌套
- Element UI for Vue 3.0 发布，作为 Vue 上一个版本最流行的组件库之一，Element Plus 使用 TypeScript + Vue 3.0 Composition API 重构：
- 使用 TypeScript 开发，提供完整的类型定义文件
- 使用 Vue 3.0 Composition API 降低耦合，简化逻辑
- 使用 Vue 3.0 Teleport 新特性重构挂载类组件
- 使用 Lerna 维护和管理项目
- 使用更轻量更通用的时间日期解决方案 Day.js
- 升级适配popperjs, async-validator 等核心依赖
- 完善 52 种国际化语言支持
- Angular 11 正式发布，这次主要带来的是性能提升：
- 自动内联字体：Angular 打包阶段会自动下载字体并打包进你的应用，让应用打开速度更快
- Component Test Harnesses 组件测试套件支持了所有的组件
- 让 CLI 的报告的信息更易读
- 更强大的语言服务，让模板中的信息也能得到很好的推断
- 更方便地启动 HMR 服务
- 更快的构建速度
- 实验性地支持了 Webpack 5，这有助于提高构建速度和减小打包体积
- 抛弃 TSLint，拥抱 ESLint
- 抛弃 IE8、IE9
百宝箱
- imagemaps 是一个可视化勾画图片生成热区的网页应用
- HEAD 是一个囊括了几乎所有
<head>标签内描述用法的仓库，看看你知道几个？
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK