写 2021 总结时发现的一些技巧

2022年1月29日 · 阅读需 6 分钟

@RainbowTalaxy

这些技巧可能深度不够，但还是希望能对实践中的你有所帮助。

使用防盗链图片

一般情况下，一些网站会阻止来自其他网站的本站图片请求。比如，直接引用一张来自我 QQ 空间相册的图片：

<img src="http://photocq.photo.store.qq.com/..." />

会发现被网站给拦下了：

这主要是网站会检查图片请求的来源。如果在 img 加上一个 referrerpolicy="no-referrer" 属性：

<img referrerpolicy="no-referrer" src="http://photocq.photo.store.qq.com/..." />

这个属性会让浏览器将来源设为空，一般的图片网站也就不会拦截了。

不过我看了下目前这个属性的兼容性。Can I use 给出 77.96% ，主要是 Safari for iOS 上不支持这一属性，但我经过实践是能用的，So ...

毛玻璃效果

这个效果我应用在标签栏背景上，是从这篇文章找到的方法。具体实现也很简单：

.container {
    /* 背景色，记得设置透明度，一般 0.7 就挺好 */
    background: rgba(255, 255, 255, 0.7);
    /* 这两项可以自定义模糊半径 */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

flex 中的间距

如果不怕兼容性问题，可以直接在 flex 容器中使用 gap 属性指定子元素的间距。

但如果你考虑兼容性，又简单地设置了子元素间的 margin ：

HTML
CSS

<div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

.box {
    --item-gap: 16px;
    display: flex;
    flex-wrap: wrap;
    max-width: 500px;
    border: 2px dashed #6a8bad;
}

.box > div {
    flex: 1 0 auto;
    min-width: 150px;
    height: 70px;
    background: #6a8bad;
}

.box > div + div {
    margin: 0 0 var(--item-gap) var(--item-gap);
}

结果就是第二行的开头会有个不符合预期的外边距：

解决方法

我参考了 Stack Overflow 中的答案，摸出了一种解决方法：

对子元素设定一半间距的左右外边距，这样子元素间的间距依旧正确；
将容器的宽度增加一个子元素间距；
对容器进行一半间距的位移，保证子元素的相对位置正确。

.box2 {
    --item-gap: 16px;
    display: flex;
    flex-wrap: wrap;
    max-width: calc(500px + var(--item-gap));
    width: calc(100% + var(--item-gap));
    transform: translateX(calc(-0.5 * var(--item-gap)));
    border: 2px dashed #6a8bad;
}

.box2 > div {
    flex: 1 0 auto;
    margin: 0 calc(0.5 * var(--item-gap)) var(--item-gap);
    min-width: 130px;
    height: 70px;
    background: #6a8bad;
}

这种方法的缺点也是显而易见的（ border 已经出卖了自己）。当然这个问题也可以尝试进一步解决。

定位元素坐标

定位元素坐标我参考了这则回答：

function getCoordinates(elem) {
    var box = elem.getBoundingClientRect();

    var body = document.body;
    var docEl = document.documentElement;

    var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
    var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;

    var clientTop = docEl.clientTop || body.clientTop || 0;
    var clientLeft = docEl.clientLeft || body.clientLeft || 0;

    var top = box.top + scrollTop - clientTop;
    var left = box.left + scrollLeft - clientLeft;

    return { top: Math.round(top), left: Math.round(left) };
}

这个函数考虑了浏览器兼容性，但并不一定完全适用于所有场景。

smooth 滑动

Safari 目前不支持 smooth 滑动，即类似这样的代码：

window.scrollTo({ top: 0, behavior: 'smooth' });

不过可以用 smoothscroll 库，它其实就是个 polyfill ：

# npm
npm install smoothscroll-polyfill --save

# yarn
yarn add smoothscroll-polyfill

然后直接导入就可以使用了：

import smoothscroll from 'smoothscroll-polyfill';

smoothscroll.polyfill();

React 中使用 Emoji

我是参考了这篇文章，可以写一个组件：

const Emoji = ({ label, symbol }) => (
    <span
        className="emoji"
        role="img"
        aria-label={label || ''}
        aria-hidden={!label}
    >
        {props.symbol}
    </span>
);

文章中也说到：也可以直接复制粘贴 emoji ，或者用 Unicode 转义，但都不推荐使用。

还有一个 oooooohmygosh 最近新更的视频这 25 年 Emoji 经历了什么？，有兴趣可以瞅瞅。

隐藏滚动条

一开始我还以为滚动条已经有标准的属性了，结果发现还是需要适配：

/* 针对 Chrome, Safari, Opera */
.example::-webkit-scrollbar {
    display: none;
}

.example {
    -ms-overflow-style: none; /* 针对 IE and Edge */
    scrollbar-width: none; /* 针对 Firefox */
}