标签归档:CSS

input file 在不同浏览器中的呈现

文件选择(input type=”file”)是一个常用的元素(虽然我比较少用),在浏览器中的表现是没有完全一致的。以下是其在 IE/Firefox/Chrome/Opera 四种浏览器中的一些异同(Safari 和 Chrome 同是基于 Webkit,故不再详说)。

对于文件选择元素,可以分为2部分,一部分是按钮,一部分是文字展示,如图1:

图1:input file 的组成

下面图2~图5是4个浏览器对于3个不同状态下的文件选择元素的呈现:

其中:第一个是默认状态下选择了一个文件;第二个是设定了 300px 的宽度;第三个设定了 50px 的宽度;

继续阅读

于悄无声息中获取你的访问记录

当访问某个网站时,不经意中,就被别人猜测到你是否访问过某个网站,而这却没有什么技术性的东西,也不算是违法的行为。

奥秘在于浏览器对于访问过的链接会用伪类 :visited 来标识。

那么很容易想到的一个方法就是,用 a:visited 来设定一个特定的颜色值,比如 red。然后从一个 URL 列表中来动态创建一个链接,然后获取其颜色(各浏览器返回的结果不完全一致,可能是 rgb 值,也可能是 hex 值),如果跟设定的颜色一致,那么就可以确定用户在当前浏览器访问过该链接。

实际测试中会发现,新版本的浏览器(如Chrome 14, IE9, FF5)对于 a:visited 的样式是成功应用的,但获取到的颜色却不是对应的设定,而是 a:link、a 甚至是默认的颜色,从而无法判断用户是否访问过该链接。这是现代浏览器在这方面的安全保护,一方面使样式可以正常生效,另一方面却防止了 JS 窃听。然而,在一些旧版本的浏览器(比如IE6~8, FF3)上面却没有这个保护措施,因而可以判断出是否在该浏览器上访问过该链接。

对于以上依赖于 JavaScript 的窃听,很容易想到的一个防止方法就是禁止 JavaScript 的运行。没错,抛开种种不便来说,的确可以达到防止以上窃听的目的,即便是 IE6 等老一代浏览器。但是,却防止不了 CSS 的窃听方式。

又是如何利用 CSS 来进行判断窃听的吗? 继续阅读

添加页内跳转

页内跳转,在我这里,其实就是锚跳转(包括回到顶部、直达底部、阅读评论这三个),只是做了些美化和 JS 效果而已,最终效果见页面右侧(单页和非单页有所不同)。

一开始,我是直接把 HTML/PHP 代码放进 footer.php 文件中的,后来采用 hook 的方法。虽说,就得到的 HTML 结构来说,可能不是非常好;但个人感觉比直接修改 footer.php 好。

HTML/PHP 代码

<?php
    // add updown access, needs hook wp_footer() in footer.php
    function up_down() {
?>
    <div id="updown">
        <a href="#" title="返回顶部" id="goUp"></a>
        <?php if(is_single()):?>
        <a href="#comments" title="阅读评论" id="goComments"></a>
        <?php endif;?>
        <a href="#footer" title="直达底部" id="goDown"></a>
    </div>
<?php
    }
    add_action('wp_footer', 'up_down');
?>

使用这种方法,需要 footer.php 文件中有调用到 wp_footer() 函数,否则是无法 hook 的。
继续阅读

CSS3中box-shadow的性能问题

在对主题评论列表处理的过程中,突然发现嵌套回复性能低下,页面拖动也一卡一卡的。排除法后锁定了目标——box-shadow。

于是做了一些实验,发现如果大量使用box-shadow,又或者容器比较大的时候,性能都会降低很多。如果容器不是很大,数量不是很多,倒没多大的感觉。

如果将box-shadow应用到评论列表中,这个问题就比较明显了,特别是在评论不分页、支持嵌套的情况下。

无论是Firefox还是Chrome,对box-shadow的支持都存在这个问题,Opera则好上很多,带来的迟滞感不是很强。

模仿评论列表小小地做了一个Demo,可以体验到带box-shadow和不带box-shadow的明显区别。

更极端的一个Demo

Firefox Box-shadow & Outline bug

Firefox同时使用outline和boxshadow时会出现outline被shadow撑开的bug,Chrome、Opera不存在此问题。

如以下代码:

<style type="text/css">
    #ffbug{
        margin:30px auto;
        width:200px;
        height:200px;
        border:2px solid blue;
        outline:5px dotted green;
        box-shadow: 0 0 10px red;
        -moz-box-shadow: 0 0 10px red;
        -webkit-box-shadow: 0 0 10px red;           
    }
</style>
<div id="ffbug">
    蓝色为border<br />
    绿色为outline<br />
    红色为box-shadow<br /><br />
    Firefox会将box-shadow的宽度计算进width中,从而导致border变化,于是outline偏移。
</div>

继续阅读

CSS3 box-shadow

属性如下:

box-shadow:阴影类型 X轴位移 Y轴位移 阴影大小 阴影扩展 阴影颜色

网上关于这个的教程很多,随便搜搜都有,不过看过之后最好实践一下,我这里就不说教程了,贴张图看看:

box-shadow

box-shadow

提醒一下的是不能直接对图片使用inset(内阴影)效果,昨晚我在这里纠结了好久好久。

然后放上个Demo(IE就不用尝试了,嗯,有IE 9的可以看看如何。如果看到乱码,在浏览器中将编码改为utf8即可)。

最后是一点参考资料:

  1. CSS3属性box-shadow使用教程(关于多重阴影部分有误,正确用法可参考我的Demo)
  2. The ‘box-shadow’ property