一些不好記卻很好用的 CSS 屬性
前言
在寫過一點時間 CSS 之后，大家對于常見的屬性應(yīng)該都很熟了，例如最基本的 display、position、padding、margin、border、background 等等，在寫 CSS 的時候不需要特別查什么東西，很順的就可以寫出來。
這些屬性之所以常見，是因為許多地方都用得到，而有些 CSS 屬性只能使用在某些特定的地方，或者只有在某個特定的情境之下才會出現(xiàn)。我經(jīng)常會忘記這些沒不常的屬性，但有時候這些屬性其實特別重要。
所以本文介紹一些我覺得不太好記但是卻很好用的 CSS 屬性，也是順便幫自己做個筆記。
input 的外框與 “|” 的顏色
比起 border， outline 是一個相對少見的屬性，但是要特別提到的是在 input 上的應(yīng)用。在瀏覽器的默認行為中，當你把焦點移動到 input 時，邊緣會出現(xiàn)一圈藍色：
那個藍色的就是 outline，可以通過 Chrome devtool 驗證：
所以如果不想要 outline 或是想改顏色，那么就修改這個屬性就行了。
在輸入框中出現(xiàn)的那個一直閃的 | 叫做 caret，如果想改變顏色的話可以通過 caret-color 屬性修改改：
點擊時的藍色框框
我記得在手機上點擊一些東西的時候會出現(xiàn)一個藍色的外框還什么之類的，但我剛剛怎么試都沒有試出來，總之對應(yīng)的屬性叫做 -webkit-tap-highlight-color，用這關(guān)鍵字查應(yīng)該可以查到一些其他文章跟范例。
平滑滾動
有許多網(wǎng)站都有一個功能，最常見的是博客網(wǎng)站，在右側(cè)可能會出現(xiàn)文章每一個段落的標題，點下去之后就可以快速定位到那個段落去。
如果沒有任何設(shè)定的話，就是點下去直接跳到那定位的段落。但有一種東西叫做平滑滾動（smooth scroll），會添加一些過場，讓使用者知道是滾動到那邊去的。
很久以前要實現(xiàn)這個功能可能需要用到 JS，但現(xiàn)在可以用 CSS 的 scroll-behavior: smooth; 來搞定（下面的例子取自 MDN）：
載入新內(nèi)容時的 scroll 位置
許多網(wǎng)站都有滾動到最底下的時候自動載入更多的功能，在載入更多的時候，你會預(yù)期使用者還是停留在同一個位置，不會因為載入更多就自動把滾動條往下滾之類的。
但有時候瀏覽器默認的處理方式不如預(yù)期，有可能你載入更多元素的時候，畫面并沒有停留在你想像中的位置。
這時候可以用 overflow-anchor 這個 CSS 屬性來調(diào)整這個行為。
一次只滑一個元素
有時候我們會需要一個這樣的效果：使用者輕輕滑一下，就直接滑到下一個元素，而不是滑到任意地方，這可以通過 scroll-snap 相關(guān)的屬性來實現(xiàn)的，像是這樣：
手機上的 300ms 點擊延遲
這個應(yīng)該很多人都知道，在手機上的點擊事件會有個大約 300ms 的演出，也就是說你點下去之后要等 300ms 才會觸發(fā) click 事件。之所以會有這個延遲，是因為你可以在手機上通過雙擊來放大畫面 ，所以在第一次點擊的時候，瀏覽器不知道你是要點兩次還是只點一次，因此需要等待一段時間。
這個延遲在之前好像就已經(jīng)被去除了，但是如果你發(fā)現(xiàn)仍然存在的話，可以用 touch-action: manipulation 這個 CSS 屬性來解決，這屬性可以通過設(shè)置來停用一些手勢。
更多詳情可以參考 MDN。
font-smooth
我是在 Create React App 默認的 css 中(https://github.com/facebook/create-react-app/blob/master/packages/cra-template/template/src/index.css#L6) 看到這個屬性的：
- body {
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- }
在很多網(wǎng)站上也可以發(fā)現(xiàn)這兩個屬性，它們與字體的渲染有關(guān)，例如 antialiased 其實就是大家都聽過的反鋸齒?？梢宰约簺Q定用什么方式來去渲染字體。
結(jié)語
本文簡單的記錄了一些我覺得比較難記但是好用的 CSS 屬性，因為不會很頻繁地去使用，所以等到真的要用的時候很容易忘記屬性名，如果在搜索時關(guān)鍵字輸?shù)貌粚茈y找到這個屬性叫什么。
