轩枫阁

首页 / 互联网 / 资讯 / 前端新闻播报-第四期

前端新闻播报-第四期

前言

现在来为大家播报一些前端FE近期所发现的技巧。厌倦了陈旧的理论描述,来看看又有什么新技巧吧,绝对新颖。很多点是关于调试神器Chrome的。

Chrome新版拾色器

Chrome Canary 带来全新的取色器,更加直观的不透明度显示,以及 HEX,RGBA,HSLA 三种模式快速切换。

c1608aa0gw1erkbrpq1w4j20gu0a340d

c1608aa0gw1erkbrv4z52g20au08mqfw

 

 

Chrome支持CSS3动画调试

Chrome 在最新版本中带来了全新的动画调试工具,动画调试以后越来越方便了!测试页面:http://tympanus.net/Development/3DEffectMobileShowcase/index2.html

c1608aa0gw1eqyazwyn2dg20b40c8x6q

 

Chrome可视化缓动函数调节

Chrome 开发者工具已经支持可视化的缓动函数调节,撒花!测试 Demo:http://cubic-bezier.com/#.17,.67,.83,.67

c1608aa0gw1eqb6r2bdgog20au0a5doh

 

Safari调试工具发大招

Safari(WebKIt)的调试工具开始发大招了,视频:http://video.weibo.com/show?fid=1034:5df5edfe2522ad8e44295a7e638c27a7

sdgvsdfb

 

Chrome支持ES6的=>

Chrome Canary(45) 现已支持 ES6 中的Arrow functions(=>),至此 IE Edge,Firefox 22+ 均已支持。

文档Demo

c1608aa0gw1eu3h394cv3j20f70apjso

 

新增-webkit-animation-trigger动画触发属性

WebKit 新增了 -webkit-animation-trigger 动画触发属性 ,例如通过container-scroll(20px) 则可以控制滚动到 20px 时触发动画。

讨论、Demo

c1608aa0gw1eu3aohf4fdj208c06gt9m

c1608aa0gw1eu3ao3msdcg20ak08cgpc

 

微软发布新版编辑器

微软发布基于 Atom 的 Visual Studio Code 跨平台编辑器,原生的 Git、Markdow 预览支持,多光标编辑等一应俱全。支持代码自动提示,CSS 中颜色显示,SCSS 语法提示等。https://code.visualstudio.com/

c1608aa0gw1erneqr6n9mg20b40akqlv

c1608aa0gw1erneqv049gj20yv0jewku

 

Firefox列表支持字符串

Firefox 39 开始支持列表符号直接使用字符串,例如:list-style-type: ‘(●─●)’,Demo

c1608aa0gw1eqsiftpb17j20go07rq4i

 

Chrome强制刷新

Chrome 打开 DevTools 之后,右击或者一直摁住刷新键,会出来清缓存强制刷新的功能选项( tip from Addy Osmani ) ,其中「硬性重新加载」类似于强制刷新。

 

c1608aa0gw1eoyi4adrfzj207u03u3z1

 

Chrome控制CSS3动画暂停及速度

Chrome Canary 开发者工具可以控制 CSS3 动画的暂停以及速度啦!

c1608aa0gw1eoeu100ktag209q038n6v

 

「H」键快速隐藏元素

在 Chrome 和 Safari 的开发中工具中,可以按「H」键快速隐藏元素。

c1608aa0jw1eo1xnq40xyg20b4030myf

 

Chrome的Network面板支持-反向搜索

Chrome DevTools 的 Network 面板现在支持使用「-」反向搜索了。例如输入「-.js」会筛选出所有非 JS 的请求。

c1608aa0gw1enrmkp0akug20au08ctbx

 

WebKit Nightly 开发者工具增加 CSS 权重提示

WebKit Nightly 开发者工具最近增加了 CSS 权重提示功能,比如 #ShadowBox img {} 鼠标指针hover 到选择器上的时候会提示 Specificity:(1,0,1) ≈ 101。那么问题来了,你猜10个class 时约等于多少,256 个呢?

c1608aa0jw1em00lx553lj20ea07p3z8

 

Chrome支持minlength属性

Chrome 40 开始支持表单元素上的 minlength 属性,用来控制表单元素输入的最少字节数。至此maxlength 终于有了好基友了!Demo、Chrome状态规范

c1608aa0jw1eld1lgl13wj20b506egm0

 

苹果提议增加动画规范

苹果提议 CSS Animation 规范新增三个属性「animation-trigger」,「animation-timebase」,「animation-behavior」。将可以用CSS滚动到某个位置触发动画,实现视差滚动效果,以及更好的性能。文章

c1608aa0jw1eks580e3vjj20a108ct9a

c1608aa0jw1eks582k830j20dc0cmab2

c1608aa0jw1eks5829rmdj20dg0c475h

 

本文章主要整理自@前端快爆

109/470
111/470

相关阅读

文章评论

  •   我的孩子(今年二年级,写作业非常懒)今天写作业时突然问我:“妈妈,作业本是什么做的?”
      我说:“是纸做的。”
      他回答:“哦,我好像对纸过敏,每次做作业都难受。”
      孩子你过来,我用棍子给你治好! http://url.cn/XfB45g

  • 不错不错,很好很好,谢谢分享

  • chrome://flags/#enable-devtools-experiments

    • 多谢这位游客

  • 为什么我的chrome 45版本的 settings 界面没有 Experiments选项

    • 上面说的哪一点?

      • 找到了,在chrome://flags/里面打开 谢谢啊

        • 真棒

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制,可以录制弹奏的曲子