去年在CSS Conf科普了一下《CSS Grid Layout》相关的概念。会后PostCSS的作者@Andrey Sitnik给我力荐grid-kiss这个PostCSS插件。说这个插件可以让CSS Grid变得更为简单。一直都想尝试一下，就是没动手，今天体验了一下，还是很有意思的。今天花点时间整理一下，跟大家一起分享。CSS Grid是什么在详细介绍这个插件之前，先简单的告诉大家，我们这里所说的Grid是CSS布局中的一个模块。它不是早前所说的网格系统（Grid system），而是CSS 布局自带的一个布局模块。这个模块被称为CSS Grid，也有人把其称为CSS原生网格。如果你从未接触过CSS Grid相关的知识，建议你先阅读站上早前分享过的CSS Grid相关教程。特别推荐大家阅读这篇译文《CSS Grid布局指南》，如果你觉得译文质量不够好，你也可以移步阅读@Chris House写的原文《A Complete Guide to CSS Grid Layout》。这里假设你已经对CSS Grid有了一定的基础了解，哪怕是最基础的知识。因为我们今天不是来介绍CSS Grid的基础知识，而是介绍如何使用PostCSS插件grid-kiss让制作网格变得更容易、更简单。如果你感兴趣的话，欢迎继续往下阅读。grid-kiss目的grid-kiss是PostCSS万千插件中的一 ...继续阅读 (20)

去年在CSS Conf科普了一下《CSS Grid Layout》相关的概念。会后PostCSS的作者@Andrey Sitnik给我力荐grid-kiss这个PostCSS插件。说这个插件可以让CSS Grid变得更为简单。一直都想尝试一下，就是没动手，今天体验了一下，还是很有意思的。今天花点时间整理一下，跟大家一起分享。CSS Grid是什么在详细介绍这个插件之前，先简单的告诉大家，我们这里所说的Grid是CSS布局中的一个模块。它不是早前所说的网格系统（Grid system），而是CSS 布局自带的一个布局模块。这个模块被称为CSS Grid，也有人把其称为CSS原生网格。如果你从未接触过CSS Grid相关的知识，建议你先阅读站上早前分享过的CSS Grid相关教程。特别推荐大家阅读这篇译文《CSS Grid布局指南》，如果你觉得译文质量不够好，你也可以移步阅读@Chris House写的原文《A Complete Guide to CSS Grid Layout》。这里假设你已经对CSS Grid有了一定的基础了解，哪怕是最基础的知识。因为我们今天不是来介绍CSS Grid的基础知识，而是介绍如何使用PostCSS插件grid-kiss让制作网格变得更容易、更简单。如果你感兴趣的话，欢迎继续往下阅读。grid-kiss目的grid-kiss是PostCSS万千插件中的一 ...继续阅读 (24)

本文转载自：众成翻译译者：Geoff链接：http://www.zcfy.cc/article/2303原文：https://evilmartians.com/chronicles/postcss-modules-make-css-great-again译者注（@GeoffZhu）: 这篇适合一些使用过预处理CSS的开发者，比如LESS，Sass或Stylus，如果你都没用过，那你一定不是个好司机。在PostCSS中早就可以使用CSS Modules了，该篇作者贡献了一个新工具，可以让更多开发者方便的使用最新的CSS Modules。我们和全局作用域的CSS斗争了多年，现在终于是时候结束它了。不管你用的是什么语言还是框架，CSS命名冲突将不再是个问题。我将给你展示一下PostCSS和PostCSS-modules如何使用，并且可以在服务端使用它们。 CSS起初只是一个美化文档的工具，但是事情到1996年发生了变化。浏览器中不再单单只有文档了，即时通讯，各种软件，游戏，没什么是浏览器不能承载的。当今，我们在HTML和CSS方面已经走了很远很远，开发者们激发出了CSS所有的潜力，甚至创造出了一些CSS本身都快驾驭不了的东西。每一个有经验的开发者都知道 —— 每次使用全局命名空间都是留下了一个产生bug的隐患，因为很快就可能出现类似命名冲突之类的问题，再加上其他方面(项目越来越大等)的影 ...继续阅读 (19)

本文转载自：众成翻译译者：Geoff链接：http://www.zcfy.cc/article/2303原文：https://evilmartians.com/chronicles/postcss-modules-make-css-great-again译者注（@GeoffZhu）: 这篇适合一些使用过预处理CSS的开发者，比如LESS，Sass或Stylus，如果你都没用过，那你一定不是个好司机。在PostCSS中早就可以使用CSS Modules了，该篇作者贡献了一个新工具，可以让更多开发者方便的使用最新的CSS Modules。我们和全局作用域的CSS斗争了多年，现在终于是时候结束它了。不管你用的是什么语言还是框架，CSS命名冲突将不再是个问题。我将给你展示一下PostCSS和PostCSS-modules如何使用，并且可以在服务端使用它们。 CSS起初只是一个美化文档的工具，但是事情到1996年发生了变化。浏览器中不再单单只有文档了，即时通讯，各种软件，游戏，没什么是浏览器不能承载的。当今，我们在HTML和CSS方面已经走了很远很远，开发者们激发出了CSS所有的潜力，甚至创造出了一些CSS本身都快驾驭不了的东西。每一个有经验的开发者都知道 —— 每次使用全局命名空间都是留下了一个产生bug的隐患，因为很快就可能出现类似命名冲突之类的问题，再加上其他方面(项目越来越大等)的影 ...继续阅读 (30)

Sass多年来一直是我的首选。最近我有一段时间，想尝试使用PostCSS的cssnext插件来处理CSS样式。我一直想使用工具尝试写一些CSS的新特性。同时自己的个人网站也是一个最佳测试这些新特性的实验地。第一步先了解我使用Sass写的东西，需要知道我用了些什么功能，以确保找到一个替代的工具（PostCSS插件）。下面这个列表是我项目中用到的一些功能：引入部分（partial imports）变量（variables）嵌套（nesting）混合宏（mixins）扩展（extend）占位符（placeholder classes）颜色函数（darken and rgba color functions）压缩（compression）准备工作在了解CSS新特性语法和其他有趣的东西之前，需要做一些必要的准备工具。Sass项目的文件结构是有几个典型用法。使用下划线（_）来命名文件名，这些文件都是以.scss作为文件扩展名。其中两个文件夹modules和partials放置对应的Sass文件，在modules文件夹中的不会产生对应的CSS，其中放置是有关于变量、占位符和混合宏之类的文件，在partials放置会编译出CSS（CSS-producing）的Sass文件。开始的文件结构如下：css/ |--scss/ |----modules/ |------_module.scss |---- ...继续阅读 (17)

Sass多年来一直是我的首选。最近我有一段时间，想尝试使用PostCSS的cssnext插件来处理CSS样式。我一直想使用工具尝试写一些CSS的新特性。同时自己的个人网站也是一个最佳测试这些新特性的实验地。第一步先了解我使用Sass写的东西，需要知道我用了些什么功能，以确保找到一个替代的工具（PostCSS插件）。下面这个列表是我项目中用到的一些功能：引入部分（partial imports）变量（variables）嵌套（nesting）混合宏（mixins）扩展（extend）占位符（placeholder classes）颜色函数（darken and rgba color functions）压缩（compression）准备工作在了解CSS新特性语法和其他有趣的东西之前，需要做一些必要的准备工具。Sass项目的文件结构是有几个典型用法。使用下划线（_）来命名文件名，这些文件都是以.scss作为文件扩展名。其中两个文件夹modules和partials放置对应的Sass文件，在modules文件夹中的不会产生对应的CSS，其中放置是有关于变量、占位符和混合宏之类的文件，在partials放置会编译出CSS（CSS-producing）的Sass文件。开始的文件结构如下：css/ |--scss/ |----modules/ |------_module.scss |---- ...继续阅读 (17)

在前面的教程中，看到了怎么创建CSS Shapes,即在元素定认一个规则图形。里面都是些基础的知识，比如说创建一个圆，然后多行文本围绕这个圆。在这篇文章中，我们将探索一些更复杂的图形，让你的布局不在局限于四四方方的图形中。创建多边形除了可以创建圆和矩形之外，还可以创建多边形，多边形一般有多个边(五个或五个以上)组成，比如五边形或六边形。在CSS中可以使用polygon()函数来创建，可以在里面传多个坐标值，每个坐标值之间用逗号隔开：.shape { float: left; background-size: contain; background-repeat: no-repeat; margin: 30px; width: 265px; height: 265px; shape-margin: 20px; } .pentagon { background-image: url('../img/pentagon.svg'); shape-outside: polygon(32px 126px, 163px 32px, 293px 127px, 244px 282px, 82px 281px); }上面的代码，我们添加了五个坐标点，从而生成了一个五边形。可以在这个基础上添加一个或更多个坐标点，从而可以生成六边形、七边形或八边形等。 ...继续阅读 (26)

在几个星期前,W3C在2016年11月发布了新的HTML 5.1 recommendation,HTML规范得到了重大改进，在最近的博客中,W3C将新的主版本称为黄金标准，因为HTML 5.1为我们提供了新的方法，我们可以使用HTML来创建更灵活的网络体验。注意：目前并非所有浏览器都支持所有这些功能，所以在使用它们之前,请不要忘记检查浏览器是否支持。1.为响应设计定义多个图像资源<picture> <source srcset="mobile.jpg, mobile-hd.jpg 2x" media="(max-width: 360px)"> <source srcset="large.jpg, large-hd.jpg 2x" media="(min-width: 1920px)"> <img src="default.jpg" srcset="default-hd.jpg 2x" alt="your image"> </picture>在HTML 5.1中，你可以使用<picture>标签和srcset属性来使响应式图像选择成为可能。<picture>标签表示图像容器，其允许开发者声明不同的图像资源以便适应UA的视口大小，屏幕像素密度，屏幕类型和在响应设计中使用的其他参数 ...继续阅读 (13)

去年@Erik Jung写了一篇文章来介绍CSS4 Color特性，那时并没有花时间去探讨其具体的使用方式，只是略知他能让你基于某个颜色，添加调节参数，得到新的颜色。由于其还是Color的新特性，所以目前如果不依赖于其他的手段，你在浏览器里是看不到效果的。当然也有非常出色的工程师，比如@Ahmad Shadeed写的一篇文章中，使用rgba()模拟出color-mod()函数的特性。特别声明，其实并没有什么CSS4一说，其只是Level 4的一种简称，比如这里所说的CSS4 Color，其实就是指CSS Color Module Level 4。为了好记，所以说是CSS4。有关于这方面的具体解释可以阅读《为什么没有CSS4：关于CSS等级的解释》一文。昨天看到@Tyler Gaw使用React写的ColorMe，非常有意思，演示了color-mod()函数如何基于一个颜色，在不同条件下的变化。这篇文章接下来要说的就是CSS Color Module Level 4中的color-mod。在具体介绍它之前，我们先简单的看看下面的录屏效果。通过ColorMe，基于#29B4F0颜色，调整不同的参数得出的颜色效果：比如：color(#29B4F0 a(63%) s(45%) h(176) l(54%) tint(39%) shade(63%) w(56%) b(73%) contrast ...继续阅读 (25)

本文转载自：众成翻译译者：少年阿布DX链接：http://www.zcfy.cc/article/390原文：https://www.smashingmagazine.com/2016/05/understanding-the-css-property-value-syntax/万维网联盟（W3C）使用了一套特别的语法来定义 CSS 的属性值，能让所有的 CSS 属性都用。如果你曾看过 CSS 规范，你可能已经见过这套语法了。就像border-image-slice的语法，让我们看看：<'border-image-slice'> = [<number> | <percentage>]{1,4} && fill?如果你不知道这些符号以及它们如何工作的话，这套语法可能非常难理解。然而，这值得花时间来学。如果你理解 W3C 是如何定义这些属性值的，你就可以理解 W3CCSS 规范中任意一个了。巴科斯范式首先，我们看看巴科斯范式（Backus-Naur Form），因为这能帮我们理解 W3C 的属性值语法。Backus–Naur Form（BNF） 是用来描述计算机语言语法的正式符号集。它被设计得很清晰，所以在语言如何表达方面不会造成二义或者模糊。最初 Backus-Naur 符号集有很多的扩展与变种在今天都在使用，包括扩展巴科斯范式（E ...继续阅读 (16)

在杂志排版中，常常能看到首字下沉的效果。在Web的排版中，也常常能看到上图这样的效果。并且常常看到的是首段首字下沉。那么今天这篇文章咱们来聊聊如何使用CSS实现首字下沉效果。::first-letter实现首字下沉效果早期中，实现首字下沉都是能过伪元素::first-letter来实现。其实现原重非常的简单，就是把首字font-size值设置较大，然后能过float来实现。比如：p::first-letter { color: #c69c6d; float: left; font-size: 5em; margin: 0 .2em 0 0; }上面这段代码将会把所有段落的首字下沉，如果仅需要对首段首字下沉，那还需要配合其它的选择器来实现。p:first-child::first-letter { color: #c69c6d; float: left; font-size: 5em; margin: 0 .2em 0 0; }Initial-Letter前面看到的效果是老式的CSS实现的首字下沉效果。虽然是实现了，但借助float还是存在一定的缺陷，而且灵活度也并不强。不过值得庆幸的是，在CSS Inline Layout Module Level 3提供了一个新的思路和方案：采用initial-letter。这个新属 ...继续阅读 (18)

这两天一直在探究CSS Animation中animation-fill-mode属性中的细节，那是有原因的，具体原因是什么就不多说了。虽然在《理解animation-fill-mode属性》一文让我稍加对该属性有一定的了解。但还有一些潜在的细节和因素还是不为人知。所以我决定花一定的时间彻底的来剖析animation-fill-mode。如果你感兴趣，请继续往下阅读。相关的概念要深入的了解animation-fill-mode，就很有必要对CSS Animation的一些概念进行了解。对于这些概念，这篇文章并不会深入的介绍，只是简单的说说这些概念，能更好的帮助大家更好的理解后续的内容。状态在任何一个动画当中，都会有两个状态：开始状态和结束状态。上图显示的是一个动画的开始状态，一个蓝色的小圆在左屏幕的左边显示。而下面的另一张图，则表示动画的结束状态，即一个放大的蓝色圆在屏幕的右边显示：在CSS Animation中，对于这两种状态，在不同情形下是有不同的解释。比如动画的@keyframes有0%（或者关键词from）和100%（或者关键词to）的样式，那么开始状态是对应0%还是100%状态的样式，这得取决于animation-fill-mode的值。如果你阅读过前面的文章，你可能会有所了解。当然，在@keyframes中有时候并不会显式的通过0%或100%定义样式，这个时候的初始状态 ...继续阅读 (30)

本文转载自：众成翻译译者：jacty链接：http://www.zcfy.cc/article/2104原文：http://meyerweb.com/eric/thoughts/2016/12/05/css-grid/Grid布局来了，Grid布局来了。千真万确，各大浏览器将发布对Grid布局的支持。唔哈哈哈哈~什么？什么？什么？你说什么？2017年3月，Chrome和Firefox将开始默认支持Grid布局。其中，Mozilla将在3月7日发布的Firefox 52版本上开始支持。由于要先在Chrome Canary中支持Grid，所以，谷歌将在3月14号的Chrome 57版本上开始默认支持Grid.一旦在公开版本中默认得到了支持，那么当前在开发版本中的所有Grid功能都将在公开版本中出现。Grid时代就此开始。发布日期会不会跳票？一些奇葩的问题可能延后版本支持。发布日期因此跳票。然而，目前版本的浏览器已实装Grid的相关实现代码，当开发者们认为可以公开发布了，他们往往都会如期发布。所以，Grid将在明年3月得到支持？是的！还有等多久我才能开始使用Grid? 两年还是三年？2017年3月就可以开始使用了。所以，是大概4个月后。但是，不会得到全局（全浏览器）支持。圆角属性目前都尚未得到全局支持，但我相信你一定用过。所以，你是在忽悠我？！事实是，布局与设定元素的UI样式有所不同。如 ...继续阅读 (13)

我相信很多前端开发人员都有基于CSS@keyframes创建动画的经历。甚至其中有很多人创建了一些很复杂的动效和去实验这个特性。如果你想要全面了解这篇文章将要介绍的内容，建议你花点时间阅读我2011年在Smashing Magazine介绍的一个主题，这篇文章也是非常不错的。不过，在今天这篇文章中，我并不想介绍有关于CSS动画中所有的属性，我只想专注于CSS动画中的一个属性：animation-fill-mode属性。这个动画属性对动画影响并不很明显。例如没有人会对CSS动画中animation-name、animation-duration等属性感到困惑。但对于animation-fill-mode呢？我们接下来通过一些简单的示例来阐述。animation-fill-mode语法你可能知道，一个基于关键帧的动画，它是使用@keyframes来定义的。但关键帧它自身并不会做任何事，除非你把关键帧声明好的动画名与元素结合在一下。在CSS中可以通过animation这个属性来完成，你可能明白我的意思：.example { animation: myAnim 2s 500ms 2 normal ease-in forwards; }当然，上面简写的属性，其扩展出来如下所示：.example { animation-name: myAnim; animation-d ...继续阅读 (14)

踏出理解函数式编程概念的第一步是最重要的一步，有时也是最难的一步。不过也不一定，取决于你们的思考方式。现在该做什么？既然你已经学会了所以的新东西，可能就会想了，“现在该做什么？如何将它用在我每天的编程中使用它？”这要视情况而定。如果你能使用像 Elm 或 Haskell 这样的纯函数语言，你就可以尝试全部想法。而且在这些语言中实现起来很方便。如果你只能使用像 JavaScript 这样的指令式语言，而且大多数肯定都是，仍然可以使用很多前面学到的知识，但将需要大量的规则。函数式JavaScriptJavaScript有很多特性让你用更函数式的方式编程。它不纯净，但可以通过一些库做到不可变数据甚至更多。尽管不理想，但如果你不得不用它，为什么不使用一些函数式语言的优点呢。不可变数据首先思考一下数据不可变性。在ES2015(或者叫ES6)中，新增了关键字const。意味着一个变量赋值后，不能再被重新赋值：const a = 1; a = 2; // this will throw a TypeError in Chrome, Firefox or Node // but not in Safari (circa 10/2016)这里的a被定义为常量因此一旦赋值不能再被改变。也是a = 2会抛出异常的原因(除了Safari)(译者注: 在最新版的Safari中测试同样会抛异常) ...继续阅读 (16)

变量是CSS预处理器存在的主要原因之一。为某样东西设置变量的能力，比如颜色，在CSS中让变量保持一致，可DRY，并且易于改变是很有用的。出于相同原因，也可以使用原生CSS变量（“CSS自定义属性”）。但有一些重要的差异应该清楚。一个简单的预处理器变量使用示例如下：$brandColor: #F06D06; .main-header { color: $brandColor; } .main-footer { background-color: $brandColor; }That was the SCSS variant ofSass, but all CSS preprocessors offer the concept of variables:Stylus,Less,PostCSS, etc.这是Sass的变体SCSS，但所有的CSS预处理器都提供了变量的概念：Stylus,Less,PostCSS等等。上面的代码在浏览器中什么也不做。浏览器不会理解声明并抛出它们。预处理器需要编译成CSS才能被使用。这段代码将被编译为：.main-header { color: #F06D06; } .main-footer { background-color: #F06D06; }这才是有效的CSS代码。变量是预处理器语言的一部分，不是CSS本身的语言。一旦代码编译，变 ...继续阅读 (18)

我将从这里说起: 在W3C标准规范中，使用CSS变量并没有任何条件。我认为这是规范文档中的一个很大的缺陷，CSS变量已经实现了很多我们之前无法实现的功能，并且我们未来可能大量使用，缺失文档描述着实让人沮丧。但是如果现在我们需要这些对CSS变量的描述怎么办？好，借助其他的CSS知识，我们可以在一些实例中略窥一二。问题定义我们需要的是使用一个单一的CSS变量来给不同的CSS属性设置不同的值。这些值并不会基于CSS变量(因为这些值并不会由我们的变量计算得出)。我们需要的是条件。使用二进制计算长话短说, 我先列出一些解决策略，然后再详诉。:root { --is-big: 0; } .is-big { --is-big: 1; } .block { padding: calc( 25px * var(--is-big) + 10px * (1 - var(--is-big)) ); border-width: calc( 3px * var(--is-big) + 1px * (1 - var(--is-big)) ); }在这个例子中，我们给所有.block元素设置10px内边距（padding）和1px（border-width） 的边框，条件是作用在那些元素上的--is ...继续阅读 (17)

我们是手机淘宝 虚拟互动实验团队，我们团队专门负责手机淘宝互动活动项目，致力于打造顶级互动氛围；我们面对的亿级用户群体，你的一个创意，一个效果直接向上亿级用户展示。我们是一个有实力的团队，是一个具有高颜值团队，我们更欢迎您的加入。如果您够自信，欢迎简历发至：weihua.lwh@alibaba-inc.com （坐标：杭州西厂）手淘前端开发专家 - Canvas/WebGL 及3D方向岗位描述:熟练掌握Javascript有良好的前端架构能力和项目管理能力精通Canvas和WebGL，并能够使用原生API绘制有图形图像学知识基础熟练掌握矩阵和向量、熟悉空间几何运算有良好的编码习惯岗位要求:负责基础研发技术模型构建与客户端配合完成3D/2D模型渲染、动画及用户交互带动客户端一起完成渲染动画性能调优手淘：前端工程师/专家岗位描述:利用各种Web技术进行开发，制作标准优化的代码，并增加交互动态功能，致力于通过技术改善用户体验，基础的平台的建设HTML5版本以及Web App的前端工作Native App的GUI组件库开发岗位要求:精通JavaScript语言,能够脱离各JS类库后熟练的进行跨浏览器开发熟悉各种Web前端技术,包括HTML/XML/CSS等,有基于Ajax的RIA应用开发经验至少精通一门非Web前端脚本的语言(如Java/Ruby/PHP/C++),并有项目经验对前端技术有 ...继续阅读 (18)

background属性是CSS中最常见的属性之一，它是一个简写属性，其包含background-color、background-image、background-repeat、background-attachment、background-position、background-clip、background-origin和background-size。你可能会说，这些属性再简单不过了，没有可讲的。这篇文章接下来要介绍的不是所有有关于background里面的属性，而是说说background-position属性。在详细介绍background-position之前，先要问大家，你真的了解这个属性吗？言外之意，接下来介绍是你所不了解的background-position相关细节。你所知道的background-positionbackground-position是用来控制元素背景图片的位置。它接受三种值：关键词，比如top、right、bottom、left和center长度值，比如px、em、rem等百分值%大家最常用的是值也可以说最了解的值是关键词和长度值，当然百分比也会使用，然而百分比使用最多的是0%、50%和100%。来看一个简单的例子：将效果图截取做一个简单的分析：图片上的标注信息已经告诉大家很详细的信息了。示例中容器具备下述特性：div容器尺寸410px ...继续阅读 (18)

CSS网格布局非常擅长在线制作漫画，特别是你想要灵活的实现你想要的漫画风格。这篇文章中我们通过使用巴里猫（Barry the cat）来演示如何构建一个具有响应式的漫画效果。巴里猫本教程借用GraphicRiver艺术品（沉睡的肥猫）来做演示：让你的浏览器快速支持Grid别忘了，如果你想让你的浏览器快速支持CSS Grid布局特性，可以阅读《CSS Grid布局：快速入门》一文。文章中指导你怎么让你的浏览器能快速支持CSS Grid布局特性。点击这里浏览DEMO效果，你收缩浏览器大小，可以看到DEMO响应式效果。HTML结构先来写HTML结构：<section class="grid-1"> <div class="panel panel-title"> <h1>Barry’s Cushion</h2> <p>A tale of lethargy and soft furnishings</p> </div> <div class="panel panel-1"></div> <div class="panel panel-2"></div> <div class="panel panel-3"& ...继续阅读 (21)

本文转载自：众成翻译译者：谢于中链接：http://www.zcfy.cc/article/2001原文：https://css-tricks.com/the-power-of-rgba/?utm_source=Frontend-Weekly&utm_campaign=8f1d75d1db-EMAIL_CAMPAIGN_2016_12_07&utm_medium=email&utm_term=0_754e22de12-8f1d75d1db-379971901新出现的 CSS颜色配置函数是一项非常有意思的功能，它给予我们在浏览器中直接操纵颜色的能力。例如，当鼠标悬停在按钮上时，可以使用color: color(black darkness(50%))改变颜色，而不需要使用 Sass 这类 CSS 预处理器。但是浏览器现在对这种颜色函数还不支持，我们只能暂时使用 PostCSS 将其编译成常规的颜色。当然，我们也可以使用 CSS 中的rgba()函数达到类似的效果，下面就让我们看看具体该如何操作。工作原理在设计软件中，如果我们分别将具有一定透明度的白色盒子和黑色盒子放在一个较大的蓝色盒子上，它们将分别变成浅蓝色和深蓝色。这是因为当小盒子的透明度较高时，前景色和背景色将会混在一起。如果我们将背景色从蓝色变成绿色，你能想出结果将会怎样吗？如你所见，当背景色变成绿色时 ...继续阅读 (14)

大多数人知道现代网络浏览器使用GPU来渲染部分网页，特别是具有动画的部分。 例如，使用transform属性的CSS动画看起来比使用left和top属性的动画更平滑。 但是如果你问，“我如何从GPU获得平滑的动画？”在大多数情况下，你会听到像“使用transform:translateZ(0）或will-change:transform这样的建议。这些属性已经成为像我们如何在Internet Explorer 6下使用zoom:1（如果你明白我的意思的话）在准备GPU的动画或说合成加速，浏览器厂商喜欢这样叫它。但有时，在简单demo中运行的又好又平滑的动画,放在一个真实的网站上运行的时候却很慢，会造成视觉假象，甚至导致浏览器崩溃。 为什么会发生这种情况？** 我们如何解决它？** 让我们试着去了解。一个免责声明在我们深入GPU加速之前，我想告诉你最重要的事:这是一个giant hack。 你不会在（至少现在）W3C的规范中找到任何关于合成加速是如何运作,关于如何在合成层上显式地放置一个元素，甚至是关于合成加速本身。 它只是浏览器应用在执行某些任务时的优化，而且各个浏览器厂商都通过自己的方式去实现这种优化。在本文中你将学到的一切并不是对合成加速是如何运作的官方解释，而是我用自己的一些常识和不同浏览器系统工作原理的知识去实验的结果。可能会有一些小错误，有些过段时间可能会改变 —— 我已 ...继续阅读 (14)

这里有一些JavaScript初学者应该知道的技巧和陷阱。 如果你已经是一个专家，那就随意阅读。你尝试过给一组数字排序吗?Javascript的sort()方法默认用来给数字排序所以[1,2,5,10].sort()将会输出[1, 10, 2, 5].要正确的对数组进行排序的话,你可以使用[1,2,5,10].sort((a, b) => a — b)只要你一开始就知道这个坑的话,解决起来就很容易.new Date()很奇妙new Date()可以接受:没有参数就返回当前时间一个参数x就返回当前时间1970年1月1日，+ x毫秒,Unix的人知道为什么new Date(1，1，1)返回1901年，2月1日.因为你知道，第一个1意思是1900年后的1年，第二个1是这一年的第二个月（因此二月） —— 二月的正确索引在索引表中为1，第三个1显然是这个月的第一天，所以是1—— 因为有时索引确实从1开始。哦，还有new Date(2016年，1，1)不会从2016年追加到1900年。它仅仅表示2016年。Replace不替代我觉得这是件好事,因为我不喜欢函数去改变他输入的值,你应该也知道replace只会替换他第一个匹配:let s = "bob" const replaced = s.replace('b', 'l') replaced === "lob" // first matc ...继续阅读 (10)

2014年@Jason Pamental写了一篇博客详细介绍了Web排版的缩放。@Richard Rutter在另一篇文章中介绍如何更好的表达你的排版。比如在一个Banner区，如何让文本显示的各为大气，又适合你的Web排版，如下图所示：提出的思考自从2010年响应式设计概念提出一直以来，在我的印象中:图片的响应式和文本排版的响应式都是制约响应式应用的两大阻碍。虽然有很多热衷于响应式设计的设计师和开发人员都在致力于解决这方面的问题。但至目前为止，还未看到一套有关于图片响应式的文本排版响应式的最佳解决方案。当然，你可能会说我说的比较片面，为什么呢？你肯定会说，对于图片的响应式不是有了<picture>标签和srcset属性了？这不是很好的解决方案吗？对于文本排版，可能会想到在不同的断点之下改变root元素html的font-size来做相应的处理。那么问题来了？这些真的是很好的解决方案？值得我们去思考一下。那么今天我们来思考一下响应式的文本排版，也就是标题所说的：如何精确控制响应式排版。响应式排版的使用场景简单的回忆一下响应式排版的使用场景，其实他的使用场景对于现代Web排版还是很常见的。比如@Richard Rutter在他的博文中所说的，怎么让Banner区域标题在不同的终端屏幕下显示得更为大器（文章开头的示意图）。特别是在移动端时代，都希望在面对不同的移动终端的时候 ...继续阅读 (14)

在Web布局中，特别是在PC端中，常常可以看到这样的设计风格：内容居中，然后Banner区全屏。这也就是标题所说的效果，限宽的容器中实现全屏效果。那么问题来了，在实际中如何实现在限宽的容器中实现全屏效果。比如下面的设计风格：作为一名前端开发人员，上图的效果并不陌生。假设我们内容区域是960px，然后水平居中。而其中Banner区域是全屏效果。如下所示：那么实际开发中以什么方式来做更为方便灵活呢？这就是这篇文章需要介绍的内容。页面结构针对这样的设计风格，前端人员考虑的结构会有：<div class="header"> <div class="container"></div> </div> <div class="banner"> <div class="container"> <img src="" alt=""> </div> </div> ...这种结构要实现上述的需求，并不复杂。.container { width: 960px; margin-left: auto; margin-right: auto; } .banner .container { width: 100%; } .banne ...继续阅读 (15)

box-decoration-break属性是CSS片段模块（CSS Fragmentation Module Level 3）中的一个属性。主要用来指定background、padding、border、border-image、box-shadow和clip在行内元素中如何使用。行内元素的盒模型是打断的，也就是内联盒子是多行的情况之下。行内元素片断块先来回忆一下，在CSS中行内元素具备多行的时候，如果border、padding或者说background这样的属性运用在其身上时效果如下图所示：但实际上，我们想要的效果是这样的：记得@CHRIS COYIER写过一篇文章《Multi-Line Padded Text》，介绍如何通过CSS的一些黑魔法实现多行文本padding和background填充的效果。虽然黑魔法能实现我们想要的一个效果，但实现的成本还是不低。事实上也更希望有更好的CSS属性能解决这个问题。那么这个CSS属性就是今天要说的box-decoration-break。box-decoration-break文章开头也提到了box-decoration-break属性是用来控制行内元素有关于padding、background、border-image、border、margin和clip属性在行内元素多行情形下的渲染形式。在MDN上是这样描述的：The box-d ...继续阅读 (21)

早在2012年，我写了一篇有关于CSS Grid的新规范，当时只得到IE的支持。我当时没有意识到CSS Grid布局会成为一个主题。从此之后，我为此付出了四年的时间来研究、测试Grid布局，并且写相关的文章和到处宣讲。当我在2016年12月再次写这篇文章时，我非常期待CSS Grid布局能得到Chrome和Firefox支持。明年初希望在这些浏览器中能得到扩展和改进2012年我探索过的Grid特性。在过去四年中在CSS规范组工作的过程，从浏览器的工程师到规范书写和Web开发人员。讨论了很多用例和功能补充。CSS Grid布局规范现在处于候选人推荐状态。这种状态也意味着规范已完成。现在在讨论的是一些实现细节，而不是新功能。规范一些细节是有必要的，以便于浏览器能更好的实现。这对于我们开发人员也是有好处，也使开会更容易。然而这并不意味着停止了工作，而新的用例和特性不能提出Grid布局的未来功能。因此，在这篇文章中我将看看我认为网格布局未来还能做些什么。我喜欢这样去思考，不只是考虑CSS Grid，还可以考虑任何CSS规范。考虑如何更好的适应你的用例。Subgrid: Level 1丢去的特性CSS Grid布局在Chrome，Firefox和Webkit内核浏览器中都得到很好的实现，很多功能都得到了支持。然而有一个非常出色的功能，到目前为止在任何浏览器都还没有实现，那就是子网格（ sub ...继续阅读 (13)

Web布局非常困难。它如此困难的原因是自从使用CSS来完成Web布局开始就并没有真正的完成复杂的Web布局。虽然我们使用很多技术手段能实现Web的固定布局，但是这些方法在响应式设计中又出现很多局限性与不足。不过值得庆幸的是，我们有了Flexbox模块，或许还有很多读者已经开始使用CSS Grid和Box Alignment模块做Web布局。在这篇文章中，我将解释如何将这些组合在一起使用，你会发现通过对Flexbox的理解，你也能更好的理解Grid布局。浏览器支持性CSS Grid布局目前仅在Google Chrome Canary、Webkit Safari、Firefox Nightly浏览器可以看到效果。如果你需要在Chrome、Safari、Firefox或者Opera浏览器中看到CSS Grid布局的效果，需要通过浏览器的flag或者available开启开发者实验属性。我尽量在维护一个有关于浏览器对CSS Grid布局的支持列表。display的新属性值grid和flex是display的两个新属性值。使用display:flex可以让一个元素变成Flex容器，而使用display:grid可以让一个元素变成Grid容器。当我们这样做的时候，Flex容器或Grid容器的子元素就分别变成了Flex项目和Grid项目。它们也直接使用了Flex或Grid项目的初始值。displ ...继续阅读 (17)

起因网上认识的某FE 找我接的私活，想想觉得可以就干了。样式思路绘制好灯泡运动的圆角矩形路径，每个路径点入栈，每次渲染都基于各个路径点坐标绘制小灯泡，周而复始。怎么画圆角矩形非常简单，就是步骤比较繁琐，需要定位一个起始点 然后依次。上、右上圆角、右、右下圆角、下、左下圆角、左、左上圆角：function drawRoundedRect(x,y,w,h,r,bdWidth=3,bdColor,bgcolor){ ctx.beginPath(); ctx.moveTo(x+r,y); ctx.lineWidth = bdWidth; ctx.strokeStyle = bdColor; ctx.arcTo(x+w,y,x+w,y+h,r); ctx.arcTo(x+w,y+h,x,y+h,r); ctx.arcTo(x,y+h,x,y,r); ctx.arcTo(x,y,x+w,y,r); ctx.stroke(); if(bgcolor) { ctx.fillStyle = bgcolor; ctx.fill() }; ctx.closePath(); }我们通过这个函数，可以尝试先绘制出两个圆角矩形：获得灯泡的运动轨迹和绘制圆角矩形相同，我们需要获得灯泡的运动轨迹：function getTrail () { va ...继续阅读 (18)

踏出理解函数式编程概念的第一步是最重要的一步，有时也是最难的一步。不过也不一定，取决于你们的思考方式。引用透明性引用透明是个有趣的概念，它是指一个纯函数能安全地使用其表达式替换。下面用一个例子来说明。在代数中如果有下面的公式：y = x + 10如果给出：x = 3你可以将x带回公式得到：y = 3 + 10等式依然成立。我们也可以在纯函数中做同样的变换。这有一个Elm的纯函数，用来在给定字符串两侧添加单引号：quote str = "'" ++ str ++ "'"然后下面是一段使用了它的代码：findError key = "Unable to find " ++ (quote key)这里的findError在无法找到key时构建了一个错误信息。因为quote函数是纯函数，我们可以将findError中的函数调用换成quote函数本身(只是一个表达式)：findError key = "Unable to find " ++ ("'" ++ str ++ "'")我将这叫做反向重构(我认为这么说更好理解)，一个让程序员或程序(比如编辑器和测试程序)使用的过程。这对分析递归函数尤为有用。执行顺序大多数程序是单线程的，即一次有且仅有一段代码被执行。即时你有，大多数线程也必须为等待I/O完成阻塞，比如文件操作，网络操作等。当我们写代码时，习惯用自然顺序来考虑 ...继续阅读 (14)