博客园_小贺的博儿

css3样式的图片小讲解

2012-04-12T07:19:00Z

2012-04-12T07:19:00Z2012-04-12T07:19:00Z.小贺http://www.cnblogs.com/NetSos/

本文链接

愚人节马上就要到了,我教大家一个最强最嗨的整人方法

2012-03-30T09:14:00Z

愚人节马上就要到了,我教大家一个最强最嗨的整人方法.

神马鞋带开了,手机没电了,钱掉了,这些简直弱爆了!

最新的方案已经出来了,我来教给大家.那就是在你博客或空间里面

==================================================================

===================================================================

==================================================================

===================================================================

写一篇 愚人节马上就要到了,我教大家一个最强最嗨的整人方法

不好意思,你上当了.娃哈哈! 纯属娱乐!

本文链接

[Modernizr]-----HTML5和CSS3开发利器

2012-03-26T08:04:00Z

文章为转载,[Modernizr]不解释!

什么是Modernizr？

Modernizr 是一个用来检测浏览器功能支持情况的 JavaScript 库。目前，通过检验浏览器对一系列测试的处理情况，Modernizr 可以检测18项 CSS3 功能以及40多项关于HTML5 的功能。它比传统检测浏览器名称（浏览器嗅探）的方式更为可靠。一整套测试的执行时间仅需几微秒。此外，Modernizr 网站通过定制脚本只对你感兴趣的元素进行检测，从而实现效率优化。
当使用 Modernizr 检测 CSS3 支持情况时，你无需具备任何 JavaScript 的知识。你仅需在网页中插入文件，它随即根据浏览器的功能情况在页面的<html>标签上添加一组类。相应类的名称已经符合标准化的要求并浅显易懂。例如，如果浏览器支持 box-shadow 属性，则需要添加相应的 boxshadow 类；否则，添加一个 no-boxshadow类即可。你所要做的一切只不过是创建一个使用这些类的式样表，以便为相应浏览器提供合适的式样。
Modernizr 可轻松实现 JavaScript 解决方案，即人们熟知的 polyfills——它模拟HTML5 相关功能和技术，如地理定位。然而，你的确需要对 JavaScript 有基本了解以便使用这些功能和技术。术语polyfill 来源于一种填补裂缝的黏土的英国品牌Polyfilla（即美国人熟知的填泥料）。这里，polyfill 用来填补浏览器功能上的漏洞。有时，Modernizr 可无缝地执行这项任务。但本质上，这只是一种修补工作，所以，不能依赖它产生无漏洞浏览器所实现的完全相同结果。
下载 Modernizr
与其它 JavaScript 库相同的是，Modernizr 可提供 development 和 production 版本。与大多数库相比，唯一的不同之处是，空格和注释已经从 production 版本中删除了，这样可以减少下载量的大小。 Modernizr 采取了不同的方法。 development 版本在某种意义上可称为是“厨房中的水槽”—它几乎包含了一切。 production 版本只包含了你选择的那些元素，这样能够显著降低下载量。在很多情况下，production 版本可以缩小为development版本大小的二十分之一。
当使用 Modernizr 进行测试时，我建议你下载 development 版本。一旦你掌握了它是如何运作的以及它的能力，你就可以下载一个自定义 production 版本以便在你的网站进行部署。
本教程的示例文件包含的是 Modernizr的development 2.0.6 版本，但是我建议你从 Modernizr 站点上用最新更新的版本替代它。
下载本文附带的示例文件（使用modernizr.zip）并且在 Dreamweaver 站点内将它们解压到一个方便的位置，或者是为本教程创建一个新站点。
访问 Moderniz 网站，其地址为 http://www.modernizr.com/ 。
在 Download Modernizr 2 部分中，单击 Development 按钮（参见图1）。Modernizr 的 development 版本就会直接在你的浏览器窗口上打开。

图1. 选中development版本以便进行Modernizr测试

注：如果你错误地单击了主导航菜单中的 Download 链接，那么你将看到大量的复选框出现，要求你去选择你想要的工具。这是为定制的 production 版本所设置。单击面板顶部的 Development 版本的链接，或者单击浏览器的 Back 按钮返回主页并选中图1所示的 Development 按钮。
在浏览器的主菜单上，选中 Save Page As，并在示例文件的js文件夹里将它另存为 modernizr.js。如果有必要的话可以替换已有的文件。

使用 Modernizr 检测 CSS 功能

如前所述，Modernizr 并没有尝试在旧版本的浏览器中添加新的功能，但是它允许你按照你的风格去弥补那些缺失的功能。为了展示这是如何运作的，示例文件中包含了一个叫做 css_support_begin.html 的页面。如果你在新式浏览器中加载这个页面，它应该看起来如图2所示。

图2. Firefox 5以多栏的格式显示了页面并且在图像中添加阴影

该页面的风格是使用了CSS3的 `column-count` 和 `box-shadow` 属性，以便以多栏的格式显示文本并在图像中添加阴影。旧版本的浏览器不支持这些属性中任何一项，因此在 Internet Explorer (IE) 7 中同一页面看起来如图3所示。

图3. IE7忽略了column-count 和 box-shadow属性

在IE9中，同一页面显示了图像阴影，但是文本和图3中所示的布局是一样的。
你在尝试弥补缺失的功能上采取什么方式取决于你的设计大纲的要求。要尝试使页面在所有的浏览器中看起来完全一样将要涉及大量工作，但是你可以做一些简单的改进，比如在图像周围环绕文字，调整图像与文本的左边距，以及在图像底部和右边缘添加隐约的边界，以便使它更具三维立体的感觉。
检测对 CSS3 功能的支持
Modernizr 使用 JavaScript 检测浏览器所支持的功能，但是，它并不是使用 JavaScript 动态地加载不同的样式表，而是使用非常简单的技术将类添加到页面的<html>标签。然后作为设计者由你决定使用 CSS 层叠为目标元素提供合适的样式。例如，如果页面支持 `box-shadow` 属性，那么 Modernizr 会添加 `boxshadow` 类。如果不支持，那么它用 `no-boxshadow` 类作为替代进行添加。
由于浏览器忽略它们无法识别的 CSS 属性，因此你可以放心地按照你的基本样式规则使用 `box-shadow` 属性，然而需要按照下面的格式为旧版本的浏览器添加单独的 descendant selector ：

`.no-boxshadow img { /* styles for browsers that don't support box-shadow */ }`

只有不支持 `box-shadow` 的浏览器才会有 `no-boxshadow` 类，因此其它的浏览器不会应用这个样式规则。
让我们将 Modernizr 添加到示例页面并检查它添加到<html> 标签中的类。
复制 css_support_begin.html 并将它另存为 css_support.html。
打开你刚创建的复制文件，并切换到 Code 视图或者Split视图。
HTML markup 的前两行应该如下所示：

`<!DOCTYPE HTML> <html>`

将class="no-js"添加到<html>标签中，如下所示：

`<!DOCTYPE HTML> <html class="no-js">`

Modernizr 依赖于在浏览器中启用的 JavaScrip。当它启用时，这种类会被动态地删除。但是，在极少数情况下，当 JavaScrip 没有启用时，它依然存在于 HTML makup 中，如果必要，它允许你为这样的访问者创建特殊的样式规则。
css_support.html 中的样式是嵌入在 <style> 块中。Modernizr 库需要被添加到样式加载之后的页面的 <head> 部分。在结束的 </style> 和 </head> 标签之间添加一条新的线，并且使用 <script>标签附加上 moderizr.js。最简单的方式是键入你自己的代码，但是你也可以在Insert面板中使用 Script 按钮或者选中 Insert – HTML–Script Objects–Script。<head> 的最后三行应该如下所示：

`</style> <script src="js/modernizr.js"></script> </head>`

注：如果你使用 Insert 面板或者Insert菜单，则 Dreamweaver 会添加 `type="text/javascript"` 到开始的 <script> 标签中。这在 HTML5 中不再要求，但是留着它并不会造成危害。
保存 support_css.html 并在 Document 工具栏中单击 Live Code 按钮。目前 <html> 标签已经加入了超过40个类的名称，这些名称能够表明 WebKit 浏览器引擎中 Dreamweaver 的内置版本的功能（参见图4）。

图4. Modernizr添加了大量的表明浏览器功能的类

注：如果你的 Dreamweaver 版本没有 Live Code（或者你正使用不同的 HTML 编辑器），那么你可以使用大多数新式浏览器提供的开发工具或者 Firefox 浏览器提供的 Firebug 检查生成的代码。
如图4所示， `no-js` 类已经被`js`类替代，这表明 JavaScript 已经启用。
表1列举了 Modernizr 使用的类名称以表明对 CSS3 的支持。如果某个功能不支持，那么相应类的名称用`no-`作前缀。
表1. Modernizr 检测的 CSS3 功能
CSS 功能
Modernizr 类（属性）
`@font-face` `fontface`
`::before` and `::after` pseudo-elements `generatedcontent`
`background-size` `backgroundsize`
`border-image` `borderimage`
`border-radius` `borderradius`
`box-shadow` `boxshadow`
CSS animations
`cssanimations`
CSS 2D transformations
`csstransforms`
CSS 3D transformations
`csstransforms3d`
CSS transitions
`csstransitions`
flexible box layout
`flexbox`
gradients
`cssgradients`
`hsla()` `hsla`
multi-column layout
`csscolumns`
multiple backgrounds
`multiplebgs`
`opacity` `opacity`
reflection
`cssreflections`
`rgba()` `rgba`
`text-shadow` `textshadow`
无论在哪对特定的CSS属性进行测试，类的名称和属性名称都是一样的，然而这要求去除任何连字号或是括号。其它类是按照它们参考的CSS3模块而命名。
创建旧版本浏览器样式规则
参见表1，你可以看到Modernizr使用`boxshadow` 和 `csscolumns` 分别表明了对`box-shadow` 属性和多栏布局的支持。因此，你可以使用`no-boxshadow` 和 `no-csscolumns` 类为不支持这些功能的浏览器创建特殊的样式规则。
为了保证指令简单，我将演示只有CSS 声明的范例。你可以直接地将它们键入到Code视图中或者使用New CSS Rule对话框。
为`.no-boxshadow img`创建一个新的descendant (compound) selector。
设置2像素灰色实心的右边界和底边（我选择`#8A8A8A`）。由此产生的样式规则应该如下所示：

`.no-boxshadow img { border-right: #8A8A8A 2px solid; border-bottom: #8A8A8A 2px solid; }`

这不像半透明的阴影那样有吸引力，但是尽管如此，它仍然使得图像能够从背景中略微地突起。
在不支持多栏布局的浏览器中，你需要浮动图像并且调整它的页边距。为`.no-csscolumns img`创建一个新的descendant selector。
设置图像向左浮动，并且将顶部和底部页边距设置为3px，右边距为8px，以及左边距为0。样式声明如下所示：

`.no-csscolumns img { margin: 3px 8px 3px 0; float: left; }`

确保这个样式规则是遵循`.columns img`规则。两个规则有着相同的特殊性，因此，如果它们顺序颠倒，则`.columns img` 的10像素的左边距可能会覆盖你刚刚创建的新规则。你可以将`.no-csscolumns img`重命名为`.no-csscolumns .columns img`以便于给它更高的特殊性，但是最好是保证selector越简单越好。（顺便说一下，如果你不确定什么是特殊性，查阅Adrian Senior的文章，Understanding Specificity。它虽然发表时间很长，但是很有价值。）
保存css_support.html，并在新式浏览器中对它进行测试。它应该和以前看起来完全一模一样。
你应该在你的本地系统上或通过链接到BrowserLab，在旧版本的浏览器上对这个页面进行测试。虽然没有阴影或者栏目，但是现在页面的式样是可接受的，如图5所示。

图5. 旧版本浏览器使用的是可选的样式，例如IE6。

在这个的简单范例中，我只用了前缀为`no-`的类就为旧版本的浏览器创建了特殊的样式。但是，按照它们的能力,你不同时使用这两个类（带或不带前缀）为浏览器创建不同的样式是绝对没有道理的。例如：

`.csscolumns { /* rules for browsers that support multi-column layout / } .no-csscolumns { / rules for browsers that don't support multi-column layout */ }`

有时这种方法是合理的，例如，如果你想为每一级支持都创建一个完全不同的布局。但是如果它仅仅是一个为旧版本浏览器提供可选择的样式的问题，不要忘记，浏览器会忽略它们无法识别的属性。如果你对所有的样式都使用 Modernizr 类，那么在 JavaScript 禁用的浏览器中你的页面将完全非样式化。

使用Modernizr检测HTML5的支持功能

Modernizr 为开始的<html>标签添加的类名称起着双重目的作用。当页面加载时，它们也是 Modernizr 对象创建的 JavaScript 属性的名称。表1列举了与 CSS 有关的类和属性的名称。表2列举了剩下的与 HTML5 和相关技术有关的类和属性，例如地理位置。
表2. Modernizr 检测的与 HTML5 有关的功能
HTML5 有关功能
Modernizr 类（属性）
Application cache
`applicationcache`
Audio
`audio.type (ogg, mp3, wav, m4a)`
Canvas
`canvas`
Canvas text
`canvastext`
Drag and drop
`draganddrop`
Form input attributes
`input.attributeName`
Form input elements
`inputtypes.elementName`
Geolocation
`geolocation`
hashchange event
`hashchange`
History management
`history`
IndexedDB
`indexeddb`
Inline SVG
`inlinesvg`
Local storage
`localstorage`
Messaging
`postmessage`
Session storage
`sessionstorage`
SMIL
`smil`
SVG
`svg`
SVG clip paths
`svgclippaths`
Touch events
`touch`
Video
`video.type (ogg, webm, h264)`
WebGL
`webgl`
Web sockets
`websockets`
Web SQL database
`websqldatabase`
Web workers
`webworkers`
在大多数情况下，表1和表2列举的所有属性返回的都是 `true` 或者 `false` 。所以，你可以按照如下所示使用 JavaScript 对本地存储进行测试：

HTML5 有关功能	Modernizr 类（属性）
Application cache	`applicationcache`
Audio	`audio.type (ogg, mp3, wav, m4a)`
Canvas	`canvas`
Canvas text	`canvastext`
Drag and drop	`draganddrop`
Form input attributes	`input.attributeName`
Form input elements	`inputtypes.elementName`
Geolocation	`geolocation`
hashchange event	`hashchange`
History management	`history`
IndexedDB	`indexeddb`
Inline SVG	`inlinesvg`
Local storage	`localstorage`
Messaging	`postmessage`
Session storage	`sessionstorage`
SMIL	`smil`
SVG	`svg`
SVG clip paths	`svgclippaths`
Touch events	`touch`
Video	`video.type (ogg, webm, h264)`
WebGL	`webgl`
Web sockets	`websockets`
Web SQL database	`websqldatabase`
Web workers	`webworkers`

`if (Modernizr.localstorage) { // script to run if local storage is supported } else { // script to run if local storage is not supported }`

然而,就 `audio` 和 `video` 而言，返回值是一个字符串，它表明着浏览器能够处理特定类型的置信水平。根据 HTML5 规范，空的字符串表示该类型不支持。如果支持该类型，那么返回值是“maybe”或是“probably”。例如：

`if (Modernizr.video.h264 == "") { // h264 is not supported }`

使用 Modernizr 验证 HTML5 必需的表单字段
HTML5 添加了许多新的表单属性，例如 `autofocus`，当页面第一次加载时它会自动地将光标放在某个指定的字段。另一个有用的属性是 `required`, 如果某个必需的字段留有空白，那么它将阻止HTML5兼容的浏览器提交表单（参见图6）。

图6. 提交表单前，HTML5 兼容的浏览器会检查必需字段是否填写

这很好，但是它会给你留下一个问题：旧版本的浏览器该怎么办？
一个解决方法是忽略它们，并留给服务器侧的验证功能进行最终的检查。如果浏览器无法识别 `required` 属性，那么另外一个处理这种情况的用户界面更为友好的方法是创建一个小小的脚本对必需字段进行检查。如下的指令显示了在Modernizr帮助下如何进行相应的操作。
在范例文件夹中复制 required_start.html并保存为 required.html。
在结束的</head> 标签前用 <script>块按照如下所示将 modernizr.js 粘贴到页面中：

`</style> <script src="js/modernizr.js"></script> </head>`

紧接在 Modernizr 库与页面连接的标签之后，创建一个单独的 `<script>` 块，并且在页面一加载完就创建一个事件处理程序以便于执行代码：

`<script src="js/modernizr.js"></script> <script> window.onload = function() { // code to execute when page loads }; </script> </head`

事件处理程序需要获得一个与表单元素有关的参考并在无法识别 `autofocus` 和 `required` 属性的浏览器中模拟它们。处理`autofocus` 的方式很简单：

`window.onload = function() { // get the form and its input elements var form = document.forms[0], inputs = form.elements; // if no autofocus, put the focus in the first field if (!Modernizr.input.autofocus) { inputs[0].focus(); } // if required not supported, emulate it }`

该条件测试了 `Modernizr.input.autofocus`，如果不支持 `autofocus`，那么返回的值是 `false`。然而，逻辑运算符NOT（一个感叹号）却能使意思颠倒，因此如果不支持 `autofocus`，那么该条件的求值结果为 `true`，并且 `inputs[0].focus()` 将光标放在第一个输入字段。
如果不支持 `required`，那么现在添加代码以便于检查必需字段。事件处理程序的完整代码如下所示：

window.onload = function() { // get the form and its input elements var form = document.forms[0], inputs = form.elements; // if no autofocus, put the focus in the first field if (!Modernizr.input.autofocus) { inputs[0].focus(); } // if required not supported, emulate it if (!Modernizr.input.required) { form.onsubmit = function() { var required = [], att, val; // loop through input elements looking for required for (var i = 0; i < inputs.length; i++) { att = inputs[i].getAttribute('required'); // if required, get the value and trim whitespace if (att != null) { val = inputs[i].value; // if the value is empty, add to required array if (val.replace(/^\s+|\s+$/g, '') == '') { required.push(inputs[i].name); } } } // show alert if required array contains any elements if (required.length > 0) { alert('The following fields are required: ' + required.join(', ')); // prevent the form from being submitted return false; } }; } }

新代码产生了一个函数，当提交表单时它能够遍历所有的输入元素，以便于找到具有 `required` 属性的字段。当它找到某个字段时，它会从值中除去开头和结尾的空白，并且如果结果是一个空的字符串，那么它会把结果添加到 `required` 数组中。在所有的字段都已经得到检查后，如果数组中包含某些元素，那么浏览器会显示一个与缺失字段名称有关的警告，并阻止提交表单。
保存 required.html 并加载到某个浏览器中，例如尚不支持 HTML5 表单的 IE 6-9。注意一下光标是如何自动地填入第一个字段的。
单击提交按钮而无需填写任何其它字段。你应该能看到一个警告提示你名称和邮箱字段需要填写（参见图7）。

图7. 脚本检测到不支持新属性的浏览器中的必需字段

只填写其中一个必需字段，再进行一次页面测试。当你单击 OK 关闭警告时，你填写的字段仍然有它的内容，这表明表单尚未提交。
同时填写两个必需表单，并单击 submit 按钮。这一次，所有表单字段被清空，并且你应该能够看到隶属于 URL 的数据作为查询字符串出现在浏览器的地址栏。这就证实了表单数据已被提交。
在 HTML5 兼容的浏览器中，例如最新版本的 Firefox、Chrome 或者 Opera，对这个页面进行测试。浏览器显示了它自己的类似于图6所示的错误信息，而不是显示警告信息。
注意： Safari 5.1 错误地报告了它支持 `required` 属性，所以它在没有验证必需字段的情况下就提交了表单。这是 Safari 的缺陷，然而在 Modernizr 里它是不存在的。

创建版本

当你准备好对你的网站进行部署时，推荐创建一个 Modernizr 的自定义 production 版本，它只包含那些你实际需要的元素。这可以按照你所选的功能将 Modernizr 库的大小从 44KB 缩小到 2KB。当前选项的范围如图8所示。

图8. Modernizr 下载页面允许你仅选择那些你需要的功能

选项可以便捷地按照如下类别进行分组：CSS3、HTML5、Misc(ellaneous) 和 Extra。单击前三个标题旁边的 Toggle 按钮可任意地选择或者放弃选择分类中的所有复选框。
在默认情形下，Extra 分类将会选中如下三个条目：
HTML5 Shim/IEPP：它添加了两个脚本— HTML5 shim 和 IE Print Protector—它们迫使 IE6-8 正确地设计并打印 HTML5 元素。如果你打算使用新的 HTML5 语义标签，例如 <header> 、<footer>、<nav> 、 <section> 、<article> 等等时，那么你才需要这个选项。
Modernizr.load(yepnope.js)：它添加了一个不包含在 development 版本中的可选择的脚本加载器。它增加了3KB 的下载量，所以如果你不需要它，你可以放弃选择它。稍后我将描述如何使用该加载器。
Add CSS Classes：它将 Modernizr 类添加到开始的<html>标签。如果你想检测对 CSS3 功能支持，那么你必须选择这个选项。
如果你在 CSS3 分类中选中任何选项，那么如下 Extra 分类中的选项也会被选中：
`Modernizr.testProp()`
`Modernizr.testAllProps()`
`Modernizr._domPrefixes()`
不要取消选择这些选项。这样做将会自动地取消你在 CSS3 分类中已经选择的任何选项。
Extra 分类中的MQ Polyfill (respond.js) 添加了一个脚本，它可以使IE 6-8中的 media queries 获得有限的支持。当你选中这个选项时，它会自动地选中Media Queries 和 Modernizr.testStyles()。如需知道更多关于media queries polyfill (respond.js)的信息，请访问https://github.com/scottjehl/Respond。
只有高级用户才会对 Extra 分类中的其它选项感兴趣。关于它们是什么和如何使用它们的更多细节，参见Modernizr 文档的扩展性部分（Extensibility section of the Modernizr documentation）。
下载 Modernizr 自定义版本
下面的说明描述了如何为范例文件创建一个 Modernizr 的自定义production版本。后续的练习需要使用这一自定义版本，它将展示如何使用 `Modernizr.load()` 加载外部 JavaScript 文件。
单击http://www.modernizr.com/download/. 这将会打开如图8所示的界面。
在 CSS3 分类中，选中box-shadow 和 CSS columns.
在 HTML5 分类中，选中 Input Attributes.
在 Extra 分类中，取消选择 HTML5 Shim/IEPP.
确保 Extra 分类中如下的选项被选中（它们应该已经自动地被选中）。
Modernizr.load(yepnope.js)
Add CSS Classes
Modernizr.testProp()
Modernizr.testAllProps()
Modernizr._domPrefixes
单击Generate按钮。
当自定义脚本准备好（一般在一到两秒内）时，在 Generate 按钮旁边会出现一个 Download 按钮。单击 Download 按钮并在范例网站的js文件夹中保存该文件。下载页面会给 production 脚本提供一个文件名，例如 modernizr.custom.79475.js，但是你或许会希望给它一个更加有意义的名称。在范例文件中，我使用的名称是 modernizr.adc.js。
用自定义 production 脚本的链接替换 modernizr.js in css_support.html 和 required.html 的链接。注意 production 脚本只有 5KB，而不是 development 版本的44KB。
单击 css_support.html 中的 Live Code（或者使用你的浏览器中的 development 工具）。现在，如图9所示，开始的<html>标签只有三个类。

图9. 现在<html>标签中的类只涉及必要的 CSS3 功能

使用 Moder 年 izr 加载外部脚本

当创建Modernizr的自定义production版本时，在默认情形下，必须选中包含 `Modernizr.load()` 的选项。`Modernizr.load()` 是 `yepnope()` 的别名，它是与 Modernizr 同步开发的独立脚本加载器。为了说明如何使用它，我给出一个简单范例。我已经将相应的脚本从 required.html 移到了 check_required.js，并且做了三个微小的改动以便于去除 Modernizr 测试以及将它赋值到一个名为 `init` 的变量中。修订的脚本如下所示：

var init = function() { // get the form and its input elements var form = document.forms[0], inputs = form.elements; // put the focus in the first input field inputs[0].focus(); // check required fields when the form is submitted form.onsubmit = function() { var required = [], att, val; // loop through input elements looking for required for (var i = 0; i < inputs.length; i++) { att = inputs[i].getAttribute('required'); // if required, get the value and trim whitespace if (att != null) { val = inputs[i].value; // if the value is empty, add to required array if (val.replace(/^\s+|\s+$/g, '') == '') { required.push(inputs[i].name); } } } // show alert if required array contains any elements if (required.length > 0) { alert('The following fields are required: ' + required.join(', ')); // prevent the form from being submitted return false; } }; };

`Modernizr.load()` 的一个很大的优点是，根据测试浏览器能力的结果，它可以有条件地加载脚本—这就是为什么起初叫它 `yepnope()` 的原因。它可以异步地加载外部脚本—换句话说，就是能够在浏览器已加载 Document Object Model (DOM) 之后加载外部脚本—因此它可以有助于提升你的网站性能。
`Modernizr.load()` 的基本语法是将一个具有如下属性的对象传递给它：
`test`: 你希望检测的 Modernizr 属性。
`yep`: 如果测试成功，你希望加载的脚本的位置。使用一个多脚本数组。
`nope`: 如果测试失败，你希望加载的脚本的位置。使用一个多脚本数组。
`complete`: 外部脚本一经加载就运行的函数（可选）。
`yep` 和 `nope` 两者都是可选的，只要你提供了其中一个即可。
为了在 check_required.js 中加载和执行脚本，需要在 modernizr.adc.js 已附着到页面之后添加如下`<script>`块（代码位于required_load.html 中）：

`<script> Modernizr.load({ test: Modernizr.input.required, nope: 'js/check_required.js', complete: function() { init(); } }); </script>`

这样就与之前运行的完全一致，但是却可以降低已支持 `required` 属性的浏览器的下载负荷。
为了测试多种条件，你可以给 `Modernizr.load()`传递一组对象。如需获得更多细节信息，参见 Modernizr 文档上的Modernizr.load() 教程。

一句忠告

Modernizr 是一个强大而有用的工具，但是这并不意味着你就应该使用它。并不是在所有情形下均必须使用 Modernizr 给浏览器提供多种样式。如果你主要关注的对象是 Internet Explorer，那么考虑使用IE conditional comments。你也可以使用CSS层叠覆盖一些样式。例如，先使用hexadecimal color，然后使用 `rgba()` 或`hsla()` 覆盖它。旧版本的浏览器会使用第一个值并且忽略第二个值。
Modernizr 真正地变成现实是当它与 polyfills 和其它 JavaScript 相结合的时候。但是记住，通常很容易创建属于你自己的适合支持功能的测试。例如，下面就是你测试某个浏览器是否支持 `required` 属性的全部代码（代码位于required_nomodernizr.html 中）：

`var elem = document.createElement('input'); if (typeof elem.required != 'boolean') { // required is not supported }`

下一步阅读方向

本教程已经涵盖了 Modernizr 的所有主要功能如需了解关于这些功能的更多信息，请查阅相应的官方文档，其网站地址为 http://www.modernizr.com/docs/。此外，你还可以找到下列有用资源：
yepnopejs.com 提供关于 `yepnope()`的深入讨论，它已经在 Modernizr 中被合并为`Modernizr.load()`。
充分利用HTML5和CSS3的Modernizr功能（Taking Advantage of HTML5 and CSS3 with Modernizr），作者：Faruk Ateş（Modernizr 项目负责人）尽管基于Modernizr 的较早版本，但该文章包含了一个关于通过 Modernizr 和 CSS3 获取的逐步性能改善的详细范例。
本文链接

360为何在app store下架

2012-02-08T10:20:00Z

今天下午听朋友说这个帖子火了，上威锋来看看，发现另外一个兄弟的分析，大家可以做参考。

   360的全部APP都被苹果ban掉的消息是这几天圈子里最爆炸的新闻。不过，让我最感兴趣的是，到底是因为神马苹果要诛360的九族。

   看看360的官方声明，它的原话是：系苹果方面发现部分产品刷票。（声明原文在这里：weibo.com/1645903643/y4m3Zgdtl）

   我来给大家翻译一下：因为作弊，被苹果ban了。

   尽管遮遮掩掩，用了一个“被刷票”，这货好歹也算是承认作弊了，但是，事实真的这么简单么？之前网络上已经有很多大神做了各种分析猜测，我觉得都挺靠谱，但没一个拿出牛逼的证据来。

   我来点干货，我昨天花了大半天时间研究了一下360的东西，逆向了360的几个APP的代码，有惊人的发现！！

   先来看一张截图吧。这个是来自“360浏览器HD”这个APP的逆向结果。从代码可以看出，360调用了苹果未公开的接口。【注意，这是苹果非常厌恶，并明令禁止的！！！！！】

  有多处引用，所列出的位置都调用了非公开接口，利用加密逃避苹果APP STORE的官方审查。

   看吧，下面的字符串都被加密过了：

  再利用下面的代码将加密的字符串进行解密：

   然后获得的内容：

   看明白了么？我白话总结一下：

   1、360这个APP的方法和对象调用了大量Webkit的私有方法，而不是公开调用的。这是苹果APP Store不允许调用的。
   2、为什么360上架的时候没被发现呢？因为360用了加密的办法来逃脱审查，保证自己的成功上架。
   3、可以肯定，苹果在大清洗运动开始后，加大了审查力度，必然发现360的违规行为。以360这种违规、欺骗的手段，杀100次头都不为过。被集体下架，实在是太小儿科了。
   4.其实不管苹果最后给360说的到底是什么原因，总之就是苹果的行动已经表明了360的产品不受欢迎，在苹果一贯坚持的王者气质面前，在中国环境下靠打杀生长起来的土匪360显得相当囧，不仅要打落牙齿和血吞的笑脸相迎，还把血口伸向国内迁怒他人。
   5.我做的的这些分析都有现成的APP可以下载，欢迎有能力的诸位自行验证。

   给大家提个醒：到海外市场去混，不要还改不掉国内那点匪气，360这次把中国公司的脸丢到国外了，以后大家更要小心谨慎了，可以想见苹果的审核人员从此以后对中国公司的APP会有存在多么的偏见，会更加严格反复的审核了！360真是国内开发者的集体悲哀。

   回过头来说360的声明，可以盖棺定论的是：

   1、360撒谎了。导致360APP下架的原因之一是作弊，除此之外，至少还有一个原因：违反苹果开发准则。但360对此避而不谈。
   2、我敢打赌，360不敢公布苹果回复邮件的全文。因为其中必然提到360欺骗违规。就学韩寒吧，赌2000万。

   上面就是我的研究结论，欢迎各位大神继续吐槽。

  下面是另外一个兄弟的分析，大家可以做参考。

    国内这几天真热闹，上周刚回到硅谷这边，这周陆续跟同事聊360的事，发现大家集中有两个话题，一个是360的隐私问题，另一个是如何对苹果APP的审核更加小心谨慎。
    这边有几个高手这几天业余时间看了看360 APP的代码，大家开会时讨论用，结果就发现尴尬的地方了，360手机卫士和电池医生至少这两款APP存在各种各样侵犯用户隐私的行为，但是代码做得很巧妙，不得不佩服360在这方面挖空心思。
    我把同事的一些研究成果集中在这里，一些图片稍微处理了下。

   1、非法读取用户的iPhone上安装了哪些APP

    请注意，这里的代码取自APP Store版的360手机卫士和360电池医生。从代码可以看出，它在非法访问获取用户这台iPhone中已经安装了的APP信息。360你读这个信息干嘛？我装了什么APP，管你什么事？

    我想问问360：一台iPhone，用户到底装了哪些APP，这算不算隐私？


   2、非法阅览用户的照片和音乐文件夹

    如果说你读取我装的APP信息算是隐私还有点矫情，那你到底为什么读取用户iPhone的照片和音乐文件夹？你是不是有嫌疑把用户的艳照拿走？

   3、非法获取系统进程资源信息

    以下是另一位同事拿到的APP Store版360手机卫士部分代码，代码显示360正在获取系统进程资源信息。这个基本上说得过去，但这是苹果APP Store严禁的行为。

    下面来总结一下，我试图用最严密的逻辑来推导一下：

    A、360读取上述所有信息，都是苹果不允许的，属于开发者的违规行为，苹果见一次踢一次，见两次踢全家。这在所有的APP中，极其罕见。
    B、360读取这些不必要的信息的动机是什么？恐怕只有360自己知道。这家公司在隐私窃取和泄露方面是有前科的。前年连Google快照里都有360的上传的隐私信息，用户的账号密码都有。那次事件触动了Google员工，这次事件触动了苹果员工，360真牛。
    C、抛开动机和阴谋论。360读取这些不必要的信息，是完全具备窃取隐私的能力的。

   这就好比一个惯偷，他以前偷过东西，现在他跑到你家里去了，你觉得，你是不是有理由怀疑他又一次在作案？所以，我强烈质疑，360在其APP中有窥探、窃取用户隐私的嫌疑。

    我想说的是，这次360事件肯定在苹果乃至整个硅谷APP开发圈都造成了影响，今后中国的开发兄弟们一定要多小心谨慎，偏见的产生在所难免，尤其是看了以下的代码后，你会觉得中国人的那点小聪明基本都集中在360身上了。

    另外我坚决不会向身边的亲朋好友推荐360任何东西，这家公司从PC到手机的记录，从3721到360的记录完全不值得任何信任，就像希特勒能力是很强，但是你能信任他能给你任何福祉吗？

    最后补充下，这些APP如360手机卫士在APP Store的最后一次更新是1.81版本，而360又明确在公告中说了“360产品无需做任何修改，将在未来48小时到72小时内重新上架苹果APP商店”，等360上架的时候，可以分析一下，360到底有没有改动过，呵呵，很简单，看看ipa就知道了。

    当然，如果是这个结果，我又会对苹果的APP审核机制产生新的忧虑。

本文链接

Google 的芝麻开门功能。

2012-01-17T01:57:00Z

Google 现在提供「芝麻开门」功能。
这个功能的使用情境是这样的：你想要使用公共电脑登入Google 的各项服务（例如Google+ 或GMail），

但是不知道那个公共电脑是否安全，所以你不会想要在上面直接输入你的Google 帐号密码；

另一方面，虽然你手上有手机可以登入Google 服务，但是要在手机上面输入跟操作其实还是比较不方便。

所以「芝麻开门」提供的功能是：用你的手机来让那台公共电脑登入你的Google 服务！

步骤如下：
1. 在可能不安全的公共电脑上，连到这个网页： http://accounts.google.com/sesame
2. 浏览器上会冒出一个QR Code 二维条码
3. 用你的手机，拍下那个二维条码并连到解出来的网址
4. 在手机上登入你的 Google 帐号(然后再选择你要芝麻开门,就是下面的2个按钮 start gmail or start igoogle)
5. 如此，那台可能不安全的公共电脑就会自动登入你的Google 帐号，让你能够使用各项Google 服务
6. 最后别忘了要登出！（登出就不用输入密码了，当然。）

本文链接

[转]滤镜渐变使用 IE浏览器

2011-11-08T03:07:00Z

1. IE浏览器下的渐变背景使用渐变滤镜

filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);

相关说明：
上面的滤镜代码主要有三个参数，依次是：startcolorstr, endcolorstr, 以及gradientType。
其中gradientType=1代表横向渐变，gradientType=0代表纵向淅变。startcolorstr=”色彩” 代表渐变渐变起始的色彩，endcolorstr=”色彩” 代表渐变结尾的色彩。

上面代码实现的是红色至蓝色的渐变，但是不含透明度变化，这是由于IE目前尚未支持opacity属性以及RGBA颜色，要实现IE下的透明度变化，还是需要使用IE滤镜，IE的透明度滤镜功能比较强大，这种强大反而与Firefox或是Safari浏览器下的css-gradient背景渐变的用法类似。例如下面的使用：

filter:alpha(opacity=100 finishopacity=0 style=1 startx=0,starty=5,finishx=90,finishy=60)
opacity表示透明度，默认的范围是从0 到 100，他们其实是百分比的形式。也就是说，0代表完全透明，100代表完全不透明。
finishopacity 是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度。范围也是0 到 100。
style用来指定透明区域的形状特征：
0 代表统一形状
1 代表线形
2 代表放射状
3 代表矩形。
startx 渐变透明效果开始处的 X坐标。
starty 渐变透明效果开始处的 Y坐标。
finishx 渐变透明效果结束处的 X坐标。
finishy 渐变透明效果结束处的 Y坐标。

实现IE下含透明度变化红蓝垂直渐变的代码如下：
.gradient{
width:300px;
height:150px;
filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);
-ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1);
}

2、Firefox浏览器下的渐变背景

对于Firefox浏览器下(Firefox 3.6+)渐变背景的实现需使用CSS3渐变属性，-moz-linear-gradient属性

.gradient{
width:300px;
height:150px;
background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
}

3.chrome/Safari浏览器下的渐变背景实现

对于webkit核心的浏览器，如Chrome/Safari浏览器下渐变背景的实现也是使用CSS3 渐变方法，css-gradient，具体为-webkit-gradient，使用语Firefox浏览器是有一些差异的。

.gradient{
width:300px;
height:150px;
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));
}

4.兼容性的渐变背景效果

.gradient{
width:300px;
height:150px;
filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);
-ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);/*IE8*/
background:red; /* 一些不支持背景渐变的浏览器 */
background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));
background:-o-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
}

CSS3的潜力非常的大，就渐变这一块可以创建很多精湛的UI效果，而以往这些效果都只能使用图片实现。CSS渐变背景的实现可以有效降低网页的图片数，也就是降低了HTTP请求，是非常受用的。但是IE浏览器一直蹲在茅厕边啃鸡腿——自以为美味，得使用资源消耗很高的滤镜才能实现渐变效果。所以，目前而言，渐变背景的的应用与否还是有待于利弊权衡的。

本文链接

ie9 scrollbar中hover 高度增高的bug

2011-11-04T02:31:00Z

[摘]

当我们制作表格的时候，有时候会遇到数据过长，列数过多，需要横向or纵向的滚动条的需求，我们一般的做法是给这个表格的外层加一个 scroll_auto 的 div 并设置:

/*css document*/
.scroll_auto{ width:100%; overflow:auto;}

套在table的外层

<div class="scroll_auto">
<table>
<tr>
<td>.........</td>
</tr>
<tr>
<td>........</td>
</tr>
</table>
</div>

如果碰巧你给这个 table 或者table里面的元素设置了 :hover 的伪类(最常见的是鼠标移到table中对应的行数，该行高亮) 并在里面写有属性，那恭喜专属于 ie9 的 bug出现了(经测试，直到ie10预览版第二版，这个bug都还没修复)。

bug 重现地址:ie9 bug　

静看是好的，可是，当我们鼠标移动到 table里面的时候，悲剧出现了。
在 ie9 中 ,我们可以看到每当我们在table内部促发hover伪类的时候，黑色的块级元素就会往下掉,直到掉到浏览器窗口的底部又跳回原来的位置，周而复始…

bug 触发条件：

经测试发现，这个bug的出现有2个条件：

父级设置 overflow:auto(准确来说应该是 overflow-x:auto),并且里面的元素宽度超出父级导致横向滚动条出现
父级元素的任意子元素设有:hover伪类并且里面有属性设置(与原有的属性不一样即可)

满足这2个条件，当你触发父级里面的 :hover 伪类的时候，bug就会出现。

解决方案：

知道了触发条件，自然解决方案就能得知。

根据触发条件得到的解决方案是：

1.给父级别设置 overflow-x:scroll,即：

/*css document*/
.scroll_auto{ width:100%; overflow-x:scroll;(or overflow-y:scroll )}

2.保证这个父级里面的元素不超出父级的宽度。

3.保证这个父级里面的元素没有:hover 伪类(这个貌似不怎么可能)。

对症下药

1.首先，给 .scroll_auto 外层包一个空 tag(行内元素 or 块级元素均可){如外面套一个空的dv}

<div>
<div class="scroll_auto">
<table class="gen_tb" width="110%">
<tr><td>文字</td></tr>
<tr><td>文字</td></tr>
</table>
</div>
</div>

2.给这个元凶 .scroll_auto 设置一个:hover伪类

/*css document*/
.scroll_auto:hover{ height:100%;}

刷新页面, bug修复。这种方法主要是针对 height 来的，八格!

本文链接

严格模式下 W3C Strict 验证的几个注意事项

2011-03-24T08:56:00Z

首先说下，这篇文章是从 jsmi x 文章。

对jsmix的标题现在搞的还是云里雾里的。”不会做蛋炒饭的小提琴手不是个好程序员“，这个侬晓得的吗？我是真不知道；

好了正文开始了.

现在有很多网站已经不太注重 W3C 的验证了，不过这终究不是一件太好的事情，他们有的为了省事不验证，有的在开发过程中一些问题没注意，导致后来要想再修改来通过验证需要付出代价太大而放弃，有的为了节省代码减少流量加快加载速度而放弃繁文缛节。但不管怎么说，至少通过严格遵守一个行业通用的标准来规范自己的代码，也是一件值得推崇的事情。本站声明了 W3C Strict 型文档的规则，并且所有页面都经过零错误、零警告的验证。下面是一些可能较少被人注意的验证中容易导致错误的问题，如果想要通过验证，这些问题应该值得看一看。

1. 正确地嵌入 Flash

很多人依然使用 embed 标签来嵌入 Flash，甚至包括在优酷提供的视频分享代码中，这个标签已经被废置，正确地嵌入 Flash，需要像下面一样使用 object 标签，并配合 param 标签为 object 设置参数。

2. 文档内的 JavaScript

有的时候可能不可避免的要通过后台来输出一些 JavaScript 代码，这样的代码只能直接书写在 x(html) 文档中，这并没有问题，但如果这些 JavaScript 代码中包含了有 HTML 字符的代码，那么除了使用正确的 script 标签包裹代码之外，还需要添加 character data，即 CDATA 标记，这个标记下的所有实体字符都会被 HTML 当做字符数据看待。

//正确的写法
<script type="text/javascript">
//<![CDATA[
var div = '<div></div>';
//]]>
</script>

//错误的写法
<script type="text/javascript">
var div = '<div></div>';
</script>

3. 贴代码的问题

开发人员的博客，一般都会有一些实例代码，但是在这些代码中，往往包含了一些对于 HTML 来说有特殊含义的字符，比如 < 和 > 分别是一个 HTML 标签开始和结束的标志。这时需要使用该字符的实体名称或者实体编号。例如，对于小于符号 < 来说，他的实体名称为 <，实体编码为 <。如果需要了解更多关于 HTML 字符实体(HTML entities)的内容，请移步到W3school。

4. target = "_blank"

不用再在 a 标签上使用这个属性来让用户在新窗口打开页面，让用户自由地选择把，他们可以通过鼠标中间点击，或者按住 ctrl 键点击链接来轻松地达到同样的目的。如果实在需要强制用户在新窗口打开链接，那么给 a 标签加上 rel="external" 属性，然后使用下面的 JavaScript 代码进行处理：

var anchors = document.getElementsByTagName("a");
for ( var i = 0 ; i < anchors.length ; i++ ) {
if ( anchor[i].getAttribute("rel") === "external"){
anchor[i].target = "_blank";
}
}

本文链接

中国正在消失的老行当

2011-03-23T01:21:00Z

民族的才是世界的，这些民俗文化，有许多是童年难以泯灭的美好的记忆，希望能传承下去...向还在从事这些活动的普通劳动者致敬...你们才是最伟大的艺术家！

虽然老行当真的是越来越少见了，但看到那么多真的是很怀念啊！是什么埋没了他们呢，是现在科技发达了吗？是社会进步了吗？

希望小编能在图片下添加一些评论就好了，鄙人才疏学浅，不知道用什么词语来描述这些中国的老艺术家们，实在感到惋惜！希望小编能注解！在此感激不尽。（小编：通过上面的文字完全可以感同身受你的拳拳之心。有相对专业的评论当然更好，但既然我们的学识无法描述这些老艺术家们，那就让我们仔细阅读这篇文章，了解这些行业，以此表达自己真诚的敬意；另外，一起期待同学们的评论吧！）

来源：有意思吧

本文链接

（替月光博客备份）百度百科：游荡在中国的窃贼

2011-03-22T06:33:00Z

来自:月光博客发表:月光 (recommend)

在一年一度“消费者权益保护日”，贾平凹、韩寒、郭敬明、李承鹏等50名作家联合一起声讨百度文库，称百度文库收录了上述作家几乎全部的作品，但却没有取得任何人的授权，指责百度已经彻底堕落成了一个窃贼公司，把百度文库变成了一个贼赃市场。

　　对此，百度官方回复到：“对于50作家的声讨，百度向本报记者如此回应：百度高度重视互联网领域的知识产权保护，从文库诞生之日起就郑重承诺，如果作家及版权方发现文库用户在上传内容时有侵权问题，只要通过文库投诉中心反馈情况，百度会在48小时以内迅速核实并依法进行相应的处理”。

百度对于知名作家的盗窃主要使用百度文库，而百度对于普通网友、博客的盗窃更多地使用百度百科，是否真像百度所说的那样，百度能做到“迅速核实并依法进行相应的处理”呢？我这里做了一个简单的测试。

百度百科的侵权

百度百科存在着大量偷窃月光博客的文章，例如这篇“Dropbox”条目，从第二大段“Dropbox技巧”开始，整整一大段总共1548个字的内容均是全文偷窃月光博客的文章“Dropbox免费网盘高级使用技巧”，属于侵权行为。

月光博客使用的是“创作共用”的授权协议，要求“署名·非商业用途·保持一致”，其含义是：署名-必须明确标明原始作者的名字；非商业用途-不得用于商业目的；保持一致-需使用相同协议。

显然，百度百科并非使用“创作共用”协议，偷窃我的内容里也没有署名原始作者，百度百科肯定是商业网站，这毋庸置疑，其运作完全是商业网站的运作，和个人网站不能相提并论。因此，百度百科并没有转载我博客内容的权利。

　　本来，知识共享是一件好事，即使让百度这个小偷去分享知识，同样也可惠及网友，我早先也不太关注百度百科对我博客的疯狂偷窃，直到有一天，某个用户到我博客的一篇关于Dropbox的文章上留言，指责我那篇文章抄袭自百度百科，我才发现，放任百度百科对我的偷窃会给我的博客带来什么样的负面影响，对于小偷的容忍就是对人民的犯罪，这种容忍不会让百度收敛，只会让其更加变本加厉地侵权。

维权的艰难过程

　　鉴于百度百科属于开放性系统，用户可以注册修改条目，并且百度也声称会对侵权信息“迅速核实并依法进行相应的处理”，因此我就登录百度百科系统，编辑该“Dropbox”条目，将涉及侵权的内容进行删除并提交，同时注明该条目的侵权原因以及原始来源，和维基百科不同的是，百度百科里所有用户修改的信息并不能即时显示，而需要百度百科的管理人员进行审核，那么这个审查机构是如何看待原始作者的维权行动呢？

百度百科的审核人员很快就给出了答案，他们拒绝了原始作者对于删除侵权内容的要求，给出的理由是：“词条编辑前后无变化或编辑后词条质量降低”。在百度的眼里，偷到手的财产就属于百度了，失主想要索回都会被拒绝，因为索回后百度这个小偷的财产就会降低了，百度这新潮的观念实在太颠覆我们这些“传统人士”的道德观了。

　　在该界面中，百度百科还建议有疑问的用户到“百度百科投诉吧”中询问，于是我就按照这个指引来到了“百度百科投诉吧”，在百度百科投诉中心对于百度百科词条的侵权行为做出投诉，百度的审核人员经过一天的处理，投诉的结果出来了，说百度百科属于开放性百科全书，让我继续去百度百科上修改该侵权词条，百度的这两个部门相互踢皮球踢的水平可真棒啊，你们没有入选中国国家足球队真是我国体育界的一大遗憾啊。

百度百科的危害

　　虽然百度百科、百度文库充斥着盗版侵权信息，散发着阵阵令人厌恶的恶臭，然而百度却通过自己搜索引擎的强势而力推这些盗版平台，还是以Dropbx这个词条为例，Dropbox这家知名的云计算公司在国内和国外都颇有名气，使用Google搜索“Dropbox”，人们可以方便而迅速的找到这家公司的官方网站，而使用百度搜索“Dropbox”，排在第一位的是百度百科关于“Dropbox”的条目，百度人为将自己做的盗版信息凌驾于Dropbox官方网站，并美其名曰“提升用户体验”，百度盗版侵权的疯狂程度可见一斑。

百度百科自从成立以来，内含有大量来源不明的文章及图片，很多内容都是抄袭字维基百科，维基百科也专门设立了一个页面揭发百度百科的抄袭行为，但百度百科甚至连于其投诉中心接获投诉但不作任何处理，只表示百科属开放性之网站，并建议更改条目不当之地方。

百度嚣张的原因

从上面这段经历可以看出，知识产权所有者想要百度停止侵权，如同在铁公鸡身上拔毛那样困难，事实也证明，和百度这个流氓讲道理是没有用的。那么到底是什么原因，可以让百度这个流氓如此嚣张地侵犯公众知识产权呢？

1、“避风港”原则

　　避风港条款不是中国的发明，最早来自美国1998年制定的《数字千年版权法案》（DMCA法案）。后来避风港条款也被应用在搜索引擎、网络存储、在线图书馆等方面。避风港原则包括两部分，“通知+移除”。由于网络中介服务商没有能力进行事先内容审查，一般事先对侵权信息的存在不知情。所以，采取“通知+移除”规则，是对网络中介服务商间接侵权责任的限制。

所谓“避风港”原则的基本含义是：搜索引擎对所链侵权内容原则上不负责任，但是在例外的情形下仍然承担责任。也就是说，只有在搜索引擎知道或应当知道所链内容侵权的情形下承担责任。这样，搜索引擎就得到一定程度的保护。

之后，一些用户产生内容的网站也开始使用避风港原则规避风险，也就是说，只要是用网友发布的作品，服务商对他没有进行处理的情况下，受到避风港原则的保护。同理，内容版权方需要告知给服务方，通知要求服务商删除，则服务商应义不容辞地给予配合。

　　然而根据上面的案例，百度百科并不太使用执行“避风港”原则，版权方已经通知百度侵权作品，证明百度对自己的侵权是知情的，而且百度还通过相关侵权页面上的广告等形式获利，也并非仅仅是无偿提供信息，而百度拒不移除侵权信息，因此不能以“避风港”原则为由，不承担任何责任。

2、网络侵权的法律漏洞

　　以往的侵犯著作权犯罪案件，“未经著作权人许可”的认定，基本原理是谁主张，谁作证。但是在互联网数字网络环境下，作为个人想证明，自己具有著作版权是非常难，一个人很难证明自己对于某个电子文档享有版权，因此就要提供很多繁琐的东西。而一般作者来讲，可能就很难做到，因此很多作品权益人面对网络盗版侵权行为“望而却步”。百度百科正是利用网络侵权的这个法律漏洞，肆意大规模进行侵权行为。

要想彻底防范百度钻法律这个漏洞，有关部门需要明确相关版权范畴，减轻了著作权人的举证责任，要求发布者必须证明自己拥有该作品的版权才能发布作品。

对此，维基百科的做法是，网友每发布一项新词条，百度管理员会人工对这个词条进行分析判断，甄别其是否为原创，如果不是原创作品则禁止发布，这种重视版权的做法才使得维基百科几乎不存在版权方面的问题。

3、惩罚力度小

不仅仅网络盗版取证困难，而且即使成功对侵权方进行处罚，目前惩罚力度还不到位，轻微的惩罚根本无法对百度的侵权形成任何威慑力，和百度的巨额盈利相比简直是九牛一毛，百度赔款一次，还可以继续侵权十次百次，从而使用网络著作权保护越来越难。

4、网友的无知

很多网友都纯粹被百度所利用，为了那点可怜的积分而成为百度侵权的帮凶，实际上，网友在侵权的过程中，除了虚拟的积分之外，得不到任何东西，一旦网友发布的信息存在问题，百度可以撇开所有责任，一切责任都是网友的，早先的一个案例是，一个网友往百度文库上传了一篇包含“有害信息”的文章，而且通过了百度管理员的审核，二档追究责任的时候，百度不但不负任何责任，还将该网友的个人信息告密，导致该网友入狱六个月。

　　网友天真的以为百度做一切事情都是为了网友的利益，而百度文库将自己的用户送入监狱的这个案例，则让众多网友认清了百度的真面目，百度文库、百度百科及其他盗版网站，他们的最终目标绝对不是为了方便网友，而是为了自身的盈利，一旦除了法律方面的问题，一切责任就都是网友的。因此，只有彻底关闭这些盗版侵权网站，才能彻底扭转中国网络盗版满天飞的现状，而大多数网友的实际利益才能得到保障。

两个善于偷窃的幽灵，在中国网络上游荡，一个叫百度百科，一个叫百度文库。

本文链接

CSS 功能	Modernizr 类（属性）
`@font-face`	`fontface`
`::before` and `::after` pseudo-elements	`generatedcontent`
`background-size`	`backgroundsize`
`border-image`	`borderimage`
`border-radius`	`borderradius`
`box-shadow`	`boxshadow`
CSS animations	`cssanimations`
CSS 2D transformations	`csstransforms`
CSS 3D transformations	`csstransforms3d`
CSS transitions	`csstransitions`
flexible box layout	`flexbox`
gradients	`cssgradients`
`hsla()`	`hsla`
multi-column layout	`csscolumns`
multiple backgrounds	`multiplebgs`
`opacity`	`opacity`
reflection	`cssreflections`
`rgba()`	`rgba`
`text-shadow`	`textshadow`

博客园_小贺的博儿

css3样式的图片小讲解

愚人节马上就要到了,我教大家一个最强最嗨的整人方法

[Modernizr]-----HTML5和CSS3开发利器

文章为转载,[Modernizr]不解释!

什么是Modernizr？

图1. 选中development版本以便进行Modernizr测试

使用 Modernizr 检测 CSS 功能

使用 Modernizr 检测 CSS 功能

图2. Firefox 5以多栏的格式显示了页面并且在图像中添加阴影

该页面的风格是使用了CSS3的 column-count 和 box-shadow 属性，以便以多栏的格式显示文本并在图像中添加阴影。 旧版本的浏览器不支持这些属性中任何一项，因此在 Internet Explorer (IE) 7 中同一页面看起来如图3所示。

图3. IE7忽略了column-count 和 box-shadow属性

.no-boxshadow img { /* styles for browsers that don't support box-shadow */ }

<!DOCTYPE HTML> <html>

将class="no-js"添加到<html>标签中，如下所示：

<!DOCTYPE HTML> <html class="no-js">

</style> <script src="js/modernizr.js"></script> </head>

图4. Modernizr添加了大量的表明浏览器功能的类

.no-boxshadow img { border-right: #8A8A8A 2px solid; border-bottom: #8A8A8A 2px solid; }

.no-csscolumns img { margin: 3px 8px 3px 0; float: left; }

图5. 旧版本浏览器使用的是可选的样式，例如IE6。

在这个的简单范例中，我只用了前缀为no-的类就为旧版本的浏览器创建了特殊的样式。 但是，按照它们的能力,你不同时使用这两个类（带或不带前缀）为浏览器创建不同的样式是绝对没有道理的。 例如：

.csscolumns { /* rules for browsers that support multi-column layout */ } .no-csscolumns { /* rules for browsers that don't support multi-column layout */ }

使用Modernizr检测HTML5的支持功能

使用Modernizr检测HTML5的支持功能

if (Modernizr.localstorage) { // script to run if local storage is supported } else { // script to run if local storage is not supported }

然而,就 audio 和 video 而言，返回值是一个字符串，它表明着浏览器能够处理特定类型的置信水平。 根据 HTML5 规范，空的字符串表示该类型不支持。 如果支持该类型，那么返回值是“maybe”或是“probably”。 例如：

if (Modernizr.video.h264 == "") { // h264 is not supported }

图6. 提交表单前，HTML5 兼容的浏览器会检查必需字段是否填写

</style> <script src="js/modernizr.js"></script> </head>

紧接在 Modernizr 库与页面连接的标签之后，创建一个单独的 <script> 块，并且在页面一加载完就创建一个事件处理程序以便于执行代码：

<script src="js/modernizr.js"></script> <script> window.onload = function() { // code to execute when page loads }; </script> </head

事件处理程序需要获得一个与表单元素有关的参考并在无法识别 autofocus 和 required 属性的浏览器中模拟它们。处理autofocus 的方式很简单：

window.onload = function() { // get the form and its input elements var form = document.forms[0], inputs = form.elements; // if no autofocus, put the focus in the first field if (!Modernizr.input.autofocus) { inputs[0].focus(); } // if required not supported, emulate it }

图7. 脚本检测到不支持新属性的浏览器中的必需字段

创建版本

创建版本

当你准备好对你的网站进行部署时，推荐创建一个 Modernizr 的自定义 production 版本，它只包含那些你实际需要的元素。 这可以按照你所选的功能将 Modernizr 库的大小从 44KB 缩小到 2KB。当前选项的范围如图8所示。

图8. Modernizr 下载页面允许你仅选择那些你需要的功能

图9. 现在<html>标签中的类只涉及必要的 CSS3 功能

使用 Moder 年 izr 加载外部脚本

使用 Moder 年 izr 加载外部脚本

<script> Modernizr.load({ test: Modernizr.input.required, nope: 'js/check_required.js', complete: function() { init(); } }); </script>

这样就与之前运行的完全一致，但是却可以降低已支持 required 属性的浏览器的下载负荷。为了测试多种条件，你可以给 Modernizr.load()传递一组对象。如需获得更多细节信息，参见 Modernizr 文档上的Modernizr.load() 教程。

一句忠告

一句忠告

var elem = document.createElement('input'); if (typeof elem.required != 'boolean') { // required is not supported }

下一步阅读方向

下一步阅读方向

360为何在app store下架

Google 的 芝麻开门 功能。

[转]滤镜渐变使用 IE浏览器

ie9 scrollbar中hover 高度增高的bug

严格模式下 W3C Strict 验证的几个注意事项

中国正在消失的老行当

（替月光博客备份）百度百科：游荡在中国的窃贼

该页面的风格是使用了CSS3的 `column-count` 和 `box-shadow` 属性，以便以多栏的格式显示文本并在图像中添加阴影。旧版本的浏览器不支持这些属性中任何一项，因此在 Internet Explorer (IE) 7 中同一页面看起来如图3所示。

`.no-boxshadow img { /* styles for browsers that don't support box-shadow */ }`

`<!DOCTYPE HTML> <html>`

`<!DOCTYPE HTML> <html class="no-js">`

`</style> <script src="js/modernizr.js"></script> </head>`

`.no-boxshadow img { border-right: #8A8A8A 2px solid; border-bottom: #8A8A8A 2px solid; }`

`.no-csscolumns img { margin: 3px 8px 3px 0; float: left; }`

在这个的简单范例中，我只用了前缀为`no-`的类就为旧版本的浏览器创建了特殊的样式。但是，按照它们的能力,你不同时使用这两个类（带或不带前缀）为浏览器创建不同的样式是绝对没有道理的。例如：

`.csscolumns { /* rules for browsers that support multi-column layout / } .no-csscolumns { / rules for browsers that don't support multi-column layout */ }`

`if (Modernizr.localstorage) { // script to run if local storage is supported } else { // script to run if local storage is not supported }`

然而,就 `audio` 和 `video` 而言，返回值是一个字符串，它表明着浏览器能够处理特定类型的置信水平。根据 HTML5 规范，空的字符串表示该类型不支持。如果支持该类型，那么返回值是“maybe”或是“probably”。例如：

`if (Modernizr.video.h264 == "") { // h264 is not supported }`

`</style> <script src="js/modernizr.js"></script> </head>`

紧接在 Modernizr 库与页面连接的标签之后，创建一个单独的 `<script>` 块，并且在页面一加载完就创建一个事件处理程序以便于执行代码：

`<script src="js/modernizr.js"></script> <script> window.onload = function() { // code to execute when page loads }; </script> </head`

事件处理程序需要获得一个与表单元素有关的参考并在无法识别 `autofocus` 和 `required` 属性的浏览器中模拟它们。处理`autofocus` 的方式很简单：

`window.onload = function() { // get the form and its input elements var form = document.forms[0], inputs = form.elements; // if no autofocus, put the focus in the first field if (!Modernizr.input.autofocus) { inputs[0].focus(); } // if required not supported, emulate it }`

当你准备好对你的网站进行部署时，推荐创建一个 Modernizr 的自定义 production 版本，它只包含那些你实际需要的元素。这可以按照你所选的功能将 Modernizr 库的大小从 44KB 缩小到 2KB。当前选项的范围如图8所示。

`<script> Modernizr.load({ test: Modernizr.input.required, nope: 'js/check_required.js', complete: function() { init(); } }); </script>`

这样就与之前运行的完全一致，但是却可以降低已支持 `required` 属性的浏览器的下载负荷。
为了测试多种条件，你可以给 `Modernizr.load()`传递一组对象。如需获得更多细节信息，参见 Modernizr 文档上的Modernizr.load() 教程。

`var elem = document.createElement('input'); if (typeof elem.required != 'boolean') { // required is not supported }`

Google 的芝麻开门功能。