Posts Tagged ‘css’

overflow与position是两种不同的人生境界(附多栏等高的实现)

catge Posted in Life,Tags: ,
8

这个姑且算是最近看《德道经》的偶悟吧。

先说问题。Twitter相信大家都知道,或者国内的QQ微博、新浪微博。一般页面宽度800px,两栏。左右“内容等高”,这里要打个引号。右栏一般是带色的,左栏则为白底,看起来是等高。

虽然大多数情况下左高>右高,但如何确保万无一失,实现两栏自适应等高呢?先来看看各大网站的实现,知己知彼才能百战不殆。

1、Twitter。X!居然是用table实现的- -。在这个号称div+css满天飞的Web2.0时代,他们居然用这么老土的table?!然而正如《德道经》里讲到,天为乾,地为坤,天地中和乃生万物。”土“是一种返璞归真的精神。成语”出生入死“讲得就是”入土为安“的道理。人家用table自然有他自己的道理,语义化上table用来呈现数据也说得过去,毕竟人家是这么大的一个平台,还得考虑兼容性,当然最初的原因是否是为了实现这个左右栏等高也说不定(偷笑),所以都说twitter网站做得烂。

2、QQ微博。用了个偷鸡取巧的方法。在父容器#mainWrapper上加了个居右、纵轴平铺的bg,既然是repeat-y,干嘛图片要210*49这么奇怪的宽高?还好用的是data-uri省了个http request,要不猫哥就要BS它了。

3、新浪微博。对新浪有偏见,懒得说它,我是力顶三表哥的。

这里引入一个通过纯CSS的实现方法,这种负边距的方法当然不是猫哥发明的,我也是从这里看到的。这里顺带说下CSS布局的话,推荐射雕同学的系列文章,很详细了。

废话少说,直接移步去看DEMO,右键查看下源代码。

在DEMO上如果注意看的话会发现有一句

#content{overflow:hidden}

实现这个效果,就得在他们的父容器上加上overflow:hidden,这样才能把难看的长尾巴遮住。忽然就想起小高、干干、欣欣他们刚入职的时候,给他们讲过一节CSS的中级(不是终极)培训。我说,如果遇到IE下奇怪的样式兼容性BUG,排名第二的来个overflow:hidden试试(排名第一的是zoom:1)。这句话是我的经验之谈,而且大多数情况下还挺管用。

然而今天在我写下这段代码之后,结合之前看的那一点点《德道经》的内容,我忽然意识到overflow:hidden是一个巨大的阴谋。它让一些本来存在的事物,不被外界所知道,它把一些充满活力的元素限制在一个死死的条框中,让这块土地死气沉沉。《国语·周语上》有云“防民之口,甚于防川,川壅而溃,伤人必多,民亦如之。是故为川者,决之使导;为民者,宣之使言。”

twitter上刚刚看到@fenng同学说自己已经离职支付宝,祝愿他前程似锦。在我看来,主动选择离职创业的人,都是勇敢的。想起昨晚半亩地吃饭,送走一位即将去美利坚合众国求学的友人。相信他的世界已经不再是overflow:hidden,而是position:relative。正如本文中的配图,风筝是一个absolute的元素,它飞得再高再远,对于线另一头的主人来说,永远联系牵挂在心。

overflow与position是两种截然不同的修身、治国(管理)、平天下的人生境界。就算没有鲲鹏展翅那般注目,一只苍蝇至少有一双可以自由飞翔的翅膀。

《CSS禅意花园》studyNote

catge Posted in Share,Tags:
5

    最近太忙,所以一直没有来得及补上这篇日志。可是拖的时间越长越容易遗忘自己的感想,这么一本经典的书籍,我想还是应该趁早说两句。

    整本书围绕着一个叫做“CSS禅意花园”的网站展开,其实N久之前我在一份外国的关于CSS的在线教程上看到了这个网站的链接,可惜进去之后发现内容和CSS并没有关系,所以也就没有在注意。直到我拜读了蓝色经典推荐的这本《CSS禅意花园》之后,我才意识到这个花园的强大之处。

    网站的初衷是鼓励大家从TABLE布局模式换到CSS布局模式,这个网站只有一份严谨的XHTML文档,但是有成百上千个各式各样的CSS样式文件,当你发现这份简单的XHTML文档通过换样式表能够呈现出各式各样另人惊奇、瞠目结舌的效果之后,你才会意识到这个网站的强大之处,意识到CSS布局的强大之处。

    任何人看完这本书都能从某一点或者某几个方面获取到自己所不了解或不熟悉的知识。全书通过一个个世界顶尖WEB设计师的作品,分别阐述了“设计”、“正文布局”、“图像”、“文字排印”、“特效”、“重构”这六大方面的设计要点。它虽然包含一些CSS应用的技巧,但是这些内容不多,并且很可能你之前都已经了解了。然而更多的是一种设计理念的内容,为什么要这样设计?这样设计能够传达出作者怎样的一种思想?怎样将这些想法通过CSS来实现?

————————————————————————- 

我从这本书上学到的大概有以下几点:

1、使用@import语句引入外部样式表,可能会在IE6中出现“无样式内容瞬间”现象,可以通过使用link链接样式表,或者在页面上添加script元素来避免这个问题。HTML文档中几乎可以不用考虑用@import导入样式表的方法,因为这种方法是为了兼容Netscape Navigator 4,而这种浏览器几乎绝迹。

2、应用到body元素上的id叫做“CSS签名”,通过它的作用我们可以覆盖页面中部分甚至所有CSS样式。如,body[id=css-zen-garden] a:link {color: #f90;},通过这样的方法可以使支持CSS属性选择器的浏览器呈现完全不同的更经典的效果。

3、如果只是通过改变颜色来标注链接的话,你要考虑到那些色盲用户怎么办?所以做好的方法还是遵循给链接加下划线的用户习惯。链接规则的顺序可以通过“LoVe/HAte(爱/恨)”方法来记忆,依次为:link、visited、hover和active。

4、只在必要的时候才使用img标签,通常情况下使用背景图片的方法更方便于CSS布局。

5、为元素应用内边距或边框来避免外边距重叠现象

6、居中的方法有四种:自动外边距实现居中、text-align实现居中、组合使用自动外边距和文本对齐、负外边距解决方案。(个人认为第一种和第四种最好,P86)

7、绝对定位与相对定位的区别在于:绝对定位的元素独立于文档流,而相对定位的元素原来所在地方依然占据一定的文档空间。

8、使用负text-indent属性值的方法,将文本推到屏幕的左边缘之外,从而使屏幕阅读器可正常访问,同时不影响图片浏览,但当图像禁用后用户依然无法看到内容。(本书提供了其他更有效的解决方法,但我认为不够优雅,P125)

9、从低品质到高品质的压缩方法能更容易的在图像文件大小和品质上找到一个平衡点。

10、font-style属性:inherit:使本段文字的字体姿态和父元素的一致;italic:一种在常规字体基础上做过特殊设计的变体,一般带有手写风格;oblique:常规字体有浏览器做倾斜处理后的版本。和italics不同的是,oblique字体并不出自另外设计的变体,而仅仅是常规字体应用倾斜效果的结果。

11、通用字体族:serif字体都有明显的装饰钩,所以在字母笔画的结尾处大都能看到细小的衬钩,如Times New Roman,Georgia和Garamond;sans-serif相对于serif,它没有装饰钩,如Arial,Helvetica,Futura和Lucida Sans Unicode;monospace字体的每个字母都有相同的宽度,与"i"与"m"宽度是相同的,该类字体一般用于显示程序代码,如Courier(Courier New),Monaco和Andale Mono;fantasy完全是装饰用字体,该类字体数量N多,多用于标题,如Impact和Papyrus。选择CSS字体组合的时候,最好选择具有相同x-height(小写字母去除高出部分和低出部分后的高度,通常就是小写的x字母的高度)的字体,他们具有较好的相似性。

12、line-height的值不需要单位,1.2=1.2em。

13、使用!important来声明不允许被覆盖的规则,如h3{color:red !important;},但由于IE不支持它,所以现在更多的是作为CSS HACK来使用。

14、通过GIF棋盘图案方法可以模拟50%半透明效果(P208)。

15、用CSS创建动态下拉菜单的方法(P213),当然能实现这种效果的只有支持所有元素:hover伪类的浏览器(IE不支持),CSS3则能实现更复杂的效果。

16、使用Offset滤镜可以解决背景图片重复时衔接不够良好的问题。

17、尝试减少百分比值。浏览器计算的舍入误差有时会让50%+50%等于100.1%,导致布局被破坏。这时请尝试略为减少百分比的值,例如将50%改为49.9%。

18、用明显的边框辅助调试布局。div{border:solid 1px #f00;}之类的全局规则可以帮助检查出很多细微的布局差错。为某个特定的元素加上边框也便于找到一些难以发觉的元素重叠或多余空白问题。

19、指定图片路径时不要使用单引号。设置背景图片时的引号并不是必须的,如果使用了单引号那么苹果机上的IE将无法正确加载。所以要么用双引号,要么就不用任何引号。

20、如果代码中使用了传统的锚点(如<a name="anchor">),将发现:hover和:active伪类的样式也会应用于其上。我们可以使用独一无二的id(如<id="anchor">),或是一种鲜为人知的奇怪语法:link:hover和:link:active来避免这种情况。

21、Position Is Everything上有很多布局问题、浏览器缺陷的解决方法:http://www.positioniseverything.net/

————————————————————————

    如果你在WEB设计过程中对平面设计方向更感兴趣,这本书无疑是个很好的选择,但如果只是想看一些CSS技巧,而且是技术含量要求比较高的,这本书上没有多少。你看到的更多的是作者对IE浏览器的永不知疲倦的牢骚,这也是我认为这本书唯一的一点瑕疵。

    正如我的个性签名里说的,如果我们做WEB设计的整天都在对IE浏览器支持CSS的缺陷大发牢骚绝对不是一件明智的选择。毕竟我们的用户中大部分人都在使用IE,我们可以选择自己更喜欢的“更高级的浏览器”,但是更重要的是要考虑到大多数用户的需求。尤其是在中国,IE无疑占了绝对的领导地位。现在IE7基本已经修复了IE6中所有的CSS BUG,甚至还支持了PNG格式图片。我相信若干年后,浏览器必定能够更加的统一和规范,而我们现在所津津乐道的一些CSS HACK技巧无疑将会被历史遗弃。

    而真正永恒的便是这本书教会我们的,对设计的一种热爱与思考。

在线CSS优化工具的比较与手动CSS优化技巧

catge Posted in Share,Tags:
0

这几天一直在优化HUB系统的模板代码,可能我这个人“洁癖”比较严重,看到那多不规范的代码(用XHMTL检测器检查,其中有个页面高达465个错误!),恨不得全部用DIV+CSS重新设计。。。

代码的优化有很多方面,CSS优化也是其中的一种,这里的CSS优化主要是讲CSS缩写优化,如果是查错,可以去这里。下面就探讨一下CSS优化

首先介绍几款常用的在线CSS优化工具,以下是我根据一份5.124KB大小的CSS样式表(好像这份样式表还存在些错误- -!)测试的结果:

 

几款在线CSS优化工具的比较
名称 最高优化率 最低优化率 是否支持GB2312 辅助选项
Clean CSS 26.1% 26.1% 丰富
CSS optimizer 37.5% 37.5% 删除换行
CSS drive 15% 7% 删除注释
Ebiene.de 18% 3%
CSSTweak 12% 12%

 PS:其中Clean CSS比较有名,网上也有不少它的中文版,比如说csscool

 

下面这个是从阿捷那转来的《常用CSS缩写语法总结》 :

颜色

16进制的色彩值,如果每两位的值相同,可以缩写一半,例如:
#000000可以缩写为#000;#336699可以缩写为#369;

盒尺寸

通常有下面四种书写方法:

  • property:value1; 表示所有边都是一个值value1;
  • property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
  • property:value1 value2 value3; 表示top的值是value1,right和left的值是value2,bottom的值是value3
  • property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left

方便的记忆方法是顺时针,上右下左。具体应用在margin和padding的例子如下:
margin:1em 0 2em 0.5em;

边框(border)

边框的属性如下:

  • border-width:1px;
  • border-style:solid;
  • border-color:#000;

可以缩写为一句:border:1px solid #000;

语法是border:width style color;

背景(Backgrounds)

背景的属性如下:

  • background-color:#f00;
  • background-image:url(background.gif);
  • background-repeat:no-repeat;
  • background-attachment:fixed;
  • background-position:0 0;

可以缩写为一句:background:#f00 url(background.gif) no-repeat fixed 0 0;

语法是background:color image repeat attachment position;

你可以省略其中一个或多个属性值,如果省略,该属性值将用浏览器默认值,默认值为:

  • color: transparent
  • image: none
  • repeat: repeat
  • attachment: scroll
  • position: 0% 0%

字体(fonts)

字体的属性如下:

  • font-style:italic;
  • font-variant:small-caps;
  • font-weight:bold;
  • font-size:1em;
  • line-height:140%;
  • font-family:"Lucida Grande",sans-serif;

可以缩写为一句:font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

注意,如果你缩写字体定义,至少要定义font-size和font-family两个值。

列表(lists)

取消默认的圆点和序号可以这样写list-style:none;,

list的属性如下:

  • list-style-type:square;
  • list-style-position:inside;
  • list-style-image:url(image.gif);

可以缩写为一句:list-style:square inside url(image.gif);

———————–华丽的分割线—————————–

      貌似这些优化工具在优化的时候,会通过删除注释、删除缩进、缩写RGB值、0px变换成0,这些方法来进行压缩优化。看来以上这些缩写方法还是十分有必要通过手动掌握的