css-featured-image

網頁反白設定「::selection」

不知道知各位是否有注意到,有些網站當滑鼠反白時,反白區域的底色好像不太一樣?

通常的反白底色應該是藍色,就是舊版Windows桌面(對,就是那張風景照)天空的藍色。但其實也可以像 INSIDE 這樣修改反白時的背景色跟字體顏色!

今天要介紹的 pseudo element 偽元素::selection就是負責這項設定。

1.何謂偽元素 Pseudo element

在CSS的世界裡滾久了應該會遇到兩種東西,拿個範例就是:hover::selection這兩類。一個簡單的分類就是單冒號或雙冒號。

這個,就是「Pseudo class / element」,偽類別 / 元素。

今天要介紹的::selection就是所謂的偽元素,作用是「修改被選擇對象特定部分的樣式」。就::selection來說,他能修改被選擇對象被滑鼠選取時的字體顏色跟背景色等等,語法特徵是「雙冒號」!

同時因其特殊的特性,偽元素並不會出現在網頁原始碼裡,也就是一個「不存在的元素」,因此被稱為「偽元素」。

2.「::selection」簡易介紹

2.1.支援度

  • Chrome >= v4.0
  • IE >= 9.0
  • FireFox >= 2.0 -moz-
  • Safari >= 3.1
  • Opera >= 7.0

2.2.作用

修改被選擇對象的:

  • 字體顏色color
  • 背景顏色background-color
  • 滑鼠鼠標樣式cursor
  • 文字輸入提示符號顏色caret-color
  • 文字裝飾text-decoration
  • 文字陰影text-shadow
  • 強調文字顏色text-emphasis-color
  • 元素外框outline

3. 使用範例與注意事項

background-color+color作範例,假設我們想要修改網站內容反白時的背景與文字顏色,可以這樣做:

  1. *::selection{//除了火狐之外的瀏覽器
  2.     background-color: #5c5c5c;//深灰色,接近黑色
  3.     color: #ffffff;//白色
  4. }
  5. *::-moz-selection{//火狐需要特別設定
  6.     background-color: #5c5c5c;
  7.     color: #ffffff;
  8. }

蠻意外火狐居然要另外設定,這種另外設定不是IE的專利嗎(?

經過範例的設定後,只要在網站內進行反白的動作,被反白的區域就會是黑底白字。當然要針對特定元素進行設定也行,只要將*符號改成要單獨設定的元素就好。

例如針對navnav::selection這樣。

目前經過測試,修改選取部分的背景色和字體顏色是確定可行的,其他的設定歡迎各位自行嘗試。

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.