分类目录归档：html&css

结构与表现

使用CSS灰化图片

html&css、

截止到目前，比较兼容的方案：

.gray { 
  -webkit-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><fecolormatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'></fecolormatrix></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
  filter: grayscale(100%);
  filter: gray;
}

同时有个一个js方案可供选择：http://www.iliasiovis.com/hoverizr/

资料：
https://developer.mozilla.org/en-US/docs/Web/CSS/filter#Browser_compatibility
该资料说明Gecko核心的Firefox仅实现了filter:url()这一个滤镜功能。所以上面可以通过svg来实现FF的兼容。

http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html

移动网页开发调试方法

html&css、JavaScript

来源于： http://thx.github.io/mobile/debugging-in-mobile/

三分靠 coding，七分 debugging!

少年天才以外的我们，与其说是 coder,不如说是 debugger，都是一路调戏过来的，不好意思，是调试【本人口齿不清，发音不准，再发生类似事故请多多见谅】，因此当你 主动/被动 All in 了无线以后，你发现，知识的储备只是时间的积累和有意识的训练而已，可面对众多的 爱疯，案桌儿，山柴，内核不同，大小不一的设备。尼玛，没有个顺手的调试工具，简直是不能忍受的。

于是，结合我做无线有 一个季度 以来的爽与痛，再扒扒找找，整理一份专门调戏无线设备的攻略如下，不对之处，请千万指正：

Continue reading 移动网页开发调试方法 →

从莫名的熟悉到明确的概念：CSS BFC(Block Formatting Context)

html&css

来源： http://www.w3cmm.com/other/css-bfcblock-formatting-context.html

BFC的定义

是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。

 

在创建了 Block Formatting Context 的元素中，其子元素会一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻的元素之间的垂直距离取决于 ‘margin’ 特性。在 Block Formatting Context 中相邻的块级元素的垂直边距会折叠（collapse）。

在 Block Formatting Context 中，每一个元素左外边与包含块的左边相接触（对于从右到左的格式化，右外边接触右边）， 即使存在浮动也是如此（尽管一个元素的内容区域会由于浮动而压缩），除非这个元素也创建了一个新的 Block Formatting Context 。 Continue reading 从莫名的熟悉到明确的概念：CSS BFC(Block Formatting Context) →

用Web字体实现小图标

html&css、

如果用github，或许会发现github上的小图标不是用背景图做的，并且可以选中，类似文字一样。

原理就是把图标做成了字体，然后用@font-face引入。这种方式确实不错，图标大小和颜色都可以css定义了，虽然不会太炫丽，但是也不错，可以在firebug下修改试试。

相关信息传送至：

https://github.com/blog/1106-say-hello-to-octicons
https://github.com/styleguide/css/7.0

Meta告知IE浏览器兼容模式

html&css

在html的head头内如下写法，节选自http://www.xingzai.org/html-note/meta-tag-usage-order.html：

<!--x-ua-compatible(浏览器兼容模式)
仅对IE8+以效
告诉浏览器以什么版本的IE的兼容模式来显示网页
<meta http-equiv="X-UA-Compatible" content="IE=5" >
<meta http-equiv="X-UA-Compatible" content="IE=7" >
<meta http-equiv="X-UA-Compatible" content="IE=8" >
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
其中最后一行是永远以最新的IE版本模式来显示网页的。
另外加上Emulate模式
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >
Emulate模式后则更重视<!DOCTYPE>
（细心的人会注意到，用IE9去访问带有x-ua-compatible的页面时是不会出现兼容视图按钮的）
-->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />