现代 CSS

2017 Amsterdam CSS Day

作者：大漠 日期：2017-07-20 点击：1689
CSS
会员专栏

特别声明：如果您喜欢小站的内容，可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法，欢迎发送邮件至: airenliao@gmail.com!或添加QQ：874472854(^_^)

2017 CSS Day于6月15日和16日在Amsterdam举办，到今天已经过去一个多月了。虽然说是CSS Day，但这次话题并不仅仅是有关于CSS方面，这次大会主要分成两个方面的话题：Browser API Special和CSS。第一天主要是有关于Browser API Special（6月15日），第二天主要是有关于CSS的（6月16日）。每个主题各邀请八位世界级的分享嘉宾来分享。比如熟悉的@Philip Walto、@Rachel Nabors、@Chris Coyier、@Rachel Andrew和@Jen Simmons。最近也看了大会相关嘉宾分享的内容，整理一下分享给国内的爱好者。希望大家感兴趣。

视频

上面的视频只是大会当天的一些花絮，最终嘉宾分享的视频都会在这里向大家展示。不过可能需要一段时间。不过你对以往有关于CSS Day分享的话题感兴趣的话。也可以在这里获取到。

分享主题

两天时间分享16个主题，真多。这些主题有些是自己熟悉的话题，比如@Rachel的Web Animations API、@Philip Walton和@Tab Atkins分享有关于Houdini相关的话题、@Gregor Adams分享的CSS 自定义属性（CSS变量）、@Rachel Andrew分享永恒不变的话题CSS Grid Layout以及@Jen Simmons分享的Writing Modes等。当然也有一些自己接触较少的话题，比如@Ruth John分享的Web Audio、@Ada Rose Edwards分享的WebVR之类。总的来说，有关于CSS的话题，大部分是以前听过或者接触过的。如果从未接触的同学，可以花点时间了解，因为这些分享嘉宾都是世界顶级的专家，他们可以说代表这个行业的风向标。接下来简单的聊聊相关的话题。

Browser API Special

Browser API Special中有八个主题，主要都是围绕浏览器当前或未来的一些API。这些API如何工作？他们存在什么问题？我们还能期待浏览器未来能为开发者提供什么能力的API等。这里面有几个自己关注的话题，而且国内也分享的比较多。比如PWA(Progressive Web Apps)。

PWA by @Patrick Kettner

PWA是近来最热门的Web技术之一，也被称为下一代Web应用模型。Progressive Web Apps 是结合了 Web 和 原生应用中最好功能的一种体验。对于首次访问的用户它是非常有利的, 用户可以直接在浏览器中进行访问，不需要安装应用。随着时间的推移当用户渐渐地和应用建立了联系，它将变得越来越强大。它能够快速地加载，即使在比较糟糕的网络环境下，能够推送相关消息, 也可以像原生应用那样添加至主屏，能够有全屏浏览的体验。

@Patrick Kettner的PPT，花了166页来介绍。分享了Service Worker、AppCache、Web Application API、Web Workers、Web App Manifest、Bluetooth、IndexedDB等相关的技术。

感觉信息量特多，依旧不了解PWA，是吧。简单点说，PWA具有以下几个特点：

  • 渐进式：适用于选用任何浏览器的所有用户，因为它是以渐进式增强作为核心宗旨来开发的。
  • 自适应：适合任何机型：桌面设备、移动设备、平板电脑或任何未来设备。
  • 连接无关性：能够借助于服务工作线程在离线或低质量网络状况下工作。
  • 类似应用：由于是在 App Shell 模型基础上开发，因此具有应用风格的交互和导航，给用户以应用般的熟悉感。
  • 持续更新：在服务工作线程更新进程的作用下时刻保持最新状态。
  • 安全：通过 HTTPS 提供，以防止窥探和确保内容不被篡改。
  • 可发现：W3C 清单和服务工作线程注册作用域能够让搜索引擎找到它们，从而将其识别为“应用”。
  • 可再互动：通过推送通知之类的功能简化了再互动。
  • 可安装：用户可免去使用应用商店的麻烦，直接将对其最有用的应用“保留”在主屏幕上。
  • 可链接：可通过网址轻松分享，无需复杂的安装。

不了解并不要紧，如果你想深入了解PWA相关的技术，可以阅读下面的一些文章：

Web Animation API by @Rachel Nabors

动画又回到了Web开发工具箱中。众所周知，可以使用CSS的Animation和Transition以及像GreenSock这样的JavaScript库来制作动画。但是不久的未来我们还有另外一个选择，那就是Web Animation API。@Rachel Nabors通过爱丽丝漫游仙镜为示例线咱，向你展示了如何通过这个新API在浏览器中运行CSS动画，以及如何使用他在你的项目中生成和操作动画。可以说是丰富多彩，又具乐趣的。

@Rachel Nabors的这份PPT也有一百多页。一开始以为大神需要分享新的内容，但没想到这份内容在2016年4月份就对外分享过了。当时特意仔细阅读了这份PPT，也是这个时候我才深入去了解Web Animation API的。

虽然这份PPT不是最新的内容，但@Rachel Nabors一直在致力于这方面的推广，如果你也想深入的了解Web Animation API相关的技术，那么强烈建议你花一定的时间阅读下面的这些文章：

在小站上也整理和收集了有关于Web Animations API相关的很多教程，后续也将持续收集和更新。如果你感兴趣，可以关注相关的更新。

Houdini & Polyfilling CSS by @Philip Walton

什么是Houdini？其实我也说不太清楚。但如果你是一枚前端开发人员，那么你曾经想使用某个CSS特性但是却因为他没有被所有浏览器支持而不能用？又或者更糟糕的，他被全部浏览器支持，但是这种支持充满了bug、表现不一致甚至是不完全兼容的？

那么Houdini就致力于解决这样的问题，而且Houdini是一个新的W3C工具组。他们计划通过引入一整套API来让开发者首次拥有扩展CSS的权利，并且会提供出一套工具来与浏览器的渲染引擎的样式与布局进行挂钩。

上图展示了在新规范中渲染过程哪部分可以被修改。（注意灰色的规范是在计划中但是尚未被编写）。这图是2016年@Philip Walton绘制的，到今天可能有所改变。

看上去很高大尚，我个人感觉就是Houdini提供一整套API，可以为一些CSS特性写Polyfilling。比如，我们需要一个random()这样的CSS函数。

.progress-bar {
    width: calc(random() * 100%);
}

我们都知道，random()在原生的CSS中是不存在的，除非你使用的是像SCSS或者PostCSS这样的处理器。但如果你想在CSS中使用这样的功能，那就可以借助Houdini来实现：

for (const stylesheet of document.styleSheets) {
    // Flatten nested rules (@media blocks, etc.) into a single array.
    const rules = [...stylesheet.rules].reduce((prev, next) => {
        return prev.concat(next.cssRules ? [...next.cssRules] : [next]);
    }, []);

    for (const rule of rules) {
        for (const property of Object.keys(rule.style)) {
        const value = rule.style[property];

        if (value.includes('random()')) {
            rule.style[property] = value.replace('random()', Math.random());
        }
        }
    }
}

有关于这方面更详细的介绍可以阅读@Philip Walton早前分享的《Houdini：也许是你从未听过的在CSS领域最令人兴奋的发展》一篇文章，或者直接阅读本次大会@Philip Walton分享的PPT：

除此之外，在第二天的CSS专题分享中@Tab Atkins也分享有关于Houdini相关的主题。

在国内这方面的话题的分享相对而言还较少，去年@一丝 姐姐在内部分享有关于Houdini实战方面的：

如果感兴趣的话，可以点击这里下载PPT。

有关于Houdini相关的更多话题，可以阅读下面的文章：

Form Validation by @PPK

表单验证实际上是JavaScript中最古老的技术这一。而且Netscape2只能通过JavaScript的方法来进行验证。现在，该技术的状态已经得到很好的改进，浏览器提供一些API，可以通过CSS的伪元素:invalid来进行验证，但事实上，尝试这种技术来对自己业务中的表单进行验证有几人呢？

@PPK大神在这次大会中给我们带来的一个非常有趣，而且值得大家去实验的技术就是表单验证，通过CSS伪元素的技术进行验证。

来看一个简单的示例，比如对一个错误信息的验证：

<!-- HTML Template -->
<form novalidate>
    <label>
    Your name
    <input name=“name” required>
    <span>This field is required</span>
    </label>
</form>

/* CSS */ 
label.valid {}
label.valid input {}
label.valid span {}
label.invalid {}
label.invalid input {}
label.invalid span {}

// JavaScript

// Suppress native error messages
form.addEventListener(‘invalid', function (e) {
    e.preventDefault()
},true);

// Trigger validation onblur
form.addEventListener(‘blur', function (e) {
    var tgt = e.target;
    if (tgt.nodeName === 'INPUT') {
        validateField(tgt);
    }
}, true);
form.onsubmit = validateAll;

// Actual validation

if (!field.validity.valid) {
    // set class to invalid
} else if (field.validity.valid && field.value) {
    // set class to valid
} else {
    // remove both classes
}

有关于@PPK分享的详细内容，可以阅读其分享的PPT。为了此次分享，@PPK特意还写了一些测试DEMO，如果你感兴趣的话，可以看看大神是怎么使用新技术对表单进行验证的。

没多久时间之前，@CHRIS FERDINANDI在css-tricks.com也分享了一个关于这方面的系列文章：

如果你想尝试自己实战一下这方面的技术，又碍于自己对这方面的了解不足，除了阅读上面相关资料之外，还可以阅读下面这几篇文章：

其他话题

上面几个话题是我自己比较感兴趣的话题，在有关于浏览器API专题分享的当天除了上面几个话题之外，还有其他的几个话题。比如@Ruth John的Web Audio、@Ada Rose Edwards的WebVR以及@Mike Taylor分享的Weird APIs。

对于现在而言，不管是做内容还是直播或者视频相关的开发人员，Web Audio还是很有意思的话题，或者这个群体的同学对这方面的技术会感兴趣。另外，我们团队有不少同学在研究VR方面的课题，但对我而言有点遥远，所以并没有仔细阅读这方面的资讯。这里需要特别提出的是@Mike Taylor分享的Weird APIs，这个主题非常有意思，嘉宾可以说是脑动大开，为我们提供很多思考，同时也建议所有开发者能发动自己的大脑去思考，怎么能更好的完善浏览器当今的一些API，又怎么为了更好的能工作（开发）提供一些新的API。强烈建议花点时间阅读完嘉宾分享的PPT:

CSS

2017 Amsterdam CSS Day第二天八位嘉宾分享的话题都是我非常感兴趣的话题，可能和我自身的技术栈有关吧，必竟我是靠CSS吃饭的。这里面的八个话题对我来说一点都不陌生，很多我自己都有针对性的研究过。比如@Rachel Andrew分享的CSS Grid Layout、@Jen Simmons分享的Writing Modes、@Gregor Adams分享的CSS自定义属性（CSS变量）以及@Chris Coyier分享的CSS的新特性等等。下面由我带领大家简单的对这些做一个初步的了解。

CSS Grid Layout by @Rachel Andrew

@Rachel Andrew可以说是CSS Grid Layout的之父，CSS Grid Layout的一些规范或者说推广都是由她完成的。当初在官网上看到她的名字的时候，我就知道她分享的肯定是有关于CSS Grid Layout相关的话题。虽然她每次分享的都是有关于这方面的话题，但每次的话题里都会带来有关于CSS Grid Layout的新特性，以前使用心得，这次也是不例外。详细的可以阅读@Rachel Andrew的PPT。

如果你对这方面的技术也感兴趣的话，可以关注我后续分享的文章，我打算对PPT里的技术做一个解读。除此之外，还可以阅读站上有关于CSS Grid Layout相关的文章，可以说站上国内中文教程最全面的之一。

Writing Modes by @Jen Simmons

非常荣幸的是，自己曾经和@Jen Simmons有过一段共事的经历，只不过当时自己太菜，加上英文不能顺畅的交流，而错过了很好的学习机会。但在那段时间，在大神的身边还是学到了不少的知道。感觉在扯闲话了，咱们回到正题上吧。

@Jen Simmons这次带来的主题是有关于Web排版相关的话题，主要分享了写作模式。从CSS角度来看，嘉宾从display属性为起点，围绕着dir、writing-mode和text-orientation为核心向在家阐述了如何在Web中控制书写模式。其实嘉宾在分享前，早就对这方面的技术做过深入的剖析，并写了相关的博文。个人建议你将嘉宾的PPT和博文结合起来一起阅读，可能会有更多的收获。

除此之外，@Jen Simmons在CSS Grid Layout方面的造旨也是非常的深，经常在做CSS Grid Layout方面的布道。她在这方面的主题分享也是非常的多，有兴趣的同学不仿去看看。

CSS Variables by Gregor Adams

@Gregor Adams带来的主题是有关于CSS自定义方面的，CSS自定义也被称为CSS的变量。大家都知道，CSS以前是没有变量一说的，大家使用得多的是在CSS的处理器中。@Gregor Adams的PPT中提供了很多个Demo，通过Demo向大家展示了如何在CSS中使用CSS的变量。特别是怎么过CSS的变量做一些简单的小游戏。感兴趣的可以阅读PPT，甚至跟着里面的Demo实战一把，亲自体验一下CSS变量强大的魅力所在。

如果你从未接触CSS的变量，建议你点击这里进行阅读。其实CSS还是非常强大的，大家都认为制作游戏和CSS没有任何关系，事实上很多CSS大神也可以仅用CSS制作一些小游戏，在Codepen上面有很多这方面的示例。另外@Andrey Prikaznov也提供了一些这方面的示例，有兴趣的可以体验一下。看上去可能傻傻的，但用来练习CSS是一个非常不错的选择。(^_^)。

A Tale of Four Properties by @Chris Coyier

喜欢CSS的同学应该对CSS-TRICKS并不会陌生，因为在这个网站上总上能获取很多有关于CSS的新知识。我自己也是这个站的常客。而@Chris Coyier就是这个网站的站长，在此要非常感谢@Chris Coyier为我们带来这么多优秀的教程，除此之外，其还有一个代表作品就是Codepen，一个在线的创作Demo的作品，我在上面也放置了不少自己的作品。

膜拜完之后，咱们回到今天的主题上来。@Chris Coyier这次分享的主题主要向大家分享了：shape-outside以及其绘制图形的几个函数polygon()、circle()、ellipse()、path()、inset()和url()。通过shape-outside属性打破我们的常规Web排版技术限制，简单点说可以实现流的布局（不规则的布局）。如下图所示：

除了shape-outside属性之外，还介绍了制作路径动画的offset-path()（以前被叫作motion-path()）；clip-path()制作图形或者说绘制路径，另外配合mask还可以做一些有趣的事情。

在CSS中，shape-outside、offset-path和clip-path都有可能使用到对应的函数：polygon()、path()之类的，具体对比如下图所示：

详细的介绍可以阅读PPT。

有关于PPT中涉及到的相关知识点，还可以阅读下面相关的文章：

其他

上面详细介绍的四个主题是非常有意思的主题，也是值得我们花时间去学习主题中的相关技术。不过另外几个主题也蛮有意思的，只是自己不太关注。

@Bert Bos和@Hakon Wium Lie一起聊了一些有关于CSS Reset相关的话题，可惜的是主办方没有提供相关的PPT，无法了解具体聊的是些什么内容。不过有一段简介：

In this session the two inventors of CSS will talk about what they’d do differently if they could design CSS all over again. For instance, was the C-language syntax optimal, or should CSS1 have been even simpler to achieve quick and widespread interoperability?

不过他们两都可以说是CSS的元老级的人物了。我想在现场聊的一定是有一定深度的话题，并不仅仅是字面上有关于CSS Reset这一点点。

@Stephen Hay分享的主题是CSS for Evil, not Good，里面介绍了不少CSS的小故事，向大家展示了CSS在Web开发中的魅力所在。个人建议，对于Web开发，CSS是不可或缺的东西，千万不要小看CSS，因为他的魅力是非常强大的，这也是我一直沉迷的原因之一。当然，别的我不懂(此时内心在流泪)。

@Chris Wilson分享了一个关于用户体验相关的话题，主要分享了Web开发人员怎样利用自己所掌握的技术给用户提供更好的体验。对这方面感兴趣的同学，可以阅读其PPT。

总结

虽然不能到现场膜拜这些世界级顶级的大神，但能从他们分享的PPT中了解有关于CSS或者说浏览器API相关的新知识，感觉还是蛮爽的。而且能通这些技术让自己变得更强大。另外这些嘉宾分享的都代表相关技术的风向标，尽管有些技术很新，还用不上，但可以肯定的是在不久的未来，他们都将走入我们的工作中。所以我们应该紧跟技术的前沿，不断的向前，向前，向前。

最后想说一下自己的感受，其实在国外，每件都有好几场有关于CSS的Conf。这些会议都能让我们了解很多有关于CSS的新技术，希望大家能关注相关的活动。最后一句：CSS不是你想的那么简单，但也绝不是你所想的那么复杂！CSS不是枯燥无味的，其魅力是无穷的！

大漠

常用昵称“大漠”，W3CPlus创始人，目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3：核心技术与案例实战》。

如需转载，烦请注明出处：https://www.w3cplus.com/css/2017-Amsterdam-CSS-Day.htmlNike Roshe Two Release Date

返回顶部