Tagged

Safari

A collection of 13 posts

Safari

iPhone Safari 下 input disabled 颜色

最近在项目中遇到需要修改 input 的 disabled 状态的颜色的情况,然而无论如何都不成功,折腾了好久。后来发现还是 User Agent 样式的问题。 iPhone Safari/webview input disabled 的默认样式: input:disabled{ opacity: 0.4 } 嗯,开发者工具只能看到这一条。 即便是 reset 为 opacity : 1 也无效。因为还有一条隐藏的样式 -webkit-text-fill-color ,于是有效的样式为 : input:disabled{ color:@disabledColor; opacity: 1; -webkit-text-fill-color: @disabledColor; }

Safari

Safari 10 越来越像理想中的浏览器了

Safari 10的技术规格出来了,嗯,简直激动人心。 这里简单『搬运』一下官方的文章 Web APIs IndexedDB 完整支持W3C推荐规范了 复制和剪切 可以用Javascript来复制和剪切内容了,方法: document.execCommand('copy') document.execCommand('cut') CSP 2.0 CSP (Content Security Policy 内容安全策略)支持 2.0 标准了 Shadow DOM 终于支持了呀,Chrome在几年前就支持了,这样的话,iOS上也可以放心搞 web components 了 ES 6 嗯,Safari 支持 ECMAScript 2015 标准,也就是

mac

Yosemite Safari工具栏特效

如果你使用Mac机器并且已经升级到了最新的Yosemite系统版本的话,用safari浏览网页会发现头部工具栏已经有了类似iOS中Safari工具栏的半透明毛玻璃效果了。Safari会自动根据页面的颜色来显示工具栏的毛玻璃特效,但我们也可以定制一下。 Safari默认会显示当前页面最顶部的颜色,比如,前端观察的: @lymXX制作了一个自定义工具栏效果的demo,很赞(只是该项目名称为RainbowSafari,彩虹。。。怪怪的),你可以自定义Safari的工具栏显示的颜色为纯色或者渐变色,亦可以是图片等。 代码也很简单: <div id="rainbowsafari"></div> #rainbowsafari { background-color: #FFFFFF; /* Edit This */ right: 0; top: 0; height: 100px; z-index: 99999999999; position: fixed; content: ""; display: block; -webkit-transform: translateY(-99.99px); } 原理就不说了,

ios

iPhone 5/iOS 6前端开发指南

iPhone 5和iOS 6已经发布好几天了,相信很多童鞋都已经刷上了iOS 6。我们在之前就发表过《iOS 6中Safari对HTML5的支持》,但是除此之外,实际上市的iOS 6具体支持还有哪些新功能?让我们一起看下。 iPhone首先屏幕变长了,分辨率从iPhone 4s的640px960变成了6401136,长宽比变成了16:9。DPI依然是326。其它表现看起来是一样的。 检测iPhone 5/iOS 6 检测iOS 6很简单,用ua就可以了: Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A403

HTML5

Safari 6的重要更新

苹果在7月25日发布了新的OSX mountain lion系统,Safari 6.0也随之发布,这次更新有比较大的功能和性能改进,我们来了解下: 不支持Windows——至少到现在为止尚未发布Windows版本,之前safari对Windows的版本基本是同时发布的。好吧,这未必是坏事~~ audio api——终于支持了 css3 filter——这个很赞,虽然在webkit nightly和chrome中早已提供了支持 HTML5 notification——支持notification api,并整合到mountain lion系统的通知中心中 HTML5 timed text track——定时文本轨道,用于为媒体元素指定定时文本,比如,视频的字母,音频的歌词等,用法实例: HTML5 media synchronization——媒体同步,可以精确控制多个媒体文件之间的同步,比如,你可以为一首歌曲提供两个音频文件,一个是伴奏,一个是人声原唱,可以用本方法提供类似KTV的功能了。详细了解请查看规范。 Javascript增强——支持最新的ECMA

HTML5

iOS 6中Safari对HTML5的支持

iOS6发布了beta版,其中包括了新版的Safari浏览器,增强了对HTML5的支持,我们来了解下吧~~ 目前,ios 5.1中safari在HTML5test.com的测试得分是324,而ios 6中safari的分数是360。 远程调试 新的远程调试工具可以更方便的在PC/Mac上对iOS上Safari中的页面进行调试,界面类似Android上的Chrome浏览器。** ** 终于支持这个了,可以在浏览器中上传照片文件什么的了。。。内牛满面。。。 Audio API 这个大家也期待已久了吧,不多解释 CSS3 Filter 这个我们之前有介绍过,最新的 chrome 19正式版已经实现了该功能但是默认并没有开启,你需要通过about://flags(chrome://flags)来开启。 离线存储(app cache)数据限制从5MB提高到25MB requestAnimationFrame webkit私有api,不过基本除了opera,各个最新的浏览器也都开始支持了,详情查看MDN的介绍。 横屏模式下支持全屏 也就是fullscreen api了。 其它更新 更快的Javascript 好吧,每次更新都会有这个,不算新闻了。

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

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,可以很方便的查看各种效果。

ios5

iPhone 4S 浏览器性能预览

iPhone 4S已经正式发售,虽然在国内还只能是水货,但是显然已经国外的同行已经开始研究它能给我们带来的改变了,而我们关注的,依然是浏览器~~ iPhone 4S硬件主要升级CPU和GPU,而这些给升级也为浏览器性能带来了很大的提升: **Apple****iPad****iPhone 4****iPad 2****iPhone 4S****SoC****A4****A5****处理器**1 GHz ARM Cortex-A8 (单核)800 MHz ARM Cortex-A8 (单核)1 GHz ARM Cortex-A9 (双核)800 MHz ARM Cortex-A9 (双核)**内存**256 MB LP-DDR (单通道)512 MB LP-DDR (单通道)

Apple

iOS 5中safari带来的新特性

随着iPhone4s的发布,iOS5也正是发布了,增加了很多很有用的新特性,不过对于前端开发者来说,最关心的还是浏览器,让我们来看一下苹果为iOS5中的safari新增了哪些新特性吧。 CSS 终于支持position:fixed了; 支持overflow:scroll了,通过-webkit-overflow-scrolling: touch;来实现: selector{ overflow:scroll; -webkit-overflow-scrolling: touch; } CSS3 gradient语法更新,将-webkit-gradient(linear|radial)拆分为,-webkit-linear-gradient和-webkit-radial-gradient。PS,年初发表过一篇关于《webkit对于CSS3渐变样式语法的更新》的文章,看来现在就剩下android的webkit了。 HTML5 新的兼容HTML5的解释器(parser) 表单增强新增时间类型date, datetime, month, time和range支持,好赞: 同时iOS5中safari也增强了number类型的input的验证功能。 支持web workers ,传说iOS3中短暂出现过web workers,不过后来消失了,现在又回来了。。。 增强ECMAScript5,测试结果显示支持情况跟上PC版的Safari 5.1了。

HTML5

iOS 4.2版safari对HTML5特性支持更新

文章整理自 [Safari on iOS 4.2: Accelerometer, WebSockets, SVG, AJAX2 & better HTML5 support ](http://www.mobilexweb.com/blog/safari-ios-accelerometer-websockets-html5)请尊重版权,转载请注明出自[前端观察](http://www.qianduan.net)嗯,据说iOS 4.2发布了,所有的iPhone,iPod、iPad啥的,都可以免费更新。令人欣慰的是,这个版本的iOS对HTML5新特性的支持有比较大的升级,其中包括对WebSockets和加速器(Accelerometer)的支持,新的event、支持打印、新的JavaScript 数据类型和更好的SVG支持。 事实上,Apple还没有更新Safari文档。这里的信息只是基于在Safari(注:文中的Safari指iOS移动设备中的Safari浏览器,不包括PC和Mac机中的Safari)自身的JavaScript研究和测试上。

Apple

safari 4 新特性

在WWDC 2009上,Apple发布了正式版的Safari 4浏览器,正式版的safari 4放弃了仿Chrome的tab方式,还原至3.0版本的界面。据称,WWDC上,Serlet 严重的BS了一下微软的IE8浏览器,并称Safari的JavaScript引擎是目前世界上最快的,根据他提供的测试数据,Chrome 2的速度是IE8的5.3倍,而Safari4的速度则是IE8的7.8倍! 这些数据大多是官方的噱头,我们就先不管啦,看看Safari4会对我们前端开发有哪些影响吧: HTML 5 支持Audio和video标签。 CSS Safari4对CSS的支持有较多改进,具体如下: ZOOM Safari 4开始支持zoom属性。这一点儿的用法和效果和IE浏览器一直。不同的是,如果是缩放,Safari会缩小到浏览器支持的最小字体,而IE会直接缩小到设置的大小。比如: .zoomTest{font-size:12px; zoom:0.1} Safari只会缩小至9px字体大小,而IE会缩小至1.2px(肉眼已经看不清了)。 -webkit-animation 有一系列子属性组成: -webkit-animation-name

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