2nd {CSS} Conf 参会笔记

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