暴雨如注的豆知识

最近半年忙得不可开交,工作上有些意料之外的进展。
原本应该在秋雨里发出的文,结果便积压到春雨时分了。
碎片化的生活方式,也让我更倦于静心产出,需反思。

1、使用原生方法在页面头部插入外部 JS
用 jQuery 的 $.getScript() 可以异步加载外部 JS,
而原生方式如下:

document.head.appendChild(document.createElement('script').setAttribute('src','http://ex.com/javascript.js'));

2、使用原生方法为元素增加类名
用 jQuery 的 addClass() 是最直白的,
而原生方式如下:

var d = document.getElementById("div1");
d.className += " otherclass";

3、解决 iOS 无法使用视频作为背景
出于用户体验考量,苹果禁止在 浏览器上自动播放视频,
因此需要通过判断 user agent,然后用 canvas 播放器替代原生 video。

4、解决 firefox 无法使用跨域嵌入字体
这是 firefox 的安全限制导致的,访问者可以在 about:config 内,
调整 security.fileuri.strict_origin_policy 设置;
服务器则应在配置文件(.htaccess)增加跨域支持:

<FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

5、解决 Sublime Text “Material Theme” 看不到输入面板
“Material Theme”是我非常喜欢的一款 Text 主题,
唯有一个小问题困扰:选择改名时看不到面板,只能盲打,然后回车。
这简直是不可理喻的“缺憾”,一番搜索后,发现有人遇到了类似问题。
面板并不是消失了,只是贴在底部,高度为零,鼠标移上去,拉高即可。
(可能是频繁切换不同主题导致的~咩)

6、创建仅适用 IE9 以下的代码/样式
为了兼容性考虑,我们往往有为该死的低版本 写 hack 的需求。
古老的 9 以及以下的版本都可以在注释中加入 [if ] 来特殊处理:

<!-- Target ALL VERSIONS of IE -->
<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
 
<!-- Target everything EXCEPT IE -->
<!--[if !IE]>
	<link rel="stylesheet" type="text/css" href="not-ie.css" />
 <!--<![endif]-->
 
<!-- Target IE 7 ONLY -->
<!--[if IE 7]>
	<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
 
<!-- Target IE 8 and LOWER -->
<!--[if lte IE 8]>
	<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
<!-- alternative -->
<!--[if lt IE 9]>
	<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
 
<!-- Target IE 7 and HIGHER -->
<!--[if gt IE 6]>
	<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->
<!-- alternative -->
<!--[if gte IE 7]>
	<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->

7、在 Excel 单元格内回车
要想单元格内容回车,而非完成编辑并跳向下一格,
需要在 enter 的同时,按下 alt

8、低版本 IE 的透明处理
在进入现代浏览器之前,IE 使用私有的 filter 进行透明过滤(alpha 通道):

<div style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);"></div>

9、变形图标字体
一般的图标字体默认为 display:inline,这样是无法进行变形(transform)的。
需要将其样式改为 display:inline-block 后,就可以很方便地进行处理啦!

10、消除 inline-block 隐藏溢出后的错位
我们为 display:inline-block 的元素增加 overflow:hidden 后,
会发现它的高度/位置与预期可能有所差异,有一定向上偏移。
这时需通过设置 vertical-align:bottom 进行对齐。

【相关资料】
0、xtinehlee – beans!(题图)

发表评论

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