我看最近微博流行 CSS 居中技术,老外码农争相写相关的文章,一篇赛一篇的长啊,我把几篇归纳总结了一下,算是笔记。
孔乙己曾说:“茴香豆的回字有四种写法”,万一哪天有个面试官问你:“居中一共有几种写法”呢,哈哈,先备着吧~~
各种方法各有利弊,大家自己权衡吧,至少在需要居中时多个思路。

<center>

不建议用了。

text-align:center

在父容器里水平居中 inline 文字,或 inline 元素

vertical-align:middle

垂直居中 inline 文字,inline 元素,配合 display:tabledisplay:table-cell,有奇效。

line-height

与 height 联手,垂直居中文字

margin:auto

示例:

1
2
3
4
5
<style>
#ex2_container { width:200px; background-color:yellow; }
#ex2_content { margin:0px auto; background-color:gray; color:white; display:table; }
</style>
<div id="ex2_container"><div id="ex2_content">Hello World</div></div>

hacks, hacks(小技巧)

有许多 hacks ,负 margin,影子元素 ::before 等。如果你的内容不是固定大小的话,它们大部分是很脆弱的。

translate(-50%,-50%)

用 position 加 translate
translate(-50%,-50%) 比较奇特,百分比计算不是以父元素为基准,而是以自己为基准。

参考文章:居中百分比宽高的元素

示例:

1
2
3
4
5
<style>
#ex3_container { width:200px; height:200px; background-color:yellow; position:relative; }
#ex3_content { left:50%; top:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); background-color:gray; color:white; position:absolute; }
</style>
<div id="ex3_container"><div id="ex3_content">Hello World</div></div>

这个技巧相当嚣张,同样适用于没固定大小的内容,min-widthmax-heightoverflow:scroll 等。

阅读全文 »

原文:JavaScript Promises
译者:涂鸦码龙

不,我不是要谈论 JavaScript 会解决一切问题的承诺。我甚至也不相信这点;) 我想谈谈几个JavaScript 库(包括 AngularJSjQueryDojoWinJS)用到的约定对象(promise object)的概念。

promise 是处理异步操作的模式。问题是当你开始一个异步操作,操作完成时需要执行一些代码。异步代码非常普遍,大部分的库已经找到了解决方案,传入回调函数。但是,每个库的作法很少有共性。让我们看看 jQuery 的例子:

阅读全文 »

准备工作:

下载:firebuglite 源码

我下载的稳定版

解压源码,找到 firebug-lite/build/chrome-extension 目录,这就是 Chrome 的 firebug-lite 扩展啦。按照常理呢,Chrome 和 Opera 15+ 内核一致,扩展应该直接通用,结果一试,bug 百出啊,跑不起来……

我感觉原因可能是:

  1. Opera extension API 暂时没有 Chrome extension API 支持的多
  2. firebug-lite 的 Chrome 扩展开发的比较早,有些 API 已更新

下面记录移植过程的一些要点:

地址栏输入 opera:opera://extensions 或者 “Ctrl + Shift + E`”打开扩展页,右上角点击“开发者模式”;

点击“载入解压后的扩展…”,选择刚刚下载的 Chrome 扩展(firebug-lite/build/chrome-extension );

哈,第一个报错来了:

意思是说“manifest_version”值必须是 2 ,不能有引号,解释参见这里

阅读全文 »

原文:Centering Percentage Width/Height Elements
译者:涂鸦码龙

如果知道该元素确切的宽高,居中它比较容易,可以参考此文topleft 设成 50%,负 margin 分别设置该元素宽,高的一半。如果明确知道该元素的宽高,用此法居中很容易,如果它的宽高是百分比呢?

你可能认为负的百分比 margin 可以搞定,它适用于水平的 margin,但是 margin 基于宽度(垂直 margin 也是)(译者注:margin 是百分比的话,跟此元素的包含块的宽度有关,见规范),因此当你用负的 top margin 时,失败了。

有个小技巧 ,用一个“ghost”伪元素(看不见的伪元素)和 inline-block / vertical-align 可以搞定居中,非常巧妙。但是这个方法要求待居中的元素是 inline-block,不是一个真正通用的方案。可能你想居中一个模态窗口,受小屏幕 / 响应式设计所限,你很可能会把对话框设计成百分比宽度(或者其它未知情况,比如仅有 max-width 最大宽度。)

有一种方案!Mary Lou 在 Codrops 用到的,她的文章 / 示例:漂亮的模态窗口效果

不能用负的 margin ,可以用负的 translate() 代替。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.center {
position: absolute;
left: 50%;
top: 50%;
/*
不是 =(
margin-left: -25%;
margin-top: -25%;
*/
/*
而是!
*/
transform: translate(-50%, -50%);
/*
甚至不要定义
比如:Height 可以缺省!
*/
width: 40%;
height: 50%;
}

加上所有需要的前缀。

最终效果实例:

Check out this Pen!

原文:Using JavaScript’s ‘toString’ Method (需翻墙)
译者:涂鸦码龙

是否想知道为什么 alert 一个 JavaScript 对象,得到“[object Object]”文本?缘于 JavaScript 内置 toString 方法。

注意:例子有些地方用了 alert ,没用 console.log ,是为了绕开 console 对 Object 的特殊处理。

1
2
3
4
5
6
7
8
9
10
// Alerts: '[object Object]'
alert({});
// Outputs: "function() {}"
console.log(function() {});
// Outputs:
// "Thu Oct 11 1962 00:00:00 GMT-0400 (Eastern Daylight Time)"
// May vary depending on your clock settings
console.log(new Date("October 11, 1962"));

以上这些有什么共同点?每一个都提供字符串代表它们的值,但是内部的值差异很大。比如,内部的 Date 以毫秒衡量。

这些对象如何提供字符串作代表?它们均有个 prototype 方法:toString,它会把内部的值转换成字符串。

假如我们想创建一个新对象,让它返回字符串代表它的值,不用 toString 的话,代码像这样:

1
2
3
4
5
6
7
8
9
10
11
function Color (r, g, b) {
this.r = r;
this.g = g;
this.b = b;
this.text = "rgb(" + r + ", " + g + ", " + b + ")";
}
var red = new Color(255, 0, 0);
// Outputs: "rgb(255, 0, 0)"
alert(red.text);

有几个问题,首先,text 属性跟实际的值不同步(如果改变r, g, b 的值);其次,必须明确调用 red.text ,不能直接用 red 的值。

toString 方法重写一下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function Color (r, g, b) {
this.r = r;
this.g = g;
this.b = b;
}
Color.prototype.toString = function () {
return "rgb(" + this.r + ", " +
this.g + ", " +
this.b + ")";
};
var red = new Color(255, 0, 0);
// Alerts: "rgb(255, 0, 0)"
alert(red);

把要返回的字符串放到 prototypetoString 里面有两个好处:字符串始终与真正的值保持同步,我们可以随时取用字符串的值, JavaScript 解释器会隐含调用 toString 方法。比如:

1
2
3
4
var message = "Red is: " + red;
// Outputs: "Red is: rgb(255, 0, 0)"
console.log(message);

原文:Better performance with requestAnimationFrame
作者:Luz Caballero
译者:涂鸦码龙

介绍

本文讨论如何使用 requestAnimationFrame API 代替旧的 setInterval / setTimeout 方法,从而提高动画的性能。当然,我们会演示代码实例

当前几乎所有的主流浏览器都支持 requestAnimationFrame ,尽管有的还带前缀。Erik Möller 已经写了个 polyfill ,加上这个应该可以支持所有浏览器啦。一言难尽,让我们从头说来…

老方法不太好

在表彰 requestAnimationFrame 之前,我们先看看用老方法是怎么实现动画的。我确定没必要提很久以前 Mozilla 第一个实现了 mozRequestAnimationFrame ,你可能已经用 setTimeoutsetInterval 创建了动画。假定你已经熟悉这两个方法,我不再赘述。如果你想了解更多,可以看 John Resig 的精彩文章,深度解析 JavaScript 计时器如何工作

我并不是轻视这些老方法,它们的确有一些缺点。首先,当相应的浏览器窗口最小化,JavaScript 计时器在背景标签仍然持续运行。因此,浏览器继续运行看不见的动画,导致不必要的 CPU 和电池寿命的消耗。在移动设备尤其严重。

其次,不仅计时器持续运行看不见的动画,而且当时间到了,仍会排队执行它们的回调函数。让我解释下为什么这样会出问题 —— 比如说由于某些原因,回调函数占用太多时间,比你设定的时间要长。一旦计时器时间到了,它将排队执行 “下一次” 回调函数,甚至前一个还没执行完。这一过程不断重复,很快排队了几乎无数的计时器代码,导致浏览器不堪重负。图1 说明这一情况。

阅读全文 »

原文:The Design of Code: Organizing JavaScript
作者:Anthony Colangelo
译者:@涂鸦码龙

伟大的设计是一个产品应该关注和重视的点,这样才能造就一个可用的,好理解的,精美的用户界面。千万不要认为设计仅仅是设计师的事。

代码里面有好多种设计,我不是指代码构建了用户界面——我是指代码的设计。

精心设计的代码更易于维护,优化和扩展,能使开发者更高效。这意味着更多的注意力和精力可以花在构建伟大的事情上,每个人都很愉快——用户,开发者和利益相关者。

有3个高级的,跟语言无关的点,对代码设计十分重要。

  1. 系统架构——代码库的基础设计。控制各种组件的规则,例如模块(models),视图(views)和控制器(controllers),以及之间的相互作用。
  2. 可维护性——如何更好地改进和扩展代码?
  3. 复用性——应用组件如何复用?每个组件的实例如何简便地个性定制?

比较宽松的语言,特别是 JavaScript ,需要一些规矩才能写好——代码设计。JavaScript 环境非常宽松,随处扔些代码片段,就可能起作用。早点确立系统架构(然后遵守它!)对你的代码库提供制约,确保自始至终的一致性。

我比较喜欢的一个方法由久经考验的软件设计模式组成——模块模式,可扩展的结构使它成为可靠的系统架构,和可维护的代码库。我喜欢在一个 jQuery 插件里面构建模块,有漂亮的复用性,提供强健的选项设置,暴露一些精心设计的 API。

下面,我将逐步讲解如何精心设计你的代码,把它变成结构良好的组件,从而在项目中复用。

模块模式

已有许多设计模式,同样有许多相关资源。Addy Osmani 写了本关于 JavaScript 设计模式的书《令人惊奇的书(免费!)》,我极力推荐给各个水平的开发者。

模块模式 是一个简单的结构基础,它可以让你的代码保持干净和条例清晰。一个“模块”就是个标准的包含方法和属性的对象字面量,简单是这个模式的最大亮点:甚至一些不熟悉传统的软件设计模式的人,一看就能立刻明白代码是如何工作的。

阅读全文 »

相关资料:
Opera 14 for Android is out!
OUT TODAY: OPERA FOR ANDROID, FULL AND FINAL!
先唠一下 Opera 14 新功能哈,作为开发者可以直接移步这里

经过数月的努力,全新安卓版 Opera 面世了,许多新奇特性等你发现。等不及的话,这有下载链接 Google Play 或者手机访问 m.opera.com

选项卡

从缩略视图到隐身标签,安卓版的选项卡非常适于浏览移动网页。把选项卡加入收藏也非常便捷,点击地址栏的星标。

快速拨号,彻底改造

如大家所愿,这版的快速拨号有文件夹了,可以自由整理,只需拖拽即可创建新文件夹。

发现,先人一步

获取最新最酷的内容,为你量身定制的发现特性。

越野模式

启用越野模式即启用了 Opera Mini 功能,当您网络不佳时,压缩网页,提高速度,省钱省流量。

阅读全文 »

自定义过滤器

创建 phonecatFilters 模块,用此模块注册自定义过滤器:

1
2
3
4
5
angular.module('phonecatFilters', []).filter('checkmark', function() {
return function(input) {
return input ? '\u2713' : '\u2718';
};
});

过滤器的名字是“checkmark”,根据 input 判断 true 或 false,我们用 unicode 字符代替 true 或 false(\u2713 和 \u2718)。

我们需要给 phonecat 模块注册 phonecatFilters 模块。

1
angular.module('phonecat', ['phonecatFilters']).

模板

我们需要引入 app/js/filters.js 文件

1
2
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>

Angular 模版使用过滤器的语法如下:

{{ expression | filter }}

我们在手机详情模版使用此过滤器:

1
2
3
4
5
6
<dl>
<dt>Infrared</dt>
<dd>&#123;&#123;phone.connectivity.infrared | checkmark}}</dd>
<dt>GPS</dt>
<dd>&#123;&#123;phone.connectivity.gps | checkmark}}</dd>
</dl>
阅读全文 »

模版链接和图片

数据

注意 phones.json 文件包含了唯一的 Id 和图像 url,url 指向 app/img/phones/ 路径:

1
2
3
4
5
6
7
[
{
"id": "motorola-defy-with-motoblur",
"imageUrl": "img/phones/motorola-defy-with-motoblur.0.jpg",
"name": "Motorola DEFY\u2122 with MOTOBLUR\u2122",
},
]

模版

1
2
3
4
5
6
7
<ul class="phones">
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
<a href="#/phones/\{\{phone.id}}" class="thumb"><img ng-src="\{\{phone.imageUrl}}"></a>
<a href="#/phones/\{\{phone.id}}">\{\{phone.name}}</a>
<p>\{\{phone.snippet}}</p>
</li>
</ul>

image 标签用了 ngSrc 指令,这一指令阻止浏览器按字面意思对待 angular {{表达式}},阻止它请求一个无效的 url http://localhost:8000/app/{{phone.imageUrl}}。使用 ngSrc 指令阻止浏览器发起无效的 http 请求。

实验

把 ngSrc 换成 src 属性,用 Firebug 之类的工具查看服务器访问日志,确认应用发起了无关的请求 /app/%7B%7Bphone.imageUrl%7D%7D (或 /app/{{phone.imageUrl}})。

阅读全文 »