如果你留意过网页的打印模式，也就是在网页窗口按下Ctrl+P开启打印对话框预览网页，你会发现有很多的页面区块在打印模式下是不显示图片和颜色的，比如这样：
上图中，可以看到不仅仅是顶部banner的背景图片没有显示，连按钮的颜色都不显示。这是因为这些元素都是背景着色，无论是背景图片还是背景颜色，打印机会默认忽略这些着色部位以省油墨。用img标签的图片则通常不受影响（也有例外，这个文末再说）。
我们可以这样设置打印，强制开启如图的选项，这样这些着色点就可以正常打印出来了。 查看详细
先展示研究成果：
今天想研究一下CSS的 3D实现，但又不敢深入三角函数和线性代数的知识（多年前就已还给高数老师了），所以就浅浅地从translateX/translateY/translateZ这3个变换做一个立方体开始。这三个变换函数很简单，关键是要建立固定的坐标系，这样页面的元素就能通过这个坐标系获得立体感。
我的HTML结构：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div class="scene"> <!--方块--> <div class="cube"> <div class="cube-face cube-face-front">1</div> <div class="cube-face cube-face-right">2</div> <div class="cube-face cube-face-top">4</div> <div class="cube-face cube-face-left">3</div> <div class="cube-face cube-face-back">5</div> <div class="cube-face cube-face-bottom">6</div> </div> <!--坐标线--> <div class="line line-x"></div> <div class="line line-y"></div> <div class="line line-z"></div> </div> |
稍微有点经验的前端应该知道IE7-有一个经典的渲染问题，表现在对display为inline-block的元素的不友好上。我们也知道只要重新给这个元素单独宣布一条display:inline，就能解决问题。但今天我要说的不是这个，最近新完成的一个网站，在IE7下浏览，就有包括导航和热图这样的大块元素没有正常显示：
经过检查，发现这些没有正常显示的元素，都有一个共同的CSS属性- position:relative，导致这些元素在IE7中没有被正常的渲染到，就没有显示出来。百度了一下，这个问题归类为-IE重绘问题。当然并非所有position为relative的元素都不能在IE7中正常显示，实际情况要比我这里所指的复杂的多。由于布局的硬性需要（比如滚动图片的移动效果），使我没有办法不用relative属性，所以要解决在IE7中的渲染问题，就必须另外想办法。 查看详细
瀑布流主要应用在图片展示页面上。如果有一大批图片需要展示，原始图片尺寸不一致，又希望每张图片都能不剪裁，完整显示，那么就要给图片规定一个宽度，解放它们的高度。利用网页高度不限这个特性，充分利用页面的空间，尽可能的展示多的图片。瀑布流的实现方法挺多，但能做到响应式列数变化，自由布局的并不多。这次自己开发了一个作品集页面，正好研究一下响应式瀑布流的实现方法。
1. 响应式多列：960px宽以上呈4列，750-960呈3列，400-750呈2列，400宽以下变成1列；
2. 由于需要做响应式，那么每块的宽度就不固定，导致高度更加不可能固定。后端输出的时候，图片（块）的高度本来就是未知的，要用JS实时取到它们的高度，以便调整布局。
3. 异步加载：页面拖到最低端的时候加载更多，这个很常见。 查看详细
CSS中一提到单词断行，最先映入脑海的肯定是word-break和word-wrap这两条属性。但对于这两条属性到底有什么区别，兼容性如何，我一直都概念模糊。今天抽空把它们以及CSS3中新加入的断行属性之间的区别和作用理理清楚，做一下笔记。
在英文段落中有时会碰到一些很长的单词，这些单词的长度超出容器宽度。在默认的页面文档中，如果单词长度超出了单行，会被自动移到下一行中，图中puzzling!就被自动换行了；而如果单词本身的长度已经超出容器宽度，常规的文档对此就没有约束力了，图中dddddd…这个单词就这么溢出了 查看详细
::selection这个伪类比较冷门，很少有人会对默认选中文本的深蓝色背景提出异议，所以一般的网站建设中很少有人会去定义它，也只有一小部分追求极致的设计师会有这样的要求。然而今天有一个网站给我上了一课：
查看详细
阿拉伯语不同于其他文字，是从右向左读的，文字要向右对齐，在CSS中右对齐的属性有两条：
1 2 | text-align:right; direction: rtl; |
text-align很常见，也就是简单的右对齐属性。direction就不那么常见了。
CSS手册中对direction属性是这样描述的：该属性指定了块的基本书写方向，以及针对 Unicode 双向算法的嵌入和覆盖方向。
也就是说定义了direction:rtl的元素，文字的书写方向是从右至左。另外direction还有控制text-align默认值的作用，定义过direction:rtl的元素，如果没有预先定义过text-align，那么这个元素的text-align的值就变成了“right” 查看详细
CSS3的Media Queries（媒体查询）在现在的网站开发中已经被应用得越来越频繁，现在但凡开发新的网站，只要不是布局超复杂的项目，不免都要“顺手”做一些响应式布局，尽量以低成本兼容更多的浏览器/设备。现代的移动设备尺寸多样，对于CSS的兼容问题也层出不穷，本文主要探讨Media Queries的分辨顺序问题。从粗略的概念视角开始，不涉及具体的技术细节。 查看详细
尽管都是用HTML语言，EDM和网页的制作差别还是随着现代电脑/手机等设备的升级，不断地分化着。可以说EDM是保守的极端，应该完全避免新技术（比如CSS3新属性，HTML5的新元素等）的应用。
总结几条EDM制作最基本的要点：
CSS3中的calc变量在iOS6浏览器中必须加-webkit-前缀，目前的FF浏览器已经无需-moz-前缀。
Android浏览器目前仍然不支持calc，所以要在之前增加一个保守尺寸：
1 2 3 4 5 | div { width: 95%; width: -webkit-calc(100% - 50px); width: calc(100% - 50px); } |