分类目录归档:写写代码

CSS3中box-shadow的性能问题

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

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

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

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

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

更极端的一个Demo

为原生comment_form添加表情

若主题的 comment form 是重写的,那么添加表情的方法可以参考这个

在 WP 3中,系统提供了 comment_form() 这个函数来生成评论框以免重复开发。如果使用这个来生成评论框,那么不能直接在对应源码中添加代码的方式来添加表情。

在这种情况下,可以用下面的方法来添加表情:

首先参照以上的方法的步骤1,然后在functions.php中添加以下代码:

function add_smilies_to_form(){
    include(TEMPLATEPATH . '/smiley.php');
}
//下面之所以区别对待,是因为默认情况下用户登录与否comment_form有所不同
if (is_user_logged_in()) {//用户登录情况下,加到登录信息下面(留言框顶部)
    add_filter('comment_form_logged_in_after', 'add_smilies_to_form');
}
else { //非登录情况下,加到fields下(留言框顶部)
    add_filter( 'comment_form_after_fields', 'add_smilies_to_form');
}

如无意外,这样即可。

JavaScript 中的闭包

一个闭包,简单地说,就是一个函数以及其定义时的上下文环境。

用代码来解释会更直观一点:

function outerFn() {
    var name = "outer";
    function innerFn() {
        alert(name);
    }
    return innerFn;
}
var myFunc = outerFn();
myFunc();   // output "outer"

这样,myFunc 便是一个闭包,其包括了函数 innerFn() 和其上下文环境 name
继续阅读

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

CSS优先级特性

一般情况下,css遵循着后定义优先,越详细具体越优先的原则。不过在某些情况下,你却得不到你想要的样式。我在启用CodeColorer插件的时候,就被这一点烦恼了很久。

举个简单的例子,有以下html文本:

<ul id="summer-drinks">
  <li class="favorite">Whiskey and Ginger Ale </li>
  <li>Wheat Beer </li>
  <li>Mint Julip </li>
</ul>

然后定义了以下的CSS样式:

#summer-drinks li {
   font-weight: normal;
   font-size: 12px;
   color: black;
}
.favorite {
  color: red;
  font-weight: bold;
}

你期望带有类 favorite 的 `Whiskey and Ginger Ale` 能以红色粗体呈现,可结果却跟别的字体别无二样。

继续阅读

PHP中的UTF-8中文长度和截断

直接看代码简单:

<?php
    $str = "中文a数字1";
    printf("%d<br />", strlen($str));                #输出14,utf8中中文长度为3
    printf("%d<br />", mb_strlen($str, "UTF-8"));    #输出6
    printf("%s<br />", substr($str, 0 , 4));         #输出为“中�”
    printf("%s<br />", mb_internal_encoding());      #获取当前字符编码,常默认西欧编码“ISO-8859-1”
    mb_internal_encoding("UTF-8");                   #设定字符编码为utf8
    echo mb_substr($str, 0, 4);                      #输出为“中文a数”
?> 

SQL用户授权的误区

上一次的数据库实验中关于用户授权的部分,我用revoke回收了用户授权,然后使用exec sp_helprotect @username = 'user name'这个命令来查看其所拥有的权限(我使用的是SQL SERVER 2008),发现没有了对应的权限,然后就收工了,并没有用对应的权限语句去测试。

可是,这一次的实验,在实验室的时候听见后面的同学还是有对应权限的,然后测试了一下,果然,o(╯□╰)o!!

后来,查了一下,原来,revoke只是回收了用户的直接授权,但对于继承用户组或角色而来的权限,却是依然存在的;而大多数情况下,新建的用户都是继承自public角色,故对应的权限是依然存在的;只是,以上语句没有显示出来而已。

看来,还是直接测试一下比较保险实际。

相关说明资料请看这里:REVOKE,虽然是PostgreSQL的,但同样适用。

SQL Server身份验证模式及用户权限

今天做数据库实验,主要就是用户授权及回收授权的问题。

很快就遇到问题了,因为对user1授权后允许其对user2授权。可是我就是登录不了user1。后来使用了经常被河蟹的google来google了好一会,终于找到了解决办法。顺便把我新建用户所遇到的曲折也说一下,新手如我遇到这种情况应该也是可以原谅的。

因为以前没摆弄过SQL Server,而老师给出实验要求中的提示是针对2000的,而我用的是沿自2005的SQL Server 2008,所以情况很不一样。

如果在这里遇到问题,可以看下这个帖子;而以下的图则是我的一些体会,这里需要注意“用户名”和“登录名”之间的映射关系。

首先,需要在服务器安全性中的登录名中右键来选择新建登录名:

新建登录名

继续阅读