成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

[譯]用CSS來(lái)禁止文本選擇

ShevaKuilin / 1353人閱讀

摘要：原文有些時(shí)候我們需要禁止網(wǎng)頁(yè)的部分文本不能被選擇。這不是一種萬(wàn)全的保證文本不被選擇的策略。這種技巧依賴于非標(biāo)準(zhǔn)的特性，這意味著未來(lái)對(duì)這個(gè)屬性的可持續(xù)支持上面存在著很大的不確定性。屏蔽掉文本選擇是很惱人的。

原文：Disable Text Selection with CSS

有些時(shí)候我們需要禁止網(wǎng)頁(yè)的部分文本不能被選擇。你可以使用user-select這個(gè)CSS特性來(lái)實(shí)現(xiàn)這個(gè)需求。

舉例

下面是一個(gè)使用了disable-selection類的樣式規(guī)則，當(dāng)它作用于一個(gè)HTML元素的時(shí)候，它會(huì)讓我們不能夠選擇這個(gè)元素。

.disable-selection{
    -moz-user-select:none; /* Firefox */
     -ms-user-select:none; /* Internet Explorer */
   -ktml-user-select:none; /* KHTML瀏覽器（比如：Konqueror） */
 -webkit-user-select:none; /* Chrome,Safari,and Opera */
   -webkit-touch-callout:none; /* Disable Android and IOS callout */
}

關(guān)于這些樣式的一些細(xì)節(jié)的解釋：

-webkit-user-select是給Chrome,Safari和Opera用的（并不需要使用-o-user-select）。

沒(méi)有前綴的user-select是被故意略去的。

-webkit-touch-callout屬性可以讓在移動(dòng)設(shè)備上的觸摸后彈出失效。就像下面的這些，我們可以讓它們不能出現(xiàn)。

演示

查看演示

要時(shí)常記住的

有一個(gè)陷阱就是：user-select并不是W3C規(guī)范中標(biāo)準(zhǔn)的CSS特性。盡管user-select通過(guò)添加瀏覽器前綴有很好的瀏覽器支持。

前面的例子中，我沒(méi)有使用沒(méi)有前綴的user-select特性聲明。那是因?yàn)樵趙eb標(biāo)準(zhǔn)中根本就沒(méi)有這個(gè)屬性。我們可以對(duì)它的使用類比于于IE專有的CSS屬性ms-filter或者-ms-text-kashida-space的屬性的使用。

其他需要注意的地方：

user-select是有問(wèn)題并且是不穩(wěn)定的。有些時(shí)候你依然還是可以選擇文本，特別是當(dāng)你從沒(méi)有被屏蔽掉文本選擇的文本的那部分開(kāi)始選擇。

使用全選快捷鍵有些時(shí)候還是會(huì)把屏蔽文本選擇(Win:Ctrl+A/Mac:Cmd+A)。這種情況你可以在IE11中清楚的了解到。

這不是一種萬(wàn)全的保證文本不被選擇的策略。CSS能夠很容易被屏蔽。這種技巧依賴于非標(biāo)準(zhǔn)的CSS特性，這意味著未來(lái)對(duì)這個(gè)屬性的可持續(xù)支持上面存在著很大的不確定性。

屏蔽掉文本選擇是很惱人的。我會(huì)在漸進(jìn)提升的過(guò)程中使用這個(gè)技巧：只有當(dāng)它可以提高使用支持這個(gè)user-select特性的瀏覽器和設(shè)備的用戶的用戶體驗(yàn)的時(shí)候才使用它。但是，我絕不會(huì)把它設(shè)置成一個(gè)大范圍的CSS選擇器像全部選擇器(*）或者body.

這個(gè)user-select特性可能會(huì)讓你的樣式表失效。如果遵循標(biāo)準(zhǔn)對(duì)你來(lái)說(shuō)非常重要，使用這個(gè)屬性會(huì)在你使用規(guī)范測(cè)試比如說(shuō)CSS Validation Service的使用出現(xiàn)問(wèn)題

瀏覽器支持

更新于：2015年3月

瀏覽器 版本支持（以上）
Chrome 6
Firefox 2
IE 10
Safari 3.1

移動(dòng)端

瀏覽器 版本支持（以上）
Chrome(Android) 2.1
Safari(IOS) 3.2

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111181.html

相關(guān)文章

  • css相關(guān) - 收藏集 - 掘金

    摘要：在正式前端一些小細(xì)節(jié)前端掘金英文原文，翻譯未來(lái)的太讓人興奮了一方面，是全新的頁(yè)面布局方式另一方面，是酷炫的濾鏡顏色等視覺(jué)效果。老司機(jī)教你更好的進(jìn)行編程個(gè)技巧前端掘金并不總是容易處理。 CSS3 實(shí)現(xiàn)文字流光漸變動(dòng)畫 - 前端 - 掘金來(lái)自百度前端技術(shù)學(xué)院的實(shí)踐任務(wù)：有趣的鼠標(biāo)懸浮模糊效果，參考：http://ife.baidu.com/course/d...，用CSS3實(shí)現(xiàn)了一下，順便...

    molyzzx 評(píng)論0 收藏0

  • 【譯】表單組件的屬性兼容性表

    摘要：系列文章說(shuō)明原文下面的兼容性表將總結(jié)出表單對(duì)的支持程度，由于和表單的復(fù)雜性，這幾個(gè)表不能認(rèn)為是最佳的參考對(duì)象。該屬性不能生效，或者表現(xiàn)很不一致以至于不可靠。在表單組件上，不支持該屬性。按鈕屬性備注該屬性不會(huì)在上的瀏覽器上生效。 系列文章說(shuō)明 原文 下面的兼容性表將總結(jié)出HTML表單對(duì)CSS的支持程度，由于CSS和HTML表單的復(fù)雜性，這幾個(gè)表不能認(rèn)為是最佳的參考對(duì)象。盡管如此，它們...

    李文鵬 評(píng)論0 收藏0

  • 【譯】表單組件的屬性兼容性表

    摘要：系列文章說(shuō)明原文下面的兼容性表將總結(jié)出表單對(duì)的支持程度，由于和表單的復(fù)雜性，這幾個(gè)表不能認(rèn)為是最佳的參考對(duì)象。該屬性不能生效，或者表現(xiàn)很不一致以至于不可靠。在表單組件上，不支持該屬性。按鈕屬性備注該屬性不會(huì)在上的瀏覽器上生效。 系列文章說(shuō)明 原文 下面的兼容性表將總結(jié)出HTML表單對(duì)CSS的支持程度，由于CSS和HTML表單的復(fù)雜性，這幾個(gè)表不能認(rèn)為是最佳的參考對(duì)象。盡管如此，它們...

    XanaHopper 評(píng)論0 收藏0

  • CSS開(kāi)發(fā)

    摘要：譯十六進(jìn)制顏色揭秘原文地址原文作者譯文出自掘金翻譯計(jì)劃本文永久鏈接教程入門篇關(guān)于是一款進(jìn)行柵格布局的輔助工具，它讓開(kāi)發(fā)者擺脫了冗雜的數(shù)學(xué)計(jì)算，同時(shí)降低了樣式與結(jié)構(gòu)的耦合程度。 【譯】CSS 十六進(jìn)制顏色揭秘 原文地址：CSS Hex Colors Demystified 原文作者：Dave Gash 譯文出自：掘金翻譯計(jì)劃 本文永久鏈接：https://github.com/xitu/...

    warkiz 評(píng)論0 收藏0

  • 【譯】HTML表單樣式

    摘要：并非所有組件受的影響都是平等的如今在表單使用時(shí)依然有一些困難這些問(wèn)題可歸為三類還好的若存在跨平臺(tái)問(wèn)題，一些元素可以只添加少許的樣式，有如下幾個(gè)結(jié)構(gòu)元素此外，還有所有的文本框組件單行或多行，以及按鈕。 系列文章說(shuō)明 原文 本文中，我們將學(xué)習(xí)如何使用CSS來(lái)讓HTML表單看起來(lái)更漂亮，這可能需要竅門才能做到。由于歷史及技術(shù)上的原因，表單組件并不太適合使用CSS；而也正因?yàn)橛羞@些困難，許...

    DC_er 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<