Tagged

浏览器

A collection of 20 posts

font-face

font-face在移动终端的支持

CSS3 font-face特性不多介绍了,可以实现漂亮的自定义字体,更能用将图标转换为字体(font-icon)来实现提高图标的质量并兼容各种分辨率。而font-icon的最佳使用环境是移动终端,因为移动终端的屏幕/显示器一般PPI都比较高,字体显示的非常完美。而移动终端对font-face的支持是怎样的呢? BBC News的Kaelig做了一系列的测试,来检测各个主流移动设备对font-face的支持,貌似并不是很乐观的样子。 由于UC浏览器不支持alert方法,所以kaelig使用了document.write方法来输出支持结果,使用的方法也很简单,用了modernizr.fontface,但是有的浏览器会欺骗你,告诉你它支持font-face,但实际上并不支持,比如Windows Phone 7中的IE9,所以他使用了另一段js来检测实际的情况。感兴趣的可以去看下测试页面。 嗯,实现方法有多种,关键是测试结果: 支持font-face的浏览器 iOS 4——Safari iOS 6——Safari iOS 6——QQ浏览器 iOS 6——UC浏览器 iOS 6——Dolphin Android 2.

浏览器

主流浏览器版本发布历史

译自:[Release Histories for all Major Browsers](http://www.impressivewebs.com/release-history-major-browsers/) 中文:[主流浏览器版本发布历史](http:/www.qianduan.net/release-history-major-browsers.html) 请尊重版权,转载请注明来源!多谢~~- - - - - - 我想,列出当前主流浏览器的版本发布历史是一件挺有趣的事情。 我相信最终会废除浏览器的版本号的两个因素是:快速发布版本和自动更新——无论哪个,如果我没搞错的话,都是Google Chrome的发明。 每个列表中都有一个橙色行表示间隔最久的一个版本 Internet Explorer 版本发布历史 版本#发布时间18月 16, 1995211月 22, 199538月 13, 1996410月, 199753月

css3

IE10将增强对HTML5和CSS3的支持

Windows 8 终于发布了,虽然现在可用的只是开发者预览版,好消息是,IE 10 也随着发了,虽然现在还只有Windows 8可用。我们来看下IE10都有哪些新特性吧。 IE开发者中心给到了一份详细的针对前端开发者的文档,列出了IE10支持的HTML5和CSS3新特性。嗯,它终于跟上了: CSS3 css region css3多列 Flexbox grid 定位浮动(positioned float) 3D变换(3D transfrom) 动画(animation) 渐变(gradient) text-shadow 去掉样式表限制——在IE9之前的版本中,每个页面最多只能加载31个样式表文件,@import也只能最多嵌套4层,IE10中去掉了这些限制。 HTML5 - 脚本同步——script标签的async属性,用来定义脚本是否异步执行 - File API - History - Parsing -

Firefox

Firefox 4 beta 1发布——前端开发者须知

在Mozilla发布几个Firefox 3.7 preview版本之后,今天终于发布了Firefox 4 beta 1,在这个硝烟愈来愈浓的浏览器战场,Firefox 4的发布让情况更加复杂了。现在让我们来看看Firefox 4的改进和对前端开发的影响吧。 一、界面改进 正如之前泄漏出来的概念图一样,Firefox最终大刀阔斧的改变了自己的界面: 这个界面确实变的简洁漂亮了,我个人也很喜欢它的某些细节,但是结构和Chrome/Opera的相似性,让我不得不担心,是不是将来主流的浏览器都要采用将tab放到上面并隐藏工具栏的布局了,所以,如果将来IE 9正式版出来的时候也是这样的布局,大家不要意外呀~~~ 二、性能提升 Firefox 4改进了很多方面的性能,比如DOM和CSS渲染、JS引擎、以及部分硬件加速,据说可以更快的处理更复杂的DOM和CSS选择器。据Zimbra的性能测试,Firefox 4性能比之前版本提升了两倍。 三、HTML 5 Firefox 4加入了一些HTML 5特性的支持,包括HTML 5表单和一些标签,比如article、section、nav、aside、

Opera 10.50 final发布——世界上最快的浏览器
Opera

Opera 10.50 final发布——世界上最快的浏览器

经过两个多月的频繁的alpha版本发布,以及几天前发布的beta版本,Opera最终在今天发布了其最新的10.50的final版本——Opera官方声称它是目前世界上最快的浏览器。 正如我们在《Opera 新版本预览》中说的一样,Opera这次版本更新不仅仅在界面和用户体验上有很大的提升,整体性能可以说是一个很大的飞跃,在对WEB标准的支持和浏览器性能方便都有很大进步,在很多方面已经超越Chrome 最新版本(5.0 dev)了。 立刻体验:国际版 英文版

让IE6更快的走向灭亡
IE

让IE6更快的走向灭亡

最近关于浏览器的最重要的事情就是IE的极光0day漏洞了,这个漏洞导致包括Google在内的多家美国公司受到黑客的攻击,当然也有很多色情网站被黑客利用,从而使用户受到严重的攻击,而IE6用户首当其冲,成为该漏洞的最大受害者。 其实我们天天在想到底哪一天IE6才会真正死去,但是从2001年发布以来,IE6一直统治着国内的浏览器市场,直到现在还占据着国内50%以上的浏览器市场份额。 但是我想,无论你是普通用户还是网站开发人员或者是国内的浏览器开发者,我们都应该采取一些措施,共同促进IE6的灭亡。 如果你是IE6的忠实用户,请尽快升级你的IE6 给你一个升级IE6的理由?好吧: **你和你的公司正在受到安全威胁。**这个没有更好的理由来反驳了吧?就连国际知名的大公司如Google、yahoo等都因为使用IE6而受到严重攻击,还有哪家公司的IE6不会受到攻击呢? **世界上各国政府都在建议大家升级浏览器。**在IE6的0day漏洞被曝光之后,德国、法国和澳大利亚等国政府纷纷号召国民放弃使用IE6; 就连微软自己都建议你放弃IE6。微软安全研究与预防博客发文称,IE6受0day漏洞影响最为严重,IE8基本不受该漏洞影响。事实上,微软也不止一次号召用户升级浏览器。 **这不是IE6的最后一个严重安全漏洞。**IE6从发布到现在不知道出现过多少严重的安全漏洞,而这次远不是终结,它还有至少144个漏洞! **微软在2014年之后将不再对IE6提供支持。**2014年很久远吗?或者你相信2012年就是世界末日? **IE6对web标准的支持缺乏。**IE6的技术还是10年前的,互联网技术经过10年的发展已经能够发生了巨大的改变,网站前端技术在不断进步,更先进的CSS、HTML和Javascript等技术已经能给用户带来更好的体验——而IE6用户将无法体验这些先进的内容。比如,前端观察用到的一些CSS3特性将无法在IE6甚至是IE8中体验到。

Opera 新版本预览
Opera

Opera 新版本预览

是的,Opera和Firefox的新闻感到一块儿了,Opera在昨天发布了Opera 10.5的预览版,算是送给大家的圣诞节前礼物?但是Opera确实给了我们一个惊喜。 先看界面: 正如你看到的,Opere 10.5也将带来一些界面上的改变,不过这不是本次升级的核心,这个版本的Opera,将带来以下新的功能和特性: Carakan,是的,这就是传说中的Opera的新一代JavasSript引擎,比上一个版本的JS引擎快了7倍! Presto 2.5。Presto是Opera的内核,就像webkit之与Chrome和Safari一样。是的,Opera 10.10甚至10.20beta版本发布之前,我都在期待Presto 2.3,但是,很遗憾,两个版本的内核依旧是Presto 2.2。然后就听到了关于Presto可能已经被cancel的消息。而Opera 10.5中将跳跃到Presto 2.5。 Vega。这是Opera的新的图形库,是其图形渲染引擎,具体它是如何工作的我们不管,但是从官方得到的数据显示,Vega让Opera的图形性能提高了3倍以上…… HTML5支持更多,

Adobe

Adobe BrowserLab开放注册并发布升级

首先告诉大家一个好消息,Adobe BrowserLab已经接受新用户注册了。如果你在Adobe往后咱有帐号而之前没有Adobe BrowserLab测试资格,可以直接登录使用,没有帐号的话新注册一个帐号就可以了。 Adobe BrowserLab自6月份发布以来,终于进行了一次较大的升级,新的BrowserLab添加了更多的浏览器和一些新的很实用的功能,具体更新如下: 增加浏览器支持:现在可以在更多的浏览器中预览页面了,新增了IE8和safari 4两个浏览器。 标尺和标线:这两个工具和Photoshop/Fireworks等绘图软件里面的一样,可以精确定位任何一个截图的任何位置。标尺的X和Y坐标可以向你显示精确的像素定位,加上标线,你可以很精确的看到页面在不同浏览器中的差别。 移动和平移:呃,其实就是拖拽的功能,可以通过拖拽来查看截图的任何位置,很方便。 洋葱皮对照:其实这个功能内测的时候也有,就是可以将两个浏览器的截图叠起来,通过重合度来分析浏览器的表现,这对于精确的布局问题很有用。 截屏延迟:最多暂停10秒中再渲染一个截屏,这样可以预览需要时间来生成的内容。 示例: 好了,现在就去体验一下吧。

css3

兼容所有浏览器的CSS3圆角

原文:[ 兼容所有浏览器的CSS3圆角](http://www.qianduan.net/compatible-all-browsers-css3-rounded-corners.html) 译自:[ CSS3 rounded corners for every browser? ](http://woork.blogspot.com/2009/08/css3-rounded-corners-for-every-browser.html) 版权所有,转载请注明出处,多谢! - - - - - - **译序:**本文提到了一种很不错的实现跨浏览器圆角的解决方案,但是说的不够全面,前端观察最近将整理更多更全面的资源给大家,敬请期待。 前一段时间,我经常收到一个关于如何在IE浏览器中使用CSS3的border-radius属性实现圆角HTML元素的问题。你或许知道CSS3的border-radius 属性被Safari、Firefox和Chrome等浏览器原生支持,但是由于某些原因IE并不支持它。 那么要想在IE中实现圆角,你不得不使用一些技巧,比如使用带有背景图片的CSS类(看一下这篇文章)。 而我知道的在各个浏览器中实现圆角的较简单快速的方案是结合CSS3和JavaScript。CurvyCorners是一个为HTML元素创建漂亮的圆角的免费JavaScript库。效果如下:

css

CSS Overflow 属性

原文:[CSS Overflow 属性](http://www.qianduan.net/css-overflow-property.html) 译自:[The CSS Overflow Property](http://css-tricks.com/the-css-overflow-property/) 版权所有,转载请注明出处,多谢!!- - - - - - 根据CSS的盒模型概念,页面中的每个元素,都是一个矩形的盒子。这些盒子的大小、位置和行为都可以用CSS来控制。对于行为,我的意思是当盒子内外的内容改变的时候,它如何处理。比如,如果你没有设置一个盒子的高度,该盒子的高度将会根据它容纳内容的需要而增长。但是当你给一个盒子指定了一个高度或宽度而里面的内容超出的时候会发生什么?这就是该添加CSS的overflow属性的时候了,它允许你设定该种情况下如何处理。 overflow属性有四个值:visible (默认), hidden, scroll, 和auto。同样有两个overflow的姐妹属性overflow-y 和overflow-x,

Firefox

Firefox 3.5 正式版发布

这篇文章写的有些晚了,事实上Firefox3.5正式版已经发布将近两天了。这距离我们之前发布《firefox3.5将带来的新特性 》已经有两个多月了,而我们也终于等来了Firefox3.5正式版的发布。 Firefox 3.5的确像上面那篇文章里提到的那样,增加了很多很有用的特性,增加了对HTML5和CSS3的支持;增强了Javascript性能——采用新的TraceMonkey引擎,原生支持JSON;支持私密浏览模式;改进Gecko引擎,从而加快页面渲染速度…等等等等。 这显然相对于Firefox3.0.x是一个质的飞跃!这也是Mozilla原先计划使用Firefox 3.1 最终改为Firefox 3.5的原因。 Firefox 3.5对Firefox是一个新的里程碑,对于浏览器领域,对前端开发,也是一个标志性的事件——这标志着,IE系列的浏览器,无论渲染速度还是对JS和CSS、HTML5的支持上,都已经被远远的甩到后面去了。 从此,我们可以完全BS微软,BS IE系浏览器了。 尽管我们尚不能完全无视IE,但是至少,我们可以旗帜鲜明的将其列为“唯一的落后的浏览器”,单独对待了…

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

RGBA

RGBa色彩的浏览器支持

RGBa是一种在CSS中声明包含透明效果的颜色的方法,它的语法是这样的: div { background: rgba(200, 54, 54, 0.5); } 它允许我们为元素添加透明色。或许我们习惯了使用”opacity“,它很简单易用,但是,opacity会使所有的子元素都变成透明的,而且很难去解决这个问题。(除非使用怪异的定位hack) 跨浏览器透明同样颇为棘手。 通过RGBa,我们可以将一个元素设置为透明,而不会影响其子元素: 声明一个保留颜色 并非所有的浏览器支持RGBa,所以如果允许的话,可以声明一个保留色彩。这个色彩应该是可靠的——所有的浏览器都支持。不声明就意味着,在不支持RGBa的浏览器里面,没有使用颜色。 div { background: rgb(200, 54, 54); /* The Fallback */ background: rgba(200, 54, 54, 0.5); } 不过,这条退路在某些古董级浏览器中依然无效。 RGBa的浏览器支持情况 浏览器,

兼容性

7个新鲜的测试浏览器兼容性的简单方法

本文写给设计师、程序员和其他任何与测试他们的网站的多浏览器兼容性作斗争的人们。 不到一年前,几乎没有什么好的选择来测试网站的跨浏览器兼容性。那时候的那些工具常常有些缺陷,比如成本、功能或时间限制等。然而最近,在浏览器测试方面出现了很多新面孔,它们中的一些确实提供了很优秀的功能和服务。 在本文中我们将介绍7款新鲜和简单的用来测试浏览器兼容性的工具,这些工具地足额可以让测试工作变得非常容易。不仅如此,这些工具还是免费的。 1. Xenocode 浏览器沙盒 Xenocode沙盒是Windows电脑中的浏览器测试的游戏规则的一个改变者。通过一次鼠标单击,你就可以打开一个独立的浏览器而无需安装。你可以在多个IE版本、Firefox、Google Chrome甚至是Safari中进行测试。而且是实实在在的测试,而不仅仅是截屏。最主要的是,全部的服务都是免费的。 不幸的是,它还不是最佳的方案。现在它还不支持mac系统。然而,我听说,它将来会支持Mac,到那个时候,它将是无与伦比的! 2. CrossBrowserTesting.com 该网站为注册用户提供5分钟免费的测试服务,付费用户可以得到更多。CrossBrowserTesting.com 让测试变得非常简单,只需登录并选择一台有你想要的浏览器的电脑。一旦你选择了你想要测试的机器和浏览器,你就可以开始测试了。 你可以使用一个基于网页的Java Applet来链接到他们的同步测试主机,或者你也可以使用本地VNC客户端。

css

CSS3系列教程:简介

CSS3不是新事物,更不是只是围绕border-radius属性实现的圆角。它正耐心的坐在那里,已经准备好了首次登场,呷着咖啡,等着浏览器来铺上红地毯。你看,浏览器需要跟上了…… 注意:浏览器需要改进 尽管把玩CSS3是很有趣的事情——就像接下来我要演示的几篇教程中表现的那样,但是需要了解的是,CSS3并没有被当前浏览器完全的支持。也就是说,如果你要在你的网站中使用CSS3,请确认有针对不支持CSS3的浏览器的兼容方法。 CSS3的浏览器支持状况: Firefox 4+ Google Chrome 3+ Internet Explorer 9+ Safari 3.2.1+ 什么是CSS,什么是CSS3? 非常简单,CSS代表“Casading Style Sheets”,就是样式表,是一种替代并为网站添加样式的标记性语言。CSS3只是表示下一代CSS,3只是版本号。 如果CSS3还没有完全被支持,那么我为什么要写CSS3呢? 因为学习新东西时间很有趣的事情! 而且有人常常问我如何实现圆角。我解释了很多遍如何使用图片或CSS3实现,这里我通过写一些我学到的一些东西的方式来希望能够帮助其他的有需要的人。 当然你也不必只看我说的。Eric Meyer是一个了解CSS很多的传奇人物,

IE6

IE6两年内还死不了——小议《别了,亲爱的IE6》

其实我之前在国外某站有看到关于dearie6.com的推荐,但并没有引起我太大的兴趣,不想,35公里同志将其整理了过来,在国内引起了渲染大波。 正好,我前天写了篇《纠结,IE6两年内还死不了……》来分析IE6的问题。在此,我总结一下与大家讨论一下这个问题。 其实是否淘汰一个浏览器,设计师说了不算,开发人员说了也不算,要用户说了才能算。很多情况下,你说别了IE6,就相当于与用户告别了…… 尽管在国外,IE6的市场占有率已经将到20%以下了,但是不可否认的是,在国内,它的占有率还在60%以上! 根据中国的国情,我还是认为,IE6,在中国,两年内还是使用率第一或第二的浏览器! 1、用户习惯 从IE4到IE5再到5.5,再到后来的6,这几个版本的界面基本是一致的,对于普通用户来说,用起来没什么区别!在使用习惯不会受到影响的情况下,用户还是愿意主动或被动的更新浏览器的。 但是IE7就不一样了,IE7的界面相对于之前的版本变化太大了,相信很多用户第一次使用的时候都找不到北……IE7中的工具栏完全颠覆了IE6。而且要命的是,当不小心打开多个标签页时,用户习惯性的去点击关闭按钮后,突然发现打开的页面全没了—

Firefox

浏览器之争:Firefox占有率超过20%,IE6持续下降

新年伊始,很多浏览器相关新闻显示:Firefox浏览器使用率现在已经超过20%,而Internet Explorer逐渐下降,主要是IE6持续下降,但是IE7的占有率还是略有上升的。 [![Browser market share from October to December 2008](//www.qianduan.net/img/2009/01/011507o4c.jpg "从2008年10月到12月份浏览器市场占有率")](http://marketshare.hitslink.com/browser-market-share.aspx?qprid=1&qptimeframe=M&qpsp=117&qpnp=3&qpdt=1&qpct=2)从2008年10月到12月份浏览器市场占有率首先, [Net Applications](http://www.netapplications.com/newsarticle.

javascript

用Javascript修正12个常见的浏览器问题

我们提倡尽可能使用CSS,而且我们常常能做到这一点。现代浏览器有很好的CSS支持-这无疑足够好让你使用CSS来控制布局和版面设计。但是有时候,某些网页元素在不同的浏览器会出现不同。 如果你不知道原因,不要过于担心,请研究CSS规则并查看这篇文章:使用CSS来修正一切: 20 +常见错误和修复。 如果这些也无效,您可以通过下面列出的12个javascript解决方案修复它,这样您的网页看起来就能跨越所有浏览器了! 在本文中,我们会揭开你在开发web应用是可能会遇到的12个最常见的CSS问题的javascript解决方案。 1. 自动匹配高度 自从我们抛弃了基于Table的页面布局后,创建同等高度栏目或内容盒子的视觉效果已然是一个挑战。##### 1.1 用jQuery设置匹配高度 这个jQuery插件在同一个容器里“平衡”盒子的高度并创造一个简介的网格——几乎从可用性和性能的角度使用简单的JavaScript替代: equalHeights()函数测定一个容器里的所有同级元素同容器的高度,然后设置每个元素的最低高度为最高的元素的高度。 如何工作 equalHeights()通过循环测定指定元素的最高级别的子节点,然后设置他们的最小高度值为最高的元素的高度。 Demohere. 1.2 用jQuery匹配栏目高度 jQuery的另一个可以使盒子的高度相等的插件 $(“#col1, #col2″).equalizeCols(); 将如你所想的那样匹配高度 $(“#col1, #col2″).equalizeCols(“p,p”); 匹配这两卷,并在#