分类目录归档:html&css

结构与表现

使用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

移动网页开发调试方法

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

三分靠 coding,七分 debugging!

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

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

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

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

来源: 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字体实现小图标

如果用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的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" />