在 CSS 中,属性 inset 是一个非常方便的简写,它代表了 left(左)、right(右)、bottom(下)和 top(上)这四个属性。
/* old */
.element {
position: absolute;
bottom: 0;
right: 0;
top: 0;
left: 0;
}
/* new */
.element {
position: absolute;
inset: 0;
}
我们可以为属性定义一次值,然后通过关键字重用它
/* old */
div {
color: #d1d5db;
background-image: linear-gradient(to bottom, #d1d5db, #fff);
}
/* new */
div {
color: #d1d5db;
background-image: linear-gradient(to bottom, currentColor, #fff);
}
/* 因为`color`元素的属性,如果没有指定,是从其父元素继承的,所以我们可以`currentColor`在元素的子元素中获得父元素的值 */
div {
color: #fff;
}
div a {
border-bottom: 1px solid currentColor;
color: currentColor;
text-decoration: none;
}
属性 hidden
<div hidden></div>
不知来源的错误
Array.prototype.isEmpty = function () {
return (this.length = 0);
};
const a = ["cat", "dog", "mouse"];
for (let i in a) {
// isEmpty 是意外值
console.log(i); // '0', '1', '2', 'isEmpty'
}
遵循此命名约定会很有帮助。其他人会知道类名,并且在重构页面时注意到它们
<div class="js-ga-set"></div>
parseInt(" 5 "); // 5
parseInt("12 345"); // 12, not 12345
// right
parseInt(value.replace(/\s+/g, ""), 10);
使用 CSS 来禁用移动设备上的下拉刷新功能
body {
overscroll-behavior-y: contain;
}
使用 navigator 对象来使手机设备震动
window.navigator.vibrate(600);
// 还能检测网络带宽 单位Mbps
window.navigator.connection.downlink;
const foo = 4;
const bar = 2;
const fuzz = "Fuzz";
// not
foo + bar + fuzz; // 意外的值 '6Fuzz'
// Better: Use concat
"".concat(foo, bar, fuzz); // 42Fuzz
[foo, bar, fuzz].join(""); // 42Fuzz
// Best: Use template literal
`${foo}${bar}${fuzz}`; // 42Fuzz
<input readonly="true" />
<!-- 等价于 -->
<input readonly />
通常我们使用 target="_blank"新的标签,它可能有些问题。首先,他们使用同一个进程,因此,它会减慢您的页面速度。更重要的是,新选项卡能够window通过对象访问打开页面的对象window.opener
<!-- Don't -->
<a target="_blank">...</a>
<!-- Do -->
<a target="_blank" rel="noopener">...</a>
<!-- Or -->
<a target="_blank" rel="noreferrer">...</a>
<a target="_blank" rel="noopener noreferrer">...</a>
虽然 import 更易于维护。然而,浏览器必须一一下载并解析每个 CSS 文件,然后才能继续渲染页面,影响页面渲染速度
/* Don't */
@import 'common.css';
@import 'components.css';
@import 'pages.css';
/* Do */
<head>
<link rel="stylesheet" type="text/css" href="common.css" />
<link rel="stylesheet" type="text/css" href="components.css" />
</head>
评论: