乍暖还寒的豆知识

1、不支持 时回滚到
a)背景回滚

.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..com/vi/video-id/0.jpg
把“video-id”换成实际视频 ID 即可。
两个域名都 ok,末尾的 0 为非高清封面,改为 1、2、3 为截图。

3、如何使 Bootstrap 一行的分栏等高
除了用 table-cellflex,还可以用以下黑科技:

.row{
    overflow: hidden; 
}
[class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

4、通过媒体查询,编写针对各浏览器特殊处理的
一般说来,如果浏览器无法解析某个选择器,
那么对应的样式就不会应用,并会跳向下一个选择器。
利用这个特性,结合媒体查询(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 输入框自动完成的样式
什么都好,就是自动完成往往让人抓狂:
背景的屎黄色只能用 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 地址时强制获取页面焦点
先隐藏 ,赋值 src 后,再显示即可。
类似问题:firefox 上父级容器设置 opcity:0,并在 赋值后转为 1,会闪一下。
这时候则需要增加遮罩去改变透明度,而非容器本身。

【相关资料】
0、Anom Harya – Coffee Beans Ready for Brewing(题图)

发表评论

邮箱地址不会被公开。 必填项已用*标注