麦鸡(Macji)

Progressive Enhancement 的 Tab

Macji — Mon, 03 Nov 2008 12:03:46 +0000

大家一直在讲Progressive Enhancement，如果你不看英文，那么请看玉伯翻译的理解渐进增强（Progressive Enhancement）。也标题一下，做一个tab切换实例，来进一步说明Progressive Enhancement(渐进增强)。

需求：做一个tab，要求当用户禁止javascript后，tab还能照样使用。

貌似不能实现，可仔细想想是可以实现的，连这个都能实现，何况一个tab呢。。。

首先我们写html结构


tab" class="mj">
    
        类目1
        类目2
        类目3
    
    
        这是类目1
    
    
        这是类目2
    
    
        这是类目3

测试地址一

写上css


.mj{
	width:500px;
	padding:10px 0;
	border:solid 1px #bfbfbf;
}
.mj-nav, .mj-nav *{
	background:url(cat_selector.png) no-repeat 100px 100px;
}
/* tab 导航条 */
.mj .mj-nav{
	height:25px;
	padding:0 10px;
	line-height:25px;
	background-position:0 0;
}
.mj-nav li{
	float:left;
}
.mj-nav a{
	float:left;
	padding-left:20px;
}
.mj-nav span{
	display:block;
	padding-right:20px;
}
.mj-nav a{
	background-position:-500px 0;
}
.mj-nav .first a{
	background-position:100px 100px;
}
.mj-nav .selected{
	position:relative;
	margin:0 -1px 0 0;
}
.mj-nav .selected a{
	background-position:0 -25px;
}
.mj-nav .selected span{
	background-position:100% -25px;
}

测试地址二

引入js，这里直接用Tbar，



.....

测试地址三

ok，到这里我们的tab就算完成了。只要浏览器支持javascript，那么就可以使用我们的tab，但是，如果用户禁止了javascript，那后果该是怎样的呢？惨不忍睹。测试地址四
我们都知道锚点(url#xxx)，定位到页面的位置。如果我们的锚点都在一个容器里面(div)，并且这个容器只有100像素高(height:100px;overflow:hidden)，然后我们锚点到它的字容器(字容器都是height:100px)，那该是怎么样的呢？答案是可行的，可惜只有Opera不支持这种机制。
```
//在原来的css基础上加上
.panels{
	height:50px;
	overflow:hidden;
}
.panel{
	height:50px;
}

tab" class="mj">
	
		类目1
		类目2
		类目3
	
	
		
			这是类目1
		
		
			这是类目2
		
		
			这是类目3
		
	
```
我们只要再做一点点，就能让用户在没有javascript的情况下，也能使用tab，可乐而不为呢？测试地址五
但是，当页面很长时，点击切换后，我们tab导航看不到了，测试地址六

其实，我们只要在css上，调整一下就可以了。


.mj{
	position:relative;
	width:500px;
	padding:10px 0;
	border:solid 1px #bfbfbf;
}
.mj-nav, .mj-nav *{
	background:url(cat_selector.png) no-repeat 100px 100px;
}
/* tab 导航条 */
.mj .mj-nav{
	position:absolute;
	left:0;
	top:10px;
	width:480px;
	height:25px;
	padding:0 10px;
	line-height:25px;
	background-position:0 0;
}

测试地址七

这时，javascript可以出场了。我们给其加上脚本。测试地址八
可恨的firefox 3，在有锚点，又有脚本，错位了。测试地址九

写上obj.scrollTop = 0;就可以了。


var TabSelector = (function(){
	var el = $D.get('tab');
	if ( !el ) return false;
	return {
		init: function(){
			$E.on(el.getElementsByTagName('ul')[0], 'click', function(){
				$E.stopEvent(ev);
			});
			TB.widget.SimpleTab.decorate('tab', {
				eventType:'click',
				tabPanelClass:'panel',
				currentClass:'selected'
			});
			$D.getLastChild(el).scrollTop = 0;
		}
	}
})();
$E.onDOMReady(TabSelector.init);

比较完美的tab，测试地址十，如果再渐进增强，比如键盘事件，盲人触摸等，更极端的，当css失效时，但我没疯。

其实到第三步，一个tab就做好了，也不需要考虑这么多了，但考虑下去，不是很难，疯一次也是不错的。

使用feedburner

Macji — Mon, 03 Nov 2008 10:12:42 +0000

本来想用 Feedsky 的，但看到放弃使用 Feedsky 服务，也跟着用feedburner了。

说正经的，如果你没有订阅我博客的，请订阅http://feed.macji.com/macji/，如果浏览器打不开，属正常哈，阅读器可以爬墙。如果你以前就订阅我了，请改一下rss源吧。因为少的可怜。。。。

css计数器

Macji — Fri, 03 Oct 2008 15:17:55 +0000

这是css2的东西，但我才知道，我。。。其实是在看阅读器里Opera Developer Community的一个文章，原来这样也行，发现其实是css2，马上去看了嗷嗷书的目录，他也是这么些的。虽然不怎么用得到，但还是记录一下。

当我们设计一个书的目录的时候，你是否会一个一个写上编号呢？其实可以利用css计数器。比如这个目录应该怎么写呢?

Web标准不是神话

理解Web标准

Web标准是什么

错误的思维

无障碍网页倡议（WAI）

量化Web标准

大部分通过W3C校验的网站只是伪标准

Web标准要求一览表

如果量化

为什么选择Web标准

CSS为什么着火

CSS 的作用

CSS 布局 VS. 表格布局

我能否学好Web标准

我需要具备什么素质和条件才能学好Web标准

学习的重点与难点

欲善其事，先利其器

软件的选择

调试环境

这些编号都是css写上去的，但唯有IE不支持。。 - -


ol{
	counter-reset: ordered; /* 指定一个计数器，名字叫ordered */
	list-style:none; /* 去掉默认 */
}
ol li:before {
	counter-increment: ordered; /* 使用已命名的计数器(ordered)  如果是 ordered 2 那累加2，可以是负数*/
	content:"第"counters(ordered,"")"章 "; /* 在li之前输出计数器(ordered) */
}
ol li li:before {
	counter-increment: ordered;
	content: counters(ordered,".") " "; /* 在li里的li之前输出计数器(ordered)*/
}

地址：http://labs.aoao.org.cn/book/web-standards-design/catalog.html

举一反三：http://dev.opera.com/articles/view/automatic-numbering-with-css-counters/。

打造纯CSS的无侵入的卡盘（幻灯片）

Macji — Tue, 30 Sep 2008 16:20:11 +0000

卡盘，也就是幻灯片，它应该是自动播放，但目前css是无法做到自动播放（可能会让你失望），所以它不应该叫幻灯片，但我扔这么称呼它为幻灯片。如果你认为可以用脚本来实现，嗯，地球人都知道，显然违背了我们的主题，纯css的，无侵入的。似乎我标题党了，但请你耐下性子来听我说。

今天无意在经典论坛看到一个帖子，纯CSS的图片展示效果，它是利用锚点来实现，创意非常好，但马上令我兴奋，因为该效果有缺点。

Opera无效

无法记录状态

没有hover效果

这些正是我想说的，我想补充的。

首先，我们让它来兼容所有A级浏览器。其实原理很简单，既然使用锚点，我们应该记得css3有个伪类:target（非IE内核浏览器都支持），让它来控制，不就更好？

测试地址

问题2，实现记录状态，那我们同样可以用伪类:target来实现，IE系列浏览器不支持。

测试地址

最后一个问题，hover效果，这可不是简单的:hover就可以实现，我们不能在li上给hover（这样当鼠标经过li就hover了），我们只能在数字上hover（1）然后来影响它对于的图片，貌似不可能纯CSS实现，但确实可以实现，用“ + ”来实现。由于用到:target和“+”，所以只有Firefox、Opera支持。-__-

最终演示，代码实现是很简单，关键是是否联想到原理。举一反三，将会得到更多你想要的结果。不知不觉已是国庆节了，祝大家节日快乐！

扩展阅读：css3伪类:target

我比较喜欢的reset css

Macji — Mon, 29 Sep 2008 16:47:45 +0000

各浏览器的默认样式都并不太一致，所以我们得建立一个reset.css，使各浏览器对各元素的默认属性都一致。reset css这大家都见得多了，对常用的莫过

*{margin:0;padding:0}

YUI的reset

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
    margin:0;
    padding:0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img {
    border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
caption,th {
    text-align:left;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
q:before,q:after {
    content:'';
}
abbr,acronym {
    border:0;
}

这些reset没有最佳的，只有最适合自己项目的。

动手来做我喜欢的reset css，而且也简单的。首先重置你的margin和pading


html, body, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul,
ol, li, dl, dt, dd, form, fieldset, input, th, td, a{
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    list-style: none;
}

重置标题字体大小为100%


h1,h2,h3,h4,h5,h6{
    font-size:100%;
}

设置文字大小100%的基数。


body{
    line-height: 1;
    font-size: 88%;
}

一般浏览器默认文字大小是1em，大约是16px，那body文字大小88%后，大约14px，所以h系列的大小也在14px左右。如果想给文字设置为12px，那么p{font-size:90%}。
最终重置css


html{/* for firefox */
    overflow:-moz-scrollbars-vertical;
    overflow-x:auto;
}
html, body, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul,
ol, li, dl, dt, dd, form, fieldset, input, th, td, a{
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    list-style: none;
}
body{
    line-height: 1;
    font-size: 88%;
}
h1,h2,h3,h4,h5,h6{
    font-size:100%;
}

我这里没有设置字体，具体参照 web 安全字体吧。上面这些元素是最常用的，但现在用的比较多的有sup、sub、cite等，也可以考虑重置为无表现样式。

扩展阅读：http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

给你的WordPress自定义分页

Macji — Tue, 09 Sep 2008 15:59:43 +0000

WordPress自带的分页不好用，只有上一页，下一页。感觉不爽，google了几下，分页插件倒是有，下过来想安装，但感觉代码太多，看了一下 wp-pagenavi 的分页插件，发现它怎么没写SQL，原来是我白痴了一回，$request = $wp_query->request;就能得到，而且$wp_query->max_num_pages就能得到最多页数，有了这个参数，自己写完全没有问题。于是瞎捣鼓写了一个分页。

效果如我博客分页一致，最多显示5个页码，也就是1 2 3 4 5，2 3 4 5 6，3 4 5 6 7这种。那这种分页有三种情况：

少于或者等于5页时，始终显示1 2 3 4 5

页数在最后3个页数时，始终显示最后5页

其他都是加2减2

附加功能，显示首页上一页下一页末页，情况在不是第一页和最后一个

那么就可以动手写了。


function mj_pagenav() {
    global $wpdb, $wp_query;
    if (!is_single()) {
        $CycNum = 5;	//最多页数
        $maxPage = $wp_query->max_num_pages;		//最多页数
        $paged = intval(get_query_var('paged')) === 0 ? 1 : intval(get_query_var('paged')) ;	//paged=? 参数
        $Button = array("首页","上一页","下一页","未页");
        if($paged - 2 <= 1){
            $FirstNum   =  1;
            $LastNum   =  min($maxPage, $CycNum);
        }elseif($maxPage - $paged <= 2){
            $FirstNum   =  ($maxPage - 4 == 0) ? 1 : ($maxPage - 4);
            $LastNum   =  $maxPage;
        }else{
            $FirstNum   =  $paged - 2;
            $LastNum   =  $paged + 2;
        }
        //输出 首页 上一页
        echo ( 1 >= $paged ) ? ''
            : '' . $ButtonArray[0] . '
                ' . $ButtonArray[1] . '';
        //输出 页码
        for($i = $FirstNum; $i <= $LastNum; $i++){
            if ( $i == $paged ){
                $pageText = '' . $i . '';
            }else{
                $pageText = '' . $i . '';
            }
            echo  $pageText;
        }
        //输出 下一页 末页
        echo ($max_page == $paged ) ? ''
            : ''. $ButtonArray[2] .'
                '. $ButtonArray[3] .'';
    }
}

代码比较简单，“上一页下一页” 我都整在一行，将就着看。把mj_pagenav()放到该放的地方，简单的分页就弄好了，复杂的分页就再加几行代码（我这里把/page/xx写死了，只适应首页哈，搜索和存档等其它页的分页有空再改一下，-__-）。

Google Chrome的一些

Macji — Fri, 05 Sep 2008 09:00:07 +0000

Google浏览器一出，满世间都在议论它，包括我的阅读器，全在说它。它是一个非常优秀的浏览器，尤其是多线程，让我们打开多个网页不再受浏览器的限制，更多好处请Google Chrome 漫画中文版

那到底为什么叫Chrome？其实我也不知道，我只听说在做mozilla插件（firefox）中，有个叫 chrome://的。金山词霸上说:

CHROME（铬合金）滤镜使用映射图来生成变化多端的，奇妙醒目的真实金属效果，如黄金效果、银金属效果、铜金属效果及其它各种金属效果，所谓映射图就是解压缩的TIFF …

显然这不是我们要的答案。好在独行给出解释：

最早是用在计算机游戏设计上面，人们会说游戏里一些人物造型很“炫”，就是好看不中用，就管这种“炫”的设计叫Chrome，它原意是铬，可能因为铬都闪闪发光？后来就被科普成代表GUI Graphic User Interface了，都可以叫Chrome，再后来，用在浏览器设计上面，就是说浏览器视窗（window）周边的框，也包括上面的导航条，都叫chrome，象一个金属的框。

用chrome打开任何一个网站，然后再其网站搜索后，再在地址栏键入该网站域名按TAB，将自动搜索该网站内容，貌似chrome很强悍，但在它的地址栏里输入” %: “，却立马崩溃，不知道为什么。另外它自带的几个开发者工具，不怎么好用。

大家都知道它是基于webkit的。有人已经写了它所支持的css选择器。http://www.evotech.net/blog/2008/09/google-chrome-browser-css-selector-support/，该网站也列出了chrome的css hack，当然能用在Safari。hedgerwow以前也列过一个Safari hack，当然chrome也能用。。挖挖。绕啊。


@media screen and (-webkit-min-device-pixel-ratio:0){
	.your_own_selector{
		color:red;
	}
}

小站更新大记

Macji — Mon, 01 Sep 2008 15:20:15 +0000

现在博客系统换成WordPress，博客地址为http://www.macji.com/，RSS地址为http://www.macji.com/feed/

也换主机了，感谢空帷同学提供主机（上周正愁要不要买MT的主机，那天中午去吃饭的路上，不巧被我听到空帷在喊 “老子有钱，一个人用一个服务器。@#￥%……&×”。喊的好啊，马上跑上去说“我博客放你空间”）。主机是apache的，刚好博客换成WordPress系统（顺便花了点时间做了跟以前一模一样的WP主题），告别以前漏洞百出的自己瞎写的博客。

由于以前买的主机是IIS服务器的，WP不支持IIS的URL重写，网上搜的也写得很麻烦。为了实现URL静态化，于是就想自己写一个算了。那时“冲动”，说干就干了，边看PHP手册边请教PHP达人，遇到很多问题，靠着慢慢琢磨和google，很快程序出来了（我的第三个php程序），系统很简单很简单，那破系统还支持自定义模板呢（挖哈哈）。为了满足我的虚荣心，小秀一下原先的博客系统 ^_^

简单的结构，一目了然，很符合我的个性。

includes目录下就这么几个文件，够轻巧吧。

themes下面放”我所谓”的模板文件，外表都在这里了，跟WP的模板文件差不多。

我更加”骄傲”的是我华丽的后台，

后台首页，然后是我的发表文章的地方，

还可以管理评论哦。

另外值得一提的是，由于懒到家的我，到现在，“友情链接”这功能还没做，我都是手动添加到sidebar.php里去滴。。。

这次博客换成WP了，告别陪伴我半年多的博客系统，以前的数据库结构和WP不一样，手动转了一些文章回来，评论就懒得转了，唉，有点，。。。挖哈哈，难得在博客上写这么多废话，也是值得表扬的，表扬一下麦鸡。

20个CSS学习网站

Macji — Sat, 30 Aug 2008 17:16:44 +0000

CSS相对其他语言来说，门槛比较低，比较容易学习，但要想精通CSS可不是那么容易，你必须完全理解CSS。在你精通CSS过程中，这20个优秀的CSS站点来帮你。

A List Apart CSS Topics
大牛们的文章都发表在这里
CSS Help Pile
N多的CSS资源
CSS Basics
CSS教程，猛击这里下载PDF
Holy CSS Zeldman!
收集了N多的资源，值得收藏
Eric Meyer: CSS
也是很多css资源和参考
456 Berea Street – CSS category
不得不看的CSS技巧
Position Is Everything
讨论的浏览器已知的bug和跨浏览器的CSS方法
HTML Dog CSS Tutorials
专业的CSS教学，从初级到中级，再到高级
Learn CSS Positioning in Ten Steps
10步学会CSS定位属性
Andy Budd CSS/Web Standards Links
这里有更多的关于CSS的资源
W3CSchools CSS Tutorial
这个不用说了
css Zen Garden
css禅意花园
CSS at MaxDesign
提供整套CSS教程
CSSeasy.com
他们的口号是：”learn CSS the modern way”
CSS-Discuss
这里有一群CSS爱好者
Web Design from Scratch: CSS
这里也有入门到精通的教程
CSS-Tricks
专门讨论CSS，订阅它吧
CSS on Delicious
看看美味书签的tag
SitePoint CSS Reference
很多css话题
CSSDog
一系列的教程

如果还不过瘾，那么查看我的订阅

几个css技巧

Macji — Mon, 18 Aug 2008 11:03:14 +0000

1.始终让firefox出现纵向滚动条

让我们的页面不够长的时候， firefox默认不会显示滚动条，只有当页面长度超过浏览器可显示的长度时，才会出现滚动条。那如何让firefox始终显示纵向滚动条呢？


:root{
	overflow-y: scroll;
}

但这会使opera9.5出现横向滚动条。如果我们只想给我firefox出现纵向滚动条，那么我们用它的私有属性。


html{
	overflow:-moz-scrollbars-vertical;
}

始终让firefox出现纵向滚动条。更多firefox的私有属性

2.防止内容过多从而打乱固定宽度的布局

最简单的布局，就是用float:left加上固定width，但有时容器里面的内容过多，会撑开宽度，打乱布局。


#main{
	overflow:hidden;
}

3.防止链接换行


a{
	white-space:nowrap;
}