存档

‘CSS’ 分类的存档

CSS之阴影效果

2015年5月18日 没有评论

在CSS3中,引入了一个box-shadow属性,可以非常方便地给元素增加阴影效果,在各种电商网站中,非常常见,加了阴影效果以后,图片可以突出显示,减少了视觉疲劳。

下面就是一个CSS的往四周扩散的阴影效果,同时加入了对IE6-8的支持:

#box {
   zoom: 1; //触发hasLayout
   filter: progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=0),
         progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=90),
         progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=180),
         progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=270);
   box-shadow: 0 0 5px #cccccc;
   -webkit-box-shadow: 0 0 5px #cccccc;
   -moz-box-shadow: 0 0 5px #cccccc;
}
分类: CSS, 语言 标签: ,

[转]来,让我们谈一谈 Normalize.css

2015年4月23日 没有评论

本文转自http://jerryzou.com/posts/aboutNormalizeCss/

本文译自Normalize.css官网: http://nicolasgallagher.com/about-normalize-css/

Normalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS resetNormalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter BootstrapHTML5 BoilerplateGOV.UKRdioCSS Tricks 以及许许多多其他框架、工具和网站上。

综述

Normalize.css是一种CSS reset的替代方案。经过@necolas@jon_neal花了几百个小时来努力研究不同浏览器的默认样式的差异,这个项目终于变成了现在这样。

我们创造normalize.css有下面这几个目的:

  • 保护有用的浏览器默认样式而不是完全去掉它们
  • 一般化的样式:为大部分HTML元素提供
  • 修复浏览器自身的bug并保证各浏览器的一致性
  • 优化CSS可用性:用一些小技巧
  • 解释代码:用注释和详细的文档来

Normalize.css支持包括手机浏览器在内的超多浏览器,同时对HTML5元素、排版、列表、嵌入的内容、表单和表格都进行了一般化。尽管这个项目基于一般化的原则,但我们还是在合适的地方使用了更实用的默认值。

Normalize vs Reset

知道Normalize.css和传统Reset的区别是非常有价值的。

1. Normalize.css 保护了有价值的默认值

Reset通过为几乎所有的元素施加默认样式,强行使得元素有相同的视觉效果。相比之下,Normalize.css保持了许多默认的浏览器样式。这就意味着你不用再为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时,Normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合。

2. Normalize.css 修复了浏览器的bug

它修复了常见的桌面端和移动端浏览器的bug。这往往超出了Reset所能做到的范畴。关于这一点,Normalize.css修复的问题包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。

可以看以下这个例子,看看对于HTML5中新出现的input类型searchNormalize.css是如何保证跨浏览器的一致性的。

/**
 * 1. Addresses appearance set to searchfield in S5, Chrome
 * 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
 */

input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-sizing: content-box;
}

/**
 * Removes inner padding and search cancel button in S5, Chrome on OS X
 */

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
3. Normalize.css 不会让你的调试工具变的杂乱

使用Reset最让人困扰的地方莫过于在浏览器调试工具中大段大段的继承链,如下图所示。在Normalize.css中就不会有这样的问题,因为在我们的准则中对多选择器的使用时非常谨慎的,我们仅会有目的地对目标元素设置样式。

A common sight in browser debugging tools when using a CSS reset

4. Normalize.css 是模块化的

这个项目已经被拆分为多个相关却又独立的部分,这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。因此这能让你自己选择性地移除掉某些永远不会用到部分(比如表单的一般化)。

5. Normalize.css 拥有详细的文档

Normalize.css的代码基于详细而全面的跨浏览器研究与测试。这个文件中拥有详细的代码说明并在Github Wiki中有进一步的说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异,并且你可以更容易地进行自己的测试。

这个项目的目标是帮助人们了解浏览器默认是如何渲染元素的,同时也让人们很容易地明白如何改进浏览器渲染。

如何使用 normalize.css

首先,安装或从Github下载Normalize.css,接下来有两种主要途径去使用它。

  • 策略一:将normalize.css作为你自己项目的基础CSS,自定义样式值以满足设计师的需求。
  • 策略二:引入normalize.css源码并在此基础上构建,在必要的时候用你自己写的CSS覆盖默认值。

结语

无论从适用范畴还是实施上,Normalize.cssReset都有极大的不同。尝试一下这两种方法并看看到底哪种更适合你的开发偏好是非常值得的。这个项目在Github上以开源的形式开发。任何人都能够提交问题报告或者提交补丁。整个项目发展的过程对所有人都是可见的,而每一次改动的原因也都写在commit信息中,这些都是有迹可循的。

分类: CSS, 语言 标签:

[转自淘宝UED]Reset CSS研究(八卦篇)

2015年4月23日 没有评论

八卦为先

八卦是种优良品质,特别是用在技术上时。来看几个Reset CSS的八卦问题吧:

  1. 你知道世界上第一份reset.css在哪么?
  2. * { margin: 0; padding: 0 }人品很坏吗?
  3. Eric Meyer和YUI是情侣吗?
  4. Google有用reset.css吗?
  5. No CSS Reset的口号是谁最先提出来的?

类似问题或者说困惑还能列举很多,reset.css极其简单又极其不简单。继续挖掘八卦之前,请先关机遐思,或去如厕更衣透透气,想想后再读下文。

不是历史

2004年,遥远又如近在眼前的昨天,Tantek被不同浏览器下默认样式的差异搞烦了,于是琢磨中写了一个undohtml.css, 这就是第一个八卦问题的答案。

对于基于Gecko引擎的Firefox等浏览器,请在地址栏中输入resource://gre/res/html.css,默认样式就这样裸体着呈现在面前了。CSS界的Guru级人物Eric Meyer立刻就嗅探到了html.css的有趣性:Really Undoing html.css. 知道CSS好玩,实在没想到CSS居然这么好玩。比如style, script { display: block }就可以显示CSS和JS源码,在做代码演示的demo页时,就不用辛辛苦苦用pre或textarea了(虽然因为ie不支持导致不实用,不过这的确是个思路)。

继续八卦:CSS Negotiation and a Sanity Saving Shortcut* { margin: 0; padding: 0 }的学名是Global White Space Reset. 从原文中可以看出这个方法刚问世时是非常火爆的,并且作者建议一定要先破后立,要将清扫差异和重置默认样式结合起来,这样才是正确的做法。

为何Global White Space Reset当初风光一时,如今却黯然销魂?* { margin: 0; padding: 0 }的成功之处在于,管你三七二十八,统统抹平,人人生而平等!然而其失败之处也正是因为其威力太大,虽然捣了蜂窝得了蜜,却惹来群蜂追尾,麻烦无限(因为被抹平的样式,你得再重新设置回来,比如input的padding等)。这就如西汉一代名将韩信哪,是成也萧何,败也萧何!

还有一个传说中的说法是,星号*选择符还会导致性能问题。由于一直没找到可靠的资料,我又不知道怎样才能测试CSS选择符的渲染性能(知道的请一定告诉我),这个传说中的性能问题就只能当它是传说了。

眨眼一瞬间,三年就过去了。2007年,Eric Meyer的一篇文章Reset Styles, 重新唤起了一股reset热潮。这篇文章里有第3个八卦问题的答案:Eric的reset.css是源自YUI的,可能是母子关系,但总之不是情侣关系。

很快,Eric发布了第二版:Reworked Reset. 后面的解释极具价值,很多属性值的设置在这里有详尽说明。

火爆的回复给了Eric源源不断的动力:Reset Reloaded. 看完这篇文章,有一种尘埃落定的感觉。

但上面的文章并不是最终版本,2008年2月份,Eric Meyer还更新了一次:CSS Tools: Reset CSS

说完Eric Meyer的心路历程,不得不提一下YUI Reset CSS. 创始人是Nate Kokechley. 去年北京D2论坛上还见过一面,前不久已离开YAHOO,让我的直觉里对YUI都有点担心起来了,唉。

上面是两个最有名的CSS Reset方案。但世界永远是多样化的,比如Less is more – my choice of Reset CSS. 这和Eric Meyer的期望其实是一致的:不同的应用环境下,应该选择自己的reset方案,而不是简单的copy过去。比如Google首页,在这种特定页面里,不用就是一种最好的用。

更多眼花缭乱的Reset方案请参看:A Killer Collection of Global CSS Reset Styles. 很标题党,内容就鱼龙混杂了。

最后,隆重揭晓最后一个八卦问题的答案:No CSS Reset. 提倡的核心思想也是Less is more. 原因很简单,* { margin: 0; padding: 0 }杀伤力太大,在某些场合下,Eric Meyer的方案杀伤力也还是太大了。有想法并说出来,总是好的。

有反对就会有支持:Why I Like (and Use) Reset CSS. 公说公有理,婆说婆有理,并非所有问题都需要一个确切的答案,有时过程本身,就是追求的结果。

Eric Meyer对No CSS Reset一文的回复:Crafting Ourselves. 读罢此文,明月松间照,清泉石上流。下面摘录两段,做为此八卦闲文的完结:

Because this isn’t a field of straightforward answers and universal solutions. We are often faced with problems that have multiple solutions, none of them perfect. To understand what makes each solution imperfect and to know which of them is the best choice in the situation—that’s knowing your craft. That’s being a craftsman/craftswoman. It’s a never-ending process that is all the more critical precisely because it is never-ending.

…It’s evidence that we continue to challenge ourselves and each other to advance our skills, to keep learning better and better how better to do what we love so much.

预告:下一篇是技术篇,将详细探讨淘宝目前使用的Reset CSS方案,欢迎各位提前准备好板砖,我已购买坚固头盔一顶…… 敬请期待。

参考资料

分类: CSS, 语言 标签: