閱讀(2.5k) 書簽贊(0) 我要糾錯

CSS 移動端常用私有屬性

2020-09-09 14:54 更新

目前兩大主流移動平臺為 iOS 和 Android，有不少帶 -webkit- 前輟的 CSS 私有屬性以及一些 iOS only 屬性，當中好些屬性在日常需求中經(jīng)常應用到。

WebKit CSS 屬性中的一部分已經(jīng)被包含在 CSS 規(guī)范草案中，并且可能成為最后的推薦標準，但目前仍然是試驗性的屬性，還有一些屬性是不規(guī)范的屬性，它們沒有出現(xiàn)在跟蹤規(guī)范中。

-webkit-scrollbar

-webkit-scrollbar 是-webkit-私有的偽元素，用于對擁有overflow屬性的區(qū)域 自定義滾動條的樣式。

譬如，為了隱藏滾動條，你可以這么做：

.scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
}

除了對整個滾動條的控制外，Webkit還提供了控制對滾動條各組成部分的表現(xiàn)渲染的偽元素，甚至具體到滾動條的各種狀態(tài)行為的偽類。

滾動條各塊組成表現(xiàn)渲染的偽元素

一般而言，滾動條的主要組成部分包括：

滾動按鈕 — 滾動按鈕的夾角則被稱為滾動角(corner)。
軌道 — 軌道(track)可以進一步分為軌枕(track pieces) 和滑塊(thumb)。

Webkit則根據(jù)滾動條各組成部分，提供了不同的偽元素來自定義樣式。

::-webkit-scrollbar              { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }

下面則是各偽元素對應的滾動條各部分：

::-webkit-scrollbar：滾動條整體部分。可設置width、height、background、border等。

::-webkit-scrollbar-button：滾動條兩端的按鈕?？梢杂胐isplay:none讓其不顯示，也可以添加背景圖片，顏色改變顯示效果。

::-webkit-scrollbar-track：軌道?？梢杂胐isplay:none讓其不顯示，也可以添加背景圖片，顏色改變顯示效果。

::-webkit-scrollbar-track-piece：軌枕，也就是除去滾動滑塊的部分。

::-webkit-scrollbar-thumb：滾動滑塊，也就是滾動條里面可以拖動的那部分。

::-webkit-scrollbar-corner：滾動按鈕的夾角則被稱為滾動角。

::-webkit-resizer：用于定義右下角拖動塊的樣式。

需要注意的是：若是水平滾動條，則width屬性不起作用，height屬性用來控制滾動條相應部分豎直方向高度；若是豎直滾動條，則height屬性不起作用，width屬性用來控制相應部分的寬度。

滾動條各塊組成的偽元素

下面的偽類可以應用到上面的偽元素中。
:horizontal：選擇水平方向的滾動條。

:vertical：選擇垂直方向的滾動條。

:decrement：適用于滾動按鈕和軌枕。選擇能夠使得視窗位置遞減狀態(tài)(例如，垂直滾動條向上滾動，水平滾動條向左滾動。)的滾動按鈕或軌枕。

:increment：適用于滾動按鈕和軌枕。選擇能夠使得視窗位置遞增狀態(tài)(例如，垂直滾動條向下滾動，水平滾動條向右滾動。)的滾動按鈕或軌枕。

:start：適用于滾動按鈕和軌枕。選擇位于滾動滑塊前邊的滾動按鈕和軌枕。

:end：適用于滾動按鈕和軌枕。選擇位于滾動滑塊后邊的滾動按鈕和軌枕。

:double-button：適用于滾動按鈕和軌枕。選中緊挨著一對按鈕的軌枕以及位于滾動條某一端的一對按鈕中的其中一個滾動按鈕。

:single-button：適用于滾動按鈕和軌枕。選中緊挨著僅一個按鈕的軌枕以及位于滾動條某一端的僅它本身一個的滾動按鈕。

:no-button：適用于軌枕。選中軌道結束位置沒有按鈕的軌枕。

:corner-present：適用于選中滾動角不存在的滾動條。

:window-inactive：適用于所有滾動條，選中焦點不在該視窗的滾動區(qū)域。

另外，:enabled、:disabled、:hover、和:active等偽類同樣在滾動條中適用。
為了更好地理解，以下是幾個偽元素組合偽類的應用例子：

::-webkit-scrollbar-track-piece:start {
 /\*滾動條上半邊或左半邊\*/
}
::-webkit-scrollbar-thumb:window-inactive {
 /\*當焦點不在當前區(qū)域滑塊的狀態(tài)\*/

::-webkit-scrollbar-button:horizontal:decrement:hover {
 /\*當鼠標在水平滾動條下面的按鈕上的狀態(tài)\*/

或者，讀者可以去閱讀官方例子

-webkit-touch-callout

-webkit-touch-callout 是一個不規(guī)范的屬性（unsupported WebKit property），它沒有出現(xiàn)在 CSS 規(guī)范草案中。

當你觸摸并按住觸摸目標時候，禁止或顯示系統(tǒng)默認菜單。在iOS上，當你觸摸并按住觸摸的目標，比如一個鏈接，Safari瀏覽器將顯示鏈接有關的系統(tǒng)默認菜單，這個屬性可以讓你禁用系統(tǒng)默認菜單。

屬性值

none：系統(tǒng)默認菜單被禁用
inherit：系統(tǒng)默認菜單不被禁用

兼容性

iOS 2.0及更高版本的 Safari 瀏覽器可用
Android 尚不明確

-webkit-tap-highlight-color

-webkit-tap-highlight-color 是一個不規(guī)范的屬性（unsupported WebKit property），它沒有出現(xiàn)在 CSS 規(guī)范草案中。

在 iOS Safari 上，當用戶點擊鏈接或具有 JavaScript 可點擊腳本的元素，系統(tǒng)會為這些被點擊元素加上一個默認的透明色值，該屬性可以覆蓋該透明值。

屬性值

<color>：顏色值

兼容性

iOS 1.1.1及更高版本的Safari瀏覽器可用
大部分安卓手機

-webkit-overflow-scrolling

定義在具 overflow:scroll 屬性的元素內(nèi)是否采用原生樣式滾動行為

屬性值

auto：默認值，單手滾動，滾動沒有慣性效果
touch：原生樣式滾動，應用此屬性值會產(chǎn)生層疊上下文（會影響定位參照物的屬性，類似 opacity、masks、transforms屬性，影響到 position 的效果，甚至影響到 position:fixed 的定位參照物，）

兼容性

iOS 5.0 及更高版本
大部分安卓機

-webkit-line-clamp

-webkit-line-clamp 是一個不規(guī)范的屬性（unsupported WebKit property），它沒有出現(xiàn)在 CSS 規(guī)范草案中。

限制在一個塊元素顯示的文本的行數(shù)。為了實現(xiàn)該效果，它需要組合其他外來的WebKit屬性。

常見結合屬性：

display: -webkit-box：必須結合的屬性，將對象作為彈性伸縮盒子模型顯示。
-webkit-box-orient：必須結合的屬性，設置或檢索伸縮盒對象的子元素的排列方式。
text-overflow：可以用來多行文本的情況下，用省略號“…”隱藏超出范圍的文本。

屬性值

<number>：塊元素顯示的文本的行數(shù)

兼容性

iOS
Andriod

-webkit-appearance

-webkit-appearance 是一個不規(guī)范的屬性（unsupported WebKit property），它沒有出現(xiàn)在 CSS 規(guī)范草案中。

改變按鈕和其他控件的外觀，使其類似于原生控件。

屬性值

none：去除系統(tǒng)默認 appearance 的樣式，常用于 iOS 下移除原生樣式
button：渲染成 button 的風格
checkbox：渲染成 input checkbox 樣式的復選框按鈕
radio：渲染成 radio 的風格
…

更多屬性值參考 mozilla：-webkit-appearance 屬性

兼容性

iOS 2.0及更高版本的Safari瀏覽器可用
Android 尚不明確

-webkit-font-smoothing

字體平滑，該屬性定義文本的平滑屬性，但要注意以下說明：

非標準屬性，不建議用于網(wǎng)頁上，這個屬性不能保證所有用戶都能看到相同效果，這會使網(wǎng)站的字體渲染造成不一致，而此屬性的渲染行為日后也有可能會改變

屬性值

none：去掉字體平滑效果，使字體帶鋸齒
antialiased：使字體在像素級別更平滑更輕細
subpixel-antialiased：在多數(shù)非 Retina 顯示設備中字體將會更銳利。

注意：以上屬性在 Retina 設備上會有明顯的效果，在非 Retina 設備上看不出差異

兼容性

部分高清設備，如 Retina Mac

-webkit-backface-visibility

backface-visibility 在 W3文檔有定義描述

定義轉換元素的背面是否顯示

屬性值

visible：顯示（默認值）
hidden：隱藏

兼容性

iOS 2.0 及更高版本的 Safari 瀏覽器可用
大部分 Android

-webkit-mask

定義多樣的蒙板效果屬性（縮寫屬性，類似 margin）

使用語法

<mask-image> [<mask-repeat> || <mask-attachment> || <mask-position> || <mask-origin> || <mask-clip> || <mask-composite>]*
where 
<mask-position> = [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top  | center | bottom ]?

默認值：

-webkit-mask: none repeat scroll 0% 0% padding border add;

屬性值

<mask-image>：為元素設置蒙板圖片，蒙板圖片會根據(jù)圖片的透明區(qū)域對元素可視部分進行裁剪
- <uri>：圖片鏈接作為蒙板圖片
- <gradient>：漸變函數(shù) -webkit-gradient 作為蒙板圖片
- none：去掉蒙板圖片
<mask-repeat>：定義蒙板圖片是否平鋪或平鋪的方式
- repeat：默認值，水平和垂直方向平鋪
- repeat-x：水平方向平鋪
- repeat-y：垂直方向平鋪
- no-repeat：不平鋪
<mask-attachment>：如果 -webkit-mask-image 屬性有設置，attachment 決定該圖片是否相對視窗固定或隨著其容器滾動
- scroll：默認值，隨容器滾動
- fixed：相地視窗固定
<mask-position>：定義蒙板圖片的初始位置，書寫格式類似 background-position—-<mask-position>[， <mask-position>]*
- <percentage>
- <length>
- left
- right
- center
<mask-origin>：定義蒙板圖片定位相對起點，與 webkit-mask-position 屬性相關。當 -webkit-mask-attachment:fixed 的時候，該屬性不生效。
- padding：默認值，蒙板定位相對邊距
- border：蒙板定位相對邊框
- content：蒙板定位相對元素盒子內(nèi)容
<mask-clip>：如果 -webkit-mask-image 屬性有設置，-webkit-mask-clip 將定義蒙板圖片的裁剪區(qū)域
- border：默認值，蒙板圖片延伸到容器的邊框
- padding：蒙板圖片延伸到容器的邊距
- content：蒙板圖片裁剪到元素盒子內(nèi)容范圍
- text：蒙板圖片裁剪到元素文本范圍
<mask-composite>：定義蒙板圖片重合的裁剪顯示方式
- add：默認值，圖片重合不裁剪
- subtract：去掉層級低的圖形以及圖片重合部分圖形，只留層級高非重合部分圖形
- intersect：只留重合部分圖形
- exclude：只去掉重合部分圖形

有關屬性更詳細描述請參考：

w3 - css-masking

MDN - -webkit-mask

攜程 UED - -webkit-mask

兼容性

Safari 4.0 及更高版本
iOS 4.0 及更高版本
Android 2.1 及更高版本

-webkit-user-select

定義用戶是否能選中元素內(nèi)容

屬性值

auto：可選中元素內(nèi)容
none：不能選中任何內(nèi)容
text：可選中元素內(nèi)的文本

兼容性

iOS 3.0 及更高版本的 Safari
大部分安卓手機

-webkit-user-modify

定義用戶是否可編輯元素內(nèi)容

屬性值

read-only：只讀
read-write：可讀可寫，粘貼內(nèi)容會保留富文本格式（ Android 機不保留富文本格式）
read-write-plaintext-only：可讀可寫，粘貼內(nèi)容所有富文本格式都會丟失

注意：使用這個屬性的時候，請不要出現(xiàn) -webkit-user-select: none，文本無法選中的情況下，在 Safari 該屬性不生效，不過在 Chrome 依然生效

兼容性

iOS 5.0 及更高版本
Safari 3.0 及更高版本
大部分安卓手機

-webkit-text-stroke

定義文本描邊，可以設計描邊的寬和顏色，一般與文本填充屬性 -webkit-text-fill-color 共用。

屬性值

<length>：長度單位
<color>：顏色值

兼容性

iOS 2.0 及更高版本
Safari 3.0 及更高版本
安卓尚不明確

-webkit-text-fill-color

定義文本填充，一般與文本描邊屬性 -webkit-text-stroke 共用。

屬性值

<color>：顏色值
currentcolor：元素 color 屬性值
-webkit-activelink：鏈接被點擊時系統(tǒng)的默認顏色

更多屬性值參考：Safari CSS Reference -webkit-text-fill-color

兼容性

iOS 2.0 及更高版本
Safari 3.0 及更高版本
安卓尚不明確

-webkit-text-size-adjust

定義 iOS Safari 網(wǎng)頁文本大小調(diào)整屬性

屬性值

<percentage>：百分比值，字體顯示調(diào)整值
auto：字體自動調(diào)整
none：字體不能自動調(diào)整

兼容性

iOS 1.0 及更高版本
Safari on iOS only
安卓尚不明確

-webkit-marquee

定義滾動文本內(nèi)容屬性（縮寫屬性，類似margin）。

使用語法

-webkit-marquee: direction increment repetition style speed

屬性值

<direction>：滾動方向
- ahead：從下到上滾動
- auto：默認滾動方向
- backwards：從右到左滾動
- down：從上到下滾動
- forwards：從左到右滾動
- left：從右到左滾動
- reverse：從上到下滾動
- right：從左到右滾動
- up：從下到上滾動
<increment>：每次移動的距離
- [<percentage> | <length>]
- large：距離常量
- medium：距離常量
- small：距離常量
<repetition>：文字滾動的重復次數(shù)
- 非負整數(shù)
- infinite：無限次
<style>：文字滾動的方式
- alternate：重復滾動
- none：停止?jié)L動
- scroll：在定義方向上滾動
- slide：定義方向上滾動，內(nèi)容顯示完畢或者內(nèi)容滾動到滾動區(qū)域另一端邊框時候都會停止下來
<speed>：滾動或滑動的速度
- 非負整數(shù)（毫秒單位）或帶時間單位的非負整數(shù)
- fast
- normal
- slow

兼容性

iOS 1.0 及更高版本
Safari 3.0 及更高版本
大部分安卓手機

-webkit-filter

濾鏡屬性可以讓元素本身內(nèi)容（文本、背景等）及其子元素加上濾鏡效果

屬性值

blur(<length>)：模糊，原始效果值為 0px，不接受負值
brightness([ <number> | <percentage> ])：亮度，原始效果值為 1 或 100%，不接受負值
contrast([ <number> | <percentage> ])：對比度，原始效果值為 1 或 100%，不接受負值
drop-shadow( <length>{2，4} <color>?)：投影，原始效果值為所有長度值為 0，長度值至少2個，最多4個，
grayscale([ <number> | <percentage> ] )：灰度，原始效果值為 0，最大值為 1 或 100%，不接受負值
hue-rotate( <angle>)：相位，原始效果值為 0deg
invert( [ <number> | <percentage> ])：反相，原始效果值為 0，最大值為 1 或 100%，不接受負值
opacity([ <number> | <percentage> ] )：透明度，原始效果值為 1，最大值為 1 或 100%，不接受負值
saturate([ <number> | <percentage> ])：飽和度，原始效果值為 1，不接受負值
sepia([ <number> | <percentage> ])：烏賊墨，原始效果值為 0，最大值為 1 或 100%，不接受負值

關于 -webkit-filter 與 -webkit-backdrop-filter 的屬性對比可以參考：

What’s New in Safari 9.0 - backdrop-filter

兼容性

iOS 8.0 及更高版本
Safari 8.0 及更高版本
Android 4.4 及更高版本

-webkit-backdrop-filter

背景濾鏡屬性可以讓元素的背景或元素層級以下的元素加上濾鏡效果

屬性值

blur(<length>)：模糊，原始效果值為 0px，不接受負值
brightness([ <number> | <percentage> ])：亮度，原始效果值為 1 或 100%，不接受負值
contrast([ <number> | <percentage> ])：對比度，原始效果值為 1 或 100%，不接受負值
drop-shadow( <length>{2，3} <color>?)：投影，原始效果值為所有長度值為 0，長度值至少2個，最多3個，注意：不支持投影擴展值和混合投影
grayscale([ <number> | <percentage> ] )：灰度，原始效果值為 0，最大值為 1 或 100%，不接受負值
hue-rotate( <angle>)：相位，原始效果值為 0deg
invert( [ <number> | <percentage> ])：反相，原始效果值為 0，最大值為 1 或 100%，不接受負值
opacity([ <number> | <percentage> ] )：透明度，原始效果值為 1，最大值為 1 或 100%，不接受負值
saturate([ <number> | <percentage> ])：飽和度，原始效果值為 1，不接受負值
sepia([ <number> | <percentage> ])：烏賊墨，原始效果值為 0，最大值為 1 或 100%，不接受負值

關于 -webkit-filter 與 -webkit-backdrop-filter 的屬性對比可以參考：

What’s New in Safari 9.0

兼容性

iOS 9.0 及更高版本
Safari 9.0 及更高版本
安卓尚未明確

position:-webkit-sticky

可以使得元素在頁面沒有滾動的情況下表現(xiàn)得像relative，在滾動條滾到該元素區(qū)域的時候根據(jù)top值的設置使元素固定離頂部的距離，表現(xiàn)像 position:fixed，也就是常見的吸頂需求效果。

特性

依賴父級元素滾動區(qū)域
定位參考物始終是 viewport，transform 等可以改變 position:fixed 定位參考物的屬性也沒辦法改變 position:-webkit-sticky 的定位參考物
position:-webkit-sticky 屬性的元素固定區(qū)域只依賴其父元素的可滾動高度，如果其父元素高度小于元素本身的高度，fixed效果失效。

兼容性

iOS 6.1 及更高版本
iOS only

-apple-system

蘋果操作系統(tǒng)會從兩種不同外觀和大小的字體進行自動轉換去調(diào)節(jié)系統(tǒng)新字體 “San Francisco”，可以通過 CSS 規(guī)則

font-family: -apple-system , sans-serif;

讓系統(tǒng)智能選擇適配操作系統(tǒng)的字體，添加 -apple-system 可以使字體變得更圓潤銳利。

關于 -apple-system 更詳細的介紹可以參考：

What’s New in Safari 9.0

兼容性

iOS 9.0 及更高版本
Safari 9.0 及更高版本
iOS / OS X only

CSS 移動端常用私有屬性

-webkit-scrollbar

滾動條各塊組成表現(xiàn)渲染的偽元素

滾動條各塊組成的偽元素

參考資料：

-webkit-touch-callout

屬性值

兼容性

-webkit-tap-highlight-color

屬性值

兼容性

-webkit-overflow-scrolling

屬性值

兼容性

-webkit-line-clamp

屬性值

兼容性

-webkit-appearance

屬性值

兼容性

-webkit-font-smoothing

屬性值

兼容性

-webkit-backface-visibility

屬性值

兼容性

-webkit-mask

使用語法

屬性值

兼容性

-webkit-user-select

屬性值

兼容性

-webkit-user-modify

屬性值

兼容性

-webkit-text-stroke

屬性值

兼容性

-webkit-text-fill-color

屬性值

兼容性

-webkit-text-size-adjust

屬性值

兼容性

-webkit-marquee

使用語法

屬性值

兼容性

-webkit-filter

屬性值

兼容性

-webkit-backdrop-filter

屬性值

兼容性

position:-webkit-sticky

特性

兼容性

-apple-system

兼容性

更多 WebKit CSS 屬性