你可能已经听说过PostCSS,它比libsass快了几乎两倍(并且比Ruby Sass快了28倍)；或者听说过它支持cssnext和CSS Modules而且可扩展功能,但你是否已经找机会尝试一下了？PostCSS最强大之处在于它是模块化并且基于插件的架构，不过这也是个缺点。如果你之前在项目中使用Sass(比如大多数的设计师和前端开发者)，你从不需要配置任何东西——Sass内置了全部实用功能，开箱即用。然而，PostCSS需要你做一些配置。你不得不从一眼看不到底的插件列表选择插件并且自己把全部插件一起配置。这篇教程为Sass用户提供了(我认为是)一个优秀的基本配置，让你能够容易地尝试PostCSS并在以后去深入细节。希望你觉得它有用，任何建议和评论请发推到@svileng，谢谢!注意：很多PostCSS项目试图通过一个单一插件为你提供类Sass功能。我会避免这样，当我需要指定特性时将引入独立的插件，这将给你带来更高的灵活性，而且你也可以使用一些相比Sass更强大的新插件。运行PostCSS运行PostCSS的方法有很多种。你可以很容易地将它添加到Gulp或Webpack的构建过程中；但是这篇指南中，我们要让事情尽可能简单，我们将使用PostCSS的CLI。大多数人需要像这样全局安装它：npm install -g postcss-cli然而，我推荐安装在可运行的本地环境，让他位于 ...继续阅读 (9)

本文转载自：众成翻译译者：鞠大宝链接：http://www.zcfy.cc/article/1162原文：https://www.smashingmagazine.com/2016/08/css-animations-motion-curves/先有UI动画，然后才会有好的UI动画。好的动画会让人惊叹“哇哦！”——因为页面看上去很流畅、很漂亮，最重要的是，自然，一点都不会让人觉得不和谐或者僵硬死板。如果你经常逛Dribbble或者UpLabs这类网站的话，你就会明白我在说什么了。一些极好的拓展阅读资源:SVG和CSS的路径剪辑动画若干实用的动画技术使用SVG手绘动画新的网页动画API既然有这么多天才设计师创造了如此漂亮的动画，自然是任何开发者都会想要在自己的项目中引进这些效果。如今，CSS为transition-timing-function提供了一些预置变量，比如ease-in,ease-out和ease-in-out, 它们将页面的平滑感和真实感提升了一个档次，但是，你不觉得这个方法太大众化了吗？试想如果页面上的每个动画都用了这3个相同的时间变量，那该是有多乏味啊。 ——(引自:Lukáš Straňák)transition-timing-function有一个变形是cubic-bezier(n1, n2, n3, n4), 你可以传进4个参数来创建自己独一无二的时间函数。在 ...继续阅读 (9)

同HTML元素一样，我们可以通过transform函数操作SVG元素。然而transform在SVG元素和HTML元素上的工作方式会有一些差别。首先，IE不支持SVG元素的CSStransform属性，但是如果只是应用一些2D变换，为了适配IE,我们可以使用SVG的transform属性。SVG的transform属性中的所有函数的参数只能是纯数字，比如说，我们不能在translate函数中使用%单位（虽说在火狐浏览器中的CSStransform属性也不能使用—此处有链接—），rotate，skew角度只能使用deg单位，我们能在CSStransform属性中可以使用的所有其它单位在这里都不能使用。注：火狐浏览器现在已经支持transform-origin上应用带有%的值，不过与chorme不同的是，火狐的%是相对于svg画布而不是元素自身。而且蛋疼的是，JavaScript的特征检测会有问题（通过JavaScript读取在外部CSS文件中设置的transform属性会返回与其等价的矩阵），所以我们需要另外一种检测IE的方法，或者直接在HTML上书写transform属性。SVG元素和HTML元素工作方式的差异，主要是由元素坐标系的不同造成的。无论是HTML元素还是SVG元素，都有一个自己的坐标系。对于HTML元素，初始的坐标原点在元素的中心。对于SVG元素，其坐标系原点是在SVG ...继续阅读 (6)

由于 React 加持了虚拟 DOM 等诸多特性，所以在 React 上实现常规的动画效果有一些特别之处。本文不会深入探讨 React 对动画的处理逻辑，只会简单地演示如何在 React 创建动画效果，因为我也没有做过线上的 React 动画实例，谨以此文抛砖引玉，算是最基础的入门了解。React 插件React 官方提供了两个插件用于处理动画效果：一个是偏底层的react-addons-transition-group，一个是在前者基础上进一步封装的react-addons-css-transition-group。在使用它们之前，需要先检查下你使用的是哪种类型的 React 版本，一般通过 npm 安装的 React 默认不会安装这两个插件，需要手动安装它们：npm install --save react-addons-transition-group react-addons-css-transition-group在这里只介绍react-addons-css-transition-group的使用方式，使用它可以快速利用 CSS 的能力实现组件的入场和出场动画。使用该插件实现 React 动画需要两个部分的协作，首先是 JS 部分的组件：// 非完整代码 class App extends React.Component { state = { i ...继续阅读 (14)

本文转载来自于@戴嘉华的《JavaScript基于时间的动画算法》。如需转载，烦请注明原文出处：https://github.com/livoras/blog/issues/8前段时间无聊或有聊地做了几个移动端的HTML5游戏。放在不同的移动端平台上进行测试后有了诡异的发现，有些手机的动画会“快”一点，有些手机的动画会“慢”一点，有些慢得还不是一两点。通过查找资料发现，基于帧的算法（Frame-based）来实现动画会导致不同帧率的平台体验不一致，而基于时间（Time-based）的动画算法可以很好地改良这种情况，让不同帧率的情况下都能达到较为统一的速度上的体验。本文介绍的就是基于帧动画算法和基于时间动画算法的差异，以及对基于时间算法的改良。基于帧的动画算法（Frame-based）相信做过前端的人对使用JavaScript实现动画的原理都很熟悉。现在让你实现一个让一个div从左到右来回移动的JS代码，你可能嗖嗖就写出来了：function moveDiv(div, fps) { var left = 0; var param = 1; function loop () { update(); draw(); } function update() { left += param * 2; ...继续阅读 (11)

CSS3在选择器方面添加伪类选择器这方面的特性，比如:nth-child(n)、:nth-of-type(n)这样的选择器，其好处在这里就不多说了。如果你对这方面感兴趣的话，你可以阅读早前整理有关于CSS选择器方面的《CSS3 选择器:伪类选择器》一文。而今天我们要说的是在Sass中如何更灵巧的使用CSS3的一些伪类选择器。为什么使用混合宏来定义伪类选择器CSS3中伪类选择器怎么使用，我想不是什么大问题，但大家在使用伪类选择器时，或多或少感觉到了其不太方便与灵巧。不过不要急，现在借助CSS预处理器方面的一些特性，可以让我们使用CSS伪类选择器变得更为灵巧和方便。而且把有关于CSS选择器相关的混合宏都放在了SassMagic中的_selector.scss文件中。接下来看看Sass是如何给伪类选择器声明混合宏。定义伪类选择器的混合宏在这篇文章中详细介绍了如何使用Sass的Mixins给:first-child（:first-of-type）、:last-child(:last-of-type)等选择器。first()给first()提供两个参数$num和$type，其中$num传递的值是一些数值(大于0的正整数),而$type是一个布尔值，具有两个值，如果true表示的是:first-of-type或者:nth-of-type()；如果传递的值是false表示的是:first-chi ...继续阅读 (7)

CSS现在已经能实现比网站开发者预料到的更多的功能，并且随着时间的推移，样式表语言越来越强大，能实现许多原先需要依靠JavaScript才能实现的功能。在这篇文章中我们将会介绍CSS函数中8种有用的小技巧。1.纯CSS Tooltip许多网站还是在使用JavaScript来创建Tooltip效果，但实际上通过CSS能更简单的实现。最简单的方法是在你的HTML代码中添加一个带有提示文本的属性，比如data-tooltip="…"。然后你就可以在你的CSS文件中添加以下的代码通过attr()函数来显示提示文字：.tooltip::after { content: attr(data-tooltip); }相当简单对吧？当然实际上我们还需要更多的代码来给提示增加样式，但是不用担心，已经有了为此设计的强大且纯粹的叫Hint.css的CSS库和Balloon.css。2.使用自定义数据属性和attr()函数我们已经学会如何使用attr()来创建提示，另外还有一些场景能使用到这个函数。通过与数据属性相结合，你可以通过很简单的一行HTML代码来创建带有标题和描述的缩略图：<a class="caption" href="#" data-title="Vulture" data-description="..."> <img src="img.jpg" alt=" ...继续阅读 (12)

如果你已经对CSS有了一定的了解，也许你之前已经掌握了一些字体加载的方法，那么你使用过font-display吗？font-display是CSS中新添加的属性，它能实现之前类似于Font Loading API和Bram Stein's Font Face Observer这种第三方脚本实现的功能。如果这是你第一次接触这类知识，那也没有关系，我们会先简单介绍一下浏览器加载字体的默认方法。浏览器是如何加载字体的？浏览器经常会出现一些出乎我们意料的问题，而字体的加载就是其中之一。大多数浏览器在自定义字体还未下载之前会先隐藏文本。这就是大家所说的FOIT（Flash of Invisible Text）。虽然现在在一般加载的过程中你可能不会看到这种情况，不过我们可以通过限制连接速度来观测浏览器的默认行为。可以看出，大部分浏览器会隐藏文本长达3s直到字体加载完成。其他浏览器，比如Safari会等待更长的时间。有些甚至永远都不会显示文本。目前我们解决这类问题的方法是使用JavaScript-based脚本（比如Font Face Observer）来跟踪字体是否被下载。在字体被下载完成前，我们使用浏览器自带的字体来显示文本，直到我们通过JavaScript探测到字体下载完成，我们给我们的文档添加一个CSS类来应用我们的自定义字体。这种方法我们之前有过详细介绍。比如，假设你有一个段落需要使用 ...继续阅读 (6)

上周看到有一篇关于CSS滤镜效果函数的文章，其中的效果函数相对来说比较容易理解，而且上手难度低。但是，这种方式仅仅是添加CSS滤镜效果众多方式中最弱的一种。今天让我们来看一看滤镜基元，这是为图片和元素添加滤镜效果另外一种更加强大的方法。相较于效果函数，滤镜基元为我们提供了更多的东西。一方面原因是滤镜基元有更多的效果。另一方面是在两者相似的地方，滤镜基元为我们提供了更多的使用方式。滤镜基元其实比较复杂，很难在一篇文章中展现它的全貌，在这里需要说一声抱歉。我发现官方文档的描述比较模糊，而且缺乏一些帮助我们理解的例子。我也查过一些资料，但是大多数都是在讨论SVG滤镜本身。不过，高兴的是，我可以轻松地让例子跑起来了，这个例子会在下面给出。有一点不太满意的地方是，它不是在所有的浏览器中都能运行。但是我相信，未来这些浏览器都会支持。什么是CSS滤镜基元？滤镜基元和效果函数并没有多么不同。在许多方面，他们只是用不同方式做着同样的事情。基元最初是被作为SVG滤镜开发的，之后被扩展到不仅仅支持SVG图片。像效果函数一样，滤镜基元是一种不需要图片编辑器就可以添加滤镜效果的一种方法。这使得它更加灵活，并且不具破坏性。它被写在SVG标记中，然后可以通过CSS filter属性的url值应用到图片或者元素上。.filtered { filter: url(path-to-filter-primiti ...继续阅读 (6)

在De Voorhoede,我们尽所能地为客户推进前端性能。虽然不是很容易就能说服客户完全按照我们的指令去做，但我们一直在尽全力和他们沟通，解释提高性能的重要性，或者将他们的性能与他们主要竞争对手进行比较。最近更新了我们的网站，除了设计上进行了大修，这也是一个将性能提高到最优的理想机会。我们的目标是有效控制，注重性能，与未来技术兼容，并将创建网站变为了一件有趣的事。以下是我们如何改进网站的具体做法。性能设计在我们的项目中，我们每天都要和设计师和产品负责人讨论如何平衡美学和性能。对于我们自己的网站，这就变得很简单了。我们都相信一个好的用户体验都是从尽快响应显示内容开始的。这就意味着性能重于美学。好的内容，布局，图像和交互性对于吸引你的受众群体是必不可少的，但这些元素都对页面加载时间和最终用户体验都有影响。在每一步，我们都在探究如何才能在对性能影响最小化的基础上得到良好的用户体验和设计。内容先行我们希望核心内容（也就是在重要的HTML和CSS文件中的内容）能最先出现在我们的访客面前。相比于效果增强，JavaScript，完备的CSS，网页字体，图像和分析等，核心内容的显示应该为最先级。完全的控制为我们理想的网站制定了标准之后，我们的结论是，我们需要完全控制网站的每一个方面。所以我们选择建立我们自己的静态站点生成器。静态站点生成器我们使用Node.js创建静态站点生成器。它采用短JSON ...继续阅读 (4)

最近我在Codepen看到一个这样子的加载示例。使用CSS完成的具有渐变褪色倒影的、旋转的3D条形块。每一个条形块使用了一个元素，之后进行复制，这些元素形成倒影，最后添加渐变进行覆盖形成渐变褪色效果。这听起来有点像用你的左脚趾从背后抓右耳朵般不切实际。更不用说渐变覆盖方法形成褪色效果在非平面背景色不起作用了。是不是有更好的方法使用CSS可以实现这种效果呢？回答无非是:“肯定”和“否定”。“肯定”是可以实现，以及“否定”是不可以实现。不幸的是，尽管该代码可以使用预处理器进行压缩(外界获取的一个循环中生成的代码会大大减少)，如果想要跨浏览器获取最佳的效果，为了倒影复制所有的条形块以及使用渐变覆盖生成褪色效果的方法仍然是最好的，而不是使用canvas。这篇文章主要探索创建倒影的方法，说明“大部分”的解决方案以及跨浏览器产生的令人头疼的问题，最后讨论我自己的想法。案例的基本设置在创建倒影之前，让我们看看如何在大部分的浏览器中创建位置以及条形块的阴影。创建条形块首先，创建一个包裹.loader元素，在内部设置10个.bar元素。<div class='loader'> <div class='bar'></div> <!-- repeat to create 9 more bars --> </div>书写多行同样的代码是一 ...继续阅读 (3)

Symbol是 ECMAScript 2015 引入的新原始数据类型(primitive type)。使用 Symbol 可以创建独一(unique)的标识符，用法是：let uniqueKey = Symbol('SymbolName').Symbol 可以被用作对象中属性的键名。一系列被 JavaScript 特殊处理的 Symbol 值被发布为内置 Symbol 值(well-known symbols)这些内置 Symbol 值被 JavaScript 内建算法所使用。例如Symbol.iterator被用来迭代遍历数组项或字符串，甚至定义自己的迭代器函数。这些特殊的 Symbol 值非常重要，因为它们是对象的系统属性，这些属性允许你定义定制的行为。听起来不错吧，用它们来打入 JavaScript 内部！由于其独一性，使用 Symbol 作为键名（而不是字符串字面值），可以轻而易举地给对象引入许多新的功能。在使用字符串字面值的时候，键名碰撞会是个问题，但使用 Symbol 你就不必为此担心。本文将导览所有的内置 Symbol 值，并说明如何得心应手地在代码中使用它们。简洁起见，内置值Symbol.<name>通常被简记为_@@\<name\>_格式。例如Symbol.iterator简记作_@@iterator_，Symbol.toPrimitive ...继续阅读 (5)

如果你会了Sass，你就会了ES2015!...虽然不是全部，但也有很多惊人的相似之处！当学习最新的ECMAScript 规范，ES2015(以前被称为ES6)时，碰到了一些让我立刻想到Sass的特性。Sass语言和ES2015Sass语言非常有表现力，最初于2006年发布，使用Ruby编写，也模仿了Ruby的语法和一些语言场景。至于其他特性，分号和花括号在3.0.0版本实现了，使Sass感觉更像(也使他能兼容)CSS。这些变化，再加上Sass核心的可扩展性和SassScript的实用性，意味着这是一个新的兼容CSS的强大编程语言。写样式变得更有力并且编程在设计师和视觉开发中更受欢迎。不幸的是，Sass开发依然遭到没有成为"真正的开发"的炮轰，我希望这篇文章可以改变这些观念。每个Sass语言场景的背后都有很多思考，其中很重要的一点就是准确性高于定制性(也就是为什么Sass不允许像PostCSS那样自定义属性)。新的ECMAScript 2015 标准(ES2015)在2015年六月正式发布，为JavaScript添加了大量新的，实用的特性，使其更清晰并且更易用。然而大多数浏览器仍然不支持ES2015，你可以使用像Babel这样的转换器将代码转换成兼容性好的ES5代码。预编译步骤(当然，我知道他们不完全相同)只是这两种语言相似部分的开始。作为一个Sass开发者，你可能没注意到很多Sa ...继续阅读 (1)

在Sass中有很多方法可以解决媒体查询这个问题，但是其中一些方法存在相同的问题。一开始我会还原这个问题，然后提供我的解决方案，最后列出这个方案对工作流程的好处。问题假如我们把网站的Sass样式分离成多个像header.scss,hero.scss,cards.scss等等这样的组件。为他们添加各自的响应式样式最简洁的做法是，在各自的组件文件中添加相应的响应式样式。为了实现这样的效果，最简单的做法就是，定义一系列针对不同尺寸屏幕的mixin然后使用@content。@mixin tablet { @media (min-width: 768px) and (max-width: 1024px) { @content; } } @mixin desktop { @media (min-width: 1024px) { @content; } }这些mixins会将外部传进来的样式片段，放置在@content出现的地方。 就像这样使用：p { font-size: 16px; @include tablet { font-size: 18px; } @include desktop { font-size: 20px; } }这样很好，很整齐。它告诉我 ...继续阅读 (3)

BEM是由Yandex团队提出的一种CSS Class 命名方法，旨在更好的创建CSS/Sass模块。他需要遵循一些特殊规定，有些人认为这些规定很冗余，但是我发现他们对于理解DOM有着很大的帮助。你可以去查看我之前的文章去了解为什么BEM如此伟大。或者你可以去查看这几篇中文文章来了解BEM(《BEM的定义》《为什么我们需要BEM》)。今天这篇文章，是我在假设你对BEM和Sass已经有所了解甚至熟悉的基础上完成的。BEM又丑又傻？许多人认为BEM是一种多余的，丑陋的长命名。我完全能够理解当你在使用一种臃肿的和过度描述的命名方式时会发出这样的抱怨。这种情况下你会发现Sass编译后的CSS会非常的冗余和丑陋，尤其是当你在很长的BEM命名内又嵌套了更长的BEM命名时。这简直是非常糟糕和令人沮丧的一件事。.aboutSection { background-color: tomato; } .aboutSection__wrapper { max-width: 108rem; padding: 3rem 0; } .aboutSection__headingContainer { background-color steelblue; .aboutSection__header { font-size: 2.4rem; ...继续阅读 (11)

当我们提及预编译的时候，我经常会被问到的一个问题是Mixins还是@extend? 关于这个话题我经常直言不讳，而且鉴于以下的这几条原因，我坚定的认为你应该避免使用@extend:@extend会改变了你的源命令，这在CSS中是相当危险的。@extend会破坏代码结构合理性，把不相关的选择器串联到一起。@extend是非常贪婪的，它会包含一切的代码，而不仅仅是你想要的那一个。@extend可能会很快就脱离我们控制。@extend现在被广泛的认为是一种反面模式, 所以它的使用慢慢淡出了人们的视野，但是我们还没有完全弃用它。我昨天和一个客户聊天的的时候被问到mixin和@extend哪个更好，我告诉他了我通常会使用的答案：**永远不要使用@extend**，但却被反问了到：“@extend不是性能更好吗？它生成了更少的代码”认为使用@extend(当被正确的使用)生成更少的CSS是正确的，但是对于性能而言我的回答是错：mixins的性能更好。我相当有自信的回答了这个的问题，尽管我从没做过任何的测试。我很有自信的原因是我有一套独门秘笈：由于gzip是有利于重复代码压缩的，很显然如果我们能明确的告知压缩程序我们重复的声明，我们就能到一个更好的压缩比例。你看，当人们谈论mixins的性能的时候，他们通常考虑的是文件在服务器上的大小。但是由于有gzip的存在（你也使用gzip的对吧？），我们应 ...继续阅读 (10)

为了有效的维护和开发项目，代码的重复利用就显得尤为重要。在Sass中，除了@import和@extend可以使你的代码更加具有重复利用性，@mixin指令也同样能提高你代码的重复使用率并简化你的代码。@extend指令通过继承从而简化了代码，但是它也有缺陷之处，首先是不够灵活，其次它还会将你不需要的其他地方具有相同类名的样式都继承过来。@mixin指令是另一种简化代码的方法。Mixins可以包含任意内容且可以传递参数，因此比'@extend'更加灵活和强大。定义Mixins通过@mixin加名称的方式就可以定义一个Mixins模块，在模块内你可以添加任何你想重复使用的样式。@mixin button { font-size: 1em; padding: 0.5em 1.0em; text-decoration: none; color: #fff; }由于历史原因，连字符和下划线被认为是相同的，也就是说@mixin button-large { }和@mixin button_large { }是一样的。Mixins能够包含任何在 CSS 和 Sass 中有效的内容。@mixin link { a { color: blue; &:visited { ...继续阅读 (10)

Mixins允许我们在项目中复用样式片段，可以传递参数这个特性使得它们非常灵活，强大。同样，我们也可以使用@extend命令让一个选择器继承其它选择器去复用样式片段。有的时候Mixin和extend好像做了同样的事情，那我们应该选择哪一个呢？这个问题我会在本文的最后给出答案。在这之前，我先谈一谈关于@mixin指令的一些事情。除了传递参数，我想让你知道如何给一个mixin传递CSS片段，了解这个片段的作用域。然后我会回到刚才的问题，将@extend和@mixin进行对比，帮助你了解他们的使用场景。向Mixin传递样式片段除了传递参数，也可以直接传递一个样式片段给Mixin。在Mixin中，添加@content;语句，然后传递的样式片段就会代替@content;出现在相应的位置。@mixin button { font-size: 1em; padding: 0.5em 1.0em; text-decoration: none; color: #fff; @content; } .button-green { @include button { background: green } }.button-green中调用了Mixin。@include指令传递了一个将背景色设置为 ...继续阅读 (8)

在这篇文章中我主要想给大家阐述在使用Sass来编写CSS和OOCSS两者之间的差异。在开始之前，我想在大家对定义语义化和演示(视觉)类名之间的差异有所了解。语义化和演示(视觉)类名演示(Presentational)：这里更趋向于将其称之为视觉类名，就是纯视觉。简单点说，视觉化类名是没有任何意思，就是根据视觉呈现的风格化，将其在HTML元素中声明类名。也就是说根据，视觉的表象，在HTML定义对应的类名，比如red、blue、mb10等语义化(Semantic):根据语义化在HTML中给元素定义类名。简单点说，就是根据功能模块，在HTML中定义类名，比如.user-registration或者.billing-info等既然声明类名有这样的方法，我们先不说哪种更好，哪种更不好。先来看看OOCSS的原则。OOCSS基本原则先来看看OOCSS基本原则中，认为比较好的方面：强调重用选择器简洁可扩展类强调风格与内容分离强调内容与容器分离既然有好的一面，当然也不足的地方：大量使用演示类需要在模板中应用演示类样式(CSS)和结构(HTML)藕合太紧如果设计变动，需要更改CSS和HTML创建了数千行CSS，但有可能这些CSS永远不会被使用。比如Twitter Bootstrap如果你从未接触过有关于OOCSS相关的概念或知识，我建议您先阅读一下下面几篇文章： -OOCSS——概念篇-OOCSS ...继续阅读 (6)

本文不会像一些其它文章一样，教你如何开始使用Sass，我会告诉你为什么使用Sass，我到底喜欢它什么。我最初是在一个Laravel项目中，接触了Sass，Larvel是个PHP框架，内建有Elixir服务支持Sass。你可能觉得说这个玩意跟我们没啥关系，但是重点是Larvel支持Sass,使Sass非常容易上手，这就促使我去尝试使用Sass,慢慢了解到它的很多优点。之前，我总觉得，写脚本在CSS里会把本应简单的事情变复杂，然后不确定是否应该花时间去学习它。但是我慢慢发现，它的好处很多，还好当初没有放弃。Sass 就是 CSS首先，你要知道的是，Sass其实就是CSS，这里可能会有很多的议论，但是如果你并不想使用Sass的诸多特性，你也可以只在Sass的样式表中书写CSS，这一点问题都没有，然后当你需要一些Sass特性的时候，你可以拿起来写。Import(引入)回到当初的Larvel项目，一开始我用传统的方式书写CSS文件，最后发现文件内容非常的长。当时觉得，这没有什么问题，但是过了一段时间之后，发现在这个CSS文件里我很难回想起各个规则的位置。ok,Sass来了，它允许你创建多个文件，然后在一个文件中引入。也就是说你可以把长长的CSS文件，分割成几个以各自逻辑命名，组织的文件。这样，以后我们要完善更改样式表就变得更容易了。对我来说，在一个项目中，经常会为网格，颜色，基础的布局创建文 ...继续阅读 (6)

z-index和transform是CSS中的属性，但很少同学将二者联系到一起，感觉他们八杆子打不上。事实真的是这样吗？如果你也不能确认，这篇文章就值得你花点时间阅读。因为阅读完了，你会有所收获的。堆叠上下文(Stacking Context)在开始今天的主题之前，先得回忆一下CSS中的Stacking Context(堆叠上下文)。因为只有了解清楚了这个概念，才能更好的了解下面的内容。任何HTML文档默认的堆叠上下文都是<html>元素。因此，除非创建新的堆叠上下文。默认情况下，元素的堆叠顺序相对于页面内的其他元素。在一个未做堆叠顺序更换的页面中，其顺序就是根据HTML中的元素出现的先后顺序来决定，先出现的在底下，后出现的在顶部。用数字来表示的话是就1,2,3,4,...,n这样的顺序。比如下面的示例：第二个div做了一个margin-top的-50px，可以看到第二个div遮住了第一个div。那么怎么才能改变默认的堆叠顺序呢？先把结论给大家抛出来，在CSS中可以使用z-index和transform可以改变元素的堆叠顺序。但也可能会导致一些奇怪的情况，比如具有较大的z-index的元素并不总是位于具有较低z-index元素的上方。比如，在一些情况之下，同时使用z-index和transform会让z-index失效等。CSS中会产生新的层情况还有很多种：当一个元素位 ...继续阅读 (8)

动画是使 Web 应用和网站吸引人的重要因素。 用户希望有快速响应和高度交互的用户界面。 但是，为界面设置动画未必很简单。 什么应设置动画，何时显示，以及动画应有哪种感觉？使用动画作为一种给项目增加活力的方式。动画应支持用户交互。要注意设置动画的属性；有一些属性比其他属性开销更大！选择合适的内容来设置动画出色的动画可增添一层享受，增加项目对用户的吸引力。 可以将您喜欢的几乎所有内容设置动画，不管是宽度、高度、位置、颜色、背景，但您需要注意潜在的性能瓶颈，以及动画将如何影响您的应用的个性。 卡顿或选择不当的动画可能对用户体验产生负面影响，因此动画需要高性能并且恰当。使用动画来支持交互不要仅仅因为您可以做动画就随便做；它只会惹恼用户并妨碍操作。 相反，要有策略地放置动画以增强用户交互。 如果用户点击菜单图标，则让菜单从页面侧边伸出，或如果他们点击按钮，则可以使用少量辉光或弹跳来确认交互。 注意避免不必要地打断或妨碍用户活动的动画。避免为开销大的属性设置动画唯一比错误放置的动画更糟的事情是导致页面卡顿的动画。 这将让用户觉得失望和不悦，并且可能希望您根本不必费心去设置动画！改变一些属性的开销比改变其他属性要多，因此更可能使动画卡顿。 因此，例如，与改变元素的文本颜色相比，改变元素的box-shadow将需要开销大很多的绘图操作。 改变元素的width可能比改变其transform要多一些 ...继续阅读 (10)

从上一篇文章中我们快速的了解了Web Animation API能做什么，也能使用Web Animation API制作类似CSS3 Animation实现的动效。但到目前为止，也仅仅就如此，并没有看到Web Animation API比CSS Animation有任何优势之处。那在这篇文章中，咱们来看看Web Animation API和CSS Animation明显性的区别。当你调用element.animate(),会返回一个AnimationPlayer对象，然后动画开始播放。比如下面这样的一个示例：假设将上面的动画赋值给一个变量player，我们就可以返回动画的方法(methods)、属性(Poperties)和Promises。var player = eleAnime.animate(animeKeyframes, animeOptions); console.log(player)打印出来的结果如下图所示：console.log(player.effect);console.log(player.effect.timing);掌握了其中的方法、属性等使用，将会发现Web Animation API的强大之处，也能更好的理解Web Animation API比CSS Animation有跟更强大的优势。接下来，一起来看看其方法和属性。WAAPI属性WAAPI对应的属性 ...继续阅读 (53)

本文转载自：@Paul Lewis和@Paul Irish的《High Performance Animations》一文。原文地址：http://www.html5rocks.com/zh/tutorials/speed/high-performance-animations/让我们直接进入主题。现代浏览器在完成以下四种属性的动画时，消耗成本较低：position（位置），scale（比例缩放）,rotation（旋转） 和opacity（透明度）。如果你对其他的属性设置动画，你就需要对你的冒险负责。而且你的动画将可能达不到流畅的60fps。一起来看看以下一组完成相同的动作的动画视频，它们在一起缓慢地移动。它们一个以transform完成，另一个以其他的方式。 你可以清楚地看到它们的不同，现在我们来看看它们为什么会这样。通过DevTools从文档对象模型到像素级别的观察当你用 Chrome DevTools 的timeline来查看的话，你可以看到跟一下相似的模式：浏览器处理的过程很简单：计算元素的样式（重新计算样式），生成每个元素的几何形状和位置（布局），绘制图层中的每个像素（初始化绘图并且进行绘图）并且将图层绘制到屏幕上（图层的合成）。为了生成流畅的动画，你需要让浏览器尽可能少地工作，而最好的方式就是指改变影响合成的属性——transform和opacity。瀑布流越高 ，浏 ...继续阅读 (6)

动画在Web应用中不是必须的，但是使用得好能起到锦上添花的作用。早期在Web中看到的动画主要有Flash、Gif图片动画、JavaScript动画、SVG动画、APNG动画和CSS3动画等。特别是随着浏览器对CSS3属性支持力度的提高，使用CSS3制作动画的情景在Web应用中越来越频繁。虽然实现动画的技术可以有多种不同的实现方式，但每种技术都存在一定的缺点，比如CSS3动画必须通过JavaScript去获取动态改变的值，setInterval的时间往往是不精确的而且还会卡顿，APNG动画体积过大等等。实现方法多意味着实现方式也不同，其中涉及到的技术点也不同，对于Web开发者而言，都希望制作Web动画都具有一套统一的API规则：值得庆幸的是，W3C提出Web Animation API，它致力于集合CSS3动画的性能，JavaScript的灵活，动画库的丰富等各家所长，将尽可能多的动画控制由原生浏览器实现，并添加许多CSS不具备的变量、控制以及调试选项等。那么从这篇文章开始，我们将会花几节课的时间和大家一起来探讨Web Animation API相关的知识。CSS3 AnimationW3C提出的Web Animation API常简称为WAAPI。在开始介绍WAAPI之前，咱们先来回忆一下现在制作动画常用的方法CSS3 Animation。为什么要拿CSS3 Animation出来 ...继续阅读 (6)

@manxisuo的《通过一张简单的图，让你彻底地、永久地搞懂JS的==运算》一文中详细的阐述了JavaScript中的==运算符。其实在JavaScript中还有一个另外一个运算符===。那么这两者有何不一样呢？这篇文章就一起来看看JavaScript中==和===有何不同。关系表达式==和===都是JavaScript中的关系表达式运算符，与对应的还有!=和!==。==和===运算符主要用于比较两个值是否相等。当然它们对相等的定义不尽相同。两个运算符允许任意类型的操作数，如果操作数相等则返回true，否则返回false。==和===定义==和===虽然都是关系表达式运算符，但它们的定义是有所不同的：==:称作相等运算符（Equality Operator），它用来检测两个操作是否相等，这里的相等的定义非常宽松，可以允许类型的转换===:称作严格相等运算符(Strict Equality)，也被称之为恒等运算符(Identity Operator)或全等运算符，它用来检测两个操作数是否严格相等== 和 ===运算规则JavaScript中==和===运算符，它们的运算都具有自己的运算规则。==运算规则==运算符对于两个数比较并不严格。如果两个操作数不是同一类型，那么相等运算符会尝试进行一些类型转换，然后进行比较。在转换不同的数据类型时，其会遵循下列基本原则：如果两个操作数的类型相 ...继续阅读 (7)

本文转载自：@skywalker_z的《使用 Chrome Timeline 来优化页面性能》一文。原文地址：https://blog.coding.net/blog/Chome-Timeline。有时候，我们就是会不由自主地写出一些低效的代码，严重影响页面运行的效率。或者我们接手的项目中，前人写出来的代码千奇百怪，比如为了一个 Canvas 特效需要同时绘制600个三角形，又比如 Coding.net 的任务中心需要同时 watch 上万个变量的变化等等。那么，如果我们遇到了一个比较低效的页面，应该如何去优化它呢？优化前的准备：知己知彼在一切开始之前，我们先打开F12面板，熟悉一下我们接下来要用到的工具：Timeline：嗯没错就是它。下面逐一介绍一下吧。区域 1 是一个缩略图，可以看到除了时间轴以外被上下分成了四块，分别代表 FPS、CPU 时间、网络通信时间、堆栈占用；这个缩略图可以横向缩放，白色区域是下面可以看到的时间段（灰色当然是不可见的啦）。区域 2 可以看一些交互事件，例如你滚动了一下页面，那么这里会出现一个scroll的线段，线段覆盖的范围就是滚动经过的时间。区域 3 则是具体的事件列表了。一开始没有记录的时候，所有的区域都是空的。开始统计和结束统计都很简单，左上角那坨黑色的圆圈就是。它右边那个长得像“禁止通行”的按钮是用来清除现有记录的。当有数据的时候，我们把鼠标 ...继续阅读 (21)

使用动画在移动应用程序中很容易的。如果您遵循我们的建议，移动应用程序中使用动画变得很简单。虽然现在很多人在移动应用程序中使用CSS3 Animation来制作动画，当然很多人也不这么做。很多最佳实践，还是不断的被忽视。出现这种情况主要是因为仍有许多人并不真正了解这些最佳实践存在的真正原因，因此没有大力的支持。面对这么多的终端设备，如果不考虑优化你的代码，你最终将会交付一个水平一般的效果，从而失去一份最高份额的市场占有率。这篇文章我们想给你提供一个正确利用和使用CSS3的特性，这样做我们首先需要了解一些事情。理解时间轴什么是浏览器的渲染?这个非常简单的时间称为关键渲染路径(Critical Rendering Path)。实现平滑的动画，我们需要关注于改变属性影响合成的步骤，而不是在前一层添加这个压力。Style浏览器开始计算应用中的元素样式——重新计算样式风格。Layout接下来的一层，浏览器会为这些元素生成形状和位置——布局。浏览器会给页面设置属性，比如width、height以及margin、left、top、right和bottom等。Paint浏览器将开始给每个元素填充像素。它们使用属性有：box-shadow、border-radius、color、background-color等。Composite浏览器开始在屏幕中绘制这些图层(Layout)。现代浏览器可以利用tr ...继续阅读 (36)

本文转载自：bubkoo的《使用 FLIP 来提高 Web 动画的性能》一文。原文地址：http://bubkoo.com/2016/03/31/high-performance-animationsCSS 动画已经存在很多年了，使用恰当可以很好地提高网站的用户体验，也正是由于其容易使用，就很可能出现性能低下的动画，从而降低了整个页面的运行效率。回想一下：你曾经是否使用过 CSS 来改变元素的宽度、高度或绝对位置？如果回答是肯定的，就意味着你触发了性能低下的重排或重绘计算，在某些情况下甚至可能导致页面闪烁。什么样的情况会导致页面闪烁呢？现代浏览器根据设备的刷新率来刷新页面中的内容，对大多数设备而言，屏幕以60次每秒的频率刷新，即60HZ。如果在屏幕上出现了某些运动，如滚动、过渡或动画，浏览器应该每秒刷新60帧，如果某些帧花费的时间太长，进而导致浏览器的刷新频率跟不上设备的刷新频率（跳帧现象），就会出现页面闪烁。所以在 Web 应用中运行的动画都应该保持在60FPS下。为了生成流畅的动画，你需要让浏览器尽可能少地工作，最好的办法就是充分利用 GPU，并避免动画过程中触发页面重排或重绘。目前 Chrome，Firefox，Safari，Opera 和 IE11 都对transform（translate，rotate和scale） 和opacity进行硬件加速。所以我们应该尽量使用 t ...继续阅读 (13)

函数式编程蔚然成风，越来越多的开源项目、技术交流在使用函数式编程的术语降低开发或沟通成本，这无形中对不了解函数式编程的开发者造成了一定的学习门槛，翻译本文的初衷就是要普及函数式编程的基本知识，从新的角度扩展编程思维。至于为什么要使用 JavaScript 演示函数式编程，一方面是因为 JavaScript 的特性在很多方面与函数式编程浑然天成，另一方面是因为 JavaScript 是世界上最 XX 的语言……Arity指函数的参数数量，由-ary和-ity这两个英文后缀拼接而成：const sum = (a, b) => a + b; const arity = sum.length; console.log(arity); // => 2Higher-Order Functions高阶函数，此类函数可以接收其他函数作为参数，也可以返回一个函数作为返回值：const filter = (pred, xs) => { const result = []; for (let idx = 0; idx < xs.length; idx++) { if (pred(xs[idx])) { result.push(xs[idx]); } } return result; }; ...继续阅读 (7)