[[395573]]

前言

在寫(xiě)過(guò)一點(diǎn)時(shí)間 CSS 之后，大家對(duì)于常見(jiàn)的屬性應(yīng)該都很熟了，例如最基本的 display、position、padding、margin、border、background 等等，在寫(xiě) CSS 的時(shí)候不需要特別查什么東西，很順的就可以寫(xiě)出來(lái)。

這些屬性之所以常見(jiàn)，是因?yàn)樵S多地方都用得到，而有些 CSS 屬性只能使用在某些特定的地方，或者只有在某個(gè)特定的情境之下才會(huì)出現(xiàn)。我經(jīng)常會(huì)忘記這些沒(méi)不常的屬性，但有時(shí)候這些屬性其實(shí)特別重要。

所以本文介紹一些我覺(jué)得不太好記但是卻很好用的 CSS 屬性，也是順便幫自己做個(gè)筆記。

input 的外框與 “|” 的顏色

比起 border， outline 是一個(gè)相對(duì)少見(jiàn)的屬性，但是要特別提到的是在 input 上的應(yīng)用。在瀏覽器的默認(rèn)行為中，當(dāng)你把焦點(diǎn)移動(dòng)到 input 時(shí)，邊緣會(huì)出現(xiàn)一圈藍(lán)色：

那個(gè)藍(lán)色的就是 outline，可以通過(guò) Chrome devtool 驗(yàn)證：

所以如果不想要 outline 或是想改顏色，那么就修改這個(gè)屬性就行了。

在輸入框中出現(xiàn)的那個(gè)一直閃的 | 叫做 caret，如果想改變顏色的話可以通過(guò) caret-color 屬性修改改：

點(diǎn)擊時(shí)的藍(lán)色框框

我記得在手機(jī)上點(diǎn)擊一些東西的時(shí)候會(huì)出現(xiàn)一個(gè)藍(lán)色的外框還什么之類的，但我剛剛怎么試都沒(méi)有試出來(lái)，總之對(duì)應(yīng)的屬性叫做 -webkit-tap-highlight-color，用這關(guān)鍵字查應(yīng)該可以查到一些其他文章跟范例。

平滑滾動(dòng)

有許多網(wǎng)站都有一個(gè)功能，最常見(jiàn)的是博客網(wǎng)站，在右側(cè)可能會(huì)出現(xiàn)文章每一個(gè)段落的標(biāo)題，點(diǎn)下去之后就可以快速定位到那個(gè)段落去。

如果沒(méi)有任何設(shè)定的話，就是點(diǎn)下去直接跳到那定位的段落。但有一種東西叫做平滑滾動(dòng)（smooth scroll），會(huì)添加一些過(guò)場(chǎng)，讓使用者知道是滾動(dòng)到那邊去的。

很久以前要實(shí)現(xiàn)這個(gè)功能可能需要用到 JS，但現(xiàn)在可以用 CSS 的 scroll-behavior: smooth; 來(lái)搞定（下面的例子取自 MDN）：

載入新內(nèi)容時(shí)的 scroll 位置

許多網(wǎng)站都有滾動(dòng)到最底下的時(shí)候自動(dòng)載入更多的功能，在載入更多的時(shí)候，你會(huì)預(yù)期使用者還是停留在同一個(gè)位置，不會(huì)因?yàn)檩d入更多就自動(dòng)把滾動(dòng)條往下滾之類的。

但有時(shí)候?yàn)g覽器默認(rèn)的處理方式不如預(yù)期，有可能你載入更多元素的時(shí)候，畫(huà)面并沒(méi)有停留在你想像中的位置。

這時(shí)候可以用 overflow-anchor 這個(gè) CSS 屬性來(lái)調(diào)整這個(gè)行為。

一次只滑一個(gè)元素

有時(shí)候我們會(huì)需要一個(gè)這樣的效果：使用者輕輕滑一下，就直接滑到下一個(gè)元素，而不是滑到任意地方，這可以通過(guò) scroll-snap 相關(guān)的屬性來(lái)實(shí)現(xiàn)的，像是這樣：

手機(jī)上的 300ms 點(diǎn)擊延遲

這個(gè)應(yīng)該很多人都知道，在手機(jī)上的點(diǎn)擊事件會(huì)有個(gè)大約 300ms 的演出，也就是說(shuō)你點(diǎn)下去之后要等 300ms 才會(huì)觸發(fā) click 事件。之所以會(huì)有這個(gè)延遲，是因?yàn)槟憧梢栽谑謾C(jī)上通過(guò)雙擊來(lái)放大畫(huà)面 ，所以在第一次點(diǎn)擊的時(shí)候，瀏覽器不知道你是要點(diǎn)兩次還是只點(diǎn)一次，因此需要等待一段時(shí)間。

這個(gè)延遲在之前好像就已經(jīng)被去除了，但是如果你發(fā)現(xiàn)仍然存在的話，可以用 touch-action: manipulation 這個(gè) CSS 屬性來(lái)解決，這屬性可以通過(guò)設(shè)置來(lái)停用一些手勢(shì)。

更多詳情可以參考 MDN。

font-smooth

我是在 Create React App 默認(rèn)的 css 中(https://github.com/facebook/create-react-app/blob/master/packages/cra-template/template/src/index.css#L6) 看到這個(gè)屬性的：

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

在很多網(wǎng)站上也可以發(fā)現(xiàn)這兩個(gè)屬性，它們與字體的渲染有關(guān)，例如 antialiased 其實(shí)就是大家都聽(tīng)過(guò)的反鋸齒?？梢宰约簺Q定用什么方式來(lái)去渲染字體。

結(jié)語(yǔ)

本文簡(jiǎn)單的記錄了一些我覺(jué)得比較難記但是好用的 CSS 屬性，因?yàn)椴粫?huì)很頻繁地去使用，所以等到真的要用的時(shí)候很容易忘記屬性名，如果在搜索時(shí)關(guān)鍵字輸?shù)貌粚?duì)很難找到這個(gè)屬性叫什么。