2016-12-17中国第三届CSS开发者大会

会议官网

中国 CSS 开发者大会

会议照片

会议照片

会议PPT收录

ppt——当然，上面官网的连接里面也有

演讲记录

3.14 Things I Didn’t Know About CSS

演讲者：Mathias Bynens
描述：This talk will showcase a series of obscure CSS fun facts, such as CSS syntax gimmicks and quirks, weird tricks that involve CSS in one way or another, and security vulnerabilities that are enabled by (ab)using CSS in unexpected ways.

恕我听不懂英文，只是记录了演讲者提到的例子、项目：
mathiasbynens
youmightnotneedjs
HTML Kong
HTML Kong Game
css-without-html
nojs.css
using-css-without-html
xss-game
csszengarden
evil.css

Unicode In CSS
大概是讲很多东西都可以成为css的class，最突出的就是：居然用 emoji 都可以

---

CSS Grid Layout

演讲者：大漠
描述：现在大量网页设计基于网格布局。虽说人们通常注意不到它，但杂乱无章的布局时代确实已经过去了，现在是整齐结构化的天下。无论从理论、美学和整齐来说，这样的布局都很好平衡。网格结构是所有现代网站的基础，它总能给最终用户完美无暇的设计。

从古来的table布局、现在的Web布局（流布局、定位、flexbox）引出最新的布局方式——Grid Layout（将于2017年3月份开始被各大浏览器支持）。

Grid Layout历程

• 2010年微软提出，并且在IE10实现
• 2015.3.2，chrome支持
• 2016.9.29成为w3c候选标准
• 2017.3将会被各大主流浏览器支持

Grid术语

• 网格容器（display: grid|inline-grid;）
• 网格项目
• 网格线
• 网格轨道（Grid Tracks）
• 网格单元
• 网格区域
• 网格间距

Flexbox Layout Or Grid Layout

并没有一种布局是完美的，不存 在说 只用 Flexbox Layout或者Grid Layout就可以很好地完成网站的布局。Flexbox Layout 与 Grid Layout 并不是互斥关系，取两者之长补彼此之短才能有更舒适的开发体验。

资料

Grid规范
Box Alignment规范
Flexbox规范
Flexbox教程
Grid教程
Grid案例
CSS Grid Layout Example

零散的点

• Grid Layout可以将宽和高进行等比缩放
• 就算设计师不懂Grid Layout，我们也可以使用Grid Layout来还原设计稿
• Grid Layout要真正运用到实际项目中可能还要一段时间（毕竟兼容性问题...），但作为一名前端，应该与时俱进，保持对新技术的好奇心和热情。

---

Weex

演讲者：勾三股四
描述：关于Weex的闪电分享

Weex，这个就不用多说了，结合Vue.js写Native App

零散的点

• 工作原理

  
  
  

• CSS的相关

  • 实现方式：CSS -> JSON -> Native View
  • 默认布局：flexbox
  • weex不支持css的继承
  • Support PostCSS by vue-loader
  • 像传统的使用 after 画三角形（你懂我在说什么的），在weex中不推荐再使用这种方式（因为传统的使用 after 以及定位的这种方法很耗性能），建议使用SVG代替
  • 支持Icon font

  • 至2016.12.17，weex对css的支持度（有个工具icon的表示还在开发当中）

    
    

---

Sass & CSS Design Pattern

演讲者：廖洧杰
描述：如何设计出灵活性高、易维护的网页版型，一直都是大家憧憬的目标，这次我会介绍自己使用 Sass 预处理器的前端开发流程，并分享选择 CSS/Sass 设计模式的方案策略。

题外话

一个月前看了廖老师的一套Sass教程：30天掌握Sass語法 - (1)什麼是SASS？它真的能加速我寫CSS的效率嗎？（注：要翻墙）、Sass & Susy教學手冊，然后自己结合Sass、OOCSS、BEM、SMACSS、张鑫旭的zxx.lib.css、pug弄了一套快速写静态页面的套路，暂时还是可以挺好满足写静态页面，维护代码起来也挺方便（自我感觉有点良好^_）

模式金字塔

• config
  • 全局变量、档案路径（指组织Sass文件的目录结构）
• tools——开发资产
  • Sass中的各种mixin、Function、Helper，用来帮你记住各种奇淫怪巧：
    • 文字垂直韵律
    • 垂直居中
    • 多边形图形
    • transform
    • 清除浮动
    • 限定行数
    • 各种动画效果
    • Media Query
    • SVG
    • 伪元素图形
    • 图片取代文字
    • 时间速率
    • 字型设定
    • 单位转换
    • 滚动条
    • 浏览器兼容方案
• browser——浏览器重置
  • reset的方案：meyerweb（样式清得一干二净）、Normalize（保留基本样式）
  • 不过，话说，对于reset，我一般是用到哪个标签再reset该标签的默认样式
• Base——预设样式
  • 设定网站的全局样式，例如 <a> 的字体颜色、<h1> <h2> <h3> ...的字号等。通过一开始就设定好，就不需要每次用到的时候再给特定的class。但这一步骤一定要先和设计师沟通好。
• elements、components
  • 由元素组成组件，组件构成页面
  • atomic design--原子设计模式

    • 原子组成分子，分子组成结构，结构组成模板，模板组成页面

      
      
• vendors
  • 各种插件（经典的如 Jquery plugin）
  • 对于后来迭代的样式代码，建议不要一开始就直接修改原来的文件（在不确定是否会弄死原来的代码的前提下），最好使用 inbox 的方式——也就是不改动原来的代码，在原来的代码后面引入一份新的css文件，用相同的权重对之前的样式进行覆盖。

靠谱的设计师应该考虑到的细节

• Responsive 响应式布局
• 图片格式
• 按钮等在不同状态下的表现形式（点击、悬浮）...
• 页面的反馈方式——异常情况下的提示方案...
• 元素动画速率
• web UI种类

更好用方便的设计师工具

sketch（sketch中文网）搭配其插件——zeplin，可以达到下图效果（好像是说自动出现各个元素的标注，十分方便我们前端开发者）

elements -components-pages

感觉自己还没领会这种模式，现在自己的做法虽然也有点这种模块化的感觉，不过更多倾向于无意义的命名方式，并没有想这种的，严格分开layout、components、pages。

暂时在这里收录一下，很多这些点是需要经验的积累，然后有可能某天就顿悟了。

---

SVG工程化与动画实践

演讲者：罗正烨、方潇仪、倪栩生
描述：从使用SVG的四大好处（色彩靓、质量高、体积小、动画），给你N个使用SVG的理由。

一分钟在项目中使用SVG——罗正烨

SVG的优点&缺点

• 优点
  • 色彩靓——1600万色
  • 质量高——任何缩放
  • 尺寸小——只有png的1/5
  • 动画——炫酷的动画
• 缺点
  • 实时渲染耗时

位图 & SVG

锐化（百度百科、维基百科）
SVG不单只是让图片更清晰，而是更加 “亮”

在Photoshop中不能导出SVG的作图方法

以下的方法都不能导出SVG，需要更换其它画法：

• 画刷效果用钢笔勾勒
• 层叠效果的颜色
• 对单个对象使用渐变
• 不使用智能对象
• 使用有限的自带滤镜

SVG的最佳使用场景

SVG更适合于扁平化的界面icon以及部分效果，不适合手绘的图案、复杂的渐变、用了很多位图的画板。

SVG可以轻易解决的问题

• 自动添加宽高
  
• 相对base64，体积更小
  
• 解决Sprite和REM的坑（为什么会有这个坑，以及用Sass的解决方案）
  
  • 使用svg可以轻易解决上述问题
    

SVG vs png@3X

虽然渲染相对png耗时，但是总体来说性能还是和png接近的，差异几乎可以忽略。

SVG降级方式

这里不知道为什么要给 background-image 设置 none

工具推荐

tmt-workflow
weflow
svgo
flaticon——基于SVG的icon库
iconfont——阿里iconfont，同样有基于SVG

SVG动画——方潇仪

描线动画

变形

路径运动

备注 ，Smil技术可以实现SVG的动画效果，但是以及慢慢被各大浏览器弃用，所有不建议使用这项技术

图案填充（patterns）

滤镜（filter）

工具 & 库

Greensock MorphSVGPlugin——收费
SVG Morpheus——免费

谈谈网页中的信息——倪栩生

从UI设计的角度出发，给我们讲述UI是如何更好地使用网页向用户传达“信息”。

信息在网页中的形态

• 意识形态： 元信息组成的上下文
• 实体形态： 标记组成的上下文
• 表现形态： 样式组成的上下文

标签的语义化

• 例子：

  • <b> 上下文中的关键词，侧重指示
  • <i> 上下文中不同的语气，属于隐式强调
  • <strong> 加重强调
  • <em> 侧重内容很可能发生变化

• 以微信聊天记录来讲述HTML标签的语义化

  
  

• 标签的语义化

  • 让你不再需要纠结于使用什么标签来组织内容
  • 更利于HTML文档的阅读
  • SEO

• 具体各个标签的语义，讲师说在W3C标准中有写，详细的没找到，有同学知道吗？

---

从矩阵走入 WebGL 世界

演讲者：陈剑鑫
描述：CSS给大家带来了美妙绝伦的前端世界，但是大家是不是完全了解她的美呢？运用CSS3的transform我们可以做出各种灵动俏皮的网页，但是浏览器给我们带来的绚丽不仅仅是CSS3哦。这次我会从美丽的CSS3开始，和大家一起感受和创造多彩的前端世界。

总结一下

讲师主要演示了使用WebGL可以做到的各种炫酷效果（3D旋转、变化，AR技术，Web's VR）。另外，跟我们介绍了矩阵的各种用途（感觉需要回去恶补高数和线性代数）

零散的点

• 如何描述旋转
  • 矩阵 -> matrix3d
  • 欧拉角 -> rotateX | Y | Z （围绕自己X、Y、Z旋转）
  • 四元数 -> rotate3d （描述物体围绕任意一个轴的旋转）
• 矩阵的乘法不符合变换律
  • tip：“从右往左理解”
    在线Demo：
    transform: rotate(1turn) translateX(400px); ——从右往左看，先进行平移，在平移的过程中进行旋转
    transform: translateX(400px) rotate(1turn);——从右往左看，先进行旋转，在旋转的过程中进行平移

---

CSS animation && CSS: The secret drawing tool

演讲者：Wenting Zhang
描述：CSS可不仅仅是简简单单的布局语言，她还是绘画和动画双料小能手！512个极简风格的图标都全部用CSS实现，然后再细细打磨动画。来自Adobe Typekit的用户体验设计师Wenting Zhang将细细讲述CSS的隐藏绘画功能和高级动画技巧。漂亮极简的CSS icon设计与描绘，让CSS进阶学习不再枯燥。那些不广为人知的CSS高阶技巧，让网页界面设计活起来！

资源

css-mono ——一款很好看的字体（其github仓库）
讲师Twitter
讲师Github

现场显示前置知识

• 除了 <input> 一般的HTML标签都具备 before 以及 after 伪元素；
• box-shadow 可以定义为任意颜色，并且，同一个元素可以投射出任意多个不同box-shadow；
• 矩形的四个顶点可以有不统一的 border-radius ，我么可以一一分别定义。并且，每个顶点的两条边（指X方向和Y方向的两条边）都可以有不同的border-radius。关于border-radius可以参考：CSS3的圆角Border-radius、border-radius；
• 矩形的四条border，不一定永远都是一个长条矩形的形状。甚至，它们在正常情况下是一个梯形的形状，在我们改变这条边相邻的另外两条边的参数时，它的形状会相应得到改变。当我们在这条边的两个顶点加一些border-radius圆角值的时候，这个形状还会有更奇异不可预测的形变。我们可以通过这两个性质，探索出很多意想不到的形状。
  

现场展示Demo

• 画胡子

• 其前置知识（除了上述的几个之外，还补充了动画）

  • CSS变量：深入学习CSS自定义属性（CSS变量）、CSS中的变量使用详解
  • currentColor：深入学习CSS自定义属性（CSS变量）--第一个CSS变量