Opera 中的 CSS 妙用 ── Flash block

其实 Opera 比 IE 或 Firefox 都更好用。User Style Sheet 和 User Script 就是很贴心的设计。

什么是用户脚本和用户样式表？

很多网页本身就夹带有脚本，样式表就更不用说了，但这些东西可能不太合你的胃口。有些脚本写得很糟糕，你肯定遇到过导致 CPU 占用率升到 100% （系统停滞了）的网页吧，多半是网页脚本捣的鬼。你可能还遇到过颜色搭配很差的网页，丑陋的就不说了，最差的是字体大小、颜色调得不好的，看这真是费眼啊。

Opera 就提供一种方式来解决此问题──用户脚本和用户样式表。只要你会写脚本和样式表，一切由你控制（不会写也不要紧，网上现成的多的是）。你不仅可以让浏览器对所有网页使用你的脚本和样式表，还可以对指定的网页使用指定的脚本和样式表。例如

这里介绍的 DIY Flash Block。

对 Flash 说再见

Flash 做的 MTV 曾经疯的流行过一阵，过了这阵风之后，Flash 愈发惹人厌了。现在网页里的 Flash 绝大多数都是广告，看着碍眼。

我记得 Firefox 有个扩展──好象叫 Flash Block。有了这个清道夫，网页上的 Flash 都被“屏蔽”了，原来是 Flash 的地方都变成了一个个按钮。如果你确定某个 Flash 特别有趣，想看看，按下相应的按钮，Flash 就有又出来了。

其实 Opera 也有这个功能，而且是与生俱来的，不依赖任何扩展。只要你会用用户脚本和用户样式表。

简简单单

下面就是在 Opera 实现 Flash Block 用到的脚本和样式表：

用户样式表：

embed[type="application/x-shockwave-flash"] {
 content:"Flash";
 outline: 1px dotted gray;
 color: #CCCC00;
 background-color: #FFF;
 font: normal 16px sans-serif;
 padding: 3px;
}
embed[type="application/x-shockwave-flash"].zichtbaar {
 content: normal;
 outline: none;
}

sup.btn {
 border: 1px solid #f33;
 color: #f33;
 padding: 0 2px; margin: 0;
 font-size: 10px;
}
sup.btn:hover {
 border-color: #900;
 color: #900;
}

用户脚本：

window.onclick=function() {
 var srcElem = window.event.srcElement;
 if ( srcElem.tagName == 'EMBED' ) {
  srcElem.setAttribute("class", "zichtbaar");

  if ( oCloseBtn == null ) {
   var oCloseBtn = document.createElement("sup");
   oCloseBtn.setAttribute("class", "btn");
   oCloseBtn.setAttribute("onclick", "closeFlash(this)");
   if ( oText == null ) {
    var oText = document.createTextNode("X");
   }
   oCloseBtn.appendChild(oText);
  }
  else {
   if ( oText == null ) {
    var oText = document.createTextNode("X");
    oCloseBtn.appendChild(oText);
   }
  }

  srcElem.parentNode.parentNode.insertBefore(oCloseBtn, srcElem.parentNode.nextSibling);
 }
}

function closeFlash(srcElem) {
 srcElem.previousSibling.getElementsByTagName("EMBED")[0].setAttribute("class", "");
 srcElem.parentNode.removeChild(srcElem);
}

效果图：

原来显示 Flash 的地方变空了。里面有个 Flash 按钮，点击它试试看。

[1] [2] 下一页

复制本页网址和标题，发送给你QQ/Msn的好友一起分享

上一篇:Photoshop普通莲花处理为佛教圣物金色莲花

下一篇:Web设计 用户体验浅析