关于前端:一些不好记却很好用的-CSS-属性

在写过一点工夫 CSS 之后，大家对于常见的属性应该都很熟了，例如最根本的 display、position、padding、margin、border、background 等等，在写 CSS 的时候不须要特地查什么货色，很顺的就能够写进去。

这些属性之所以常见，是因为许多中央都用失去，而有些 CSS 属性只能应用在某些特定的中央，或者只有在某个特定的情境之下才会呈现。我常常会遗记这些没不常的属性，但有时候这些属性其实特地重要。

所以本文介绍一些我感觉不太好记然而却很好用的 CSS 属性，也是顺便帮本人做个笔记。

比起 border，outline 是一个绝对少见的属性，然而要特地提到的是在 input 上的利用。在浏览器的默认行为中，当你把焦点挪动到 input 时，边缘会呈现一圈蓝色：

那个蓝色的就是 outline，能够通过 Chrome devtool 验证：

所以如果不想要 outline 或是想改色彩，那么就批改这个属性就行了。

在输入框中呈现的那个始终闪的 | 叫做 caret，如果想扭转色彩的话能够通过 caret-color 属性批改改：

我记得在手机上点击一些货色的时候会呈现一个蓝色的外框还什么之类的，但我刚刚怎么试都没有试出来，总之对应的属性叫做 -webkit-tap-highlight-color，用这关键字查应该能够查到一些其余文章跟范例。

有许多网站都有一个性能，最常见的是博客网站，在右侧可能会呈现文章每一个段落的题目，点上来之后就能够疾速定位到那个段落去。

如果没有任何设定的话，就是点上来间接跳到那定位的段落。但有一种货色叫做平滑滚动（smooth scroll），会增加一些过场，让使用者晓得是滚动到那边去的。

很久以前要实现这个性能可能须要用到 JS，但当初能够用 CSS 的 scroll-behavior: smooth; 来搞定（上面的例子取自 MDN）：

许多网站都有滚动到最底下的时候主动载入更多的性能，在载入更多的时候，你会预期使用者还是停留在同一个地位，不会因为载入更多就主动把滚动条往下滚之类的。

但有时候浏览器默认的解决形式不如预期，有可能你载入更多元素的时候，画面并没有停留在你想像中的地位。

这时候能够用 overflow-anchor 这个 CSS 属性来调整这个行为。

有时候咱们会须要一个这样的成果：使用者微微滑一下，就间接滑到下一个元素，而不是滑到任意中央，这能够通过 scroll-snap 相干的属性来实现的，像是这样：

这个应该很多人都晓得，在手机上的点击事件会有个大概 300ms 的上演，也就是说你点上来之后要等 300ms 才会触发 click 事件。之所以会有这个提早，是因为你能够在手机上通过双击来放大画面，所以在第一次点击的时候，浏览器不晓得你是要点两次还是只点一次，因而须要期待一段时间。

这个提早在之前如同就曾经被去除了，然而如果你发现依然存在的话，能够用 touch-action: manipulation 这个 CSS 属性来解决，这属性能够通过设置来停用一些手势。

更多详情能够参考 MDN。

我是在 Create React App 默认的 css 外面看到这个属性的：

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

在很多网站上也能够发现这两个属性，它们与字体的渲染无关，例如 antialiased 其实就是大家都听过的反锯齿。能够本人决定用什么形式来去渲染字体。

本文简略的记录了一些我感觉比拟难记然而好用的 CSS 属性，因为不会很频繁地去应用，所以等到真的要用的时候很容易遗记属性名，如果在搜寻时关键字输得不对很难找到这个属性叫什么。

如果你也晓得这样的 CSS 属性，欢送分享。

前言