主题 Qetro 2.0 版本已经完成了近 50% 的工作

自 2013年5月19日晚开始着手升级到现在,已经11天了。中间的一个周末受 apemanchen 的邀请,去了北京一趟,谈了一下顺便小玩了一下。同时,蹭了 MK 一顿饭,真是好爽啊,出门在外有个朋友就是好。剩下的大部分时间,就用来升级这个主题。

距离上次 1.4 版本发布时间 2月8日,已经过去了三个多月了,这么长时间没有改动、升级主题,一个是比较忙没有太多时间,另一个是在不断深入 WordPress ,学到了不少的新东西,准备应用在主题上,一时间难以慢慢消化,所以等有时间一口气重新升级。然后就是本人的拖延症,一拖再拖拖到现在。

现在主要完成的工作

这次升级,先从界面开始,几乎又重写了 CSS 文件,而且把原有的 HTML 结构重新正规的命名了下。从极简的角度出发,专注于内容的展示,去掉了绝大部分不必要的内容,保持内容的突出和优化显示。色调进行了统一,不再像之前那样,采用四种颜色,而是使用了 蓝色系 的颜色,在后面将会做多种颜色版。使用了近期流行的响应式布局设计(具体响应式设计还未完成)。然后就是根据官方以及其他成熟主题的做法,更新了很多函数和相关的使用方法,使主题代码更加合理。高度优化边栏样式,增加了跟随滚动模块等等。然后着重编写增强了 1.4 弱爆的评论模块。

目前,2.0 主题的基本界面和功能已经完成,可以上线让大家帮忙测试。但是这仅仅完成了不到 50% 的工作。

下面还需要进一步完成的

  1. 增强代码区域的显示效果和功能
  2. 增加各种短代码功能
  3. 完善作者介绍页面及其文章列表
  4. 提供多种 Page 页面模板
  5. 增加后台选项,可以配置主题相关功能
  6. 增强图片显示效果以及附件页面处理
  7. 增加多种 post format 的支持
  8. 调整 HTML 结构,方便 Google 抓去分析
  9. 增强评论模块的功能
  10. 前端性能优化,压缩合并、预加载缓加载等
  11. 早期浏览器和移动设备平台的兼容性
  12. 回滚出现顶部导航条
  13. 增加一个跟随工具块,实现一些功能(分享、向上滚动等)
  14. 做出其他颜色的版本,在后台可供选择
    好吧,看了这个不完全列表,我觉得我现在只完成了不到 40% 的工作。要全部完成估计还需要一个多月的时间,甚至要到暑假了。认真的完成完善这个主题,就可以把这个主题做成模板主题,以后再做其他主题就方便多了。

我先把未完全完成版上传测试,希望大家能提提建议或者发现一些 Bug 等,如果你有好的想法和建议,下面有我的联系方式,希望能告诉我一下。测试评论模块,多说也先去掉了。

2.0 版本 Qetro 主题可能不会公开

这段时间,我也见到很多关于主题是否应该公开的讨论。有种言论说,主题一旦公开,就死掉了,版权全部被改掉什么都没了。确实有这个问题。而且做一款真正好的主题,真的很不容易,我越来越体会得到。所以,2.0 版本的主题将不会公开发布,同时 1.4 版本的主题做的太烂了,所以将会停止共享。抱歉!

如果不出意外,这套主题将会作为本人自用主题。也有可能因为我最近比较缺钱,搞出个限量版来买然后提供 VIP 服务。这些还需要等主题完全完成再说。

使用 Emmet 提高编写 CSS 的效率

在前面,潜行者 m 介绍了 Emmet 的功能如何使用 Emmet 来生成 HTML 代码,这次再来讲解一下如何使用 Emmet 提高 CSS 编写效率。

首先,Sublime Text 2 已经提供了比较强大的 CSS 样式所写方法来提高 CSS 编写效率。例如编写 position: absolute; 这一个属性,我们只需要输入 posa 这四个字母即可。它会弹出缩写样式的提示:

Sublime text 2 快速生成 CSS 代码

你不妨在编写 CSS 的时候,留意一下 ST2 提供了哪些属性的缩写方法,这样就可以提高一定的效率了。但是 Emmet 提供了更多的功能,请往下看。

简写属性和属性值

如果你想生成 width:100px; 你只需要输入 w100 就可以了,因为 Emmet 的默认设置 w 是 width 的缩写,后面紧跟的数字就是属性值。默认的属性值单位是 px ,你可以在值的后面紧跟字符生成单位,可以是任意字符。例如,w100foo 会生成 width:100foo; 这样一条语句。你同样也可以简写属性单位,如果你紧跟属性值后面的字符是 p ,那么将会生成 width:100%; 这样的语句,其中 p 表示百分比单位。与此类似的还有:e → em; x → ex。

例如 margin 这样的属性,可能并不是一个属性值,生成多个属性值需要用横杠(-)连接两个属性值,因为 Emmet 的指令中是不允许空格的。例如使用 m10-20 这条命令可以生成 margin: 10px 20px; 这样一条语句。如果你想生成负值,多加一条横杠即可。需要注意的是,如果你对每个属性都指定了单位,那么不需要使用横杠分割。例如使用 m10ff20ff 这条命令可以生成 margin: 10ff 20ff; 这条语句,如果你在 20ff 前面加了横杠的话,20ff 就会变成负值了。

如果你想一次生成多条语句,可以使用 ‘+’ 连接两条语句,例如使用 h10p+m5e 可以生成 height: 10%;margin: 5em; 这两条语句。

颜色值也是可以快速生成的,例如 c#3color: #333;,更复杂一点的,使用 <code>bd5#0s 可以生成 border: 5px #000 solid; 这样一句。下面是规则:

#1 → #111111
#e0 → #e0e0e0
#fc0 → #ffcc00

生成 !important 这条语句也当然很简单,只需要一个 ‘!’ 就可以了。

增加额外的选项

使用 @f 即可生成 CSS3 中的 font-face 的代码结构:

@font-face {
font-family:;
src:url();
}

但是这个结构太简单,不包含一些其他的 font-face 的属性,诸如 background-image、 border-radius、 font、@font-face、 text-outline、 text-shadow 等属性,我们可以在生成的时候输入 ‘+’ 生成增强的结构,例如我们可以输入 @f+ 命令,即可输出选项增强版的 font-face 结构:

@font-face {
font-family: ‘FontName’;
src: url(‘FileName.eot’);
src: url(‘FileName.eot?#iefix’) format(‘embedded-opentype’),
url(‘FileName.woff’) format(‘woff’),
url(‘FileName.ttf’) format(‘truetype’),
url(‘FileName.svg#FontName’) format(‘svg’);
font-style: normal;
font-weight: normal;
}

增加实验性前缀(Vendor Prefixes)

CSS3 等现在还没有出正式的 W3C 规范,但是很多浏览器已经实现了对应的功能,仅作为测试只用,所以在属性前面加上自己独特的实验性前缀,不同的浏览器只会识别带有自己规定前缀的样式。然而为了实现兼容性,我们不得不编写大量的冗余代码,而且要加上对应的前缀。使用 Emmet 可以快速生成带有前缀的 CSS3 属性。

ST2 已经内置了一些常见的需要实验性前缀的 CSS3 属性,例如输入 trf 会弹出提示,然后敲击回车键即可生成。而 Emmet 增强了这个功能。在任意字符前面加上一条横杠(-),即可生成该属性的带前缀代码,例如输入 -foo-css,会生成:

-webkit-foo-css: ;
 -moz-foo-css: ;
 -ms-foo-css: ;
 -o-foo-css: ;
 foo-css: ;

虽然 foo-css 并不是什么属性,但是照样可以生成。此外,你还可以详细的控制具体生成哪几个浏览器前缀或者先后顺序,使用 -wm-trf 即可生成:

-webkit-transform: ;
 -moz-transform: ;
 transform: ;

可想而知,w 就是 webkit 前缀的缩写,m 是 moz 前缀缩写,s 是 ms 前缀缩写,o 就是 opera 浏览器前缀的缩写。如果使用 -osmw-abc 即可生成:

-o-abc: ;
 -ms-abc: ;
 -moz-abc: ;
 -webkit-abc: ;
 abc: ;

生成渐变背景

CSS3 中新增加了一条属性 linear-gradient 使用这个属性可以直接制作出渐变的效果。但是这个属性的参数比较复杂,而且需要添加实验性前缀,无疑需要生成大量代码。而在 Emmet 中使用 lg() 指令即可快速生成,例如:使用 <code>lg(left, #fff 50%, #000) 可以直接生成:

background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));
 background-image: -webkit-linear-gradient(left, #fff 50%, #000);
 background-image: -moz-linear-gradient(left, #fff 50%, #000);
 background-image: -o-linear-gradient(left, #fff 50%, #000);
 background-image: linear-gradient(left, #fff 50%, #000);

直接帮你生成好了浏览器前缀。

Emmet 的还有一些其他的强大功能,将在后面继续讲解介绍,尽请关注。

XP 下 IE6、IE7、IE8 无法正常读取 cookie 的解决方法

近期的一个任务中,客户要求增加一个附带 cookie 记录的网站换肤功能。

网站换肤是老东西了,大体的思路就是写上一些 li 作为皮肤选项,点击之后使用 JavaScript 代码,修改网页中引用的 CSS 文件,达到换肤的目的。为了提供更好的用户体验,可以增加 cookie 记录功能,记录当前用户选择的皮肤。当下次用户再访问的时候,先读取 cookie 的内容,然后根据 cookie 内容自动切换到上次选择的皮肤。

出现问题

很正常的写完了 JavaScript 代码,测试都已经通过,在 IE10 的 IE7、8、9 渲染模式下也测试通过。这时候,客户反馈在 XP 下的 IE8 有问题:初次登陆无法显示默认皮肤、点击切换刷新之后无法显示切换后的皮肤。

因为是通过 cookie 来判断是否显示默认皮肤还是上次用户选择的皮肤,所以很理所当然就想到了无法读取 cookie 。启动 VMware 虚拟机,打开 IE8 和 IE Developer ToolBar 工具进行调试,发现点击之后 cookie 已经成功的创建,但是代码无法执行,使用控制台看了一下问题,原来是不支持 console 。

XP 下的 IE 浏览器不支持 console 命令

console 命令是控制台命令,用来调试 JavaScript 代码用的,通常使用 console.log() 函数来代替 alert() 来迅速得到某变量的内容等。由于 XP 下的 IE 不支持 console,导致后续代码无法运行。

解决方法就是删掉所有调试用的语句,这时候已经可以显示默认的皮肤样式了。

这里之所以说某些,是因为我也不知道哪句代码写的不完善。当我使用最基础的 alert(document.cookie) 返回所有的 cookie 内容时,返回值为空,使用 cookie 读取函数读取某值的时候,返回 undefined 。而在其他浏览器中都可以正常返回。

而奇怪的地方在于,我使用 IE developer toolbar 调试的时候,可以看到当前浏览器下面有 cookie 值。最初我以为是 cookie 读取函数写的有问题,因为毕竟有 cookie 的内容却读取不出来。前后换了 5 个不同写法的 cookie 读取函数。后来一想不对,因为使用 alert(document.cookie) 也无法返回任何内容,IE 不会连 document.cookie 都不支持吧?!难道是因为 cookie 生成函数?

这时候,客户给了个功能类似的示例网站,我打开测试了一下功能正常。既然别人的正常,肯定能实现。我阅读了一下它的代码,换肤功能使用的 styleswitcher.js 这个 JS 插件做出来的。由于实现步骤与现有网站不符,我无法使用这个插件整合,只能把它的生成 cookie 、读取 cookie 的函数抠下来用。代码如下:

function readCookie(name) {
var nameEQ = name + “=”;
var ca = document.cookie.split(‘;’);
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==’ ‘) c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return false;
}

function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days2460601000));
var expires = “; expires=”+date.toGMTString();
}
else expires = “”;
document.cookie = name+”=”+value+expires+”; path=/“;
}
然后问题就解决了,仔细看了一下代码,我写的也差不多,没有看出问题在哪。日后再仔细研究一下吧,如果你遇到了这样的问题,不妨使用上面这两个函数操作 cookie ,如果你知道问题所在,还望告知!

让你的网页在滚动的时候 放屁

放屁绝对不是一个很高雅的行为,但是如果你比较喜欢恶搞,或者在愚人节,或者是一些比较特殊的网页设计中,可以通过 fartscroll.js 这个插件让你的网页在滚动的过程中 放屁。

直接打开 fatscroll.js 的官方页面(http://theonion.github.io/fartscroll.js/),滚动一下,你就可以听到了放屁声音了,你滚动的距离和速度不同,放屁的声音也不同。

使用方法也很简单,先下载插件包,解压出来之后,在网页中引入 fartscroll.min.js 这个文件,然后配置下面的参数等,启用这个插件:

    // 在文档中滚动 400 像素就放屁
$(document).fartscroll();

// 文档中每滚动 800 像素就放屁
$(document).fartscroll(800);

// 网页中没滚动 100 像素就放屁
$("body").fartscroll(100);

// 很多很多的屁
$("body").fartscroll(5);</pre>

仅供娱乐和恶搞哈,相信应该没有太多人喜欢在访问你网页的时候,听到你网页在放屁哈哈。

Emmet 生成 HTML 的语法

在上篇文章前端开发神器 Emmet 介绍中,我简单的介绍了一下 Emmet ,并且用了一句指令迅速生成了一大片 HTML 代码。本文,就会介绍 Emmet 的 HTML 语法,看完之后,你就会看懂并且写出那句代码了。

现在,打开你的 ST2 然后新建一个 HTML 文档,跟着文章,即时输入对应的指令然后亲自尝试一下!

生成 HTML 文档初始结构

HTML 文档的初始结构,就是包括 doctype、html、head、body 以及 meta 等内容。你只需要输入一个 “!” 就可以生成一个 HTML5 的标准文档初始结构,你没有看错,输入一个感叹号(当然是英文符号),然后摁下 TAB 键,就会发现生成了下面的结构:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>
这就是一个 HTML5 的标准结构,也是默认的 HTML 结构。如果你想生成 HTML4 的过渡型结构,那么输入指令 `html:xt` 即可生成如下结构:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>
Emmet 会自动把 doctype 给你补全了,怎么样,这样的功能会不会让你动心?简单总结一下常用的 HTML 结构指令: * `html:5` `或者 !` 生成 HTML5 结构 * `html:xt` 生成 HTML4 过渡型 * `html:4s` 生成 HTML4 严格型 ## 生成带有 id 、class 的 HTML 标签 Emmet 的语法有点类似 CSS 的语法,生成 id 为 aaa 的 div 标签,我们只需要编写下面指令:
#aaa
Emmet 默认的标签为 div ,如果我们不给出标签名称的话,默认就生成 div 标签。如果编写一个 class 为 bbb 的 span 标签,我们需要编写下面指令:
span.bbb
然后就生成了对应的结构。同理,如果想要编写一个 id 为 ccc 的 class 为 ddd 的 ul 标签,我们可以这样写:
ul#ccc.ddd
很简单吧?比你用手写 id 、class 方便多了吧 ## 生成后代:> 大于号表示后面要生成的内容是当前标签的后代。例如我要生成一个无序列表,而且被 class 为 aaa 的 div 包裹,那么可以使用下面指令:
div.aaa>ul>li
可以生成如下的结构:
<div>
    <ul>
        <li></li>
    </ul>
</div>

生成兄弟:+

上面是生成下级元素,如果想要生成平级的元素,就需要使用 + 号。例如下面指令:

div+p+bq`
就可以生成如下的 HTML 结构:

`<div></div>
<p></p>
<blockquote></blockquote>`

生成上级元素:^

上级 (Climb-up)元素是什么意思呢?前面咱们说过了生成下级元素的符号“>”,当使用 div>ul>li 的指令之后,再继续写下去,那么后续内容都是在 li 下级的。如果我想编写一个跟 ul 平级的 span 标签,那么我需要先用 “^” 提升一下层次。例如:

div>ul>li^span
就会生成如下结构:
<div>
    <ul>
        <li></li>
    </ul>
    <span></span>
</div>
如果我想相对与 div 生成一个平级元素,那么就再上升一个层次,多用一个“^”符号:
div>ul>li^^span

重复生成多份:*

特别是一个无序列表,ul 下面的 li 肯定不只是一份,通常要生成很多个 li 标签。那么我们可以直接在 li 后面 * 上一些数字:

ul>li*5
这样就直接生成五个项目的无序列表了。如果想要生成多份其他结构,方法类似。 ## 生成分组:() 用括号进行分组,这样可以更加明确要生成的结构,特别是层次关系,例如:
`div>(header>ul>li*2>a)+footer>p`
这样很明显就可以看出层次关系和并列关系,生成如下结构:
`<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>`
此外,分组还可以很方便的结合上面说的 “*” 符号生成重复结构:
`(div>dl>(dt+dd)*3)+footer>p`
生成结构:
`<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>`

生成自定义属性:[attr]

a 标签中往往需要附带 href 属性和 title 属性,如果我们想生成一个 href 为 “http://www.qianxingzhem.com” ,title 为“潜行者m 博客”的 a 标签,可以这样写:

a[href="http://www.qianxingzhem.com" title="潜行者m 博客"]
其他标签和属性都类似。 ## 对生成内容编号:$ 例如无序列表,我想为五个个 li 增加一个 class 属性值 item1 ,然后依次递增从 1-5,那么就需要使用 $ 符号:
`ul>li.item$*5`
这样就生成了如下结构:
<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>
$ 就表示一位数字,只出现一个的话,就从1开始。如果出现多个,就从0开始。如果我想生成三位数的序号,那么要写三个 $:
`ul>li.item$$$*5`
输出:
`<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
</ul>`
只能这样单调的生成序号?对于强大的 Emmet 来说,肯定不会会了,我们也可以在 $ 后面增加 @- 来实现倒序排列:
`ul>li.item$@-*5`
生成如下结构:
`<ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>`
同样,我们也可以使用 @N 指定开始的序号:
`ul>li.item$@3*5`
这样就会从 3 开始排序,生成如下代码:
`<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>`
配合上面倒序输出,可以这样写:
`ul>li.item$@-3*5`
生成的就是以 3 为底倒序:
`<ul>
    <li class="item7"></li>
    <li class="item6"></li>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
</ul>`

生成文本内容:{}

上面讲解了如何生成 HTML 标签,那里面的内容呢?当然也可以生成了:

a[href="http://www.qianxingzhem.com"]{点击这里到 潜行者m 的博客}

这样就生成了一个到我博客的超链接了。在生成内容的时候,特别要注意前后的符号关系,虽然 a>{Click me} 和 a{Click me} 生成的结构是相同的,但是加上其他的内容就不一定了,例如:

`<!– a{click}+b{here} –>
<a href=””>click</a><b>here</b>

<!– a>{click}+b{here} –>
<a href=””>click<b>here</b></a>`
这样就生成了完全不同的结构,注意这些小细节哦。

不要有空格

在写指令的时候,你可能为了代码的可读性,使用一些空格什么的排版一下。这就会导致代码无法使用。例如下面这句:

`(header > ul.nav > li*5) + footer

而去掉空格之后,就可以正常执行生成结构了。HTML 语法部分说完了,现在回头看看第一篇文字,你是否已经看懂了那一串指令?下一篇将会讲解快速编写 CSS 的技巧。

前端开发神器 Emmet 介绍

在前端开发的过程中,一大部分的工作是写 HTML、CSS 代码。特别是手动编写 HTML 代码的时候,效率会特别低下,因为需要敲打很多尖括号,而且很多标签都需要闭合标签等。于是,就有了 Emmet,它可以极大的提高代码编写的效率,它提供了一种非常简练的语法规则,然后立刻生成对应的 HTML 结构或者 CSS 代码,同时还有多种实用的功能帮助进行前端开发。

你可能听说过一款强大的功能相似的工具:Zen Coding,那个比较老了,而现在的 Emmet 则是 Zen Coding 的升级版,由 Zen Coding 的原作者进行开发等。

Emmet 严格意义上来说,并不是一款软件或者工具,它是一款编辑器插件,必须要基于某个编辑器使用。目前它支持如下编辑器:

在 Sublime text 2 中安装 Emmet

Sbulime text 2 安装插件肯定要通过 Package Control 这个插件了,如果你还没有安装这个插件,抓紧先去安装一下吧。安装完成之后,我们摁下“shift + ctrl + p”呼出面板,输入“pci”即可锁定“Package Control:Install Package”这个功能,回车之后就可以看到一个列表,我们继续输入“emmet”即可找到这个插件,回车之后等待一会就安装完成了。

sublime text 2 安装 emmet

开始使用 Emmet

Emmet 可以快速的编写 HTML、CSS 以及实现其他的功能。它根据当前文件的解析模式来判断要使用 HTML 语法还是 CSS 语法来解析。例如当前文件的后缀为 .html 那 Sublime text 2 就会用 HTML 的解析模式来解析高亮这个文件,Emmet 遇到里面的指令就会根据 HTML 的语法把它编译成 HTML 结构。如果是在一个 .c 的 C 语言 文件中,你写出来的用于编译 HTML 指令就不会被 Emmet 识别编译。

此外,在没有后缀的文件中,你可以摁下“shift + ctrl + p”呼出面板,输入“seth”就可以设置当前文件的解析模式为 HTML 。了解这些之后,下面我们来见证强大的 Emmet 。

如果让你编写下面的这个 HTML 结构,你需要多长时间?

<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
    </ul>
</div>

然而,这一切你只需要编写下面这一句按照 Emmet 语法写出来的语句,然后用 Emmet 编译一下,就可以生成了!

#page>div.logo+ul#navigation>li*5>a{Item $}

我们把它复制到 Sublime text 2 中已经打开的 HTML 文件中,这时候紧跟着敲击一下 TAB 键,见证奇迹的时刻到来了。

怎么样?很神奇吧,仅仅写一行代码,就可以生成这么一个复杂的 HTML 结构,而且还可以生成对应的 class 、id 和有序号的内容。而且 Emmet 的语法很简单,虽然你现在可能还看不懂,后面的系列教程会详细讲解它的语法,你现在只需要知道 Emmet 的工作流程:打开 HTML 或 CSS 文件->按语法编写指令->摁下 TAB 键->生成!

使用 CSS 将彩色图片转换成黑白图片

  • 原文:Convert Images To Black And White With CSS
  • 原作者:Dudley Storey 译者:潜行者 m
  • 版权声明:版权归原作者所有,翻译仅作学习参考交流使用。
    PS:最近翻译不少国外的优秀文章,不是没有写作灵感,是马上就要四级考试了 T _ T,哥现在还没开始正式复习。为了锻炼一下英语,所以选择翻译一些优秀的国外文章。

CSS3 中的滤镜(filter)功能让我们轻松方便简单的处理图片,而不需要使用 PhotoShop 或者使用很多 JavaScript、PHP 代码。这个属性已经得到比较新的 Firefox、Safari、Chrome 浏览器支持,而且我们可以通过综合的可替代的技术来模拟实现这个效果——甚至是 IE 浏览器。

本文中,我们将使用标准测试图片 Lena Söderberg (译者注:Lena 这张裸体美女照片,被作为图片压缩的标准测试用图片)作为演示,使用 CSS 将其转换成黑白图片。在下面我将讲解如何使用 CSS 的这个功能实现调整色调、模糊、亮度、对比度和一些其他的效果。效果图:

lena

CSS3 的灰阶滤镜

使用 CSS3 来稀释一个图片的颜色,再简单不过了。我们可以把这个 CSS 语句写成一个类,这样遇到想要效果的图片,直接加上个类就可以了。

img.desaturate { filter: grayscale(100%); }

当然,当前的浏览器在使用 CSS3 的时候,要加上他们自己的浏览器功能实验性前缀,所以,我们首先要做的,就是写上浏览器的前缀:

img.desaturate { filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}

想要用在某个图片上很简单,加上一个类:

<img src=lena-söderberg.png alt="Lena Söderberg" style=width:512px;height:512px class=desaturate>

这就可以了。

增加一个 SVG 的滤镜效果

这个功能目前只在 Chrome 18+ 有效,其他浏览器马上就会增加支持。为了在 Firefox 4+ 中得到相同的效果,我们可以需要使用 SVG 滤镜。我把新建了一个单独的文件 的 saturate.svg ,代码如下:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="greyscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0  0  0  1 0"/>
</filter>
</svg>

不要被这段 SVG 代码吓住了——虽然上面的矩阵数列有点复杂。这段代码我推荐你直接复制粘贴成一个通用的“小文件”。我会再写一篇文章详细介绍一下上面矩阵变化,在这里不再赘述。

加上上面的 SVG 文件引用,我们要插入 HTML 页面的 CSS 代码如下:

img.desaturate{
filter: grayscale(100%);
-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);
-ms-filter: grayscale(100%); -o-filter: grayscale(100%);
filter: url(desaturate.svg#greyscale);
}

为 IE 做兼容

到现在我们的代码可以兼容未来的浏览器,和最新版的 Chrome 、 Firefox 4+。为了让 IE 6-9 加入兼容列表,我们需要使用微软的笨拙但是有效的 filter 滤镜:

img.desaturate{
filter: grayscale(100%);
-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);
-ms-filter: grayscale(100%); -o-filter: grayscale(100%);
filter: url(desaturate.svg#greyscale);
filter: gray;
}

如果你还想做老版本的 Webkit 内核浏览器的兼容:

img.desaturate{
filter: grayscale(100%);
-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);
-ms-filter: grayscale(100%); -o-filter: grayscale(100%);
filter: url(desaturate.svg#greyscale);
filter: gray;
-webkit-filter: grayscale(1);
}

不幸的是,Safari 和 Opera 仍然不支持,但是 Safari 5.2 ——很快就会发布——应该会支持 webkit CSS3 滤镜功能,同时 Opera 对 CSS3 的支持正在不断提升。

注意

如果你想要在所有的浏览器中实现这个视觉效果(假设你的访问者都支持 JavaScript)你可以使用 jQuery 或者 Greyscale.js 来修改你的图片,使其去色。

上面咱们写的 CSS 代码可以让我们不需要使用 PhotoShop 就可以把图片变成黑白的。使用 CSS 来实现这个功能,可以非常容易修改:例如,你可以看到当我们把去色程度参数从 100% 变成 50% 的时候图片会是原色和黑白融合在一起的效果。

HTML 的 id 和 class 可以使用 Unicode 编码的特殊字符命名

先简单的普及一下 Unicode 编码的基础知识,关于网页中的编码,详情请看 潜行者m 的文章:网页编码就是那点事。好了普及完毕,开始正文内容。

HTML 结构中的 id 和 class 属性,最重要的目的就是作为结构的标识,可以被 CSS 选择器和 JS 选择器获取,增加样式和行为。由于结构通常比较复杂,id、class 的命名就成了一个大问题。于是出现了很多种命名方案,什么驼峰命名法等等。此外还有很多团队规范,规定命名规则等等。

但是这些命名,通常都逃不过:数字、字母、下划线、横杠。虽然这些比较直观,但是会不会太枯燥?其实 HTML、CSS、JS 支持的命名字符,远不止这点,你可以使用 Unicode 编码的特殊字符来让你的命名变得丰富多彩。

Unicode 由于有很多存储空间,所以拿出了很多 Unicode 编码代表一些比较常用的“字符图像”。比较常见的是 copyright 的图标:©,这就是一个 Unicode 编码存储的图标。其他的各种字符:Ϭ、ϻ、Ѽ 等,都是 Unicode 编码的字符。而 HTML、CSS、JS 支持使用它们来做命名。所有的 Unicode 字符列表,请看这里:http://en.wikipedia.org/wiki/List_of_Unicode_characters

在使用之前,请先确保你理解 Unicode 等这些编码,你必须让你的文件保存成 UTF-8 等格式才能使用,否则可能会显示成乱码。

然后我做了一个 Demo 来做测试,Demo 中就使用特殊字符来命名,你可以在不同的测试环境浏览器进行测试,可以反馈一下看下有没有平台不支持。具体的代码不再贴出,请看 Demo 页面中代码。Demo 地址:http://www.qianxingzhem.com/demo/1927/

应用的话,以后代码就丰富多彩了哈哈。

在 Sublime Text 2 中使用 SFTP 插件快速编辑远程服务器文件

Sublime Text 2 本身并不强大,但是它方便使用插件扩展功能,所以变得很强大。今天 潜行者 m 介绍一个很实用的插件 SFTP ,可以大大提高前端工作效率。

常见的工作流程

有时候修改一些网站上的文件,通常是下面这样的流程:使用 FTP/SFTP 连接到远程服务器 -> 下载要修改的文件 -> 使用 ST2 修改文件 -> 保存然后拖进 FTP 中 -> 刷新网站。

很明显这样的工作流程效率很低,特别是你修改一句代码的时候,为了即时生效,也需要重复切换几个窗口重复这个过程。于是就有了 SFTP 这个插件。

它主要功能就是通过 FTP/SFTP 连接远程服务器并获取文件列表,可以选择下载编辑、重命名、删除等等操作,点下载编辑之后,可以打开这个文件进行修改。修改完成之后,保存一下会自动上传到远程的服务器上面。

使用这个插件之后,工作流程就变成了:使用 SFTP 插件打开文件 -> 使用 ST2 编辑修改文件 -> 保存文件 -> 刷新页面。效率提升了至少一倍以上,下面就来介绍一下具体的使用方法。

SFTP 使用方法

先要安装这个插件,打开 Sublime Text 2 ,摁下 shift + ctrl + p 键,呼出面板,使用 Package Control 这个插件安装。输入 “pci” 敲击回车,再输入 “sftp” 即可安装这个插件。安装完之后,就要开始配置服务器使用了。

第一步:配置 FTP/SFTP 服务器信息

安装完插件之后,找到 “文件” 菜单,找到 “SFTP/FTP” 选项,点击配置:

在 SFTP 中配置远程服务器信息

点击之后,会弹出一个新的窗口,这是一个配置文件

SFTP 中服务器的配置参数

一般就是配置一下我箭头所指的四个参数,包括连接方式、服务器地址、用户名、密码等。如果你的服务器还有其他配置,你也可以对照注释设置一下。一般为了方便,还会设置一下“路径”,这样直接可以看到想要修改的文件列表。

配置完成之后,我们保存,然后输入一个名字作为标识。

第二步:连接服务器获取文件列表

还是点击 “文件” 选择 “SFTP/FTP” 中的查看服务器列表

使用 SFTP 连接远程服务器

会弹出刚刚配置好的服务器,我们可以点击需要连接的 FTP 服务器,这时候就链接上了并且弹出文件列表

SFTP 连接服务器获取文件列表

这时候点击一个文件,就可以弹出一些选项

使用 SFTP 操作远程文件

就可以根据你自己的需要,对文件编辑、重命名什么的了。点击编辑之后,会在本地打开,然后可以修改。摁下 ctrl + s 保存文件的时候,就会自动上传文件。

如果需要查看服务器上的别的文件,或者需要更多的功能,可以直接在当前文件中右击,选择 “SFTP/FTP” 就会弹出更多选项可以使用,没法截图所以不再赘述。更多的功能,就交给你自己探索了!