影响CSS渲染速度的写法与建议

现在是凌晨12:00,刚看完一篇关于“提高网页在客户端浏览器的渲染速度的CSS部分”的文章,蛋壳比较赞同的有2条,也在此跟大伙分享一下:

1、*{}   尽量避开 星号通配符

由于不同浏览器对HTML标签的解释有差异,所以最终的网页效果在不同的浏览器中可能是不一样的,为了消除这方面的风险,设计者通常会在CSS的一个始就把所有标签的默认属性全部去除,以达到所有签标属性值都统一的效果。所以就有了*通配符。*会遍历所有的标签;

*{margin:0; padding:0} 

如果这样写,页面中所有的标签的margin全是0;padding也是0;

#idname *{margin:0; padding:0}

如果这样写,在id等于zishu下边的所有标签的margin全是0;padding也是0;

这样写的问题是:

继续阅读“影响CSS渲染速度的写法与建议”

收藏:IE与Firefox的CSS兼容大全

这篇文章忘记是什么时候收藏到QQ记事本里的了,今天偶然翻出来,觉得自己一路走过来,在前端开发方面,这篇文章确实帮了不小的忙。虽然文章有点老,但是对于刚学习DIV+CSS的新手绝对是良师。

里面提到的FF:既是Firefox浏览器 IE:(这个地球人都知道吧)

先来个杀手锏:

解决IE6、IE7、Firefox兼容最简单的CSS Hack

#someNode
{
    position: fixed;
   #position: fixed;
   _position: fixed;
}

  • 第一排给Firefox以及其他浏览器看
  • 第二排给IE7(可能以后的IE8、IE9也是如此,谁知道呢)看
  • 第三排给IE6以及更老的版本看
  • 继续阅读“收藏:IE与Firefox的CSS兼容大全”

    发现:Google Chrome 浏览器的过人之处

    Google Chrome 发布后,这几天一直在用它,因为速度快,界面简洁。但只是做辅助浏览,因为没有了插件,像Google的书签是我经常用的。所以还得以火狐为主。

    今天做页面偶然发现在Google Chrome里浏览页面里的非原始大小图片的时候,竟然没有出现以往会出现的边缘锯齿。同时打开IE、火狐,对比了一下,Google Chrome里的效果竟然表现的如此完美。实在是太帅了,不过这也没有什么值得欣喜的,因为主流浏览器还是IE。

    只是在想,为什么Google Chrome能做到这点,而那些先驱没有想到。大家可以亲自对比一下,以免是我看走了眼。呵呵……

    其实图片以非原始大小显示的问题肯定困扰着很多人,特别是做图片站的站长们,得手动或者程序把1张图片裁剪出好几类的缩略图。大大浪费了资源。

    下面附图做一下对比:

    2

    未标题-1

    我为了方便就截了一下我页面里用的图,如果是人像的话,可能对比会更强。

    META 标签的 NAME 属相详解

    Meat标签是用来在HTML文档中模拟HTTP协议的响应头报文。

    Meta标签用于网页的<head>与</head>中,Meta标签的用处很多。

    Meta标签的属性有两种:Name和http-equiv。

    name属性主要用于描述网页,对应于content(网页内容),以便于搜索引擎机器人查找、分类(目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类)。这其中最重要的是description(站点在搜索引擎上的描述)和keywords(分类关键词),所以应该给每页加一个meta值。比较常用的有以下几个:

    Name 属性

    继续阅读“META 标签的 NAME 属相详解”