标签 CSS 下的文章

利用 CSS 跨浏览器地隐藏文字一法。

页面里使用 inline-block 元素时经常需要隐藏其文字,
比较流行的方法是将 line-height 的值设置得很大,
然后配合 overflow: hidden 来隐藏文字。
请容许我主观臆断地认为过大的行高会影响渲染效率,
而行高不够又可能在用户对页面进行放大操作时露出“马脚”(即未能被隐藏的部分)。
是否当 line-height:0 时对 Webkit 内核就没有办法了?
我想到利用透明文字来解决这一兼容问题,
并最终整理如下:

font-size:0; /* for firefox & opera */
color: transparent; /* for webkit */
line-height:0;
overflow:hidden; /* for IE */


自测后兼容的浏览器如下:

IE 6-8
Firefox 1-4
Opera 9-10
Safari 3-5
Chrome 1-6

如遇不兼容的情况可以留言。

当然隐藏文字的方法还有很多。
有人说“直接不填文字不就好啦”,
呃……
算我没说,
不过目前公司的产品对盲人阅读器的兼容还是有要求的。

[UserScript] Web Assets Detector 1.4.4

Web Assets Detector

【最近更新】
改用 Canvas 来绘制图标,
另外增加了对 FlowPlayer、LongBoo、UIZE 和 Scripty2 的探测支持,
当然啦,
还有近期最吸引眼球的 Closure Library
Google 真是慷慨,
不仅是 Library ,
其它的“编译”和调试等配套工具也一并提供下载了,
在此膜拜一下。

============ 分割线 ==============
【090920 更新】
本脚本的首席贡献者兼热心粉丝 Jerone 君再次提出了宝贵意见
他希望本脚本能支持被延迟载入的脚本,
由于这类脚本的加载都发生于 Dom 树完成之后,
于是我增加了对 DOMNodeInserted 的监听来搞掂该需求。
该版本非必要更新,
但依旧推荐各位跟进。

【090906 更新】
脚本越来越大,
自身的数据管理就成了问题,
这次的更新主要是把样式和数据从核心脚本里剥离了出来,
脚本也从 28.8k 缩减至 1.9k (当然没有计算样式和数据部分)。
这样的改动有利于我对数据进行维护,
以后还将考虑将数据单独分发以实 现静默更新。
这次就暂不提供这样的功能了,
改革要慢慢的来。
该版本建议所有用户更新。

【090520 更新】
心里想着“这个脚本应该也能用来探测 CSS 库”,
于是就尝试着写出来了,
用的是 Xpath,
效率上应 该还不错。
其它的改进还包括美化了 UI,
应该不会有人抱怨说鼠标上移后看不清文字了吧?
关于识别范围我还想说一句:
不 想让这个脚本变成臃肿的东西,
(事实上目前 icon 数据已经有很大一段了)
希望支持的只是应用较广的框架和库,
否则探测也没 什么意义。
在我自己看来本身也就是个玩意儿而已。

【090401 更新】
今天要分享的是名为 JavaScript Library Detector 的油猴脚本。
(已更名为:Web Assets Dectector
虽然已经有非常多的同类产品,如
Library Detector」和「WTFramework」。
特别要提的是「WTFramework」,
虽然名字有涉嫌粗口,
但其 70+ 库/框架的覆盖率可不是盖的。

不过我这玩意儿的优点还在于处理了库/框架之间的依赖关系。
(貌似也仅次一项?)
就跟某人所说一样,
这是个体力活儿,
真要有精力应该写个扩展探测整个网站的环境:
从服务器签名到物理地址,
从 Alexa 排名到 PageRank 再到 SEO 分析结果,
要不要最后再公开站长的三围?
所以还是见好就收吧。

【目前该脚本所支持的库/框架】

- 阅读剩余部分 -

Firefox 下动态插入 CSS 多行文本……

不多介绍,
明白人儿都知道我的意思。
其实也可以说是动态插入样式单的标签。

首先,
对于 Content 级的脚本,
我们可以这么写:

(document.getElementsByTagName('head')[0] || document.documentElement)
    .appendChild(document.createElement('style'))
    .appendChild(document.createTextNode(().toString()));

值得注意的是 Firefox 虽然支持 CDATA 文本,
但在使用时要小 hack 一下。
该方法可以用于 GreaseMoneky 等执行于 Content 级别的脚本里,
当然 Web 里也没有问题啦。

其次,
对于 Chrome 级别的脚本,
我建议这么写:

- 阅读剩余部分 -