.icon { background: url(fallback.png); background-image: url(image.svg), none; }
b）图片回滚
<svg width="96" height="96"> <image xlink:href="svg.svg" src="svg.png" width="96" height="96" /> </svg>
2、无需开发者账号获取 YouTube 视频封面/截图。
https://i.ytimg.com/vi/video-id/hqdefault.jpg
http://img.youtube.com/vi/video-id/0.jpg
把“video-id”换成实际视频 ID 即可。
两个域名都 ok，末尾的 0 为非高清封面，改为 1、2、3 为截图。
3、如何使 Bootstrap 一行的分栏等高。
除了用 table-cell 和 flex，还可以用以下黑科技：
.row{ overflow: hidden; } [class*="col-"]{ margin-bottom: -99999px; padding-bottom: 99999px; }
4、通过媒体查询，编写针对各浏览器特殊处理的 CSS。
一般说来，如果浏览器无法解析某个选择器，
那么对应的样式就不会应用，并会跳向下一个选择器。
利用这个特性，结合媒体查询（Media Query）我们就可以针对各浏览器进行 hack 了：
a）IE 10/11
@media all and (-ms-high-contrast:none) { .foo { color: green } /* IE10 */ *::-ms-backdrop, .foo { color: red } /* IE11 */ }
b）低版本 IE
@media screen\0 {…} /** IE8-10 **/ @media screen\9 {…} /** IE6-7 **/ @media \0screen {…} /** IE8 **/ @media \0screen\,screen\9 {…} /** IE6-8 **/ @media screen and (min-width:0\0) {…} /** IE9-10 **/
c）Firefox
@-moz-document url-prefix() { .selector { color:lime; } }
5、调整 Chrome 输入框自动完成的样式。
Chrome 什么都好，就是自动完成往往让人抓狂：
背景的屎黄色只能用 box-shadow 遮盖起来，然后可以加个无限慢的渐变。
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus input:-webkit-autofill, textarea:-webkit-autofill, textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus { border: 1px solid green; -webkit-text-fill-color: green; -webkit-box-shadow: 0 0 0px 1000px #000 inset; box-shadow: 0 0 0px 1000px #000 inset; transition: background-color 5000s ease-in-out 0s; }
6、通过类的前缀进行 CSS 选择。
一时之间没有反应过来，其实“类/Class”也是一个“属性/Attribute”，
写法类似正则表达式：
div[class^="some"] {} /** start with "some" **/ div[class*="some"] {} /** contain "some" **/ div[class$="some"] {} /** end with "some" **/ div[class|="some"] {} /** "some" or start with "some-" **/ div[class~="some"] {} /** contain "some" as enum item **/
7、可用的光标/鼠标样式。
.auto { cursor: auto; } .default { cursor: default; } .none { cursor: none; } .context-menu { cursor: context-menu; } .help { cursor: help; } .pointer { cursor: pointer; } .progress { cursor: progress; } .wait { cursor: wait; } .cell { cursor: cell; } .crosshair { cursor: crosshair; } .text { cursor: text; } .vertical-text { cursor: vertical-text; } .alias { cursor: alias; } .copy { cursor: copy; } .move { cursor: move; } .no-drop { cursor: no-drop; } .not-allowed { cursor: not-allowed; } .all-scroll { cursor: all-scroll; } .col-resize { cursor: col-resize; } .row-resize { cursor: row-resize; } .n-resize { cursor: n-resize; } .e-resize { cursor: e-resize; } .s-resize { cursor: s-resize; } .w-resize { cursor: w-resize; } .ns-resize { cursor: ns-resize; } .ew-resize { cursor: ew-resize; } .ne-resize { cursor: ne-resize; } .nw-resize { cursor: nw-resize; } .se-resize { cursor: se-resize; } .sw-resize { cursor: sw-resize; } .nesw-resize { cursor: nesw-resize; } .nwse-resize { cursor: nwse-resize; } .custom { cursor: url(images/my-cursor.png), auto; } .webkit-zoom-in { cursor: -webkit-zoom-in; } .webkit-zoom-out { cursor: -webkit-zoom-out; } .webkit-zoom-grab { cursor: -webkit-zoom-grab; } .webkit-zoom-grabbing { cursor: -webkit-zoom-grabbing; }
8、移除表格布局的邮件中的图片间隔。
古老的邮件系统中，还使用着原始的 table 进行布局，
能用到的样式也极其有限，而且只能写行内样式。
当图片占了整行时，会发现与上下行之间有微小的空隙，
可以通过将图片设置 display:block 来移除。
9、自定义滚动条。
a）chrome 有不少可以调整的样式：
::-webkit-scrollbar { width: 1px; height: 5px; } ::-webkit-scrollbar-button {} ::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0,0,0,0.3); } ::-webkit-scrollbar-track-piece {} ::-webkit-scrollbar-thumb { background-color: darkgrey; outline: 1px solid slategrey; } ::-webkit-scrollbar-corner {} ::-webkit-resizer {}
0
b）ie 就只能设置是否隐藏。
.box { -ms-overflow-style:-ms-autohiding-scrollbar; /** ie10+ **/ }
10、解决通过 js 设置 iframe 地址时强制获取页面焦点。
先隐藏 iframe，赋值 src 后，再显示即可。
类似问题：firefox 上父级容器设置 opcity:0，并在 iframe 赋值后转为 1，会闪一下。
这时候则需要增加遮罩去改变透明度，而非容器本身。
【相关资料】
0、Anom Harya – Coffee Beans Ready for Brewing◃flickr（题图）
