2nd {CSS} Conf 参会笔记

CSS
Catalogue
  1. 1. Conf Info
  2. 2. 手机淘宝CSS实践启示录
    1. 2.1. 屏幕
    2. 2.2. 图片
    3. 2.3. 团队约定&规范
  3. 3. W3C CSS Checker: The Next Generation
  4. 4. 企业CSS应用
    1. 4.1. Flaming Cloud
  5. 5. CSS预处理器
    1. 5.1. MCSS
    2. 5.2. CSSNext
    3. 5.3. 后处理器
  6. 6. Web高性能动画
    1. 6.1. 渲染
    2. 6.2. 性能
    3. 6.3. Layout
    4. 6.4. Paint
    5. 6.5. touch-action
    6. 6.6. Tools
  7. 7. 重拾CSS的乐趣
    1. 7.1. CSS图标
    2. 7.2. CSS books
    3. 7.3. Demo1
    4. 7.4. Demo2
  8. 8. 移动下的css
    1. 8.1. viewport unit
    2. 8.2. rem
    3. 8.3. iconfont
  9. 9. 中文排版需求

Conf Info

中国第2届CSS开发者大会

上海虹桥国际会议中心

2015年8月8日

在w3ctech上面报的名，跟上次的前端峰会一样举办地在上海，于是拿到邀请后就买了高铁票。是当天早晨8点到的上海，赶到会场已经是9点了。在会场外拍了几张照片，抽个奖，签个到，然后就进去找座位。这次的人超级多，有300多吧。

活动的发起人挺啰嗦。然后每个嘉宾分享的东西又非常多，导致午饭晚点，而且没有午休时间。于是下午忘了在谁的分享上，睡了一会儿。

很多大牛也都到了场。不过大牛只是大牛，认识再多大牛，自己不够牛逼，还是跟自己没有任何鸟关系。

quote

会议结束了照例有人在知乎问体验：参加2015年8月8日上海第二届 CSS Conf 大会是个什么样的体验？。

而我也跟风，认真回忆了一下当天的场景，回答了几句：我的回答。

手机淘宝CSS实践启示录

演讲者：勾三股四（赵锦江）

屏幕

rem在某机型上计算有误（市场份额不可忽略？）

《灵活web设计》（Flexible Web Design）

lib.flexible :

Responsive：宽度往往容易解决，但高度如何设置breakpoints。

图片

前端图片处理的Workflow（一张图）

这三个相互约束的要求：

  • 更小的图片尺寸
  • 足够大的展现尺寸
  • 更高的图片质量

npm px2rem，有gulp的插件

gulp: postcss

webpack

团队约定&规范

CSS Next

阿里巴巴内部自己基于gitlab搭建了一个git服务器，使用其管理内部的工具、项目代码。

W3C CSS Checker: The Next Generation

by Mike Smith

CSS校验器

Question: Why check your CSS?
Answer: To catch mistakes.

  • 语法错误
  • 属性名字书写错误
  • 值错误

http://validator.w3.org/mobile/

W3C CSS Validator 这个验证器太古老了，2002年建立的。并且不怎么维护了（服务器是用Java写成的）。

https://csschecker.w3.org 尚未启用，现在可以用的是：

github repository

Tab Akins https://github.com/tabatkins/parse-css

这个新的CSS解析器将使用Rust来实现。由Mozzila主导，其浏览器的引擎也即将由Gecko更换为Servo。

Rust生来是为并发而设计的。

企业CSS应用

展新，蚂蚁金服－技术体验部

  • 2010, 6000行，100KB，这时候就出现维护问题、可持续开发问题了。
  • Alice V3, 2011
  • Alice UI, 2013, 模块化命名，开始大量支持CSS3，并且逐步抛弃IE6/7
  • Flaming Cloud, 2015, 基于Angularjs的企业应用解决方案
  • Ant Design, reactjs

Flaming Cloud

动画类型

回振

属性优先

variables: variables
core: base, color, layout, iconfont, animation
components: button, modal, dropdown, message, …

CSS预处理器

网易杭州－前端技术部，郑海波

这货自己搞了个预处理器：MCSS

PPT地址

CSS缺点：缺乏一种“抽象”能力

SASS是从Ruby的生态圈里发展出来的。

LESS不基于缩进，不简洁，但是安全。

sass -> less, stylus, scss -> postcss, rework

  • postcss
  • rework

MCSS

若干要点：

  • postcss正逐渐成为预处理器过程中的jQuery
  • 嵌套建议：最多不要超过3层，否则又是噩梦。
  • 变量名只是在原文件里出现，编译后并不存在，所以命名应当足够明确、不应使用简写。
  • 必须统一管理z-index。
  • less没有Function，一大败笔。

CSSNext

Use tomorrow’s css syntax to write css.

后处理器

postcss

Web高性能动画

360奇舞团，黄薇

渲染

浏览器的渲染树（Render Tree）

重排：layout
重绘：paint

性能

CPU vs GPU

串行处理与并行处理的区别。

Texture, is just bitmap.

将元素设为translate(0, 0, 0)，会促使显卡将其作为一个单独的layer，从而提高动画、显示性能。

js实现的动画与css transform动画的流程对比。

requestAnimationFrame usage:

1
requestAnimationFrame(callback);

Layout

1
2
3
4
5
/* 触发1次浏览器重排 */
var element1 = document.querySelectorAll('.move');
element1.style.height = '100px';
element1.style.height = '100px';
element1.style.height = '100px';
1
2
3
4
5
6
/* 触发两次浏览器重排 */
var element1 = document.querySelectorAll('.move');
element1.style.height = '100px';
 
var element2 = document.querySelectorAll('.active');
element2.style.height = '100px';

读取元素的尺寸属性，也会触发Layout。

Paint

background-attachment，会带来比较严重多浏览器重绘。

减少不必要的重绘

  • Gif: should be set display: none; if not needed because it will trigger paint all the time.
  • position: fixed也会产生重绘，will-change: transform;，则将该元素至于单独的图层，因此可以避免性能损耗。

touch-action

Tools

chrome://tracing

重拾CSS的乐趣

百姓网，

关注CSS本身

http://www.cssmagic.net

CSS图标

one-div.com，只使用一个div来实现、制作的图标。

fileicon.css

CSS books

  • 《CSS权威指南》2006
  • 《精通CS：高级Web标准解决方案》2006
  • 《CSS Secrets》Lea Verou, 2015

Demo1

outline, outline-offset

box-shadow, 可以接受4个尺寸参数，表示扩张的尺寸，例如：

box-shadow: 0 0 4px 5px #333;

Demo2

圆润的标签页

渐变

线性渐变可以制作进度条。而放射渐变可以制作内凹的圆角。

移动下的css

1号店，施丰丰

viewport unit

rem

1号店统一使用rem作为字体大小（font-size）的单位。

iconfont

photoshop sketch, 制作图标？

中文排版需求

刘庆，设计师

www.typeisbeautiful.com

Typography，字体排印，版面设计，字体排版。

宜家的说明书，没有任何文字。

unicode，2015年6月17日，Unicode v8.0，中日韩越统一汉字

汉字常用印刷字体：宋体，黑体，楷体，仿宋

思源黑体, Source Han Sans

2014年红星奖颁给了一个字体，楷书

一份报纸里面，这四种字体几乎是缺一不可的。

汉字与英文之间要不要加空格？加的话，这算是内容的空白，还是样式的空白？

但这并不会成为推荐规范，只是需求而已。

Share