目录
使用 media query 进行 IE 的 CSS Hack
原文发布于2017年，过去两年，感觉这种方式挺有意思，转一下
尽管现在很多大多数现代浏览器对 CSS3 的诸多特性已经开始支持了，但是有的时候我们还是避免不了对低版本的 IE 浏览器进行兼容性的样式写法。常见的思路无疑是写注释性语法:
<head><!--[if gt IE 9]><!--><style>// your style rule</style><!--<![endif]--></head>
关于IE 注释性语句可以看 这里
当然你也可以通过 JS 进行 UA 测判断，然后在 body 加上 ie的 class ，然后在样式里进行限制。
.ie .container{....}
当然今天得重点是通过 media query 进行 CSS 的 hack。在 IE 中它们可以识别出这些特殊的符号 \0,\, 以及 \9，然后结合 media query 可以更好进行样式的区分。
非常常见的，比如我们要在对 css3 不支持的页面比如 IE8, IE6 , IE7 这些浏览器进行样式的区别。
@media \0screen\,screen\9 {body { background: green; }}
比如针对 IE9, IE10的 Hack:
@media screen and (min-width:0\0) {body { background: yellow; }}
针对 IE8, IE9以及 IE10 的 Hack:
@media screen\0 {body { background: orange; }}
如果针对的浏览器只有 IE8 需要 hack:
@media \0screen {body { background: blue; }}
演示地址 Codepen
你可以前往这个页面了解更多的支持情况。
r如果我们相对某些 CSS 语法支持的兼容性进行测试的话，我们可以使用 支持 support 语法的浏览器进行兼容性写法:
@supports ( display: flex ) {.foo { display: flex; }}
参考
https://keithclark.co.uk/articles/moving-ie-specific-css-into-media-blocks/
https://keithclark.co.uk/articles/moving-ie-specific-css-into-media-blocks/media-tests/
- 移动端为什么要用box-sizing:border-box?
提到Box-sizing，先前的一篇文章也提到过，其实在布局的时候很好用，可以省去很多多余的代码，至于兼容性，目前还只能在移动端应用多，因为它是CSS3的属性。大家看几个例子，应该就一目了然了。
- 使用 media query 进行 IE 的 CSS Hack
通过 media query 进行 CSS 的 hack。在 IE 中它们可以识别出这些特殊的符号 \0,\, 以及 \9，然后结合 media query 可以更好进行样式的区分
- css3 自定义浏览器滚动条(scrollbar)
通过-webkit-scrollbar自定义浏览器滚动条，支持webkit的浏览器可正常显示(如chrome，safari，QQ浏览器，360极速等)
- 视窗单位vm,vh,vmin,vmax
记录下响应式布局单位(视窗单位:viewport units)的应用，最近用electron开发桌面应用，用到vh,vw还是蛮方便的.
- 妙法攻略：渐变虚框及边框滚动动画的纯CSS实现
CSS3实现滚动边框，渐变边框
- CSS3 手册
CSS3 是层叠样式表（Cascading Style Sheets）语言的最新版本，旨在扩展CSS2.1。它带来了许多期待已久的新特性， 例如圆角、阴影、gradients(渐变) 、transitions(过渡) 与 animations(动画) 。以及新的布局方式，如 multi-columns 、 flexible box 与 grid layouts。实验性特性以浏览器引擎为前缀（vendor-prefixed），应避免在生产环境中使用，或极其谨慎地使用，因为将来它们的语法和语义都有可能被更改。