Tagged

WebKit

A collection of 11 posts

IE11

IE开始支持部分webkit私有属性

IE团队博客上个月发文称,新发布的windows Phone 8.1 update开始解析部分webkit私有属性了。这。。。真的有些令人震惊呢!!! 不过,微软说的很对,他们这样做主要是因为要为用户提供一致的体验,而现在的问题是,很多网站在WP上表现很烂: 错误的浏览器检测方法没有能识别出来IE Mobile从而返回一个桌面版的网站 使用过时的webkit私有特性,而这些特性其实已经被W3C标准化了 使用未被标准化的webkit私有属性 使用一些IE不支持的特性而且没有提供优雅降级 产生互通性bug但IE实现的不一样 例如,百度网站在iOS Safari、IE 11 Mobile、Firefox OS中的表现分别是: 所以这也是一件很无奈的事情——Windows Phone的市场份额太小了,根本不能引起开发者的重视,而这些网站又严重影响WP用户的体验,微软不得不妥协了吧?——个人猜测未必正确,微软的同学或者忠实粉丝不要打我。。。 对Web开发者的启示: 使用标准方法来检测浏览器版本 样式不要只写-webkit-,使用跨浏览器的兼容方案,比如带上-moz-、-ms-等前缀以及标准的写法 提供完善的降级方案 做好多平台兼容测试 因为不爽的不只是WP手机用户,也是你自己的用户 那么,IE 11到底支持哪些webkit属性呢? 根据MSDN的文档,

chromium

别了,Presto,Opera新版本将采用Webkit内核

这是个令人震惊的消息,Opera今天宣布其已经拥有3亿用户,以及以后的Opera版本将逐渐切换到Webkit内核,确切的说,是采用使用Chromium——webkit渲染引擎+V8 JS引擎。 这对网页开发者来说是个好事儿,虽然Presto对W3C标准的支持不比webkit差〜〜 同时,Opera也说,对于插件开发者来说不受影响。 嗯,还记得去年大概也是这个时候的**反webkit之战**么? 以后中国互联网将会变成Webkit和Firefox、IE6、IE7、IE8、IE9、IE10以及各种第三方流氓浏览器之间的竞争! 好吧,祝Opera和Chromium明天情人节快乐~~

css3

position:sticky介绍

整理自:STICK YOUR LANDINGS! POSITION: STICKY LANDS IN WEBKIT 中文原文:position:sticky介绍 请尊重版权,转载请注明来源,多谢~~ 用户的屏幕越来越大,而页面太宽的话会不宜阅读,所以绝大部分网站的主体宽度和之前相比没有太大的变化,于是浏览器中就有越来越多的空白区域,所以你可能注意到很多网站开始在滚动的时候让一部分内容保持可见,比如,侧边栏的部分区域。position:sticky为此而生。 position:sticky用法 position:sticky是一个新的css3属性,它的表现类似position:relative和position:fixed的合体,在目标区域在屏幕中可见时,它的行为就像position:relative; 而当页面滚动超出目标区域时,它的表现就像position:fixed,它会固定在目标位置。 使用起来也非常简单: .sticky { position: -webkit-sticky; position:sticky; top: 15px; } 目前来说还需要用私有前缀~~ 浏览器兼容性: 由于这是一个全新的属性,以至于到现在都没有一个规范,

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; 即可。 貌似这是最完美的方法了 方法三:各种伪元素

WebKit

反webkit之战

历史总是在某个时候重演,这不,IE6离开历史舞台(国外,市场份额不足1%了)之后,webkit内核的浏览器成了大家的心腹大患,于是各种口诛笔伐开始了,甚至比当年打击IE6更甚。。。 标准与事实标准 最近10年,IE6对标准的支持让所有开发者都很头疼——事实上虽然在国外基本没人用了,但是在国内还远远没有结束,到现在IE6还有40%+的市场份额——IE6垄断了浏览器市场,它就是事实上的标准,所有的网站都要首先兼容IE6然后再兼容W3C标准,于是我们通常要为它对标准的不支持和自身的各种bug付出很多很多的时间和精力,所以你在一些页面中看到针对IE6甚至IE7的很不友好的行为或者源代码时,请理解一下前端开发者们极度苦逼的心情吧。。。 但是现在情况发生了很大的改变,IE6死了,而另一个垄断者webkit来了: 最近几年,webkit在apple的带领下发展很快,对W3C标准的支持方面一直在和opera/firefox赛跑。 托Google Chrome和Chromium开源项目(基于webkit内核)的福,webkit市场份额大增,Chrome在国外已经有接近四分之一的份额了,而国内,各种“壳”浏览器的“极速”、“快速”版等都是基于chromium开发的,也算是webkit 在智能终端,iOS+Android垄断了市场,它们的内置浏览器都是基于webkit内核,于是webkit成了移动终端的No.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,可以很方便的查看各种效果。

bug

巧用:empty解决webkit核心浏览器text-indent的bug

昨天在项目中遇到要在一个输入框中使用缩进的情况,要用text-indent首行缩进2个文字。然后发现在webkit下,在输入框内容为空的时候,光标位置没有缩进,还是在行首,输入任意字符后,缩进才被激活。 HTML代码如下: 查看demo 这里无论是input元素还是textarea,或是其它设置了contentEditable=”true”的元素,都能必现这个bug。 IE各版本,Firefox均正常,只有chrome和safari等webkit内核的浏览器才有这个问题。 这里百思不得其解,也尝试了很多方法,均无效。 后来和小李刀刀、poor聊到这个问题,突然想到:empty伪类,立刻测试,果然可以解决——虽然只是曲线模拟解决… input[type="text"]:empty{padding-left:2em;} 然后在chromium社区提交了个bug单,不知道会不会被无视。 PS:Opera在这里也有些小问题,input元素缩进表现正常,textarea元素不支持缩进,contentEditable=”true”元素和webkit表现一样。

WebKit

CSS自定义滚动条样式

相信很多人都遇到过在设计中自定义滚动条样式的情景,之前我都是努力说服设计师接受浏览器自带的滚动条样式,但是这样只能规避还是解决不了问题,最近在项目中遇到了,正好来总结一下。当然,兼容所有浏览器的滚动条样式目前是不存在的。 IE下的滚动条样式 IE是最早提供滚动条的样式支持,嗯,好多年了,但是其它浏览器一直没有支持,IE独孤求败了。 这些样式规则很简单: scrollbar-arrow-color: color; /三角箭头的颜色/ scrollbar-face-color: color; /立体滚动条的颜色(包括箭头部分的背景色)/ scrollbar-3dlight-color: color; /立体滚动条亮边的颜色/ scrollbar-highlight-color: color; /滚动条的高亮颜色(左阴影?)/ scrollbar-shadow-color: color; /立体滚动条阴影的颜色/ scrollbar-darkshadow-color: color; /立体滚动条外阴影的颜色/ scrollbar-track-color: color; /立体滚动条背景颜色/ scrollbar-base-color:color; /滚动条的基色/ 大概就这些,你也可以定义cursor来定义滚动条的鼠标手势。 这里,很久以前danger做了个基于Flash的可视化工具,简单但是好用: 选中CSS选项即可自动生成CSS样式,这里不再过多的介绍了。嗯,多谢大猫老湿推荐。 webkit的自定义滚动条样式

css3

webkit对于CSS3渐变样式语法的更新

之前,我在前端观察发表了一篇《理解CSS3线性渐变》,相信很多同学都有研究过CSS3的渐变,大部分人都会感到纠结吧,webkit和firefox的语法有很大的不同啊。事实上,对比W3C规范,可以发现Firefox的语法更规范一些。现在好消息来了,Webkit开始优化CSS3渐变的语法了。真搞不懂当年(08年)webkit为什么采用那种写法。 具体哪种写法更优秀就不讨论了,近日webkit在其博客中介绍了渐变的新写法,新写法采用了W3C和Firefox所用的语法,即,将-webkit-gradient拆分为-webkit-linear-gradient和-webkit-radial-gradient。 让我们直接看一下具体的代码如何: .selector{ background:-moz-linear-gradient(left, white, black);/gradient for firefox/ background:-webkit-linear-gradient(left, white, black);/*new gradient for webkit */ background:-webkit-gradient(linear, 0 0, 0 100%, from(#white), to(#black));/the

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 属性实现图片旋转,