IE7 CSS Hack

IE7 CSS Hack
导读:

前提:不考虑IE6以下的版本、且运行环境为标准模;IE11未做测试

IE7 CSS Hack

IE7 CSS Hack only

* + html .test{color:#ff0;}     /* For IE7 */

other IE7 CSS Hack

.demo{*color:#090;/* For IE7- */} 
.demo{+color:#090;/* For IE7- */} 
.demo{#color:#090;/* For IE7- */} 
.demo{>color:#090;/* For IE7- */}
.demo{.color:#090;/* For IE7- */}
.demo{color:#090\9;/* For IE6+ */}
.demo{[;color:#f00;];/* For IE7- and webkit */}
.demo{color:#090\9;/* All IE */}

IE6 CSS Hack

IE6 CSS Hack
导读:

前提:不考虑IE6以下的版本、且运行环境为标准模;IE11未做测试

IE6 CSS Hack

IE6 CSS Hack only

/* For IE6 and earlier */
* html .demo{color:#090;} 
.demo{_color:#090;} 

other IE6 CSS Hack

.demo{*color:#090;/* For IE7- */} 
.demo{+color:#090;/* For IE7- */} 
.demo{#color:#090;/* For IE7- */} 
.demo{>color:#090;/* For IE7- */}
.demo{.color:#090;/* For IE7- */}
.demo{color:#090\9;/* For IE6+ */}
.demo{[;color:#f00;];/* For IE7- and webkit */}
.demo{color:#090\9;/* All IE */}

IE11 开发人员指南以及6大新增功能

IE11 开发人员指南以及6大新增功能

微软在上周刚刚发布Windows 8.1预览版的同时发布了IE11浏览器,下面来一起盘点下IE11 中的新增功能。

一、兼容性

Internet Explorer 11 Preview 合并了几项更改,旨在改进与 Web 标准、其他浏览器和实际网站的兼容性。这些更改提升了对流行 Web 标准的支持,同时有助于防止早期网站无法正确地显示内容。

这些更改包括:

User-agent 字符串更改

对于许多旧网站,针对 IE11 Preview 的一些最明显的更新涉及用户代理 (User-Agent) 字符串:

Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv 11.0) like Gecko
//IE10
//Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; Trident/6.0)

如果将新的 user-agent 字符串与较早版本的 Internet Explorer 报告的字符串进行比较,你会发现以下更改:

  • 兼容 (“兼容”) 和浏览器 (“MSIE”) 令牌已删除。
  • “like Gecko” 令牌已添加(以便与其他浏览器一致)。
  • 浏览器版本现在由新版本 (“rv”) 令牌报告。

这些更改有助于防止错误地将 IE11 Preview 标识为较早的版本。

通常,应避免检测特定浏览器或浏览器版本。 基于此类测试的假设易于在更新浏览器时导致误报。 相反,在你需要使用功能时检测功能并使用渐进增强为不支持所需功能的浏览器或设备提供简化体验。

在极少数情况下,可能有必要对 IE11 Preview 进行唯一标识。 使用 Trident 令牌来执行此操作。

文档模式更改

Windows Internet Explorer 8 中引入了文档模式,这些模式可以实现从早期版本的浏览器支持的功能转换为现行标准和其他浏览器指定的功能。 Windows Internet Explorer 的后续版本继续使用此转换,方法是引入对行业标准所定义功能的支持的同时,引入模拟早期版本所支持功能的新文档模式。

当许多网站已更新为向其他浏览器提供更丰富的体验时,某些网站仍继续使用现有的旧功能支持向 Internet Explorer 提供旧体验,即便最新版本的浏览器支持为其他浏览器呈现的体验。

从 IE11 Preview 开始,边缘模式成为首选文档模式;它代表可供浏览器使用的现行标准的最高支持。

使用 HTML5 文档类型声明启用边缘模式:

<!doctype html>

Internet Explorer 8 中引入了边缘模式并且后续版本中也提供了该模式。 注意,边缘模式支持的功能会限制为呈现内容的特定浏览器版本支持的功能。

从 IE11 Preview 开始,已弃用文档模式,除了临时情况外不应再使用。 应更新依靠旧功能和文档模式的站点以反映现行标准。

如果必须针对特定文档模式以便在重新运行站点以支持现行标准和功能时允许运行站点,则请注意,你使用的是转变功能,以后的版本中可能不提供该功能。

如果你当前在针对旧文档模式使用 x-ua-compatible 标头,那么可能你的网站无法反映对 IE11 Preview 可用的最佳做法。 有关详细信息和帮助,请参阅 modern.ie。

旧 API 添加、更改和删除

许多网站查找支持旧 (HTML4) 功能的浏览器,目的是提供针对早期浏览器优化的体验。 对于支持旧功能和现行标准(如 HTML5、CSS3 等)的浏览器,这是一个问题。 如果站点在搜索现行标准支持之前检测到旧功能,则可以为支持现行标准的浏览器提供旧体验和更丰富的体验。

因此,IE11 Preview 添加、更改、删除了许多默认的旧功能:

  • navigator.appName 属性现在会返回 “Netscape” 以反映 HTML5 标准和匹配其他浏览器的行为。
  • navigator.product 属性现在会返回 “Gecko” 以便反映 HTML5 标准和匹配其他浏览器的行为。
  • XDomainRequest> 对象被 XMLHttpRequest 的 ORS 替换。
  • 已添加对 __proto__ 的支持。
  • 已添加 dataset 属性。

另外,为了支持现行标准指定的功能,已删除若干旧 API 功能:

删除 API 功能 替代功能
attachEvent addEventListener
window.execScript eval
window.doScroll window.scrollLeft、window.scrollTop
document.all document.getElementById
document.fileSize、img.fileSize 使用 XMLHttpRequest 可提取源。
script.onreadystatechangescript.readyState script.onload
document.selection window.getSelection
document.createStyleSheet document.createElement(“style”)
style.styleSheet style.sheet
window.createPopup 使用 diviframezIndex 值很高)
二进制行为 变化;使用基于标准的等效,如 canvas、SVG 或 CSS3 动画
旧数据绑定 使用框架提供的数据绑定,如 WinJS

这些更改在某种程度上可阻止编得不好的 user-agent 检测机制(错误地)将 Internet Explorer 标识为较早版本。 因此,依靠现行标准的站点按预期显示。

URL 字符编码

IE11 Preview 更改了 URL 的字符编码。 具体来说,现在使用 UTF-8 字符编码对查询字符串和 XHR 请求进行编码。

此更改会影响所有 URL,但以下除外:

  • 定位名称组件(也称为“片断”)。
  • 用户名和密码组件。
  • file:// or ftp:// protocol links。

这些更改与其他浏览器行为匹配并简化了跨浏览器 XHR 代码。

自定义数据属性

IE11 Preview 添加了对 HTML5 自定义数据属性和 dataset 属性的支持,可以提供对它们的编程访问。你可以使用 data- 前缀后跟属性名称的方式来向元素分配数据属性:

<div data-example-data="Some data here"></div>

要获取或设置数据属性的值,请使用此语法:

   // to get
   var myData = element.dataset.exampledata;
   // to set
   element.dataset.exampledata = "something new";
更新反映对基于标准的规范的更改

IE11 Preview 还包括用于支持基于标准的 Web 规范(已更新或仍在发展)的更新。 这其中包括与支持下列功能相关的更改:

弹性框(“Flexbox”)布局更新

使用 IE11 Preview,你可以更新站点来与最新的弹性框标准保持一致并简化跨浏览器的代码。

有关详细信息,请参阅”弹性框(“Flexbox”)布局更新”。

突变观察者

突变观察者是 IE11 Preview 中新的标准 Web 平台功能,提供了对突变事件支持的所有相同方案的快速执行直接替代,以及对属性更改事件支持的方案的替代。
有关详细信息,请参阅”突变观察者”和”将突变事件和属性更改事件迁移到突变观察者”。

指针事件

为了符合万维网联合会 (W3C) 指针事件规范的候选推荐,与 Internet Explorer 10 相比,IE11 Preview 实施已略有更改。

一、F12 开发人员工具

使用全新的 F12 开发人员工具调试代码,解决显示问题,改进性能并提高网页稳定性。

从头开始重建

Internet Explorer?11 Preview 中的 F12 工具已从头开始重建,能够为你带来以下益处:

  • 新且更干净的用户界面。
  • 新的响应、内存以及模拟工具。
  • 常见工具中新的、改进的功能。
  • 更快、更简单的工作流。
使用 UI 响应工具加快网页速度

UI 响应工具,有助于调节页面性能

当页面运行时,新的?UI 响应工具为其提供配置文件,从而标识页面速度减慢的位置以及花费时间过长的进程??⑷嗽笨梢怨鄄?CPU 使用率、帧速率与页面行为之间的关系。

CSS、HTML 以及 JavaScript 自动完成

键入 JavaScript、HTML 或 CSS 代码时,?控制台和?DOM 资源管理器工具会提供自动完成建议。自动完成有助于实现以下操作:

  • 使 API 更容易被发现;例如控制台 API 方法。
  • 减少键入错误。
  • 加速工作流。
屏幕和 GPS 模拟

使用模拟工具,你可以在小至 240 像素宽的移动屏幕上,大至 4k 家庭影院屏幕的所有屏幕上预览站点外观。GPS 模拟测试移动网页如何在世界任何位置进行响应。

有意义的内存分析

内存工具,有助于随着时间的推移跟踪内存使用情况,以捕获可降低页面速度或破坏页面稳定性的泄漏

随着时间的推移跟踪内存使用情况是一个重要工具,用于调试页面速度缓慢和崩溃情况。新的内存工具提供了以下内容:

  • 整体内存使用情况的时序表视图。
  • 内存使用情况快照,显示某个给定时间点网页的内存使用情况。
  • 快照比较,查明两个快照之间更改内存使用情况的源。这有助于标识网页运行时和用户与网页交互时显露的内存问题。
  • 高亮显示的孤立元素,显示可以回收元素的位置。
右键单击以检查

使用 IE11 Preview 在?DOM 资源管理器工具中选择页面元素非常轻松。右键单击页面上的元素,然后单击上下文菜单中的“检查元素”,以在 DOM 资源管理器工具中突出显示元素。

三、触控

IE11 Preview 为网站和 Windows 应用商店应用提供了更多默认和自定义触控支持。

四、固定网站

凭借对固定网站和跨设备同步的动态磁贴支持,IE11 Preview 可让你的网站在 Windows 8.1 Preview 开始屏幕和 Windows 设备上具有一流的显示效果。

五、WebGL

IE11 Preview 引入了对 WebGL 的基本支持,WebGL 是一组通过画布元素公开的 API,用于呈现交互式三维和二维图形。

六、视频

凭借对自适应流、内容?;ず妥帜涣煊蛑腥潞托滦吮曜脊δ艿闹С?,IE11 Preview 将 HTML5 视频提升到了新的高度。

更多 IE11 开发人员指南主题

查看 IE11 Preview 中包含的开发人员功能完整列表,以及可供使用 JavaScript 开发适用于 Windows 8.1 的 Windows 应用商店应用的功能。

总结

Internet Explorer 11是Internet Explorer家族目前最棒的版本,微软正在为大家准备一个真正标准的浏览器。

Chrome 28正式发布:采用全新引擎Blink

Chrome 28正式发布:采用全新引擎Blink
Chrome 28今天正式发布,Windows、Mac和Chrome浏览器框架用户均可升级至28.0.1500.71。该版本不同于以往版本,它放弃了一直以来使用的WebKit,而采用Google自主研发的浏览器引擎Blink。
目前为止,Webkit和Blink看起来几乎一模一样,但随着时间的推移,我们相信Google会加入更多自己需要的内容,二者才会有一些区别。

Blink引擎的百科:

Google 宣布将在未来的 Google Chrome/Chromium 中使用基于 WebKit 的 fork Web 渲染引擎:Blink。同时 Opera 表示也将跟进 Google Chrome/Chromium 的步伐。

Google Chrome/Chromium 从创始至今一直使用 WebKit(WebCore) 作为 HTML/CSS 渲染引擎。WebKit 早先由 Apple 由 KHTML 项目 fork 出来,用于 Safari 浏览器的 Web 引擎。由于宽松的协议、轻量级的设计和便捷的应用程序内嵌 API,WebKit 逐渐变得流行起来,除了 Google Chrome/Chromium 和 Safari,它在移动终端( Symbian S60,Android,iOS)到 Toolkit 集成(GTK+, Qt4) 都有不错的收获。

尽管上面一众经常被统称为 WebKit,实际上各自都使用了自己的 WebKit 分支或者编译时选项,使得最终的渲染结果也是存在一定的差异的。不过大体上 WebKit 社区内部还是比较和谐的,各个成员之间也为维持兼容性作出了努力,直到 2010 年随着 OS X Lion 一起面世的 WebKit2。由于 WebKit2 在 WebCore 层面上实现的进程隔离在一定程度上与 Google Chrome/Chromium 自己的沙箱设计存在冲突,故 Google Chrome/Chromium 一直停留在 WebKit,使用 Backport 的方式实现和主线 WebKit2 的兼容。显而易见这增加了 WebKit 和 Chromium 的复杂性,且在一定程度上影响了 Chromium 的架构移植工作。

基于以上原因,Google 决定从 WebKit fork 出自己的 Blink Web 引擎:
现阶段以精简内部结构为主,将删除大约 7000 个文件和 450 万行 WebKit2 兼容代码。
未来将着重改善 DOM 架构,将使用 JavaScript 实现 DOM。
提升安全性,实现进程外 iframes 。

对于今年初宣布放弃自有渲染引擎跟随 Chromium 的 Opera 来说,其开发者也立刻发布博客公告 Opera 亦将切换至 Blink 引擎。

谷歌Blink的横空出世将使它和其他的WebKit浏览器开发商包括——苹果、诺基亚和黑莓——更彻底地分道扬镳。

这一举措意味着,现在有四大渲染引擎在线:WebKit、Blink、Trident 和Gecko。对于用户来说,渲染引擎的差异化意味着他们在使用不同浏览器打开同一网页时将得到不同的结果——在移动设备上尤其如此。

谷歌并在一篇博客文章里写道:“我们知道,新的渲染引擎的出现将对网页浏览产生重大影响?!钡雀璨钩渌?,它认为多个渲染引擎 “能够推动创新,并增进整个网络生态系统的健康?!?/p>

谷歌此举有很大风险。根据NetMarketShare的数据,Chrome 浏览器目前是台式机最常用的浏览器之一。而根据Statcounter的统计,Chrome 浏览器目前是台式机最常用的浏览器。NetMarketShare统计的是访客数量,而Statcounter只统计点击量。如果谷歌的新战略不成功,Chrome 浏览器的统治地位或将不保。

Chrome 28开发版本的版本说明中还在使用WebKit,而最新的Chrome 28.0.1469.0中已经替换为Blink。