3 css 奖品出现弹出动画_第五届CSS开发者大会参会总结

   

 中国第五届CSS大会   

中国CSS大会

中国CSS大会是前端领域CSS方面的业界大会，由W3C、前端圈公众号、w3ctech主办。

此前已举办四届CSS大会，今年是第五届，据主办方介绍，第五届CSS大会也可能是最后的一届CSS大会。  

会议于2019年3月30号在深圳市科兴科学园国际会议中心举办，会议邀请了业内著名讲师Brian Birtles、陈慧晶、“大漠”、赵锦江、张鑫旭、袁川等人，分别进行了关于CSS布局、css-trick工具网站、CSS创意与视觉表现、CSS生成艺术、CSS新特性、CSS动画等主题的精彩介绍。

研发中心同事参加了第五届CSS大会，并将会上多名业内著名讲师介绍的内容进行整理分享。

以下是参加第五届CSS大会的总结，相关培训资料已上传至文档库，路径：研发中心文档库-07研发知识共享-研发中心IT牛人集训-外部资源培训-CSS开发者大会。

此次CSS大会的分享课程将安排在5月底的部门公开课，感兴趣的同事请留意课程通知。

CSS布局

CSS布局主要是陈慧晶老师分享，其内容是关于CSS渲染过程以及两种布局方式flex和grid的比较。

1、CSS布局主要包括内部显示类型和外部显示类型两方面的作用，内部显示类型定义了元素内子元素的布局方式；外部显示类型则定义元素怎么样参与流式布局的处理。

2、Flex布局是目前比较成熟的CSS布局方法，兼容性较好，在一维布局的场景下非常实用。Grid布局是比较新的CSS布局规范，目前兼容性不如Flex，但是由于它在二维布局情境下使用起来非常方便，所以预计会在未来的CSS布局方法上成为霸主。Flex布局和Grid布局不是二选一的关系，两者之间应该根据实际结合起来使用，才能发挥出最大的效果。

3、介绍Grid布局里面fit-content函数的使用，可以实现灵活的伸缩排版。

Flex布局的应用举例

CSS布局经常是前端开发者头疼的工作，在我们日常开发的过程中会发现编写CSS的样式花费的时间比起处理用户交互和以及页面逻辑处理的时间还要长。

早期CSS元素属性是为了文字布局而设置的，所以我们日常开发过程会遇到纵向的排版比横向的排版还要难，作为一名前端人员，在日常的工作开发过程中，会经常接到开发需要开发一个页脚置底(Sticky footer)的页面任务，原来的解决方法可能需要借助JavaScript来不断监听屏幕容器的大小以及计算内容的高度来实现的。

但是@陈慧晶老师分享的新时代CSS的新布局模型Flex/Grid能很好的解决纵向布局的问题。利用Flex弹性布局能通过纯CSS实现一个页脚置底的页面，而且编写的过程也很简单。同时陈慧晶老师还给我们分享了独特的灵活性尺寸(Flexible sizing)，能避免我们平时用一致的伸缩率(%)遇到的问题。

Flex和Grid的属性对比

SVG

SVG是目前web图标最好的显示格式。可以借助标签和标签，将所有的SVG图标拼接在一起，实现SVG Sprites的技术。

SVG的优势：

1.体积小，节省空间，借助工具可以进行svg图标合并，在性能上可以得到优化。

2.可以直接使用CSS自定义图标颜色。

3.兼容性较好。

我司的业务产品前端开发以移动前端开发为主，目前公司vue框架对svg的使用上也不少实践。基于svg的良好兼容性和开发便捷性，小图标或者图片展示都应该尽可能以svg为主。开发人员应该要有这方面的意识，设计师在进行界面元素切图输出的时候也应该往这方面靠拢。

滚动捕捉

除了SVG Sprite，“大漠”老师还分享了“滚动捕捉”这一个很有实用价值的CSS特性。  

滚动捕捉(Scroll Snap Points)为我们提供一个流式精确的滚动体验，可以实现Swiper的效果。    

scroll-snap-align、scroll-snap-destination和scroll-snap-coordinate和scroll-snap-type是其中较为重要的几个属性。

CSS进行图片处理小技巧

1.CSS混合模式mix-blend-mode和滤镜filter

2.clip-path

3.background-clip

4.object-fit

5.box-decoration-break

CSS图片处理用途在一些杂志和图片类网站上用途较广，可以创建出丰富多彩的图片布局。企业官网作为公司门面本来应该尽可能多的使用炫酷的界面，但是公司官网由于需要兼容低版本的IE浏览器，其他业务产品由于以用户输入交互为主，所以这些CSS属性使用场景不多。

CSS动画

CSS动画的应用场景相对大一些，小到普通网页页面切换动画，大到营销活动H5游戏都是CSS动画的舞台。

CSS动画最基础的属性就是变形(transform),利用该属性完成web元素在不同方向的伸缩。通过transitoin属性定义伸缩动画的动作时间、实现过渡效果。  

在MVVM框架中，由于virtual dom的实时响应，dom变换是很频繁的局部刷新，在React和Vue这样的MVVM框架中使用CSS动画是比较难处理的，推荐配合一些CSS动画库去使用。  

CSS动画和js动画相比，他不需要额外添加js库，在性能表现更好。

CSS动画事件

CSS动画的时间属性主要包括动画周期、动画开始时间两个属性。来自腾讯的前端工程师陈在真分享了一些CSS动画的最佳实践，包括动作切割如何才能实现最逼真的动态效果；进场动画应该怎么设计才更加符合人的心理；移动端的动画过度时长通常在300ms内，CSS动画在不同的屏幕上应该有不同的动画时长，大屏幕时长设置更大一些，小屏幕时长设置更小一些。  

在CSS动画设计中，开发者新增应该始终关注隐性存在的时间轴，以时间轴的角度去设计动画，包括动画周期设置、开始时间设置。通过不同元素动画的时间差设置，可以使得整个页面的动画联动更加生动，贴近真实。

感悟与总结

本次CSS大会邀请的分享嘉宾都是业界比较优秀的一线开发工程师以及领域专家。他们分享的内容有一些在实际项目中非常有实用价值，比如CSS布局、SVG Sprite技术、CSS动画等等。还有一些嘉宾分享了非常酷炫的CSS动画工具，比如袁川老师分享的工具“css-doodle”。不管是实用价值非常高的CSS属性应用分享还是可以称作真正的“CSS艺术”炫酷艺术作品分享，背后都是对CSS属性近乎极致的使用。这说明CSS的学习其实是对规范的深入理解以及对CSS属性的灵活应用。首先要有对规范的理解，才能做到对CSS的极致应用。会上张鑫旭老师关于CSS视觉艺术实现的技巧分享则说明了当你对CSS属性的规范理解透彻之后，有些时候还需要再加上一些灵活使用，通过一些换位的方式，这样才可以实现各种看起来奇奇怪怪难以实现的视觉效果。  

想要通过css实现某种效果，方法由很多，可能这些方法最后呈现出来的东西表面上没什么区别，但实现的方法却有强弱之分，而这个往往与开发者的思维和创造力密切相关。围绕着思维与创意，张老师从各种特别的角度，通过一些案例展示如何通过一些平平无奇的属性，借助一些创意的方法(如错位、叠加等)去绘制一些不规则图案，这些方法往往能减少代码量，甚至可以替换ued图片减少页面渲染成本。

CSS可以深挖的东西非常多，但是在目前的环境下，由于各种UI库的存在，大多数工程师都忽略的CSS基础的学习，导致CSS功底薄弱。其实，在框架类库大行其道的今天，这些底层的技术规范和原理，恰恰是前端工程师最需要去夯实的东西。知其然还要知其所以然。  

整理人员｜胡国治、王泽林、方兆源、梁曼晴、邓汉玲