Category

Archive for the 'Html&Css' Category

用一行CSS修复在IE中修改图片大小后图片的模糊

( Html&Css )

如果在HTML中使用img 标签的width 或 height 属性调整图片的尺寸后，在IE中图片会变得不清晰，FF中不会。

我们用一行CSS可以修正这个问题。

  1. img { -ms-interpolation-mode: bicubic; }

如下图：
效果

(to view associated entry please click here)

令人振奋之消息Web Workers draft specification

( Html&Css and Javascript )

HTML5 加入的新草案，Web Workers draft specification
这将意味着在前端页面的javascript中可以实现类似多线程及线程间消息传递的机制。

(to view associated entry please click here)

IE8新特性(三)

( Html&Css )

WebSlice 概述

WebSlice 允许用户预订 Web 页面的多个部分。
用户通常一天访问许多网站多次，以查看是否有新的更新。RSS 源使得上述体验更加轻松：用户可以预订更新并查看其摘要，而无须逐个浏览各个站点。Internet Explorer 8 Beta 1 for Developers 支持对当天源的预订，并增加了对 WebSlice 的支持。
WebSlice 是一种新功能，它通过允许用户直接在 Web 页面内预订来使网站与用户互连。WebSlice 的行为与源相同，客户可通过预订来获取更新及更改通知。

WebSlice 是 Web 页面内的一部分，它被视为一个可以预订的项目，如同源一样。要在网站上启用 WebSlice，请针对可以预订的标题、描述和其他属性来使用类名称注释 Web 页面。
Internet Explorer 8 Beta 1 for Developers 用户能够发现 Web 页面内的 WebSlice 并将它们添加到收藏夹栏—地址栏下面的专用行，便于访问链接。Internet Explorer 8 Beta 1 for Developers 可预订 Web 页面、检测 WebSlice 中的更改，以及向用户通知更新。用户可以直接从收藏夹栏预览这些更新，并通过单击进入网站了解详细信息。

功能详细描述

                                                                                                                                   
本文档涵盖 WebSlice 功能的详细信息。

  1. 用户界面
  2. WebSlice 创作
  3. WebSlice 的发现
  4. WebSlice 的客户端处理

1. 用户界面

WebSlice 的用户体验有四个方面。请注意，下列图像并非最终图像。

  1. 发现
  2. 预订
  3. 通知
  4. 预览

发现：用户可以发现 Web 页面有 WebSlice，正如页面可以有源一样。如果在当前 Web 页面上找到 WebSlice 或源，则发现按钮会亮起。

用户还可以直接发现网页内的 WebSlice：当鼠标指针悬停在 WebSlice 区域时，左上角会出现页内按钮。

预订：用户可通过单击“发现”按钮将 WebSlice 添加到收藏夹栏，以获取更新。

通知：用户可查看何时 WebSlice 存在更新。存在更新的 WebSlice 在收藏夹栏上以粗体显示。

预览：用户可以预览 WebSlice 的更新。单击收藏夹栏上的 WebSlice 会显示该 WebSlice 的详细信息视图。用户可通过单击打开按钮来浏览托管该 WebSlice 的网站。

详细信息视图中显示的 HTML 来自 WebSlice 的描述属性。预览窗口的能力有限；例如，窗口不允许脚本或表单控件。另外，视图内的链接也使用当前选项卡进行浏览。

您可以使用 WebSlice 来保持用户与您的网站相连。使用 WebSlice，用户可以获取更新并能够轻松地链接回到您的网站。WebSlice 可用于天气、占星和“新增内容”信息，以及随时间变化的内容，如拍卖项和航班抵达情况。下一节将介绍如何使您的网站具有 WebSlice。

2. WebSlice 创作
启用 WebSlice 的方法是将 HTML 注释直接添加到 Web 页面。WebSlice 使用 hAtom Microformat 和 WebSlice 格式的组合来描述 Web 页面的可预订部分。本节涵盖 WebSlice 的基本内容、截止日期和带宽属性。

基本内容
WebSlice 的基本属性是 WebSlice 容器、条目标题和条目内容。
WebSlice

  1. 必需。
  2. 使用类名称 hslice。
  3. WebSlice 元素必须包括一个 ID。
  4. 表示 WebSlice 的整个区域，包括主题、描述和其他 WebSlice 属性。

条目标题

  1. 必需。
  2. 使用 hAtom Microformat 中定义的类名称 entry-title。
  3. 条目标题可以有多个实例。

条目内容

  1. 可选。
  2. 使用 hAtom Microformat 中定义的类名称 entry-content。
  3. 如果条目内容丢失，则认为它是空字符串。
  4. 条目内容可以有多个实例。

下面是如何使用链接、标题和描述属性来标记拍卖项的示例。
http://auction.microsoft.com/item
<div class="hslice" id="1">
<p class="entry-title">Item - $66.00</p>
<div class="entry-content">high bidder:buyer1
…
</div>
</div>

根据标记，WebSlice 链接为 http://auction.microsoft.com/item#1，标题为“Item - $66.00”。

截止日期
WebSlice 还处理随时间变化的内容；例如，明天结束的拍卖项或今天下午 7 点抵达的航班。WebSlice 在到达截止日期之前始终处于活动状态，并且在即将到期时发出警告。
结束时间

  1. 可选。
  2. 使用类名称 endtime。
  3. 使用 abbr-design-pattern 来编码日期和时间。

在下面的实例中，WebSlice 的截止日期为 2 月 28 日下午 5 点。

<div class="hslice" id="1">
<p class="entry-title">Item - $66.00</p>
<div class="entry-content">high bidder:buyer1
…
<p>End time:<abbr class="endtime" title="2008-02-28T17:00:00">1 day 18 hours</abbr></p>
</div>
</div>

如果用户已经打开了 Internet Explorer 8 Beta 1 for Developers，则 WebSlice 按钮在大约还差 5 分钟到下午 5 点时开始发光，表示即将到期。下午 5 点之后，按钮上的文字变灰，表示 WebSlice 已过期。过期状态的按钮仍是活动的，以便用户可以浏览该 Web 页面。
带宽
预订 Web 页面会使服务器增加额外加载，因此对发布器有影响。为使发布器控制客户端检查更新的频率，WebSlice 可以包括一个表示最小刷新间隔的 ttl（生存时间）属性。该值表示 Internet Explorer 8 Beta 1 for Developers 检查更新的时间间隔将不小于定义的值。有关详细信息，请参阅 RSS 平台博客公布中的 ttl 描述。
例如，如果 WebSlice 指定 ttl 的值为 180 分钟，则下载引擎检查更新的时间间隔将不小于 3 小时，即使用户已将定期间隔设置为 60 分钟。
生存时间

  1. 可选。
  2. 使用类名称 ttl。
  3. 表示 RSS 2.0 ttl 的概念。
  4. 生存时间元素的值必须为整数。
  5. 指出客户端应缓存数据的分钟数。

<div class="hslice" id="1">
<p class="entry-title">Item - $66.00</p>
<div class="entry-content">high bidder:buyer1
…
<p>This clip updates every <span class="ttl">15</span> minutes </p>
</div>
</div>

或者，您可以指定客户端应获取更新的其他来源。如果 Web 页面有许多与 WebSlice 不相关的内容，则您可以将客户端重定向为预订 RSS 源。备用源包含一个单一源项目，其中包括与 WebSlice 相同的所有属性。
源 URL

  1. 可选。
  2. 使用 rel 名称 feedurl。
  3. 表示客户端应预订以获取更新的备用源。
  4. 备用源的 URL 被指定为 ref 属性的值。

<div class="hslice" id="1">
<p class="entry-title">Item - $66.00</p>
<div class="entry-content">high bidder:buyer1
…
<a rel="feedurl"ref="auction.microsoft.com/item.xml">Subscribe to WebSlice</a>
</div>
</div>
引用的源应为单项源。源项表示 WebSlice。如果希望为 WebSlice 指定截止日期（结束时间），则使用 mon 名称空间，如以下绿色部分所示。
<?xml version="1.0"?>
<rss version="2.0"xmlns:mon="http://www.microsoft.com/schemas/rss/monitoring/2007">
<channel>
<title>Feed for Item</title>
<link>http://auction.microsoft.com</link>
<description>Feed for auction item</description>
<ttl>15</ttl>

<item>
<title>Item = $66.00</title>
<link>http://auction.microsoft.com/item#1</link>
<description>high bidder:buyer1 …</description>
<mon:endtime>2008-02-28T17:00:00</mon:endtime>
</item>
</channel>
</rss>

当备用源属性显示时，Internet Explorer 8 Beta 1 for Developers 即预订指定的源以获取更新。原始 Web 页面不再用于获取 WebSlice 的更新。
WebSlice 详细信息视图 (HTML)
从条目内容元素中提取的外部 HTML 用于详细信息视图中的显示。将使用与条目内容元素的 HTML 和原始 Web 页面关联的样式：

  1. 导入的样式表
  2. 在头元素中定义的样式规则
  3. 直接内嵌样式

来自父元素的样式并不在详细信息视图的 HTML 中应用。在本示例中，详细信息未显示蓝色背景，因为该样式应用于父元素而非条目内容元素。
<div class=”weather” style=”background:blue”>
<div class="hslice" id="main">
<h2 class="entry-title">Seattle Weather</h2>
<p class=”entry-content”>The weather is X.</p>
</div>
</div>

要将此样式应用于 HTML 竖向三级弹出菜单，请将样式信息包括到条目内容元素中：
<div class=”weather” style=”background:blue”>
<div class="hslice" id="main">
<h2 class="entry-title">Seattle Weather</h2>
<p class=”entry-content” style=”background:blue”>The weather is X.</p>
</div>
</div>

呈现详细信息视图时，正文元素会被插入到条目内容元素的外部 HTML 周围。如果具有适用于正文元素的样式表，则还会将其应用于 HTML 竖向三级弹出菜单的正文范围内。为避免将正文样式应用于 HTML 竖向三级弹出菜单，可为其样式引用类名称的原始 Web 页面的正文指定一个类名称。在下述示例中，应用于原始 Web 页面的绿色背景将不在 HTML 详细信息视图中使用。
<style type=”text/css”>
.MyBody { Background-color: Green };
</style>

<body class=”MyBody”>
<div class=”weather”>
<div class="hslice" id="main" style=”background:blue”>
<h2 class="entry-title">Seattle Weather</h2>
<p class=”entry-content”>The weather is X.</p>
</div>
</div>
<body>

您还可以指定一个备用源，在其中，项目描述包含 HTML 详细信息视图的直接样式。
<item>
<title>Seattle Weather</title>
<link>错误！超链接引用无效。</link>
<description> <![CDATA[
<p style=”background:blue”>The weather is X.</p>
…
]]>
</description>
</item>

 

经过验证的 WebSlice
有两种方法可用于验证 WebSlice：永久 cookie 和 HTTP 身份验证。

永久 Cookie
为 Web 页面而启用的 Cookie 被用作后台更新的一部分。当 cookie 过期时，建议发送一个链接以作为 WebSlice 条目内容属性的一部分登录。这允许用户返回到站点以及重设 cookie。
cookie 存在一个已知问题，即 Windows Vista 的保护模式处于开启状态时无法正常传递后台更新。要解决此问题，用户必须在提升模式下运行 Internet Explorer 8 Beta 1 for Developers（右键单击 Internet Explorer 8 图标，然后选择以管理员身份运行），以获得经过验证的 WebSlice 内容。

HTTP 身份验证
Internet Explorer 8 Beta 1 for Developers 支持通过 HTTP 身份验证进行验证的 WebSlice。具体地讲，就是支持 HTTP BASIC 和 HTTP DIGEST 身份验证（与任何常规 Web 页面相同）。但是，对于 WebSlice HTTP BASIC 身份验证，仅通过 HPPTS (SSL) 进行支持。

WebSlice 支持

HTTP

HTTPS

HTTP BASIC 验证

-

ü

HTTP DIGEST 验证

ü

ü

让我们通过 SSL 将 HTTP BASIC 验证用于本示例。确保当用户浏览到某个 WebSlice 时，他们正通过 HTTPS 来执行此操作，以便当用户预订 WebSlice 时，他们是使用 HTTPS 进行预订的。
服务器必须使用常规 HTTP 验证询问（HTTP 401 验证所必需的响应）来询问对 WebSlice 的请求。起初，在用户预订后，他们不具有 WebSlice 预订已保存的用户名和密码。但是，当他们首次查看 WebSlice 时，系统将通知他们 WebSlice 需要身份验证，并要求他们在 WebSlice 属性对话框中输入其凭据。输入之后，WebSlice 将会正确地进行更新。
使用备用 URL 预订经过验证的 WebSlice

通过用于浏览用途的 HTTP 以及用于预订的 HTTPS 可以访问 WebSlice。包括一个备用 URL（<a rel="feedurl" href="https://…."> 构造）以预订 WebSlice。在本例中，feedurl 应指向同一个 WebSlice，但应使用 HTTPS 代替 HTTP，以便用户可以预订到 SSL 版本。
此方法具有一些附加优势，即允许常规 HTTP WebSlice 使用 cookie 身份验证，以及允许 HTTPS 版本使用 HTTP 身份验证。这意味着，仅当用户实际预订 WebSlice 时才使用 HTTP 身份验证，而不是在用户通过 WebSlice 浏览到页面时就使用。

3. WebSlice 的发现

前一节讨论了在 Web 页面内发现 WebSlice 的体验。仅通过向 Web 页面添加 WebSlice 批注，您即可指示 Internet Explorer 8 Beta 1 for Developers 自动检测 WebSlice 是否存在，并加亮发现按钮和页内按钮。
本节涵盖 WebSlice 发现如何运作的详细信息，以及可让您在站点上改善此体验的附加选项。您可以指定 Web 页面的主 WebSlice、禁用页内按钮，以及直接在 Web 页面内创建 WebSlice。

WebSlice 发现
此发现按钮以 Internet Explorer 8 Beta 1 for Developers 解析文档的顺序列出已发现的 WebSlice。此发现按钮是一个分割按钮，其默认操作是转到第一个已发现的 WebSlice。如果要为页面指定主 WebSlice，则可通过在文档标题中添加一个链接元素来完成此操作：
rel 属性：必需。值必须为“default-slice”。
type 属性：必需。值必须为“application/x-hatom”。
href 属性：必需。这是当前文档范围内的剪辑的 URI。如果该 URI 位于当前文档之外，则会忽略它。
<head>
<link
rel="default-slice"
type="application/x-hatom"
href="www.example.com/#auction" />
</head>

指定文档的主 WebSlice 会将发现按钮的默认操作设置为预订主 WebSlice。它还会自动设置默认的添加到收藏夹栏菜单项以添加 WebSlice。
页内 WebSlice 发现
当指针悬停在 WebSlice 区域时，包含 hSlice 类名称的 HTML 元素，即页内 WebSlice 就会出现在窗口的左上角。这可以更容易地发现 WebSlice。
如果您希望针对特定网页关闭此功能，则可向页面标题中添加下列元数据：
name 属性：必需。此属性指示 META 标记与 WebSlice 功能相关。值必须为“slice”（不区分大小写）。
scheme 属性：必需。值必须为“IE”（不区分大小写）。
content 属性：必需。此属性指示应针对当前页面关闭页内按钮。值必须为“off”（不区分大小写）。
<head>
<meta name="slice" scheme="IE" content="off" />
</head>

当禁用此功能时，您需要就用户如何添加 WebSlice 提出建议。这可通过 AddToFavoritesBar API 方法来完成。

AddToFavoritesBar API 方法
这是为促进添加到收藏夹栏而供网站使用的一种新方法。用户调用此方法后，允许预订 WebSlice 的对话框将出现。
window.external.addToFavoritesBar(string URL, string Title, [optional] string Type)
URL：必需。这是要添加的 WebSlice 的 URL。它是包括 WebSlice 锚点的完整 URL。
标题：必需。这是 WebSlice 的名称。
类型：可选。这是链接的类型。此值必须为“slice”，以便 Internet Explorer 8 Beta for Developers 可以预订此 WebSlice。
以下为一个示例，说明 Web 页面内的按钮如何实现此 API。
<button onclick="javascript:window.external.addToFavoritesBar(’http://auction.microsoft.com/item#1′, ‘Item - $66.00′, ’slice’)">Add WebSlice</button>

刷新解析

如果客户端应用程序动态更新了用于搜索提供程序和源的链接元素，则它可以调用 window.external.contentDiscoveryReset() 以再次解析文档。此操作会使 Internet Explorer 8 Beta 1 for Developers 重新载入源发现按钮上的源、WebSlice 和搜索提供程序的列表以及即时搜索下拉列表，从而反映出新的文档状态。
刷新解析的用途强大；例如，映射站点可以为当前在映射视图中的所有现场提供源，而无需刷新页面。这对于在查看页面后立即使用的内容同样有效，但在处理页面载入后才下载的内容时可能有些棘手，例如 WebSlice。某些站点可能需要新下载的内容（例如 WebSlice 或源）作为新发现的内容。如果在导航之后将 WebSlice 以动态方式插入到页面中，则必须使用 rel=feedurl 提供指向备用源的链接，以便获得该项目的更新。

4. WebSlice 的客户端处理

Internet Explorer 8 Beta 1 for Developers 对待 WebSlice 与对待源的方式一样：WebSlice 被添加到将由 Windows 源平台处理的常见源列表中。这使得 WebSlice 不仅在 Internet Explorer 8 Beta 1 for Developers 内可用，还在 Windows 上的其他应用程序内可用。
Windows 源平台会以用户指定的频率定期更新源和 WebSlice。默认情况下，频率为每天一次。用户可通过 WebSlice 属性对话框将此频率增加至每 15 分钟一次。
更新过程中，Windows 源平台会通过净化进程来传递源和 WebSlice；此外，此过程还会从描述元素中删除脚本代码。这减轻了任何恶意内容对 Internet Explorer 8 Beta 1 for Developers 及使用此平台的其他应用程序的影响。在此步骤中，来自服务器的 WebSlice 会与本地存储的 WebSlice 相比较。如果 WebSlice 的标题或描述不同，则会将项目标记为已更新，并在收藏夹栏上以粗体按钮形式显示它。
由于 WebSlice 净化，对脚本或 HTML 表单字段的任何引用将不会在 WebSlice 按钮的详细信息视图内工作。还需注意的是，详细信息视图被设置为脚本代码无法运行的受限区域。

5. 已知问题
Internet Explorer 8 Beta 1 for Developers 中存在一些已知问题：

  • WebSlice 详细信息视图的初始尺寸是否使用从原始 Web 页面发现的条目内容矩形的尺寸。如果尺寸在详细信息视图中显示不同，则尝试将 Web 页面设置为在 IE7 标准模式中呈现。
    • 在 Windows Vista 中，Cookie 在保护模式处于打开状态时不能正常工作。要为 Windows Vista 上的用户解决此问题，可将用户重定向至 HTTPS 源，如“使用备用 URL 预订经过验证的 WebSlice”一节中所指定。
    (to view associated entry please click here)
previous posts + »