提高前端專業承認度的幾個CSS屬性

我總結了幾個初學前端們可能不多接觸的幾個 css 屬性，一旦你學會了他們，身價倍兒長，專業度迅速提高～

touch-action

touch-action 用於設置觸摸屏用戶如何操縱元素的區域(例如，瀏覽器內置的縮放功能)。常見的幾個屬性值以下：

屬性	說明
auto	由瀏覽器來決定進行哪些操做
none	不進行任何操做
pan-x	單指水平平移手勢
pan-y	單指垂直平移手勢

那這個屬性咱們能夠用來幹什麼呢？開發過可水平滑動的Swiper的同窗，可能有經歷過在手機默認瀏覽器中水平滑動卡頓或不生效的問題，「右滑過快，啪～回退了」（速度還很快）

可是這個問題在 Chrome、Safari 瀏覽器中卻不能復現，並且還異常流暢，QA 同窗也沒辦法只能發起致命催改。

怎麼肥事呢，這就涉及到瀏覽器的默認行爲處理了，咱們在手機默認瀏覽器屢次點擊網頁中的連接，實際上會開好幾個子頁面，爲了提高用戶體驗，瀏覽器當發現是左右滑動手勢的時候就會觸發相應回退和前進操做。

要解決這個問題，咱們就要抓住問題的關鍵點：瀏覽器默認行爲，咱們只須要在Swiper根容器添加 css 屬性 touch-action: pan-y;，奇蹟就發生了，bug修復了！！！

pan-y 就是告訴瀏覽器只須要處理垂直方向的默認行爲（滾動）就好了，其餘的你別管我。

這個地方必定要注意別寫成 touch-action: none;，不然你無法滾動了🙄️

pointer-events

pointer-events 屬性用於指定在什麼狀況下 (若是有) 某個特定的元素能夠成爲指針事件的target，沒錯就是指針事件對象（鼠標點擊、觸摸點擊等）中的 target 屬性值。常見的屬性值以下：

屬性	說明
auto	與屬性未指定時的表現效果相同
none	元素永遠不會成爲指針事件的target

根據屬性說明，咱們能夠推測出用途了，當咱們實現一個 cancas 畫布覆蓋在整個頁面上，飄着櫻花的時候，固然不但願頁面裏的點擊事件不能響應，咱們就能夠給 canvas 設置 css 屬性 pointer-events: none; ，咱們的點擊就能穿透 canvas 精確觸發下層元素的點擊事件。

固然，pointer-events還有其餘的屬性，主要是用於 SVG 元素的處理，若是你感興趣，能夠深刻探索一下，實現異形形狀的點擊事件，也是很是有意思的呢。

user-select

user-select 屬性用於控制用戶可否選中文本。經常使用的屬性值以下：

屬性	說明
all	當雙擊子元素或者上下文時，那麼包含該子元素的最頂層元素也會被選中
none	元素及其子元素的文本不可選中

屬性值 user-select: all; 用於提高用戶體驗特別的有用，好比有這樣的片斷:

<div>電話：<em>010-</em><span>1234567890</span></div>
複製代碼

咱們但願雙擊到 <span>1234567890</span>也能全選到前面的<em>010-</em>的時候，咱們能夠嵌套一下:

<div>電話：<span style="user-select:all;"><em>010-</em><span>1234567890</span></span></div>
複製代碼

這樣就能完美的全選中整個電話號碼了。

屬性值 user-select: none; 主要用於防止用戶選中複製內容，或者避免屢次點擊按鈕出現藍色選區的問題。

當咱們在作富交互的H5動畫頁的時候，在 CSS 文件中加入魔法代碼：

*:not(input,textarea) {
    -webkit-touch-callout: none;
    user-select: none;
}
複製代碼

能夠大大提高整個頁面的操做質感～

-webkit-overflow-scrolling

-webkit-overflow-scrolling 這個屬性目前只在 safari 中有支持，控制元素在移動設備上是否使用滾動回彈效果。在支持滾動的元素上指定-webkit-overflow-scrolling: touch; 會讓瀏覽器對這個滾動容器進行特殊的服務加持，所以滾動體驗會大大提高。可是好屬性不要貪杯，在複雜嵌套滾動的時候要慎重使用，不然會有出現難以理解的bug。

currentColor

這是一個特殊的屬性值，也許是最先的css變量，這是我最喜歡用的屬性值之一，特別是在有父子嵌套，且多處設置同一個顏色的時候。看名字能夠推測出它是顏色值color的引用，也就是說currentColor的值跟color的值是一致的。看下面的例子：

<input style="color:red;border:1px solid currentColor;">
複製代碼

上面的代碼就能實現 input 的邊框和文字顏一致，咱們能夠在調試面板隨意的調整 color，你會發現邊框的顏色會跟着一塊兒變化，用來作動畫也十分的方便。

好了，這幾個屬性學廢融匯貫通以後，相信你也會更自信💪

點個贊再走？