Tagged

Chrome

A collection of 12 posts

Chrome

Chrome 50发布,有哪些技术更新需要关注?

Chrome 50 版本已经发布多日了,不过它带来的很多新特性值得关注,而且有些也是振奋人心的。让我们来一起看一下: ECMAScript/JavaScript: RegExp Unicode 标记 ES6 在正则表达式中使用 u 标记来实现对 Unicode 更友好的功能和行为,比如,可以用 emoji 符号之类的。 // Match any symbol from U+1F4A9 PILE OF POO to U+1F4AB DIZZY SYMBOL. const regex = /[💩-💫]/u; // Or, `/[\u{1F4A9}-\u{1F4AB}]/u`. console.log( regex.test(

Chrome

srcset属性获chrome 34支持,大赞!

Chrome 34终于正式发布,最引人的特性是开始支持srcset属性了。 其实在此之前,Safari已经开始支持了,而目前来看,这个属性就是为rMBP服务的,因为桌面电脑上只有rMBP需要更高分辨率的图片。但是其实这个属性的用途并不仅限于此。 最常用的用法: <img src="normal.jpg" srcset="normal.jpg 1x, high-res.jpg 2x, highest-res.jpg 4x" /> 但是W3C规范的描述其实更详细: To specify an image, give first a URL, then one or more descriptors of the form 100w, 100h, or

@support

Chrome 28发布——hello Blink

Chrome 28发布了,好久没有关注版本号看到这个数字还是吓了一跳!这个版本改动蛮大,我们一起来看看~~ 1.内核更换 Chrome 28正式将内核更换为Blink了,可以通过在地址栏输入chrome://version来查看。 其中会有一条: Blink 537.36 (@153022) 不过UA并没有变。Blink暂时只是Webkit的一个分支吗。。。 2.富媒体提示 这个很赞,比HTML5的Notification API要丰富很多。 只是目前该特性只支持Windows下的Chrome和Chrome OS,Mac和Linux后续支持,现在会将富媒体提示按照HTML5 Notification的标准显示,当然这样可能会有信息不能完全显示。 这里是API documentation和google托管在github上的一个demo。 这么牛B的东西还是希望Google能够推动HTML5 Notification API更新吧。 3.Android,HTML5 Fullscreen API支持 Chrome 28 for Android中,已经可以开启Fullscreen API支持了。呃,safari 6 for iPhone也早支持了,

Chrome

hello,chrome,我是Firefox。。。

今天,Firefox发表了一段视频,宣告Firefox和Chrome之间的视频通信成功~~ 这个真的很赞! 在Chrome支持WebRTC之后,Firefox终于在Nightly版本中也开始原生支持了。 虽然现在只有PC支持,但是可以遇见不久之后,手机端也会开始支持了,而Firefox引入WebRTC,应该主要还是为了自己的Firefox OS。有了WebRTC的加入,浏览器端的视频通话就不再是问题了。 WebRTC是被Google在2010年收购的Global IP solutions公司的GIPS引擎,然后将其改名为WebRTC,并在2011年成为W3C的标准之一。 具体的实现不细说了,这里有个Demo,感兴趣的同学可以尝试下。

Chrome

通过使用Chrome的开发者工具来学习JavaScript

本文作者是Peter Rybin,Chrome开发者工具团队成员. 本文中,我们将通过使用Chrome的开发者工具,来学习JavaScript中的两个重要概念”闭包”和”内部属性”. 闭包 首先要讲的是闭包(closure) – JavaScript中最有名的东西之一.一个闭包就是一个使用了外部变量的函数.查看下面的例子: function A(a, b, c) { var ar = [a, b, c]; return function B(i) { return ar[i]; }; } var b = A('Here', 'I', 'am'); console.log( b(1) ); 函数声明之后的第一条语句调用了函数A,函数A创建了一个值为数组[a,b,c]的局部变量ar,返回了一个函数B(存储在了变量b中)

Chrome

Chrome extension 升级到 manifest version 2 的问题

最近在折腾一个 chrome extension, 虽然之前也折腾过,但是了解很浅,这次就顺带系统地了解了下。开始的时候一切都很顺利,对一个前端工程师来说,学习的成本并不是很高。 问题 在某天 chrome 提示升级的时候,就果断升级了(当前版本为 Version 21.0.1180.57)。升级之后,发现在 extensions 页面,有个提示: There were warnings when trying to install this extension: Support for manifest version 1 is being phased out. Please upgrade to version 2. 一开始并没有想到这个版本号的升级会有多大问题,因为至少看起来并没有特别多的改动。

Chrome

mac下网页中文字体优化

最近某人吐槽某门户网站在mac下chrome字体超丑,然后发现虽然现在mac用户越来越多,但是大家依然无视mac下的字体差异,于是研究了下mac下网页中的中文字体,和大家分享。 看了一遍国内各大门户和SNS网站,虽然可能大家的font-family设置都不太一样,但是貌似现在只有QQ空间对mac下字体做了优化。 ok,言归正传。 mac和windows自带的字体非常不一样,所以,针对windows的font-family设置一般不适用于mac系统,而在mac下,会调用系统默认的细黑体(STXihei),而这个字体渲染的其实并不是很好看。 优化的方法有两个: 方案一:使用Hiragino Sans GB字体 关于Hiragino Sans GB Hiragino Sans GB 是衍生自 Hiragino Kaku Gothic(ヒラギノ角ゴ)的简体中文字体 [1],近乎完美地继承了原型的风格,有很微妙的喇叭口,弧线柔美、内敛,字面宽大程度合理。这是一款清新的专业印刷字体,小字号时足够清晰,大字号时又不会「细节欠奉」(via http://www.zhihu.com/question/

Chrome

自定义webkit搜索框样式

好吧,这是个有点儿蛋疼的文章,每个浏览器都可以有自己的行为和表现,只是webkit在apple的带领下,在UI上走的更远了一点儿,但是却给我们带来了点儿困扰,因为很多情况下,我们希望搜索框在所有的浏览器上表现一致。。。 用过mac的同学应该了解这个情况: 就拿前端观察右上角的搜索框来说,在Windows下和mac下的表现就完全不一样啊,mac下(包括safari和chrome),除了宽度外,你设置的其它样式基本是无效的,这种细长的界面和iOS上的搜索框是一样的,或许苹果认为,搜索框就应该是这样的? 那我们在很多情况下需要让页面在所有平台,所有浏览器下表现都基本一致,这就有点儿悲催了,但是也不是没有办法的。。。 方法一:不用type=search 这是最简单的一了百了的做法,使用默认的type=text吧,这样你就可以像定义普通文本框那样定义搜索框了,不足的地方是,搜索的用户体验也不太一样了,同时也会影响到其它浏览器。 方法二:-webkit-appearance 但是方法一对于语义控来说是无法接受的吧,那么我们也可以用CSS3 appearance来解决,这是个很有用的东西啊。 对于设置type=search的搜索框,webkit的appearance设置是: -webkit-appearance: searchfield; 我们将其设置为: -webkit-appearance: textfield; 即可。 貌似这是最完美的方法了 方法三:各种伪元素

android

Chrome for Android发布

前些天传言的chrome团队将开发android版本的消息,今天已经发布了,Google的效率真高啊。当然我们还是最关注这个版本的浏览器对前端开发的影响,让我们看一下它现在的技术支持情况吧。 Chrome for Android的部分特性: 支持CSS 3D transform 支持CSS3 动画(animation) 支持SVG 支持WebSockets 支持专用web worker 支持HTML5表单的时间选择器 支持HTML 媒体捕获API (media capture APIs) 支持IndexedDB 支持离线缓存(Aapplication Cache) 支持File APIs 支持Geolocation 支持position:fixed和overflow:scroll 支持canvas的GPU加速 支持omnibox 不支持Flash插件(adobe也自己放弃移动版本的开发了) 不支持sandbox 暂不支持扩展 可以看到,桌面端的特性,这个版本也大部分都支持了,当然移动终端有自己的特性和硬件限制,所以体验和功能上也一定不尽相同。 想要吐槽的是,Flash真是耗电大户啊,笔记本只上网或coding的话,电池用9个小时没问题,玩网页游戏竟然只够玩1个多小时,

Chrome

-webkit-filter是神马?

这两天有看到国外网站纷纷介绍-webkit-filter,开始很迷惑,丫是想要学IE吗?今天看了下,和IE的滤镜没一毛关系啊,而且,效果很赞! 这些滤镜效果最初是用于SVG的,W3C引入到CSS中,然后制定了CSS Filter Effects 1.0,现在webkit率先支持了它。 现在规范中支持的效果有: grayscale 灰度 sepia 褐色 saturate 饱和度 hue-rotate 色相旋转 invert 反色 opacity 透明度 brightness 亮度 contrast 对比度 blur 模糊 drop-shadow 阴影 嗯,有些和CSS3重复了,不过,具体要怎么用还要看具体情况,至少我们可以用不同的方法实现同样的效果——比如透明度。 用法是标准的CSS写法: -webkit-filter: blur(2px); 然后,Eric Bidelman写了一个demo,可以很方便的查看各种效果。

Chrome开始支持GreaseMonkey
Chrome

Chrome开始支持GreaseMonkey

GreaseMokey(国人称之为油猴脚本)之前只是Firefox的一个插件,可以用来添加一些简单而有用的小插件,从而扩展你的浏览器的功能和体验。它一般用HTML+JavaScript编写,具有小巧、灵活等特点。 一个非常好的消息是,现在Chrome 最新的4.0版本已经支持GreaseMonkey脚本了,当然 chrome 5.0 dev版本也支持它,如果你在使用这两个版本的Chrome(包括PC和Mac版),可以立刻访问http://userscripts.org 获取超过40000个脚本了。 如果你还不太了解GreaseMonkey,可以查看wiki百科的介绍,或者查看可能吧的《8个优秀的Grease Monkey脚本推荐》和Crazy Software的 十大油猴脚本推荐,当然,优秀的GreaseMonkey脚本有很多,如果你遇到比较好用的脚本,一定要与我们分享哦~~ 另外,GreaseMonkey的管理和普通的Chrome扩展一样方便,都可以在Chrome的扩展面板( chrome://extensions/ )禁用和卸载。

Chrome

用于WebKit的CSS诀窍

使用在WebKit中可用的CSS高级特性,可以为你的网站或网络应用带来一个新的更令人兴奋的东西。 WebKit是Safari和Google Chrome浏览器的渲染引擎。所以,本文中的诀窍在Safari3/4和Chrome1.0/2.0中都是支持的。 因为浏览器会简单的无视他们不支持的CSS属性,所以在其他浏览器中,这些诀窍中的大部分可能会无效。使用只有WebKit支持的CSS属性的网页在基于WebKit的浏览器中会有非常出色的视觉效果和体验,并且在其他浏览器中也可能会有某些效果——至少不会有负面的影响。 注意: 你在本文中看到的-webkit前缀是一个浏览器生产商通常使用的一种方式,它暗示该CSS属性或规则尚未成为W3C标准的一部分。比如,box-shadow属性还只是开发中的CSS3标准的一部分。基于Mozilla的浏览器使用-moz前缀。 1.简单的阴影 让我们从向你展示为网页中的任意元素添加阴影效果是多么的简单开始吧。下面的代码片段将演示一个轻微旋转并有阴影的图片,这两个效果都是使用CSS添加的。 <img src="megan.jpg" style="-webkit-transform:rotate(5deg);-webkit-box-shadow:10px 10px 5px #888;" /> 上面的代码中,transform CSS 属性实现图片旋转,