博客

主流浏览器Hack写法 解决浏览器兼容问题

此处的“hack”并非是网络中很神秘的组织“黑客”,而是使用他们可以帮助你解决浏览器下一些怪异和特殊的bug。很多时候对于这样的讨论也非常多,比如说在您的代码中应不应该使用hack?甚至延伸到使用“hack”是一个优秀的前端人员?其实,有时候是逼不得以,必须为之。

有关于hack的使用方法和种类,互联系网上成千上万,比较典型的介绍有:

  1. Browser CSS Hacks
  2. Moving IE specific CSS into @media blocks
  3. Detecting browsers javascript hacks
  4. Browser Specific Hacks
  5. Browser-Specific CSS Hacks
  6. CSS hacks

大家平时看得多的应该是IE浏览器的hack写法比较多,但对于现代浏览器,比如说Safari、Chrome、Firefox等浏览器的hack写法并不多见,甚至有的不知道怎么写。如果您是属于后者,根本不知道各浏览器下具有哪些hack手段,不要着急。因为Hugo GiraudelTim Pietrusky将各浏览器下的hack写整理放在了Browserhacks.com之上。当然也要非常感谢Paul IrishNicolas Gallagher所做的补充与说明。为了国内前端开发者更好的查阅,我将Browserhacks.com上有关于各种浏览器的hack写法搬移到w3cplus上,以供大家翻阅与查找。

一、Chrome浏览器

选择器Hack

/* Chrome 24- and Safari 5- */
::made-up-pseudo-element, .selector {
  代码放在这里
}	

媒体查询Hacks

/* Chrome, Safari 3+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  代码放在这里	
}	

JavaScript Hack

/* Chrome */
var isChrome = Boolean(window.chrome);	

阅读全文

标准
博客

WordPress 教程:让 WordPress 文章的网址URL自动生成超链接

通常情况下,在 WordPress 后台编辑文章的时候,直接粘贴网址到文章内容中,WordPress 并不能自动将网址生成超链接(可点击),如果我们每次都要通过“插入或编辑链接”这个按钮来插入链接,的确有点麻烦。其实 WordPress 提供了一个名为 make_clickable 的函数,它可以自动将网址转换为可点击的超链接。

使用方法很简单,通过 the_content 钩子挂载 make_clickable 函数即可。具体方式是在主题的 functions.php 中添加下面的代码即可:

add_filter('the_content', 'make_clickable');

注:make_clickable 函数可将 URI、www、ftp 以及 E-mail 地址转换成超链接的形式。更多说明,请查看 make_clickable 文档

标准
博客

WordPress 教程:把自定义日志类型添加到 Feed

如果你的 WordPress 和我一样使用了自定义日志类型(Custom Post Type),并且想把这个自定义日志类型的文章显示到 Feed 中,那么你需要在 functions.php 中加入下的代码:

add_filter('pre_get_posts', 'add_custom_2_feed' ); function add_custom_2_feed( $query ) { if ( is_feed()){ $query->set('post_type', array( 'post', 'product')); } return $query; }

其中这里的 product 是 Custom Post Type 的名称(添加时根据自身的名称进行替换),如果你想吧 page 更新也放到 feed 中去,可以把上面改成 array( 'post', 'page')

标准
博客

PHP 中如何正确统计中文字数

PHP 中有很多函数可以计算字符串的长度,比如下面的例子,分别使用了 strlenmb_strlenmb_strwidth 这个三个函数去测试统计字符串的长度,看看把中文算成几个字节:

echo strlen("你好ABC") . ""; # 输出 9 
echo mb_strlen("你好ABC", 'UTF-8') . ""; # 输出 5 
echo mb_strwidth("你好ABC") . ""; #输出 7

从上面的测试,我们可以看出:strlen 把中文字符算成 3 个字节,mb_strlen 不管中文还是英文,都算 1 个字节,而 mb_strwidth 则把中文算成 2 个字节,所以 mb_strwidth 才是我们想要的:中文 2 个字节,英文 1 个字节。

同样截取字符串也建议使用 mb_strimwidth,也是按照 中文 2 个字节,英文 1 个字节 方式计算之后的,并且如果字数超过截取的要求,这个函数还可以在最后面自动添加‘…’。

mb_strimwidth($post_excerpt,0,240,'...','utf-8');

注意,最后添加‘utf-8’编码参数,可以避免中文截取乱码的问题。

标准
博客

WordPress 优化:非插件禁止 WordPress 自动替换半角标点符号

大部分人会用 Quotmarks Replacer 插件来解决 WordPress 自动将半角的单引号、双引号和省略号转换为全角标点的问题。也有通过修改 WordPress 核心文件 formatting.php 来解决,这种方法不推荐,因为每次 WordPress 升级都需要再修改一次。下面介绍一个较简单和实用的方法。

在当前主题目录下的 function.php 中添加以下内容:

//禁止英文符号自动转换为中文符号
 remove_filter('the_content', 'wptexturize');
 remove_filter('the_title', 'wptexturize');
 remove_filter('the_excerpt', 'wptexturize');
 remove_filter('single_post_title', 'wptexturize');
 remove_filter('comment_author', 'wptexturize');
 remove_filter('comment_text', 'wptexturize');
 remove_filter('link_description', 'wptexturize');
 remove_filter('bloginfo', 'wptexturize');
 remove_filter('wp_title', 'wptexturize');
 remove_filter('category_description', 'wptexturize');
 remove_filter('widget_title', 'wptexturize');
 remove_filter('widget_text', 'wptexturize');
 remove_filter('term_description', 'wptexturize');

以上代码中 the_content 表示“文章正文”,即在文章正文中禁止这种转换,以此类推,以下列出对应的解析。

阅读全文

标准

继续浏览