Title: Conditional Stylesheets and Body Classes
Author: qstudio
Published: <strong>2013 年 12 月 10 日</strong>
Last modified: 2016 年 1 月 17 日

---

搜尋外掛

這個外掛**並未在最新的 3 個 WordPress 主要版本上進行測試**。開發者可能不再對這個
外掛進行維護或提供技術支援，並可能會與更新版本的 WordPress 產生使用上的相容性問題。

![](https://s.w.org/plugins/geopattern-icon/browsers.svg)

# Conditional Stylesheets and Body Classes

 由 [qstudio](https://profiles.wordpress.org/qlstudio/) 開發

[下載](https://downloads.wordpress.org/plugin/browsers.0.4.7.zip)

 * [詳細資料](https://tw.wordpress.org/plugins/browsers/#description)
 * [使用者評論](https://tw.wordpress.org/plugins/browsers/#reviews)
 *  [安裝方式](https://tw.wordpress.org/plugins/browsers/#installation)
 * [開發資訊](https://tw.wordpress.org/plugins/browsers/#developers)

 [技術支援](https://wordpress.org/support/plugin/browsers/)

## 外掛說明

Easily include browser specific stylesheets in templates or select browser and version
specific classes in CSS.

Conditional browser stylesheets are added after the main theme style.css allowing
them to overrule previous rules – you only need to add the CSS rules that should
change.

This plugin uses up-to-date WordPress top level functions, sanitizes all input data
and is fully internationalized.

For feature request and bug reports, [please use the Q Support Website](https://qstudio.us/support/categories/conditional-stylesheets-and-body-classes).

Please do not use the WordPress.org forum to report bugs, as we no longer monitor
or respond to questions there.

#### Features

 * Checks for and adds browser and version specific stylesheets – such as “browsers-
   windows-firefox.css”.
 * Add browser and version specific body classes to all pages – such as body.browsers-
   msie-10
 * Includes the Mobile Detect class and adds mobile & touch body classes.
 * Adds a post type body class, for example: “posttype-page”.
 * Inserts handy HTML comments in the HTML footer of template files to tell you 
   which CSS files could be used and which were found.

## 安裝方式

For an automatic installation through WordPress:

 1. Go to the ‘Add New’ plugins screen in your WordPress admin area
 2. Search for ‘Browsers’
 3. Click ‘Install Now’ and activate the plugin

For a manual installation via FTP:

 1. Upload the `browsers` directory to the `/wp-content/plugins/` directory
 2. Activate the plugin through the ‘Plugins’ screen in your WordPress admin area

To upload the plugin through WordPress, instead of FTP:

 1. Upload the downloaded zip file on the ‘Add New’ plugins screen (see the ‘Upload’
    tab) in your WordPress admin area and activate.

## 常見問題集

  How do I add and access browser specirfic stylesheets?

To add extra stylesheets, create a new CSS file and upload it to the root of your
active theme or in the directory THEME/library/css/ – you can include a mixture 
of 3 values:

 * Operating System name ( windows, mac, linux )
 * Browser Name ( firefox, safari, chrome, msie )
 * Browser Version ( a specific whole version number )

The plugin then looks for a matching CSS file in the root of the active theme or
in the directory THEME/library/css/ using a combinations of these 3 values ( in 
these example we’ll use IE 10 on windows ):

 * browsers-msie.css
 * browsers-msie-10.css
 * browsers-windows-msie.css

  How do I select browser specific classes in my CSS files?

The Browsers plugin adds a collection of extra browser and operating system specific
classes to the HTML <body> tag of all front-end pages of the current active theme.

The best way to find out what classes are added is to use a source code inspector
like Google Chrome’s Inspector to view the <body> tag.

You can then use these new classes to select HTML elements in the following way (
again using IE 10 as an example ):

~~ style.css ~~

body.browsers-msie-10 {
 background-color: red; }

~~~~~~~~~~~~

## 使用者評論

![](https://secure.gravatar.com/avatar/275cf49075e579169f5486035c92c783bd6c53e06f88dae7ac9b8a7bf3f4a0d2?
s=60&d=retro&r=g)

### 󠀁[Awesome!](https://wordpress.org/support/topic/awesome-4013/)󠁿

 [andreaantonelli89](https://profiles.wordpress.org/andreaantonelli89/) 2017 年 
1 月 30 日

Very useful and awesome plugin!

 [ 閱讀全部 2 則使用者評論 ](https://wordpress.org/support/plugin/browsers/reviews/)

## 參與者及開發者

以下人員參與了開源軟體〈Conditional Stylesheets and Body Classes〉的開發相關工作。

參與者

 *   [ qstudio ](https://profiles.wordpress.org/qlstudio/)

[將〈Conditional Stylesheets and Body Classes〉外掛本地化為台灣繁體中文版](https://translate.wordpress.org/projects/wp-plugins/browsers)

### 對開發相關資訊感興趣？

任何人均可[瀏覽程式碼](https://plugins.trac.wordpress.org/browser/browsers/)、查看
[SVN 存放庫](https://plugins.svn.wordpress.org/browsers/)，或透過 [RSS](https://plugins.trac.wordpress.org/log/browsers/?limit=100&mode=stop_on_copy&format=rss)
訂閱[開發記錄](https://plugins.trac.wordpress.org/log/browsers/)。

## 變更記錄

#### 0.4.7

 * readme update

#### 0.4.6

 * WP 4.4.1 Testing

#### 0.4.5

 * WP 4.0 Testing

#### 0.4.4

 * 3.9.1 Testing

#### 0.4.3

 * 3.8.1 Testing
 * Forum link

#### 0.4.1

 * Name change

#### 0.4.0

 * Readyness for Q Theme Framework integration

#### 0.3.4

 * Readme corrections

#### 0.3.1

 * Correction to stylesheet location function

#### 0.3

 * Body tags and CSS file names homogenized

#### 0.2

 * First public release.

## 中繼資料

 *  版本 **0.4.7**
 *  最後更新 **10 年前**
 *  啟用安裝數 **30+**
 *  WordPress 版本需求 ** 3.2 或更新版本 **
 *  已測試相容的 WordPress 版本 **4.4.34**
 *  語言
 * [English (US)](https://wordpress.org/plugins/browsers/)
 * 標籤:
 * [browsers](https://tw.wordpress.org/plugins/tags/browsers/)[clients](https://tw.wordpress.org/plugins/tags/clients/)
   [conditional](https://tw.wordpress.org/plugins/tags/conditional/)[css](https://tw.wordpress.org/plugins/tags/css/)
   [stylesheets](https://tw.wordpress.org/plugins/tags/stylesheets/)
 *  [進階檢視](https://tw.wordpress.org/plugins/browsers/advanced/)

## 評分

 5 星，滿分為 5 星

 *  [  2 個 5 星使用者評論     ](https://wordpress.org/support/plugin/browsers/reviews/?filter=5)
 *  [  0 個 4 星使用者評論     ](https://wordpress.org/support/plugin/browsers/reviews/?filter=4)
 *  [  0 個 3 星使用者評論     ](https://wordpress.org/support/plugin/browsers/reviews/?filter=3)
 *  [  0 個 2 星使用者評論     ](https://wordpress.org/support/plugin/browsers/reviews/?filter=2)
 *  [  0 個 1 星使用者評論     ](https://wordpress.org/support/plugin/browsers/reviews/?filter=1)

[Your review](https://wordpress.org/support/plugin/browsers/reviews/#new-post)

[查看全部使用者評論](https://wordpress.org/support/plugin/browsers/reviews/)

## 參與者

 *   [ qstudio ](https://profiles.wordpress.org/qlstudio/)

## 技術支援

使用者可在技術支援論壇提出意見反應或使用問題。

 [檢視技術支援論壇](https://wordpress.org/support/plugin/browsers/)