Posts Tagged ‘code’
Firefox与disable-output-escaping之间的纠结。。。
（最近在琢磨Google Appengine，难免有所脑残，谁让我一向喜欢淫荡架构，去碰XSLT的结果就是。。。）
话说这个世界只有IE的时候还是美好的，程序员可以写出一段有爱的XML
<?xml version=”1.0″ encoding=”utf-8″?>
<?xml-stylesheet type=’text/xsl’ href=’t.xsl’ media=”all” version=’1.0′?>
<channel>
<item>
<title>《哆啦A梦剧场版全集》(Doraemon movies collection)[1980-2007剧场版][清晰版][6.10重发1994][RMVB]</title>
<link>http://www.verycd.com/topics/270597/</link>
<description><![CDATA[<img src="http://image-6.verycd.com/6d8078dfa512365af6ad24ba08407d0f73190(280x)/thumb.jpg" alt="《哆啦A梦剧场版全集》(Doraemon movies collection)[1980-2007剧场版][清晰版][6.10重发1994][RMVB]” style=”float:right;padding:0 0 10px 10px;” />中文名称：哆啦A梦剧场版全集<br />英文名称：Doraemon movies collection<br />别名：ドラえもん<br />资源类型：RMVB<br />版本：[1980-2007剧场版][清晰版][6.10重发1994]<br />导演：藤子·F·不二雄<br />演员：哆啦A梦<br /> 野比大雄<br /> 源静香<br /> 刚田武<br /> 骨川哲夫<br /> 哆啦美<br />地区：日本<br />语言：日语<br />简介：<br />【片名】 哆啦A梦剧场版合集<br />【字幕】 中文内嵌<br />【格式】 RMVB<br />说明:94的出来和前阵91一样的问题,已重发,请重下,95的也出了问题,先别下<br />【内容介绍】<br />继卡通之后，哆啦A梦电影的诞生，再度把哆啦A梦系列推向一个新境界。本作题材非常新颖，设计冒险舞台的那想象力真是叹为观止，不失为一部优秀作品。<br /><a href=’http://www.verycd.com/topics/270597/’>查看完整资源页</a><br />]]></description>
</item>
</channel>
然后轻松的使用这样一段xslt让访问者浏览的时候哦看上去High一点
<?xml version=”1.0″ encoding=”utf-8″?>
<xsl:stylesheet xmlns=”http://www.w3.org/1999/xhtml” xmlns:xsl=”http://www.w3.org/1999/XSL/Transform” xmlns:dc=”http://purl.org/dc/elements/1.1/” version=”1.0″>
<xsl:output method=”html” doctype-system=”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd” doctype-public=”-//W3C//DTD XHTML 1.0 Strict//EN”/>
<xsl:template match=”/channel”>
<html>
<head>
<script type=”text/javascript” src=”mop-up.js”></script>
</head>
<body”>
<div id=”page-contents”>
<h3><a href=”{item/link}”><xsl:value-of select=”item/title”/></a></h3>
<xsl:value-of select=”item/description” disable-output-escaping=”yes” />
<hr />
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
可是该死的Firefox搅局了，你发现当使用Fx浏览的时候，那段description仍然被escaping了，HTML代码性感的裸露在外
于是乎，你去mozilla.org报告这个disable-output-escaping不工作的bug，发现早在2001年就有人提交这个问题了
https://bugzilla.mozilla.org/show_bug.cgi?id=98168#c11
（看懂了，然后绝望了，你咒骂Firefox，甚至对Opera加深了好感，因为它正常）
然后，你决定寻求别的解决方法
比如。。。<xsl:copy-of select=”item/description” />取代<xsl:value-of select=”item/description” disable-output-escaping=”yes” /> (参照http://carey.geek.nz/doc/xslt-cdata-escaping/)
为此你必须剥离<![CDATA[]]，但别高兴的太早，很快你会发现去掉<![CDATA[]]是非常SB的决定，因为这意味着你必须在<description></description>中使用严格的XML格式。如果打算放在其中的HTML代码还有诸如<br>之类的化石级东西，你就绝望吧，就算你可以生成完美的XHTML，一个 也足以让一切都SB了
崩溃。。。。。。。。。。。。
最终解决方法：（参考的VeryCD，但是应该不是它原创，sburke@cpan.org, Sean M. Burke.这个人是原作）
一段Js
// A workaround for XSL-to-XHTML systems that don’t
// implement XSL ‘disable-output-escaping=”yes”‘.
//
// sburke@cpan.org, Sean M. Burke.
// – I hereby release this JavaScript code into the public domain.
var is_decoding;
var DEBUG = 0;
function complaining (s) { alert(s); return s; }
if(!(document.getElementById && document.getElementsByName))
throw complaining(“Your browser is too old to render this page properly.”
+ ” Consider going to getfirefox.com to upgrade.”);
function check_decoding () {
var d = document.getElementById(‘comeTestMe’);
if(!d) {
throw complaining(“Can’t find an id=’comeTestMe’ element?”);
} else if(!(‘textContent’ in d)) {
// It’s a browser with a halfassed DOM implementation (like IE6)
// that doesn’t implement textContent! Assume that if it’s that
// dumb, it probably doesn’t implement disable-content-encoding.
} else {
ampy = d.textContent;
if(DEBUG > 1) { alert(“Got ” + ampy); }
if(ampy == undefined) throw complaining(“‘comeTestMe’ element has undefined text content?!”);
if(ampy == ” ) throw complaining(“‘comeTestMe’ element has empty text content?!” );
if (ampy == “\x26″ ) { is_decoding = true; }
else if (ampy == “\x26amp;” ) { is_decoding = false; }
else { throw complaining(‘Insane value: “‘ + ampy + ‘”!’); }
}
var msg =
(is_decoding == undefined) ? “I can’t tell whether the XSL processor supports disable-content-encoding!D”
: is_decoding ? “The XSL processor DOES support disable-content-encoding”
: “The XSL processor does NOT support disable-content-encoding”
;
if(DEBUG) alert(msg);
return msg;
}
function go_decoding () {
check_decoding();
if(is_decoding) {
DEBUG && alert(“No work needs doing — already decoded!”);
return;
}
var to_decode = document.getElementsByName(‘decodeable’);
if(!( to_decode && to_decode.length )) {
DEBUG && alert(“No work needs doing — no elements to decode!”);
return;
}
var s;
for(var i = to_decode.length – 1; i >= 0; i–) {
s = to_decode[i].textContent;
if(
s == undefined ||
(s.indexOf(‘&’) == -1 && s.indexOf(‘<’) == -1)
) {
// the null or markupless element needs no reworking
} else {
to_decode[i].innerHTML = s; // that’s the magic
}
}
return;
}
//End
再修改一下那个xslt
<?xml version=”1.0″ encoding=”utf-8″?>
<xsl:stylesheet xmlns=”http://www.w3.org/1999/xhtml” xmlns:xsl=”http://www.w3.org/1999/XSL/Transform” xmlns:dc=”http://purl.org/dc/elements/1.1/” version=”1.0″>
<xsl:output method=”html” doctype-system=”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd” doctype-public=”-//W3C//DTD XHTML 1.0 Strict//EN”/>
<xsl:template match=”/channel”>
<html>
<head>
<script type=”text/javascript” src=”mop-up.js”></script>
</head>
<body onload=”go_decoding();”>
<div id=”comeTestMe” style=”display: none;”><xsl:text disable-output-escaping=”yes” >&</xsl:text></div>
<div id=”page-contents”>
<h3><a href=”{item/link}”><xsl:value-of select=”item/title”/></a></h3>
<p name=”decodeable”>
<xsl:value-of select=”item/description” disable-output-escaping=”yes” />
</p>
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Firefox下正常了，Opera和IE就来就正常。。。
不纠结了。。。
继续玩Google Appengine去
PS：无论什么方法，KHTML内核的Konqueror都是不鸟你的，而WebKit内核则一直表现很好，可见一切都是Fx的错。。。哼。。。
What beautiful html code looks like?
Source : http://css-tricks.com/what-beautiful-html-code-looks-like/
I have an addiction. I can’t help but view source on every nice looking website I see. It’s like if you had x-ray glasses that allowed you to see any person you ever saw in their underwear at will. How could you not? It’s just so tempting to see if a beautiful website is built with beautiful code as well, or if it’s beauty if only skin-deep. Code? Beautiful? Sure. After all, Code is Art. This is just HTML, so it can’t be quite as intricate and elegant as a dynamic language, but it still bears the brush strokes of it’s creator and there is craftsmanship abound. It gets me to thinking, what makes beautiful code? In HTML, it really comes down to craftsmanship. It’s all those little things added up that make the whole. Here is a list of just some of the little things that I look for in other’s code and that I try to do myself that make for good craftsmanship in HTML:
- DOCTYPE Properly Declared It looks like a lot of gibberish, but DOCTYPES are important. They not only allow your code to validate, but they tell browsers things about how to render your page. Simple <html> tags don’t cut it.
- Tidy Head Section Title is set. Character set declared. Stylesheets linked (including a print stylesheet!). Scripts linked and NOT included in full. External files have their own related folders (e.g. “CSS” & “Scripts”)
- Body IDed Putting an ID on your body allows you to create CSS properties that are unique to that page. For instance, you may want your <h2> tags to look different on the homepage. In your CSS you can write: #home h2 {} to accomplish this and not affect <h2> tags elsewhere.
- Semantically Clean Menu You’ve seen it before, you’ll see it again. There is a reason unordered lists are used for menus. Because it really gives you a lot of control.
<ul id="menu"> <li><a href=”index.php”>Home</a></li> <li><a href=”about.php”>About</a></li> <li><a href=”contact.php”>Contact</a></li> </ul> - Main DIV for all Page Content Putting all the content of your page into one main “wrap” DIV gives you lots of control right off the bat. There is where you can set the width of your page for a fixed width site or maximums and minimums for a fluid width site.
- Important Content First It is best if your most important content, like news and events, can be listed first in the HTML. If your sidebar is just navigation or less important content, it is best if it comes last in the HTML.
- Common Content INCLUDED A lot of web content is common from page to page. Think menu bars, sidebars, footers, “boxes”, etc. This kind of content should be dynamically loaded. Either from a database or with simple PHP include statements.
- Code is Tabbed into Sections If each section of code is tabbed in once, the structure of the code is much more understandable. Code that is all left-justified is horrific to read and understand.
- Proper Ending Tags You started strong, now end strong. Don’t be lazy and exclude closing tags for any element, even if the page renders OK without them.
- Hierarchy of Header Tags Use header tags as they were designed, to create titles for sections and signify their position in the content hierarchy.
- Content, Content, Content This is where your content belongs, so go nuts. Remember to keep your paragraphs distinct and in <p> tags. Use lists where appropriate. Use codes like © for © symbols. Don’t go overboard with <br /> tags, that’s sloppy formatting.
- No Styling! Your HTML should be focused on structure and content, not styling! Keep all of your styling in your CSS, there should be no deprecated tags (e.g <font>) in site.
