演示地址:
yui3-stylesheet-bug
被 YUI3 接受了,汗我的英语表达能力:
ticket 2528762
出错代码:
<!doctype html>
<html>
<head>
<title>yui3 stylesheet bug</title>
<style type="text/css" id="test">
div {
color:red;
}
div{
color:green;
}
a{
color:black;
text-decoration:none;
}
a[href='#'][title='note'] {
color:green;
}
</style>
</head>
<body>
<div>
color should be green
</div>
<a href="#" title="note" >color should be red</a>
<script type="text/javascript" src="http://yui.yahooapis.com/3.1.0/build/yui/yui-min.js"></script>
<script type="text/javascript">
YUI().use("node","stylesheet",function(Y){
var skinCss=Y.StyleSheet("#test");
skinCss.set("a[href='#'][title='note']",{color:"red"});
});
</script>
</body>
</html>
bug1:
由于简单的优先级顺序:
后面的
css 规则覆盖前面的
css 规则。则例子中的
div文字应该显示 绿色,而测试代码页面显示红色(前面的css规则占优了)。
分析代码可知:
YUI3
手动合并具有
相同的选择符的css规则,并删除重复选择符的css规则,但是为了方便删除后的下标处理,采用了从后往前的循环:
for (i = sheet[_rules].length - 1; i >= 0; --i) {
r = sheet[_rules][i];
sel = r.selectorText;
if (cssRules[sel]) {
cssRules[sel].style.cssText += ';' + r.style.cssText;
_deleteRule(i);
} else {
cssRules[sel] = r;
}
}
则可见:循环到第一条会出现:
cssRules["div"].style.cssText="div {color:green;}";
cssRules["div"].style.cssText+=";"+"div {color:red}";
delete(0);
则虽然第一条规则被删,但是第二条规则已经被改为 div {color:red}
解决之道:
需要从前往后循环
或者:
cssRules[sel].style.cssText += ';' + r.style.cssText;
改做:
cssRules[sel].style.cssText = r.style.cssText+";"+cssRules[sel].style.cssText;
bug2:
由于采用了属性选择符
则该bug只对应于 no-ie6,由测试代码发现动态添加的"a[href='#'][title='note']",{color:"red"}根本没起作用。
分析代码:
实际上yui3认为 a[href='#'][title='note'](Multiple attribute selectors
) 为无效:
isValidSelector : function (sel) {
var valid = false;
if (sel && isString(sel)) {
if (!selectors.hasOwnProperty(sel)) {
// TEST: there should be nothing but white-space left after
// these destructive regexs
selectors[sel] = !/\S/.test(
// combinators
sel.replace(/\s+|\s*[+~>]\s*/g,' ').
// attribute selectors (contents not validated)
replace(/([^ ])\[.*?\]/g,'$1').
// pseudo-class|element selectors (contents of parens
// such as :nth-of-type(2) or :not(...) not validated)
replace(/([^ ])::?[a-z][a-z\-]+[a-z](?:\(.*?\))?/ig,'$1').
// element tags
replace(/(?:^| )[a-z0-6]+/ig,' ').
// escaped characters
replace(/\\./g,EMPTY).
// class and id identifiers
replace(/[.#]\w[\w\-]*/g,EMPTY));
}
valid = selectors[sel];
}
return valid;
}
可以简单实验:
YUI().use("node","stylesheet",function(Y){
alert(Y.StyleSheet.isValidSelector("a[href='#'][title='note']"));
});
解决之道:
// attribute selectors (contents not validated)
//需要修正!加上 + 允许重复
replace(/([^ ])(\[.*?\])+/g,'$1').
分享到:
相关推荐
yui3-master.zip
基于YUI3的dialog组件该组件是基于YUI3开发的,功能强大,详细见http://www.qiqicartoon.com
YUI教程YUI 入门教程YUI 入门教程YUI 入门教程
YUI3 引入了粒度更细的模块管理方式,通过异步 HTTP 请求加载模块、然后执行回调来加载和使用模块。现场有很多人提出疑问,大家无非关心的是“效率”二字。个人以为在现阶段,这种方式有一点激进,否能为广大用户所...
从YUI2到YUI3看前端的演变
Yahoo! UI Library (YUI) 是一个开放源代码的 JavaScript 函数库,为了能建立一个高互动的网页,它采用了AJAX, DHTML 和 DOM 等程式码技术。它也包含了许多 CSS 资源。
yui对于开发者来说是绝对的好用,开发者福利,特献上最新版
yuicompressor-2.4.2.jar yuicompressor-2.4.7.jar jsZip.exe yuicompressor yui compressor js压缩工具 javascript压缩工具 css压缩工具 ------------------------------------ //压缩JS java -jar yui...
YUI3 源码 非compress版 YUI3 源码 非compress版 YUI3 源码 非compress版
YUI 库,全称Yahoo! UI Library。是一组工具和控件,用JavaScript写成, 为的是用DOM 脚本,DHTML和AJAX等技术创建丰富的网页交互式应用程序。 YUI 基于BSD协议,对所有的使用方式都是免费的。YUI 项目包括YUI 库和两...
NULL 博文链接:https://ttwang.iteye.com/blog/1741631
yui官网下载的。内容很全,示例+doc说明
本书作者便是在此背景下,以国外最优秀的JavaScript框架之一——Yahoo User Interface Library(简称YUI)的最新版本YUI 3.15为基础编写而成。本书通过通俗易懂的语言和大量丰富的实例,帮助读者解决实际生产环境...
YUI Test is a complete testing framework for JavaScript and Web applications. You can use the simple JavaScript syntax to write unit tests that can be run in web browsers or on the command line, as ...
yui_2.6.0r2 yui_2.6.0r2 yui_2.6.0r2 yui_2.6.0r2 yui_2.6.0r2
雅虎的东西,简单的操作很好用 使用例子:java -jar D:\yuicompressor\yuicompressor\yuicompressor.jar E:\js\all.js -o E:\wap\wap2\js\all-min.js --charset utf-8 当然要装jdk了 不然就玩完了
yui 源码下载,3.9.0 r2 包,最新版本
YUI Compressor非常好用,特别是JS的混淆是众多JS Coding的最爱。可惜官网提供的版本都不具备右键功能,每次压缩都要cmd输入一些命令实在是繁琐,本文就介绍如何给YUI Compressor添加右键命令,方便使用。 网上已有...
YUI3 Cookbook for Yahoo User Interface 3