一些很差記卻很好用的 CSS 屬性

前言

在寫過一點時間 CSS 以後，你們對於常見的屬性應該都很熟了，例如最基本的 display、position、padding、margin、border、background 等等，在寫 CSS 的時候不須要特別查什麼東西，很順的就能夠寫出來。

這些屬性之因此常見，是由於許多地方都用獲得，而有些 CSS 屬性只能使用在某些特定的地方，或者只有在某個特定的情境之下才會出現。我常常會忘記這些沒不常的屬性，但有時候這些屬性其實特別重要。

因此本文介紹一些我以爲不太好記可是卻很好用的 CSS 屬性，也是順便幫本身作個筆記。

input 的外框與 「|」 的顏色

比起 border， outline 是一個相對少見的屬性，可是要特別提到的是在 input 上的應用。在瀏覽器的默認行爲中，當你把焦點移動到 input 時，邊緣會出現一圈藍色：

那個藍色的就是 outline，能夠經過 Chrome devtool 驗證：

因此若是不想要 outline 或是想改顏色，那麼就修改這個屬性就好了。

在輸入框中出現的那個一直閃的 | 叫作 caret，若是想改變顏色的話能夠經過 caret-color 屬性修改改：

點擊時的藍色框框

我記得在手機上點擊一些東西的時候會出現一個藍色的外框還什麼之類的，但我剛剛怎麼試都沒有試出來，總之對應的屬性叫作 -webkit-tap-highlight-color，用這關鍵字查應該能夠查到一些其餘文章跟範例。

平滑滾動

有許多網站都有一個功能，最多見的是博客網站，在右側可能會出現文章每個段落的標題，點下去以後就能夠快速定位到那個段落去。

若是沒有任何設定的話，就是點下去直接跳到那定位的段落。但有一種東西叫作平滑滾動（smooth scroll），會添加一些過場，讓使用者知道是滾動到那邊去的。

好久之前要實現這個功能可能須要用到 JS，但如今能夠用 CSS 的 scroll-behavior: smooth; 來搞定（下面的例子取自 MDN）：

載入新內容時的 scroll 位置

許多網站都有滾動到最底下的時候自動載入更多的功能，在載入更多的時候，你會預期使用者仍是停留在同一個位置，不會由於載入更多就自動把滾動條往下滾之類的。

但有時候瀏覽器默認的處理方式不如預期，有可能你載入更多元素的時候，畫面並無停留在你想像中的位置。

這時候能夠用 overflow-anchor 這個 CSS 屬性來調整這個行爲。

一次只滑一個元素

有時候咱們會須要一個這樣的效果：使用者輕輕滑一下，就直接滑到下一個元素，而不是滑到任意地方，這能夠經過 scroll-snap 相關的屬性來實現的，像是這樣：

手機上的 300ms 點擊延遲

這個應該不少人都知道，在手機上的點擊事件會有個大約 300ms 的演出，也就是說你點下去以後要等 300ms 纔會觸發 click 事件。之因此會有這個延遲，是由於你能夠在手機上經過雙擊來放大畫面 ，因此在第一次點擊的時候，瀏覽器不知道你是要點兩次仍是隻點一次，所以須要等待一段時間。

這個延遲在以前好像就已經被去除了，可是若是你發現仍然存在的話，能夠用 touch-action: manipulation 這個 CSS 屬性來解決，這屬性能夠經過設置來停用一些手勢。

更多詳情能夠參考 MDN。

font-smooth

我是在 Create React App 默認的 css 裏面看到這個屬性的：

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

在不少網站上也能夠發現這兩個屬性，它們與字體的渲染有關，例如 antialiased 其實就是你們都聽過的反鋸齒。能夠本身決定用什麼方式來去渲染字體。

結語

本文簡單的記錄了一些我以爲比較難記可是好用的 CSS 屬性，由於不會很頻繁地去使用，因此等到真的要用的時候很容易忘記屬性名，若是在搜索時關鍵字輸得不對很難找到這個屬性叫什麼。

若是你也知道這樣的 CSS 屬性，歡迎分享。