• 表格边框你知多少

    Posted by : lon.y@qq.com on 2017年11月10日

    table之间的边框存在共用问题,自然而然就存在冲突。既然存在冲突,那么就势必涉及到最后渲染哪一个样式的问题。本文就主要研究当冲突产生时,如何让浏览器按照自己意愿渲染冲突边框。在这篇文章中都有介绍,以及对表格的边框渲染原理进行了深度的剖析 原理分析 表格行与列边框样式处理的原理分析 1、border-style:none优先级最低 结论     a)当且仅当两个相邻产生冲突的边框的border-style为none时,冲突边框才不会显示 2、border-

    阅读全文...

  • 实现达到 60FPS 的高性能交互动画

    Posted by : lon.y@qq.com on 2017年11月1日

    原文链接:Performant Web Animations and Interactions: Achieving 60 FPS 译者注:这篇大部分是老生常谈,但也稍微有一些新东西呢,要看到最后哦 =) 高性能的 Web 交互动画:如何达到 60FPS 每一个追求自然效果的产品都希望拥有一套顺畅的交互流程。但开发者可能会忽略一些细节,导致出现性能糟糕的 Web 动画,不仅会产生“页面垃圾”(janky),最直接的体验就是页面卡顿。开发者往往会花大量精力在

    阅读全文...

  • JavaScript 开发者的 10 款必备工具

    Posted by : lon.y@qq.com on 2017年11月1日

    JavaScript,一种所有主流浏览器都支持的语言,是开发基于浏览器的 Web 应用程序的主力,几乎每年都会受到来自众多开发人员的关注。自然地,框架和库的生态系统自然而然地围绕着 JavaScript 而努力,以简化和增强 JavaScript 应用程序的开发。 这些工具提供从事件处理到代码缩减和数据渲染的功能。以下是开发基于浏览器的 Web 应用程序的 JavaScript 开发人员工具包中最必要的技术汇总。 JavaScript必备框架:Angula

    阅读全文...

  • CSS 框架 Bulma 教程

    Posted by : lon.y@qq.com on 2017年10月27日

    网页样式需要大量时间开发,最省事的方法就是使用 CSS 框架。 Bootstrap 是最著名的 CSS 框架,但是今天我想推荐另一个更轻量化、更易用的框架—-Bulma。有了它,即使完全不懂 CSS,也可以轻而易举做出美观的网页。 我要感谢 100offer 对我提供赞助。100offer 是国内第一流的人力资源网站,本文结尾有他们的简介,最近想换工作的朋友可以看一下。 一、简介 Bulma 框架最大的特点,就是简单好用。所有样式都基于class,只需为

    阅读全文...

  • JavaScript 开发人员需要知道的简写技巧

    Posted by : lon.y@qq.com on 2017年10月26日

    本文来源于多年的 JavaScript 编码技术经验,适合所有正在使用 JavaScript 编程的开发人员阅读。 本文的目的在于帮助大家更加熟练的运用 JavaScript 语言来进行开发工作。 文章将分成初级篇和高级篇两部分,分别进行介绍。 初级篇 1、三目运算符 下面是一个很好的例子,将一个完整的 if 语句,简写为一行代码。 const x = 20; let answer; if (x > 10) { answer = 'greater than

    阅读全文...

  • 测试你的前端代码:可视化测试

    Posted by : lon.y@qq.com on 2017年10月26日

    测试 App,你从哪里开始?在最后这个部分,第五部分,Gil Tayar 总结了他为前端测试新人写的系列文章。最后这篇文章中,Tayar 讲述了可视化测试,以及为什么它是测试前端代码的最后一步。 不久前,我一个刚刚进入精彩前端世界的朋友打电话问我该怎么测试他的应用程序。我告诉她有太多需要学习的东西,在电话里根本说不清楚。我答应发送一些对她前端之路有所帮助的链接。 所以我在电脑前坐下,通过 Google 搜索相关的主题。我找到很多链接,也发送给她了,但我对这

    阅读全文...

  • 谈谈 PostCSS

    Posted by : lon.y@qq.com on 2017年10月19日

    前言 现在的前端,javascript的发展有目共睹,框架林立。同时,html也是齐头并进,推出了HTML5标准,并且得到了普及。这样的发展却唯独少了一个角色? CSS,就是这个看似不起眼的家伙,却在开发中发挥着和js一样重要的作用。css,是一种样式脚本,好像和编程语言有着一定的距离,我们可以将之理解为一种描述方法。这似乎导致css被轻视了。不过,css近几年来正在经历着一次巨变——CSS Module。我记得js的井喷期应该可以说是node带来的,它带

    阅读全文...

  • 一个超炫酷带阴影的 CSS/Sass 3D进度条

    Posted by : lon.y@qq.com on 2017年10月14日

    今天我们想向大家展示如何创建一些具有特殊3D外观的纯CSS进度条。不妨将本教程当作是一个高级的CSS练习,以更深入地了解更多有趣的3D属性和着色技术。仅使用CSS创建UI组件将训练你的创造性思维,并且在本教程中,我们将通过制作进度条并动画化来向大家展示一些如何创建更复杂形状的技巧。 注意:某些CSS属性仅在现代浏览器中受支持。IE仍然不支持transform-style:preserve-3d,这是一个用于创建嵌套3D结构的关键属性;所以进度条在IE浏览器

    阅读全文...

  • 关键 CSS 和 Webpack : 减少阻塞渲染的 CSS 的自动化解决方案

    Posted by : lon.y@qq.com on 2017年10月13日

    “消除阻塞渲染的CSS和JavaScript”。 这一条Google Page Speed Insights的建议总让我困惑。当一个网页被访问时,Google希望它仅加载对初始视图有用的内容,并使用空闲时间来加载其他内容。这种方式可以使用户尽可能早地看到页面。 我们可以做很多事情来减少阻塞渲染的JavaScript,例如code splitting、tree shaking,缓存等。 但是如何减少阻塞渲染的CSS?为此,可以拆分并优先加载首次渲染所需要的C

    阅读全文...

  • CSS 写作建议和性能优化小结

    Posted by : lon.y@qq.com on 2017年10月10日

    作者:守候 文章转载自:https://segmentfault.com/a/1190000011390896 1.前言 还有几天就到国庆中秋了,快要放假了,先祝大家节日快乐!之前写过 JS 的写作建议和技巧,那么今天就来聊聊 CSS 吧! 说到 CSS,每一个网页都离不开 CSS,但是对于 CSS,很多开发者的想法就是,CSS 只要能用来布局,把效果图排出来就可以了,其它的细节或者优化,不需要怎么考虑。但是我觉得 CSS 可不只是把页面的布局完成就是完事

    阅读全文...