存档
IE6的十个bug的Fix方案，看到一篇文章整理了一下，顺便转过来备忘一下。 原文链接 http://www.sitepoint.com/blogs/2009/03/06/10-fixes-for-ie6-problems/ 1. 强制浏览器是用Web标准解析 HTML的写法 1 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 或者XHTML的写法 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2. Set Position: relative 给元素指定Position: relative能够解决很多奇怪的问题，比如对齐和显示不正确等。对于Position的属性要小心设置，特别是设为absolute。 3. 给Float的元素加上inline属性避免双倍margin 这大概是最著名的一个bug了，IE6下对于浮动元素，会莫名其妙的双倍空白边，解决的方法也很莫名，设上display:inline属性就好了，对于float元素这个属性本身没有任何意义。 4. 给特定元素加上hasLayout属性 很多IE6（甚至是IE7）的问题可以通过设置hasLayout这个ie only的内部属性来解决，比如让a这样的行级元素变成块级元素或者让元素应用透明效果。但这个属性并不能直接设置。最简单的让元素拥有hasLayout属性的方法是显式的为其设置高度或者宽度。有的时候，你不能显示的为其设定高度，可以使用设置高度为1%，而其父元素如果没有确定的高度时，该设置不会被应用到实际的高度上，但是hasLayout会被激活。 5. Fix字符重复bug 这是IE6上面一个非常奇怪的BUG，他的触发条件也是相当诡异，在浮动元素间如果有 <!– comment –> <!– comment –> <!– comment –> 这样的普通的HTML注释的话，会导致Float元素中的最后的字符会很诡异的出现在后面的clear元素中，具体的介绍大家可以看这里 positioniseverything 。 解决的方法也很奇怪 [...]
SmashingMagazine今天给我们带来了一篇非常全面的汇总，介绍了50个超级有用的CSS开发工具，其中相当多的小工具都是让我觉得非常有帮助的，甚至有了做几个中文版的念头，虽然C2C(Copy to China)的习惯并不是那么好，但是有的时候真的觉得在每日奔波，与CPI抗争的局势下，要有点创新的主意真的很难。 闲言少叙，让我们开始惊艳之旅，要先说明一下，”Firebug” 和 “WebDeveloper” 两位同学将缺席本次颁奖活动，因为他们实在太出名了。 CSS and Typography Hyphenator Hyphenator.js解决了西方语言断词的问题，给行尾换行的单词加上了“-”连字符。相信很多程序员都被QA报过这样的defect，新建一条数据，有个column是afsafdsafsadfsafsafafsafasfsa，然后说页面被撑破。总是被我无情的Won’t Fix。实在不行了word-break一把。中文不会遇到这个问题。有兴趣的你去看一下。 CSS Type Set 貌似被墙了，有兴趣的翻出去看看 Typechart 快速浏览，比较各种不同的文字排版样式，（如果可以通过上传css文件来快速预览，倒也是个不错的idea） CSS-Typoset Matrix and code generator 快速生成最常用的一些Tag的字体大小设定，由Px转换到Em尺寸上，可以比较完美的做到文字缩放。 body { font: normal 0,8764em/1.5em Arial,Verdana,sans-serif; } html>body { font-size: 14px; } p { margin: 1.5em 0; font-size: 1em; line-height: 1.5em; } h1 { margin: 1.05em 0; font-size: 1.4286em; line-height: 1.05em; } h2 [...]
最近每天沉醉在那堆垃圾代码中改着无穷无尽的Defect，也算是为了对岸几百万移动用户的福祉做出应有的贡献了。 非常有名的CSS Framework – Blueprint在更换了项目leader之后，最近发布了一个新的版本，Blueprint(Css Framework) version0.8。新的leader将这一版本称为新的里程碑版本。并且看的出来，作者对于1.0的正式release有着很高的期待。 简单介绍一下Blueprint这个CSS Framework，翻译自Blueprint的Quick Start Tutorial，如果需要原文在官方网站上都有。我只是节选了一些： 源文件: blueprint/src/reset.css: 基本已经总结出最佳实践的reset.css，为页面元素重置默认值。 blueprint/src/grid.css: 之前我也介绍960gs这个Framework，grid原型设计现在是很流行的原型设计方法了，Blueprint也提供了很多方便的class来帮助你快速建立grid布局。 blueprint/src/typography.css: 关于排版的css，包含了一些非常精妙的文字排版样式。 blueprint/src/forms.css: 包含了一些表单样式。 blueprint/src/print.css: 很多时候我们没有考虑到用户的打印样式，很多无用的图片，广告都是用户所不希望打印，所以需要重新设置打印样式。 blueprint/src/ie.css: 包含了ie6和ie7的许多css hack。 再来简单看看到底该如何使用grid.css，之前写[960是个神奇的数字 - 960 Grid System介绍]，就有人问到底该如何使用960gs这样的框架，还有人说其实我也讲不出该如何使用。我看下来，可能是很多人对原型辅助css的期望过高了，他并不会帮我们做什么事情，只是帮助我们更好的去做一些事情，来看下例子： <div class=”container showgrid”> <div class=”span-24″> 头部页眉 </div> <div class=”span-4″> 左边侧栏 </div> <div class=”span-16″> <div class=”span-8″> 居中行1-1 </div> <div class=”span-4″> 居中行1-2 </div> <div class=”span-4 last”> 居中行1-3 </div> [...]
楔子：今天是去金茂上班的第一天，还从来没在42楼这样的高度工作过，还真有点不一样，坐电梯是还有些耳疼的感觉。虽然是办公室变了，但是不变的是需求永远在变。新改动，要给一些元素加mask，好吧，absolute，然后加个颜色盖住。 问题也引出了，Absolute, Relative, Fixed，这些position设置到底有那些不同，分别适合在什么样的场景之下。很多时候还是让人觉得很困惑的。看下定义，你会发现腾格尔是用最大的力气把歌唱轻，他们是用最简单的词把话说的无比晦涩。 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。此时对象不具有外补丁( margin )，但仍有内补丁( padding )和边框( border )。 要激活对象的绝对(absolute)定位，必须指定 left ， right ， top ， bottom 属性中的至少一个，并且设置此属性值为 absolute 。否则上述属性会使用他们的默认值 auto ，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递。 设置此属性值为 relative 会保持对象在正常的HTML流中，但是它的位置可以根据它的前一个对象进行偏移。在相对(relative)定位对象之后的文本或对象占有他们自己的空间而不会覆盖被定位对象的自然空间。与此不同的，在绝对(absolute)定位对象之后的文本或对象在被定位对象被拖离正常文档流之前会占有它的自然空间。放置绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外，滚动条不会出现。 还是换个方式解读一下这几个选项吧。 Static 元素默认值，所有元素在没有显式设定Position的时候，都是Static，不过该属性值并没有什么特殊的意义，只是一个初始值。也就是说它并不代表元素具有那些特别的布局定位信息，当你显式去设定为Static时，唯一的作用就是覆盖之前你为Position设定的其他非默认值。 Relative 相对于Absolute，Relative更让人困惑，经常有人会误用该定位属性。一句话概括就是，“相对于元素自身”，关键词在于自身二字，如果你只将一个元素设置为 {position : relative; } 的话，而不去设置其他offset值，比如top left等，该元素其实等价于{position : static;}，元素的位置和表现不会有任何改变。如果你设置了其他定位属性，比如 top:10px; 那该元素将相对自身原来的位置向下移动十个像素，这在用来对齐元素时很有效。 1点需要提及的，z-index，仅仅作用与position为relative absolute的元素上。 Absolute 这是个强力选项，有点瑞士军刀的感觉，你可以将一个元素定位在页面上任何你希望他出现的地方。对于一个absolute元素，必须指定 left ， right ， top [...]
这是一篇译文，其中涉及了不少比较专业的概念，我将用一系列文章来介绍这些概念，这些文章对于网页设计进行了更加深入的探讨，也许在我们看来有些学究气了，但是通过这种探讨，我们从中应该看到一些好的方法论和更多的用户体验关怀。 Progressive Enhancement（逐步增强）开发模式正逐步成为基于标准设计的最佳实践。从简洁，语义化的HTML标记开始，通过Javascript和CSS层层渐进式增强，我们试图为任何受众创建可用的体验，对于那些功能不那么强大的设备和浏览器能获得一个相对简单但是功能完整的用户体验，而其他那些功能齐备的则将获得剩下的附加特性和体验。 这是就是PE（Progressive Enhancement 以下缩写为PE）的基本理论。但是在实践过程中，这些增强仍然被推送给了绝大多数设备，其中包括大量不支持这些特性的对象，比如较低版本的浏览器或者是功能受限的移动客户端。这些设备一开始的确获得简单但功能完整的页面，但随后被“增强”到了乱糟糟的页面。这显然是和PE理论背道而驰的。 那我们应该怎么做增强以确保所有的设备和浏览器获得正确的效果呢？测试，这时候我们需要的是通过逐级测试来确保这点。 兼容性测试 不久之前，我们发现可以使用很简单的Javascript代码来测试目标设备对于CSS的支持情况。让我们从一个很简单的盒模型测试开始，我们插入一个对象到当前Document中，然后设置一些样式属性，然后通过Javascript来校验是否被正确支持了。 function boxmodel(){ var newDiv = document.createElement(‘div’); document.body.appendChild(newDiv); newDiv.style.width = ’20px’; newDiv.style.padding = ’10px’; var divWidth = newDiv.offsetWidth; document.body.removeChild(newDiv); return divWidth == 40; } 通过上面的TestCase，我们能很快的检查目标设备是否正确支持盒模型，然后我们也能采取对应的增强方式。 有了上面的这个主意，我们能类似的写出如下测试用例： float clear position overflow line-height 当然仅通过CSS测试并不能覆盖到所有情况，幸运的是，我们还能通过Javascript测试来做其他兼容性测试。（译注，这可能是大家比较熟悉的浏览器检测了）。 document.createElement() document.getElementById() xmlHttpRequest() window.onresize() window.print() 通过上述测试，我们可以知道是否可以正确显示客户的应用。 我和我在Filament Group的同事开发了testUserDevice.js，来完整上述所有的测试。 利用这些测试结果 整合testUserDevice.js到一个页面上是相当简单的，讲JS文件包含进来，然后调用testUserDevice.init()方法就可以了。 为了更好的阐述这些概念，我们来看一个具体的例子，这是一个有一定复杂度的表单页面，让我们从最基本的HTML开始。 DEMO1 [...]
原文地址：http://sixrevisions.com/css/20_websites_learn_master_css 相信不少人，哪怕是职业的网页设计师有的时候也不免会觉得CSS有那么点玄妙，有很多小trick并不是那么容易一下子掌握的。 三人行必有我师焉，那就从一些前辈那里学点东西吧，20个CSS和网页设计相关领域的站点，希望能给大家带来一些帮助。 1. A List Apart CSS Topics 老牌CSS站点，从1999年开始一直致力于整理收集面向标准网页开发的优秀文章。 2. CSS Help Pile 收集整理了大量的CSS相关资源，而且归档非常清晰，查询非常方便。 3. CSS Basics 通过一系列教程讲述了CSS的基本概念和基本原理。非常不错的一篇入门教程，我当年也获益良多。 4. Holy CSS Zeldman! CSS相关资源站点，不是《网站重构》的那个Zeldman，不要搞错咯。 5. Eric Meyer: CSS 一位有名的CSS作者的blog，值得一看。 6. 456 Berea Street – CSS category 很流行的CSS站点展示，这类的网站有非常多，多看多收获。激发一下创作灵感。 7. /* Position Is Everything */ 网页很多时候困惑和苦恼都来自于Position问题，那让我们专门来看看这类问题吧。 8. HTML Dog CSS Tutorials 是不是想起了上个世界有个老派的html编辑器，这里有着适应不同程度读者的教程。 9. Learn CSS Positioning in [...]
