打有‘Xhtml/Css’标签的日志

CSS3测试之——QQ企鹅 (2010-7-20)

自从HTML5还有CSS3草案公布以来,国内兴起了一股学习的热潮,再包括JS2,这些都是未来WEB前端所发展的方向。做为一个WEB前端人员,必需要时刻关注前沿知识,不然等待的只有淘汰。不过,就我在公司接触的一些项目的统计来看,IE6还是浏览器占有率的大头,超过半数。所以,想迎来全面支持html5/css3的时代,恐怕还是有点遥远。

言归正传,当前关于CSS3,有个挺有名的机器猫测试页面,说测的是不同浏览器对CSS3的支持情况。本民工找来研究了一下,实很大噱头在里面,不知是有意还是无意,造成了在IE各版本下表现不一的状况,好像有点故意打压IE的嫌疑,虽然我也不喜欢IE。其实总的说来,要么就是支持,要么就是不支持,其实FF以及其它webkit内核的浏览器当前也不是真正支持CSS3,而是用各自的私有属性来支持而已。

不过看完之后,突发其想,想画一个QQ企鹅。说干就干,花了半天的时间,我承认也有参考下机器猫的代码,但是这只企鹅在不同浏览器下没有那么多的形态,只有支持与不支持两种。如下:

IE9以下的IE版本,会是左边那种情况;FF以及webkit内核的浏览器会是右边那种情况(opera下没有肚皮上的阴影),当然,版本不要太低。

虽然也没多少技术含量,但原创也辛苦。欢迎朋友们转载,但请标明出处。谢谢!

提示:你可以先修改部分代码再运行。

斜角导航及滑动门的延伸 (2009-11-15)

下面的这两个例子都跟滑动门有关,应该都算滑动门的延伸。

之前有在BI上看到有朋友发过斜角导航,觉得可以有更好的解决方案。但最近都很忙,两个月没有来更新内容了,今天抽了点时间写了个DEMO发上来,自己写的,如果跟哪位高人有雷同的话那纯属巧合咯。也不说太多了,直接发例子了,方法很简单,一看就明白的。有一点要注意了,图片的透明部分需要花点时间来处理了。

提示:你可以先修改部分代码再运行。

其实当真正理解到方法之后,就可以延伸出很多效果出来。比如说下面的这个步骤导航(名字是我随便起的),是我在某个实际项目中用到的一个效果,给大家参考下,其实还能再优化一些的。

提示:你可以先修改部分代码再运行。

a:hover在IE6中的BUG (2009-8-16)

哎,最近工作太忙,都好久没来写点东西了。

这也是最近工作中碰到的一个问题,其实以前也经常碰到过。具体是这样的,有一个图片链接,为了有明显一些的提示效果,需要在鼠标移上去的时候把它放大。按思路来说,其实是很容易的,只要在a:hover img{}里定义鼠标经过时改变图片的大小就可以了。但实际上,在IE6中,a:hover img{}里定义的内容并不生效。

IE6对伪类的支持真的很烂,除了A标签外其它标签都不支持:hover伪类,而偏偏这个唯一支持的a:hover也还有着BUG。解决的方法就是给a:hover {}定义一个属性:

a:hover {zoom:1;}/*这里可以换成其他很多的属性。*/
a:hover img {……}

在网上找出的答案基本上都是这样,的确这样能解决问题,但却都没有说这个BUG到底是为什么。最初我是以为是要触发layout,但经过试验,不能触发layout的属性也能生效,比如说color、border之类的。也就是这一次,我才找到此BUG的原因所在:当a:hover {}的属性跟a {}中的是一样的时候,也就是说a:hover没有发生属性的改变,完全继承a的属性的时候,就会产生此BUG。所以给a:hover {}定义一个属性值就能解决这个问题,至于定义什么值就看具体情况了,至少可以不用zoom这个看起来有hack嫌疑的属性咯。

对CSS渲染效率的一些研究 (2009-7-21)

其实在平时很少注意到CSS渲染效率的问题,不过在很多时候都是细节决定成败,这也是个不容忽视的问题。之前也拜读过网上流传的一篇有关CSS渲染效率的文章,传得太多,也不知原作是谁了。不过并不是太赞同其中的一些观点,所以就本人工作中的一些经验以及看法,说说这个问题,个人观点并非权威,欢迎拍砖。

在这里我们不只是单纯地研究渲染效率的快或慢,应该从一个项目的整体来看。页面渲染的这个过程,是在用户本地进行的,也就是说用户打开页面,载入了HTML代码以及样式表、JS等等相关的文件,浏览器再跟据这些文件把页面渲染出来。关于速度方面,我们更注重的是载入的速度。而渲染速度,的确某些样式的写法会存在渲染速度的差异,但对于当前随便每秒都能运算上亿次的个人电脑来说,把一张背景图平铺100次跟平铺10000次又有多大区别呢?当然,细节,细节决定成败,但细节不等于吹毛求疵,下面说说个人对此侧重点的一些看法。

可能会有影响,但可跟据具体情况忽略的部分
比如说颜色值,color:#F00;、color:#FF0000;、color:red; 这三者都是一样的,至少用人类的感观无法区分其对渲染速度的影响,用简写可能或多或少能减少那么几个字节的体积,不过标准写法是6位大写字符的写法。

display与visibility就不详说了,这本身就是两种不同的表现属性,该用谁就用谁。

注意某些样式的保留属性,比如说:
background:url(image.jpg);这样一句,那么在渲染的时候会默认输出background-color : transparent 、background-attachment : scroll 、background-repeat : repeat 等等属性。在完美主义者的眼里这是对资源的一种浪费,但同样,人类的感观体会不到此影响。其实个人还是认为简写形式有助于减少样式表的体积,而且这也似乎是行内默认的写法了。同样的,border、list-style等也有默认属性,也不用深究了。

背景平铺的问题
对于可平铺的背景来说,很多人喜欢用1px为单位来进行平铺,前面也说了,其实平铺多少次对于个人电脑来说几乎都是一样的,关键在于图片的大小了。对于可平铺的图片,一定范围内的像素值是一样的,所以增大尺寸对于积体的影响并不大,我这里对比了单色1*1跟10*10的图片在jpg跟gif格式下的大小,相差都几有几个字节
sm
其实本人不太建议用1px的图,至少自己在修改的时候无法一眼看出那张图片是什么。而且现在用css sprites也会把可平铺的部分也做进去,这也是对渲染效率的提升了。

再说说会有明显影响的部分
@import 的使用
不建议在页面里使用,他会在页面加载完之后才被加载,有可能使页面闪动或是裸体。如果是样式表过多为了方面管理的话,放在CSS里就好。

某些选择符的使用
渲染的过程也就是对这些选择符的匹配,所以我们可以很容易地理解到,一些比较直接的选择符比如类选择符、ID选择符等的匹配效率高,而一些条件比较繁复点的选择符比如子选择符、属性选择符等的匹配效率相对来就低一些。当所匹配的量比较多的时候,可以明显地感觉到速度的差别。(关于各种选择符,具体可查看CSS手册了)

IE的滤镜
自从标准化的兴起以来,IE滤镜的日子就不好过了,除了不兼容以外,某些滤镜真的蛮耗资源的。现在还在用的可能就是为了处理IE6下图片透明的问题了,建议能不用就不用他吧。

expression的使用
也许这个不能归为渲染的部分,不过他的确相当占资源,如果加得多的话,会让你的页面其慢如牛。

解决IE8的兼容问题,X-UA-Compatible meta标签 (2009-6-9)

IE8来了,于是不少的项目要求中都会增加了兼容IE8这一条,但当前IE8还很不完善,还算是测试版中,之前某些已经兼容的页面,放到IE8中却变得惨不忍睹,相信很多web desginer都有同感吧。还好IE8提供了一个新的标签X-UA-Compatible,它只能被IE8识别,用来设置IE8的兼容性,就好比现在的vista要去兼容一些旧版的程序一样。

网上找到的相关资料基本上都是同一篇译文,也不知最初的译者是谁了,我就直接转载过来啦。

英文原文:http://msdn.microsoft.com/en-us/library/cc288325(VS.85).aspx

前言

为了帮助确保你的网页在所有未来的IE版本都有一致的外观,IE8引入了文件兼容性。在IE6中引入一个增设的兼容性模式,文件兼容性使你能够在IE呈现你的网页时选择特定编译模式。
新的IE为了确保网页在未来的版本中都有一支的外观,IE8引入了文件兼容性。当你引入一个增设的兼容性模式,此文章说明文件兼容性的必要性,列出现有版本IE能使用的文件兼容性模式并示范如何选择特定的兼容性模式。

了解文件兼容性的必要性

每个主要版本IE新增的功能都是为了让浏览器更容易使用、增加安全性及更支持业界标准。以这些作为IE的特色,其中一个风险就是旧版本网站无法正确的显示。

为了将这个风险降到最低,IE6允许网页开发人员选择IE编译和显示他们网页的方式。”Quirks mode”为预设,这会使页面以旧版本浏览器的视点显示,”Standards mode”(也称为”strict mode”)特点是支持业界标准最为完善。然而要利用这个增强的支持功能,网页必须包含恰当的<!DOCTYPE>指令。

若一个网页没有包含<!DOCTYPE>指令,IE6会将它以quirks mode显示。若网页包含有效的<!DOCTYPE>指令但浏览器无法辨识,IE6会将它以IE6 standards mode显示。因为少数网站已经包含<!DOCTYPE>指令,兼容性模式的切换相当成功。这使网页开发人员能选择将他们的网页转移为standards mode的最佳时机。

随著时间经过,更多网站开始使用standards mode。它们也开始使用IE6的特性和功能来检测IE。举例来说,IE6不支持universal selector(即css之全局选择器 * {}),一些网站便使用它来针对IE做特定的对应。

当 IE7增加了对全域选择器的支持,那些依赖IE6特点的网站便无法侦测出这个新版本的浏览器。因此那些针对IE的特定对应无法应用于IE7,造成这些网站便无法如他们预期的显示。由于<!DOCTYPE>只支持两种兼容性模式,受到影响的网站拥有者被迫更新他们的网站使其能支持IE7。

IE8 比之前的任何版本浏览器都更支持业界标准,因此针对旧版本浏览器设计的网页可能无法如预期般呈现。为了帮助减轻所有问题,IE8引入文件兼容性的概念,使你能选择你的网页设计要对应的特定IE版本。文件兼容性在IE8增加了一些新的模式,这些模式能告诉浏览器如何解析和编译一个网页。若你的网页无法在 ie8正确的显示,你可以更新你的网站使它支持最新的网页标准(优先选项)或在你的页面上新增一个meta元素用于告诉IE8如何依照旧版本浏览器编译你的页面。

这能让你选择将你的网站更新支持IE8新特点的时机。

认识文件兼容性模式

IE8支持几种文件兼容性模式,它们具有不同的特性并影响内容显示的方式。
•Emulate IE8 mode指示IE使用<!DOCTYPE>指令来决定如何编译内容。Standards mode指令会显示成IE8 Standards mode而quirks mode会显示成IE5 mode。不同于IE8 mode,Emulate IE8 mode重视<!DOCTYPE>指令。
•Emulate IE7 mode指示IE使用<!DOCTYPE>指令来决定如何编译内容。Standards mode指令会显示成IE7 Standards mode而quirks mode会显示成IE5 mode。不同于IE7 mode,Emulate IE7 mode重视<!DOCTYPE>指令。对于许多网页来说这是最推荐的兼容性模式。
•IE5 mode 编译内容如同IE7的quirks mode之显示状况,和IE5中显示的非常类似。
•IE7 mode编译内容如同IE7的standards mode之显示状况,无论网页是否含有<!DOCTYPE>指令。
•IE8 mode提供对业界标准的最高支持,包含 W3C Cascading Style Sheets Level 2.1 SpecificationW3C Selectors API,并有限的支持 W3C Cascading Style Sheets Level 3 Specification (Working Draft)
•Edge mode指示IE以目前可用的最高模式显示内容。当使用IE8时其等同于IE8 mode。若(假定)未来放出支持更高兼容性模式的IE,使用Edge mode的页面会使用该版本能支持的最高模式来显示内容。同样的那些页面在使用IE8浏览时仍会照常显示。

由于edge mode使用该IE版本所能支持的最高模式来显示所浏览的网页内容,建议仅使用于测试页及其他非商用页面。

指定文件兼容性模式

要为你的网页指定文件模式,需要在你的网页中使用meta元素放入X-UA-Compatible http-equiv 标头。以下是指定为Emulate IE7 mode 兼容性之范例。

1
2
3
4
5
6
7
8
9
10
<html>
<head>
  <!-- Mimic Internet Explorer 7 -->
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  <title>My Web Page</title>
</head>
<body>
  <p>Content goes here.</p>
</body>
</html>

其内容随著指定的页面模式而更改,当要模拟IE7时,指定IE=EmulateIE7,指定IE=5, IE=7, 或IE=8来选择其中一种兼容性模式。你也可以指定IE=edge来指示IE8使用它支持的最高模式。

X-UA-compatible标头没有大小写之分。然而除了title元素及其他的meta元素之外,它必须出现在网页header节其它元素之前的位置。

设定网站服务器以指定预设兼容性模式

网站管理员可籍着为网站定义一个自订标头来为他们的网站预设一个特定的文件兼容性模式。这个特定的方法取决于你的网站服务器。举例来说,下列的web.config文件使Microsoft Internet Information Services (IIS)能定义一个自订标头以自动使用IE7 mode来编译所有网页。

1
2
3
4
5
6
7
8
9
10
11
<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <clear />
        <add name="X-UA-Compatible" value="IE=EmulateIE7" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
</configuration>

若你已于网站服务器指定了一个预设的文件兼容性模式,你可以在个别页面上指定不同的文件兼容性模式来盖过它。在网页中指定的模式优先权高于服务器中所指定的模式。

请查阅你的网站服务器关于指定自订标头的资讯,或看更多资料:
Implementing the META Switch on Apache
Implementing the META Switch on IIS

判定文件兼容性模式

要判定网页使用IE8浏览时的文件兼容性模式,使用document object(文档对象)的documentMode功能。例如在IE8的网址列输入下列程式码会显示目前页面的文件模式。

javascript:alert(document.documentMode);

documentMode功能会回传一个数值对应目前页面的文件兼容性模式,举例来说,若网页指定为支持IE8模式,documentMode便会回传值”8″。

在IE6引入的compatMode功能不支持在IE8引入的documentMode功能。目前使用compatMode建立的应用程式还能在IE8中作用,但它们必须更新为使用documentMode。

若你希望使用JavaScript判定一个文件的兼容性模式,引入下面范例的这段程式码可支持旧版本的IE。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
engine = null;
if (window.navigator.appName == "Microsoft Internet Explorer")
{
   // This is an IE browser. What mode is the engine in?
   if (document.documentMode) // IE8
      engine = document.documentMode;
   else // IE 5-7
   {
      engine = 5; // Assume quirks mode unless proven otherwise
      if (document.compatMode)
      {
         if (document.compatMode == "CSS1Compat")
            engine = 7; // standards mode
      }
   }
   // the engine variable now contains the document compatibility mode.
}

认识内容属性值

内容属性值在接收到异于先前叙述的数值时是具有弹性的。这能使你对于IE如何显示你的网页更有操控性。举例来说,你可以设定内容属性值为IE=7.5。当你这样做的时候,IE尝试将这个值转换为version vector并选择最接近的结果。在这个例子中,IE会将其设定为IE7 mode。下面的范例显示该模式设定为其他值的状况。

1
2
3
4
5
6
7
8
<meta http-equiv="X-UA-Compatible" content="IE=4">   <!-- IE5 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=7.5"> <!-- IE7 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=100"> <!-- IE8 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=a">   <!-- IE5 mode --> 
 
<!-- This header mimics Internet Explorer 7 and uses 
     <!DOCTYPE> to determine how to display the Web page -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

注意: 前面的范例显示单独的内容值。实际上IE只会执行网页中第一个X-UA-Compatible标头。

你也可以使用内容属性来指定复数的文件兼容性模式,这能帮助确保你的网页在未来的浏览器版本都能一致的显示。欲设定复数的文件模式,请设定内容属性以判别你想使用的模式。使用分号来分开各个模式。

如果一个特定版本的IE支持所要求的兼容性模式多于一种,将採用列于标头内容属性中最高的可用模式。你可以使用这个特性来排除特定的兼容性模式,虽然并不推荐这样做。举例来说,下列标头即会排除IE7 mode。

<meta http-equiv="X-UA-Compatible" content="IE=5; IE=8" />

结论

兼容性对于网页设计师来说是非常重要的顾虑。虽然最好是可以建立一个完全不需依赖任何网页浏览器特性或功能的网站,有时候这是不可能实现的。文件兼容性模式便能将网页限制在某个特定版本的IE中。

使用X-UA-Compatible标头来指定你的页面支持的IE版本。使用document.documentMode判定页面的兼容性模式。

选择支持某个特定版本的IE,你可以确保你的页面在未来的浏览器版本中也能有显示的一致性。

一道看似简单的面试题 (2009-6-1)

曾经做过一么一题面试题,大体上的要求是这样的:一个新闻列表,日期要紧随标题之后,标题太长时可以自动隐藏,但日期要显示完整。

e69caae591bde5908d

就这么个题目,看起来似乎很简单,但做起来似乎就没那么简单了。因为这里要求是时间紧随标题之后,如果是时间右对齐的话,相信大多数人片刻就能搞定。有兴趣的朋友不妨先不看下面的源码,自己做做试试。

因为日期是跟在标题后面的,所以这里要用内联标签,但这会在自动隐藏标题的时候出现问题。最后,想到了一种特殊的处理方法。外框的宽度比如说是300px,那么就把ul的宽度定为240px,然后通过绝对定位把日期从文档流中拖出,这时当标题达到ul的宽度的时候将之隐藏,而日期因为浮动而跟随其后,就达到所要的效果了。

PS:原来没有考虑到opera的兼容,现已修正,不过用了hack,暂时没想到好方法了。

提示:你可以先修改部分代码再运行。