现代 CSS

提前思考CSS Scroll Snap Points

CSS最近介绍了一个关于scroll snap points的新功能,为触控以及输入设备的用户提供一个流式、精确的滚动体验。关于创建scroll snap效果,有许多jquery插件可供你选择,但是我们今天所讲述的不是通过安装一个插件来控制滚动的行为,而是使用原生的CSS scroll snap points来实现。

Sass绘制多边形

CSS画图形在Web运用中时常看到,比如三角形、五角星,心形,Ribbon等。不过以前使用CSS绘制图形一般都是借助于border来绘制,但这样的方式受到一定的限制,而且实用价值也有所限制。这篇文章将介绍使用CSS的clip-path来完成正多边形的绘制,并且借助CSS预处理器Sass给这两种方法定义对应的混合宏和函数,实现正多边形的开发。

实例解析ES6 Proxy使用场景

ES6 中的箭头函数、数组解构、rest 参数等特性一经实现就广为流传,但类似 Proxy 这样的特性却很少见到有开发者在使用,一方面在于浏览器的兼容性,另一方面也在于要想发挥这些特性的优势需要开发者深入地理解其使用场景。就我个人而言是非常喜欢 ES6 的 Proxy,因为它让我们以简洁易懂的方式控制了外部对对象的访问。在下文中,首先我会介绍 Proxy 的使用方式,然后列举具体实例解释 Proxy 的使用场景。

【转载】改变JavaScript的三个点: spread运算符与rest参数

当在函数调用中通过arguments对象访问参数时,我总是感觉很不爽。它那硬编码的名字使得要想在内层函数(它拥有自己的arguments)中访问外层函数的arguments变得很困难。更糟糕的是它是一个类数组对象。这意味着你不能直接在它身上调用类似.map()或是.forEach()这样的方法。

【转载】JavaScript中‘this’关键词的优雅解释

许多时候,this关键词对我以及许多刚起步的JavaScript程序员来说,都是一个谜。它是一种很强大的特性,但是理解它需要花不少功夫。对有Java, PHP或者其他常见的编程语言背景的人来说,this仅仅被看成是类方法中当前对象的一个实例:不会多也不会少。多数时候,它不能在方法外被使用。正是这样一种简单的使用方法,避免了混淆。

声明JavaScript函数的六种方法

一个函数一次性定义的代码块可以多次调用。在JavaScript中,一个函数有很多元素组成,同时也受很多元素影响:函数体的代码、函数的参数列表、 接受外部变量域的变量、返回值、当函数被调用时,this指上下文、 命名和匿名函数、 函数对象作为变量声明和 arguments对象(在ES6中的箭头函数中将丢弃这个)等。这些元素都会影响到函数,但具体影响函数的行为还是取决于函数的声明类型。

CSS的clip-path

在Web网页中主要是以矩形分布的。而平面媒体则倾向于更多不同的形状。造成这种差异的原因是因为缺少合适的工具去实现我们平面媒体中的内容。这也就造成了很多设计师的创意发挥,就算是有创意,前端实现也将付出巨大的开发成本。

字体加载策略大全

本指南不针对于具有优先级加载以及用例示范的font icons,或许,SVG会是一个更好地长期选择。如果你正在寻找具体的方法,这里的一些相关链接可能对你的帮助会更加直接。

【转载】大型项目中的结构化CSS

写CSS很容易。写持续可维护的CSS则很难。你也许听说过不下100 次了。因为在CSS中默认都是全局的申明。如果你是个写C的程序员你知道全局变量是糟糕的。如果你是程序员你会知道,独立及可组合的模块是一个可维护系统的关键所在。

理解Critical CSS

CSS 资源的加载情况对浏览器渲染页面的影响很大,这是因为默认情况下浏览器只有在完成 <head> 部分 CSS 样式的加载、解析之后才会渲染页面。这种渲染方式意味着,如果 CSS 文件很大,那么用户就必须等待很长的时间才能看到渲染结果。针对这一问题,我们将在接下来的内容中讨论一种非常规的解决方案,提高页面的渲染速度,这一方案常被称为 critical rendering path

页面

返回顶部