Cafe Blogs

一键网页置灰

html {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  /* 兼容 Firefox */
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
  /* 兼容 IE */
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  /*兼容 Chrome Safari Edge 等 */
  -webkit-filter: grayscale(1);
}

在 Unicode 中，0x000A 字符是专门控制换行的。在 CSS 中，我们可以写为 \A 或 \000A 作为 after 伪元素的内容，并添加到指定元素中实现换行效果。

<div>
  <span class="br">前端常用知识软件推荐</span>
  <span class="br">踩坑记录</span>
  <span>各种兼容问题</span>
</div>

.br::after {
  content: '\A';
  white-space: pre;
}

JavaScript 给函数添加一个可选参数，这个写法有很多种，ES6 参数解构、函数柯里化、简单对象传值都可以，这里我写一个最近和老同事学到的一个 ES6 的 Object.assign

function showMsg(msg, options = {} ) {
    options = Object.assign({
        type: 'info', // 默认值
        duration: 3000,
    }, options)

    setTimeout(() => {
        console[options.type](msg)
    }, options.duration)
}

Object.assign 是 ES6 新增的一个 API，用于将源对象的所有可枚举属性复制到目标对象中。如果目标对象中已经存在相同的属性，则会被覆盖。

套件：狼派CIY初心者三模100配列
轴体：高特十字茶轴
键帽：三文鱼PBT键帽(XDA)
总价：200.75

总体还行，感觉现在套件越来越便宜了，三模热插拔的100配列都只要120￥就能拿下，还带夹心垫，属实良心。
吐槽一下现在的轴名是越来越杂越来越花了，菠萝轴，灰木轴，积木轴，酒红轴，知夏轴，洛克轴…
总之，现在不想从前靠个轴名就能大概分出键盘的手感，买之前建议多看一下键程和压力克数。