CSS
关注
分享
扫一扫
iteye_19872
这个作者很懒，什么都没留下…
展开
-
IE神经刀
我想，你可能已经知道长期以来使用自定义标签的困难是什么。对，就是IE。它认不出未由html定义的标签。它会把xxx解析成三个node！这样你当然无法对它正常使用DOM操作。你也无法对其进行style，因为CSS认不出它。这也阻止我们实现HTML5或者其它的markup（假如我们不愿意等待5年后IE8变成主流浏览器或者10年后IE浏览器的市场份额降到5%以下的话）。但是，IE是如...2008-02-01 15:13:34 · 95 阅读 · 0 评论 -
《精通CSS》读书笔记（七）
续上篇在第5章的最后，作者对dl做了简短的说明，作者不是很赞同对dl的扩展定义。虽然我也认为后面那些链接给出的文章里，对dl的衍生使用有些过度了，但是dl确实没有得到很好的运用。这源于html规范对其定义的不清不楚。怎样算是term/description呢？HTML4中还说：Another application of DL, for example, is for marking up...2007-09-05 02:37:50 · 116 阅读 · 0 评论 -
有关IE的CSS的几个偶得
除了个别几个CSS属性，IE（包括IE7）并不支持一般性的inherit关键字。虽然有些属性可以有等价的方式，比如大多数length类型都可以用100%来达到与inherit等价的效果。下面是一种模拟inherit的方法：selector { css-prop:expression(parentNode.currentStyle.cssProp) }关于使用expres...2008-08-25 19:13:17 · 86 阅读 · 0 评论 -
Meta CSS —— 一个Anti Pattern的典型
关于Meta CSS框架，可以看[url]http://www.fangyuqiang.com/metacss[/url]，或者JavaEye上的[url=http://www.iteye.com/news/10843-metacss-css-framework]新闻[/url]或[url=http://www.iteye.com/topic/494214]论坛良好贴[/url]（实际上在还没有产...2009-10-21 02:15:55 · 182 阅读 · 0 评论 -
关于样式类（Style Class）
我们知道HTML和CSS是[url=http://en.wikipedia.org/wiki/Orthogonality#Computer_science]正交[/url]的。这意味着可以分离内容结构（html文档）与外观样式（stylesheet）。尽管是分离，但是最终页面的呈现需要把两者结合起来。这个结合机制就是selector。在基本selector中，tag和id是天然语义化的。问...2009-10-22 11:37:46 · 637 阅读 · 0 评论 -
像素（px）到底是个什么单位
px，对于许多网页设计者来说，是最常用的CSS长度单位。然而，1px到底多长，恐怕没有多少人回答得上来。CSS长度本身有绝对长度和相对长度的区分。cm、pt之类的都是绝对长度，它们是物理长度——1cm是1/100米，而1米则大约是光在1秒钟内跑过距离的3亿分之一。（至于光速和1秒的精确值到底是多少，请查阅维基百科[url=http://zh.wikipedia.org/wiki/光...2009-04-25 01:46:29 · 3940 阅读 · 0 评论 -
document.enableStyleSheetsForSet() 的兼容
可能有不少同学已经了解 alternate stylesheet ，不过实际上author样式表可以被设定为三类：1. persistent style sheet：总是应用的样式表2. preferred style sheet：默认应用的样式表3. alternate style sheet：其他可选的样式表我们平时通常写的样式表都是第一类，即persistent st...2011-06-17 16:27:57 · 135 阅读 · 0 评论 -
webkit上multicolumn的bug和解决技巧一则
webkit开始支持多栏属性。如：[code="css"]section { display: block; height: 300px; -webkit-column-width: 200px; -webkit-column-gap: 50px;}[/code]我们设定了固定高度，然后分栏，每栏200px宽，每两栏间隔50px。如果内容较多，则...2010-12-04 12:03:23 · 180 阅读 · 0 评论 -
再谈某些所谓CSS最佳实践
最近看了国内某位前端工程师今年出版的新书，其中讨论CSS的部分提出了一些观点，罗列如下：1. 用class命名表现从属关系，如.myList-lastItem（表示.myList列表中的最后一项）；2. 团队开发中用工程师名字作为前缀区分是谁写的样式，如.hax-list（表示是hax写的一个样式规则）；3. 前两者结合可能产生较长的class名，如hax-subNav-item-...2010-12-23 01:59:12 · 120 阅读 · 0 评论 -
My Opinion about so-called "CSS Framework"
There are many so-called "CSS frameworks" in the wild,some are even open source.But in general, I don't buy it.UI sample/guidelines VS codebase/implementation1) As UI sample/guidelines...2012-10-27 12:54:43 · 126 阅读 · 0 评论 -
ms is wrong AGAIN
微软的Web工程师写了这篇文章[url=http://blogs.msdn.com/b/thebeebs/archive/2012/01/11/with-vendor-prefixes-what-is-the-javascript-equivalent-of-ms.aspx]Vendor Prefixes and JavaScript[/url]，文中写道：[quote]In Intern...2013-12-06 21:08:02 · 192 阅读 · 0 评论 -
IE中IMG元素上应用padding的奇特bug
最近又（又说了“又”）发现了一个IE的奇特bug。我们知道，在IE的怪癖模式（quirk mode）下，元素会忽略所设定的padding。而在标准模式下，则会有padding。问题是，IE所表现出来的情况说明，整个IE的开发，大量的问题不是从认真修复和从根本上重构，而貌似是不断patch。举一个例子。最初IE就具有一个bug，即操作scrollbar，会导致控件（如inpu...2007-09-02 23:43:28 · 165 阅读 · 0 评论 -
关于list（ol和ul）的padding和margin
在《CSS Mastery》一书的第5章中，作者说IE和Opera使用margin-left来缩进列表，而Safari和Firefox使用padding-left。经过我的实际测试，发现Opera 9（我实测的是Opera 9.23）同FF和Safari一样，也是使用padding-left的。更精确的说，它们的默认样式应该是：ol, ul { padding-left:40px; }...2007-09-02 19:08:22 · 503 阅读 · 0 评论 -
《精通CSS》读书笔记（六）
续[url=http://hax.iteye.com/blog/117569]上篇[/url]。第5章关于列表，首先，由于list-style-image的位置各个浏览器实现的不一致，而且缩进使用padding或margin的不一致，所以本书后面的例子几乎完全抛弃了list-style，将padding和margin一律重置为0，然后从头重新定义。BTW，关于列表缩进应该使...2007-08-29 20:22:00 · 130 阅读 · 0 评论 -
Web未来的分歧
Dean Edwards的[url=http://dean.edwards.name/weblog/2008/01/quotes/]新的一篇blog[/url]是几段引用，抄录并勉强翻译如下：[quote="Dean Edwards"][quote="微软的Chris Wilson"] ..we worked together with The Web Standards Projec...2008-02-09 05:41:56 · 94 阅读 · 0 评论 -
版本、兼容性以及标准（翻译）
本文译自Maciej Stachowiak在webkit团队blog上的文章[url=http://webkit.org/blog/155/versioning-compatibility-and-standards/]Versioning, Compatibility and Standards[/url]。本文可作为分歧巨大的“HTML的版本问题”的背景材料，对此问题的探讨也请[url=htt...2008-02-10 06:03:42 · 188 阅读 · 0 评论 -
版本、兼容性以及标准 续（翻译）
续[url="http://hax.iteye.com/blog/161796"]前半部分[/url]。[b]Commitment to Standards and Interoperability对于标准和互操作性的承诺[/b]Yet another reason we feel more mode switches are not a good idea for WebKi...2008-02-10 19:40:38 · 118 阅读 · 0 评论 -
关于竖线分隔的CSS trick
Taobao UED blog 上，刊载了[url=http://ued.taobao.com/blog/2007/08/12/css-notes/]段王爷的css日记一篇[/url]，我上去留言引起了一些讨论，记录于此。段王爷的原文（摘录）[quote]现在就来说个淘宝首页上的一个小技巧。类目之间的横线从很久很久以前开始，类目间的横线无非都只有三种。1、背景图...2007-08-13 14:40:15 · 1446 阅读 · 0 评论 -
《精通CSS》读书笔记（一）
最近[url=http://hax.iteye.com/blog/114148]新添16本书[/url]，目前开始看陈剑瓯翻译的《精通CSS——高级Web标准解决方案》（Andy Budd, CSS Mastery -- Advanced Web Standards Solutions）。以下是读书笔记。首先，挺遗憾的是，除了封面上译者名字外，就完全看不到跟译者有关的东西，没有译者...2007-08-21 16:30:21 · 195 阅读 · 0 评论 -
《精通CSS》读书笔记（二）
续[url=http://hax.iteye.com/blog/114914]上篇[/url]。第2章box model译作“框模型”，我是始作俑者（大约在2003年，在opendl.com的w3c翻译讨论区中提出）。绝大多数是译作“盒模型”。当然据说之前就有人译为“框模型”，但是至少本书的译者估计或多或少受到了我的影响。因为[url=http://blog.csdn.net/tu...2007-08-22 16:01:00 · 153 阅读 · 0 评论 -
关于background-position
最近在作[url=http://hax.iteye.com/blog/114914]《精通CSS》读书笔记[/url]，写到第3章关于背景的时候，顺便补充一点关于background-position的问题。CSS1和CSS2.1（依照目前浏览器普遍的实现方式）有差异。CSS1规范中，背景位置是content区域算起，而CSS2.1中是padding区域算起。实际上在CSS3的backgr...2007-08-27 11:51:22 · 86 阅读 · 0 评论 -
《精通CSS》读书笔记（三）
续[url=http://hax.iteye.com/blog/115026]上篇[/url]。第3章这一章里展示了众多的trick。下面总结和补充一下方案实现和限制条件。首先是针对永恒的话题：圆角框。1. 固定宽度圆角框实现：在外层元素（容器）上设定背景色和底部圆角图，在标题（内部第一个元素）上设定顶部圆角图。限制：* 宽度是定值像素的。*...2007-08-27 17:08:09 · 106 阅读 · 0 评论 -
《精通CSS》读书笔记（四）
续[url=http://hax.iteye.com/blog/117219]上篇[/url]。下面来看一下阴影。它可以用类似圆角border的方式达成。1. 简单的CSS阴影和Clagnut阴影实现：在外层wrapper上将阴影图设为背景。元素本身通过margin或者相对定位做向左上方的偏移（以展现右下方向的阴影）。限制：* 阴影元素需要一个外层的wrappe...2007-08-27 17:49:58 · 153 阅读 · 0 评论 -
《精通CSS》读书笔记（五）
续[url=http://hax.iteye.com/blog/117241]上篇[/url]。第4章本章讨论了链接上的样式。关于A上伪类的顺序，应按照LoVeHAte（Link Visited Hover Active）。此外，关于链接伪类补充如下：根据CSS21，link和visited伪类是互斥的，也就是*:link:visited不可能选择到任何元素...2007-08-28 16:06:11 · 111 阅读 · 0 评论 -
为后代选择器和ID选择器而辩护
【本文译自 Zeldman （作为前端工程师，不要告诉我你不知道他是谁）在2012年11月写的《[url=http://www.zeldman.com/2012/11/21/in-defense-of-descendant-selectors-and-id-elements/]IN DEFENSE OF DESCENDANT SELECTORS AND ID ELEMENTS[/url]》。】...2013-04-20 06:57:18 · 215 阅读 · 0 评论