《第五届中国CSSConf开发者大会》参会总结

时间  2021-08-12
标签 css html 前端 css3 git github web chrome 浏览器 ruby 栏目 职业生涯 繁體版
原文   原文链接

前言

对于我来说，虽然作前端那么多年，但对 CSS 的探索很是少，不少 CSS 知识仍是在毕业以前积累下来。揣着一本《精通CSS:高级Web标准解决方案(第二版)》（如今出第三版了，这是我在 CSS 道路上的启蒙书）在前端路上走了这么几年。此次怀着对 CSS 的伪热爱，狠了狠心买了一张 CSSConf 的票上了车。


我我的常常会参加一些前端的会议，参加大会主要是能看看业界都在用什么方案，处理一些什么问题，虽然这些在会后都会有分享，可是实际体感仍是不同的，其实这也不是最主要缘由，更重要的是能在会议上认识一些朋友，相互交流，听一些解决方案和他们遇到的问题，或许之后就是同事了。css

开场

开场的时候，严肃而又诙谐主持人，周裕波，作了开场白，描述了这多是最后一次办 CSSConf 了，其实我是很不解的，只是说行业里有一些不一样的声音，并无具体说明缘由，其实会后我问了一下他，为何之后再也不办 CSSConf 了，他回答找到好的主题比较难，你们参会意愿不强。html

后面的议题就正式开始了。前端

新时代 CSS 布局 - 陈慧晶

Slide：www.chenhuijing.com/slides/53-c…
大会第一个议题正式开始以前，讲师上台准备 Slide，我就想这个讲师好娘啊，难道是女的么？我还发消息给朋友，说这个讲师好娘哦，朋友说：“她是个女的吧！”哈哈，真是误会了误会了，跟陈慧晶老师远程道个歉。陈慧晶老师曾经是个专业篮球运动员，后来慢慢的转向了 CSS 技术领域，在布局和中文排版方面研究很是深刻。css3

陈慧晶老师主要讲解了一些关于最新的 CSS 布局方面的知识，细节讲的比较多，讲解了一些属性，并作了一些演示，让咱们可以很是直观的感觉到各个属性的效果。git

CSS 显示模块

陈慧晶老师讲到，之因此纵向比横向难排是由于，网页一开始是为了展现文字所产生。随着浏览器的发展，才慢慢开始支持弹性盒子、网络布局、盒模型。github

目前已经有不少关于布局的属性，一般布局咱们是使用配置 display 属性，这个属性有不少可选的值，分为内部显示模型和外部显示模型。
web

image.png

CSS 的 display 属性值对应不一样的显示类型，下面是我从规范里面复制来的：chrome

后面讲了一些 CSS flex 布局的具体用法和现象，这些在网上就能够学获得，不过我感受 grid 布局很神奇。flex 和grid 会结合使用，小孩子才作选择题，成年人全要了。浏览器

之内容为主的尺寸计算方式

image.png

灵活性尺寸

这种布局方案比较灵活，能够优先使用某个尺寸，达到某个临界点才会变化，或者固定某个尺寸不变化。描述起来可能有些困难，能够参考陈慧晶老师的 Slide，里面有视频。ruby

旧版浏览器的支持

旧版浏览器使用 @supports() 方案，能够查看当前浏览器是否支持该属性。

最后陈慧晶老师问了你们一个问题，咱们作的在全部浏览器上显示效果必须是同样的吗？答案是否认的，不一样的浏览器显示的样式可能不同，咱们能够针对不一样尺寸的浏览器进行不一样的布局，固然咱们也能够针对不一样 CSS 支持度的浏览器进行不一样的降级处理。

剖析css-tricks新版，为你所用 - 大漠

第二个议题是大漠老师的，大漠老师是 www.w3cplus.com 的站长，著有《图解CSS3：核心技术与案例实战》。他的议题是对最新版的 css-tricks 进行剖析，看看最新版 css-tricks 都用了哪些有意思的东西。大漠老师也提到了一些无障碍化的事情，讲到 css-trickers 使用黑色或许是出于对无障碍化的考虑，其实这一块也是目前业界比较关注的一方面。大漠老师已经将演讲内容发表到本身的博客：www.w3cplus.com/css/css-css…，感兴趣能够到这里来看一下。下面，我可能会根据我本身的理解来拓展一些其余的想法。

SVG的使用

在 css-tricks 中使用 SVG 比较多的地方是图标，大漠老师从性能的角度分析了，图标从小图片到 CSS Sprites 而后到 icon-font，后来使用 SVG，到 SVG Sprites 的演变，分析了每种方案的优劣。
QA环节有一我的问，如今 SVG 这种格式出来之后，还有其余格式的图片，是否其余格式就不须要再用了，SVG和WebP哪一个好？其实，每种图片格式解决了不一样的问题，SVG 是一种矢量图，解决一些简单的几何图形能够解决的图像表达问题，WebP、JPG、PNG等是一基于像素造成的位图，能够展现一些颜色和图形比较复杂的图像信息。其实他们的定位不同。

滚动特性

滚动条样式

在不一样的浏览器或者系统版本下，滚动条的样式实际上是不一样的，滚动条样式在几年前就已经可使用了，只不过须要加 -webkit- 前缀，因此目前只支持 chrome 和 safari 浏览器，目前不支持手机上的 safari。

滚动捕捉

好比在 banner 轮滚这种场景下，咱们但愿自动停到对应的位置，大漠老师还举了一个特别有意思的人物换装的demo。

自定义属性

大漠老师屡次强调，这叫作 CSS 自定义属性，不叫 CSS 变量。在 LESS 和 SCSS 中，也实现了相似的概念，可是在 LESS/SCSS 中，这真是一个变量，先定义了一个变量，在后续的 LESS/SCSS 中使用，可是这样的问题在于，在编译之后，这些变量对应的值就固定到了 CSS 代码中，不会再“变”。

例如：

/* SCSS */ 
$color: red;
a { color: $color; }
复制代码

编译后生成的代码

a {
    color: red;
}
复制代码

因此，网页上咱们没法对 $color 进行修改。

CSS 自定义属性和一些普通 CSS 属性同样，能够被继承，也有做用域的概念。

<body>
  Hello,
  <div class="box">
    CSS
    <span>World!</span>
  </div>
</body>
复制代码
body {
    --color: red;
  color: var(--color);
}
.box {
  --color: blue;
}
span {
  color: var(--color);
}
复制代码

demo 地址：codepen.io/fanmingfei/…

body 的 --color 属性red，而且 body 的 color 属性设置成了 var(--color)，因此，body 的 color 属性是 red；

.box 没有设置 color，因此继承了 body 的红色，可是设置 --color 为 blue，因此 .box 里面使用 var(--color) 获取到的是 blue。

条件判断

基于自定义属性和 CSS 的一些特性，咱们能够作到之前 CSS 作不到的一些条件判断的能力，例如条件判断，实际上是基于自定义属性的变化引起的状态变化，后面张鑫旭的议题中也有用到这一点。
具体能够参考大漠老师这篇文章如何经过CSS自定义属性给CSS属性切换提供开关。

JS in CSS (Houdini)

实际上是基于 CSS Paint API 来定义 CSS 自定义属性。使用一个相似 Canvas2D API 的上下文，能够直接绘制图形，大漠老师的demo是将 JS 代码写在了 CSS 自定义属性后面，而后用 JS 去获取了 CSS 自定义属性，拿到了这个方法的字符串，而后用 eval 去执行了，这样显得像是在 CSS 里面写了 JS。不过这样写也是一个思路，由于咱们能够直接在属性后面面定义属性的样式，看起来也是合理的，可是若是用来渲染的 JS 量比较大，并非一个好的方案。其实咱们能够直接将用于绘制的 JS 代码写在 JS 文件中。

有了 CSS Paint API 咱们用 CSS 作的事情有能够变得更多了，这是一个很使人兴奋的 API！

其余

看到这里，大漠老师再三强调的，没有 CSS 变量，只有 CSS 自定义属性，是很是合理的。咱们实际上是定义了一个 CSS 属性，而且给于它一个值，真正用到它的时候才是真正描述这个值去作什么事情的时候，用 var() 函数，它就变成了一个变量，用 paint() 函数，它就变成了 CSS Houdini.

Web Layout

陈慧晶老师全篇都在讲 Web 布局，大漠老师讲了一些 Web Layout 相关的一些属性和函数，而且指出了一些关于Web Layout 的一些误区和社区争论。

混合模式和滤镜

简单讲解了一些滤镜的效果和一些属性，并且这些功能已经能够在线上跑了，我在去年项目中已经用过 CSS 滤镜了。

其余(^_^)

最后讲了一些零散的点，有一些在项目里均可以用到，咱们的项目也有用到过~并且都是一些小技巧，挺有意思的。

CSS创意与视觉表现 - 张鑫旭

张鑫旭老师，常常会在搜 CSS 问题的时候搜到他的博客，张鑫旭-鑫空间-鑫生活，他写文章有时候特别幽默，好比《理解 CSS3 transform 中的 Matrix - 矩阵》中。

image.png

张老师此次分享了不少的很是实用的案例。

image.png

CSS 属性放在那里，具体怎么用？有些人真的可使用一些属性加上一些思惟作出很好的效果，这个多是要看天分的。此次大会混入了一个产品经理，她提了一个问题，如何提高前端的这种创意思惟，张鑫旭老师给出的答案是，能够招聘新的符合你要求的前端，这种创意不是每一个人都有的，业界有不少优秀的做品已经出来了，你们不须要本身去研究，直接用现有的就好。

张鑫旭老师的 Slide 里面每一个效果都有demo，感兴趣的话能够直接下载查看 《CSS 创意与视觉表现.pdf》

其实有不少实现布局、特效的技巧，都是一些大师发明出来的，咱们能够在项目中使用这些技巧，CSS 提供了不少属性，达到效果的方式不是惟一的，咱们在平常工做中，其实能够多去思考这个效果如何实现，可能会发明出本身的奇淫技巧。

CSS 生成艺术 - 袁川

Slide: yuanchuan.name/talk/genera…
看了这个议题，非常震撼，袁川老师把浏览器当作了他的画板，CSS 当成他的画笔，生成了不少震撼的艺术做品，整个议题过程当中，会场屡次响起掌声。具体能够看 Slide，也能够看他的Codepen。

几张图片

image.png

image.png

image.png

image.png

image.png

上面这两张图，都是用逗号作的。

image.png

CSS 有着自然生成树的特性。

现场视频

放一个现场的视频感觉一下，在文末大会官网上能够看所有视频。
cssconf.mp4

你不知道的五个 CSS 新特性 - 勾三股四

勾股介绍了几个 CSS 的新特性，感受实用性没有那么好，还有不少在草案阶段。勾股的 Slide 地址：jinjiang.github.io/slides/five…

float

float & CSS Shapes

咱们使用 float 能够进行文字环绕图片、多列布局，可是如今咱们已经不多用 float 了。你们已经开始使用更新的布局方案。可是若是想实现图文混排 float 仍是少不了的。

image.png

若是想让文字根据图片内容进行排版，单单只用 float 是不够的。须要配合 CSS Shapes 实现。

其余效果

image.png

image.png

page

网页里面有个打印的功能，能够针对打印状态下的页面进行样式设置，里面拓展了一些和打印相关的属性。

image.png

更多内容能够参考 www.pagedmedia.org/

scroll

勾股也讲了一些滚动条相关的内容。

font

Adobe, Apple, Google, Microsoft 4大巨头企业联合宣布了全新的字体规范Variable Font，字体在设计过程当中能够提供出一些参数，CSS 中能够对参数进行配置。

viewport

之后可使用 CSS 来设置页面的 viewport 啦！

CSS动画你应该知道的10件事 - Brian Birtles

这个议题提到了关于 CSS 动画的一些知识。
中文版Slide：birtles.github.io/cssconf2019…
英文版Slide：birtles.github.io/cssconf2019…

image.png

我都不用去总结啦！对某个点感兴趣的话，能够看一下他的 Slide，每个点，都对应了一些解释和实践。

CSS TIME - 陈在真

陈在真老师的 CSS TIME 这个话题，介绍了一些他作了不少 CSS 动画后总结的一些方法论。后面我和他有过一些交流，我在想，是否能有什么工具能够按照他的这种方法论产生的规则设计动画，直接产生线上可用的 CSS 动画效果，其实这也是从工程化上要考虑的事情。

简单案例

使用了几个简单的案例，总结出在作 CSS 动画时候，如何让多个动画联动起来，如何实现循环时间统一。

讲了一个复杂案例的实现，他作的动画不少都是他本身来设计的，因此在实现动画的设计理论上也有一些介绍。

各类设备下的时间

在不一样的设备下，好比 pad、手机、穿戴设备，用户对时间的体感不一样，一个动画使用的时间多是不一样的。

image.png

后语

这里只是按照个人理解和记忆总结了一些在大会上的所见所闻，列出了各位讲师分享的一些点，若是你们对哪些点感兴趣能够深刻到 Slide 中学习。大会视频后续也会放出，能够进入大会官网中国第五届 CSS 开发者大会查看议题、Slide 以及视频。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程