閱讀(2.2k) 書簽贊(0) 我要糾錯(cuò)

CSS 移動(dòng)端常用私有屬性

2020-09-09 14:54 更新

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

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

-webkit-scrollbar

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

譬如，為了隱藏滾動(dòng)條，你可以這么做：

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

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

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

一般而言，滾動(dòng)條的主要組成部分包括：

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

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

::-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 */ }

下面則是各偽元素對(duì)應(yīng)的滾動(dòng)條各部分：

::-webkit-scrollbar：滾動(dòng)條整體部分。可設(shè)置width、height、background、border等。

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

::-webkit-scrollbar-track：軌道。可以用display:none讓其不顯示，也可以添加背景圖片，顏色改變顯示效果。

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

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

::-webkit-scrollbar-corner：滾動(dòng)按鈕的夾角則被稱為滾動(dòng)角。

::-webkit-resizer：用于定義右下角拖動(dòng)塊的樣式。

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

滾動(dòng)條各塊組成的偽元素

下面的偽類可以應(yīng)用到上面的偽元素中。
:horizontal：選擇水平方向的滾動(dòng)條。

:vertical：選擇垂直方向的滾動(dòng)條。

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

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

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

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

:double-button：適用于滾動(dòng)按鈕和軌枕。選中緊挨著一對(duì)按鈕的軌枕以及位于滾動(dòng)條某一端的一對(duì)按鈕中的其中一個(gè)滾動(dòng)按鈕。

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

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

:corner-present：適用于選中滾動(dòng)角不存在的滾動(dòng)條。

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

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

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

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

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

參考資料：

Webkit-Styling Scrollbars
自定義瀏覽器滾動(dòng)條的樣式，打造屬于你的滾動(dòng)條風(fēng)格

-webkit-touch-callout

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

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

屬性值

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

兼容性

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

-webkit-tap-highlight-color

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

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

屬性值

<color>：顏色值

兼容性

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

-webkit-overflow-scrolling

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

屬性值

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

兼容性

iOS 5.0 及更高版本
大部分安卓機(jī)

-webkit-line-clamp

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

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

常見結(jié)合屬性：

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

屬性值

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

兼容性

iOS
Andriod

-webkit-appearance

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

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

屬性值

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

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

兼容性

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

-webkit-font-smoothing

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

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

屬性值

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

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

兼容性

部分高清設(shè)備，如 Retina Mac

-webkit-backface-visibility

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

定義轉(zhuǎn)換元素的背面是否顯示

屬性值

visible：顯示（默認(rèn)值）
hidden：隱藏

兼容性

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

-webkit-mask

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

使用語(yǔ)法

<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 ]?

默認(rèn)值：

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

屬性值

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

有關(guān)屬性更詳細(xì)描述請(qǐng)參考：

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
大部分安卓手機(jī)

-webkit-user-modify

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

屬性值

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

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

兼容性

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

-webkit-text-stroke

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

屬性值

<length>：長(zhǎng)度單位
<color>：顏色值

兼容性

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

-webkit-text-fill-color

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

屬性值

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

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

兼容性

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

-webkit-text-size-adjust

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

屬性值

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

兼容性

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

-webkit-marquee

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

使用語(yǔ)法

-webkit-marquee: direction increment repetition style speed

屬性值

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

兼容性

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

-webkit-filter

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

屬性值

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

關(guān)于 -webkit-filter 與 -webkit-backdrop-filter 的屬性對(duì)比可以參考：

What’s New in Safari 9.0 - backdrop-filter

兼容性

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

-webkit-backdrop-filter

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

屬性值

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

關(guān)于 -webkit-filter 與 -webkit-backdrop-filter 的屬性對(duì)比可以參考：

What’s New in Safari 9.0

兼容性

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

position:-webkit-sticky

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

特性

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

兼容性

iOS 6.1 及更高版本
iOS only

-apple-system

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

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

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

關(guān)于 -apple-system 更詳細(xì)的介紹可以參考：

What’s New in Safari 9.0

兼容性

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

CSS 移動(dòng)端常用私有屬性

-webkit-scrollbar

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

滾動(dòng)條各塊組成的偽元素

參考資料：

-webkit-touch-callout

屬性值

兼容性

-webkit-tap-highlight-color

屬性值

兼容性

-webkit-overflow-scrolling

屬性值

兼容性

-webkit-line-clamp

屬性值

兼容性

-webkit-appearance

屬性值

兼容性

-webkit-font-smoothing

屬性值

兼容性

-webkit-backface-visibility

屬性值

兼容性

-webkit-mask

使用語(yǔ)法

屬性值

兼容性

-webkit-user-select

屬性值

兼容性

-webkit-user-modify

屬性值

兼容性

-webkit-text-stroke

屬性值

兼容性

-webkit-text-fill-color

屬性值

兼容性

-webkit-text-size-adjust

屬性值

兼容性

-webkit-marquee

使用語(yǔ)法

屬性值

兼容性

-webkit-filter

屬性值

兼容性

-webkit-backdrop-filter

屬性值

兼容性

position:-webkit-sticky

特性

兼容性

-apple-system

兼容性

更多 WebKit CSS 屬性