Kule urBrowser

這是用來偵測使用者的作業系統、裝置以及瀏覽器資訊,並記錄於html標籤上。例如:

使用方式:

你可以下載檔案 (ver. 3.171015)

<script id="urbrowser" data-domain=".kule.tw" src="path/to/kule.urbrowser.min.js"></script>

或是使用 CDN (ver. 3.170128):

<script id="urbrowser" data-domain=".kule.tw" src="//cdnjs.cloudflare.com/ajax/libs/kule.lazy/3.1.170618/js/kule.urbrowser.min.js"></script>

無論使用以上哪一種方式,你可以將你的網域加入至 data-domain 。當網頁讀取時就會自動開始執行,並且將使用者的瀏覽器、作業系統、平台等等資訊記錄下來並置放於上<html>上,例如:

IE 9+, Edge 12+, Chrome 4+, Firefox 3.5+, Safari 4+, Opera 11.5+ 等瀏覽器會另外儲存至 Cookie 與 Local Storage,可隨時供 javascript 或後端語言使用,例如:

使用者的作業系統或平台

id 會記錄使用者的作業系統或平台,偶爾會發生在不同平台但相同瀏覽器的情況下發生部分的差異,所以透過 id 紀錄作業系統或是平台資訊,來處理CSS Hack,資訊包含 windows, wp(windows phone), mac, iphone, ipad, ipod, linux, android, chromeos, unix, solaris, playstation, nintendo, blackberry, freebsd, openbsd, palm, symbian,例如:

<html id="">

在CSS Hack上就可以寫:

# .selector {
    margin-top: -1px;
}

如果你有使用Sass, Compass或是Less,那麼可以這樣寫:

# {
    .selector {
        margin-top: -1px;
    }
}

使用者的瀏覽器與核心

使用者瀏覽器為 IE 時,class 會記錄使用者的瀏覽器與核心甚至包含版本,記錄瀏覽器核心是為了在相同核心的瀏覽器發生問題時,可以一次處理,例如Chrome, Safari, 新版的Opera 都是使用 Webkit。記錄版本是可以針對某一個版本發生異狀時做個別處置。另外萬惡的IE 瀏覽器較為複雜,因此另外有做某版本向下相容的 class (IE 10以下為:ie10lt),例如:

<html class="ie6 ie7lt ie8lt ie9lt ie10lt ie11lt ie">
<html class="ie7 ie8lt ie9lt ie10lt ie11lt ie">
<html class="ie8 ie9lt ie10lt ie11lt ie">
<html class="ie9 ie10lt ie11lt ie">
<html class="ie10 ie11lt ie">
<html class="ie11 ie">

除了以上這些較為知名的瀏覽器之外,有一些瀏覽器是基於某個瀏覽器再添加各自的功能或特色,這種情況下尤其在 Chrome/Chromium 上較為明顯,此時該瀏覽器的 class 名稱則會另外新增 chrome 這個名稱,例如:

<html class="yandex chrome webkit">

針對以上範例,在CSS Hack上就可以這麼寫:

.ie6 .selector {
    margin-top: -1px;
}

如果是所有的IE:

.ie .selector {
    margin-top: -1px;
}

針對某個IE版本(目前最低版本只到IE 6):

.ie6 .selector {}
.ie7 .selector {}
.ie8 .selector {}
.ie9 .selector {}
.ie10 .selector {}
.ie11 .selector {}

針對某版本 IE 版本以下,例如:只要 IE 11 以下,可以這樣寫:

.ie11lt .selector {} /*IE10, 9, 8, 7, 6*/

以此類推:

.ie10lt .selector {} /*IE9, 8, 7, 6*/
.ie9lt .selector {} /*IE8, 7, 6*/
.ie8lt .selector {} /*IE7, 6*/

如果要包含IE11到IE6,請使用 .ie。



針對所有使用Webkit核心的瀏覽器:

.webkit .selector {}

針對Chrome, Firefox, Safari, Opera, Edge, Vivaldi:

.chrome .selector {}
.firefox .selector {}
.safari .selector {}
.opera .selector {}
.edge .selector {}
.vivaldi .selector {}

針對Android原生瀏覽器:

.adrBuiltin .selector {}

混合使用

有時候會發生不同作業系統某個相同瀏覽器的情況下有些微不同時,必須要做些Hack,例如:

#.chrome .selector {
    margin-top: -1px;
}

#.opera .selector {
    margin-top: 1px;
}

如果你有使用Sass, Compass或是Less,那麼可以這樣寫:

# {
    &.chrome {
        .selector {
                margin-top: -1px;
        }
    }

    &.opera {
        .selector {
                padding-left: 2px;
        }
    }
}

Webview

當使用 Webview 時,在某些情況下可能只需要針對 Webview 處理某些操作或是修正,因此如果你有使用 Webview 時,可在 User Agent 加上以下字串:cordova 或 phonegap 或 react 或 nodejs 或 webview 等字樣,如需分辨 iOS 與 Andoird 可如下表示:

  • iOS: webview-ios
  • Android: webview-android

html 標籤上就會顯示以下資訊 :

<html class="webview-ios webview webkit" data-webview="ios">
<html class="webview-adr webview webkit" data-webview="android">

如果不是上述情況時,data-webview 則顯示為 false


第三方 APP 內建的瀏覽器

有時使用者會從某些 APP 開啟連結,由 APP 內建的瀏覽器開啟,此時開發者難以知道使用者瀏覽器的版本,因此針對了 Facebook apps, Twitter, Line, Kakaotalk, MicroMessenger(微信) 等 APP 做識別,並且會將該 APP 名稱置入於 class 名稱內,例如:

<html class="facebook webkit">

使用者的裝置

偵測使用者裝置來區分Desktop, Mobile兩種,例如:

<html data-device="">

瀏覽器名稱與系統名稱

<html data-browser-name="" data-os-name="">

Layout Mode

無論使用 RWD 或是 AWD 時,可以分辨現在是使用哪一種設計版型。判斷規則為:如果是行動裝置並且視窗寬度小於 992px,會歸類在 Mobile Layout,反之則歸類於 Desktop Layout。

<html data-layout-mode="">

LocalStorage 與 Cookie

urBrowser 會將所有資訊記錄於 LocalStorage 與 Cookie(預設時效為365天),後端可透過 Cookie 取得資料,javascript 取得使用者瀏覽器資訊時,可直接透過 LocalStorage 取得,例如:

var urb = localStorage.getItem('urbrowser');

urb = JSON.parse(urb);
console.log(urb.getBrowserWithCoreNames); //

注意:不支援 IE 9 以下版本 (IE 9 以下應該也不需要處理 RWD 或 AWD 才是)

LocalStorage 資料

瀏覽器支援

最後,urBrowser 可支援的瀏覽器包含:IE 9+, Edge 12+, Chrome 4+, Firefox 3.5+, Safari 4+, Opera 11.5+。
IE 6 至 IE 8 僅顯示瀏覽器資訊於 <html>上,但不會將資訊儲存於 Cookie 與 Web Storage。IE 8 雖然支援 Web Storage,但是正常來說因為製作 RWD 或 AWD 時應該不太會需要支援到 IE 8,所以就放棄了。

過去在處理 CSS Hack 時,尤其在 IE 瀏覽器上,總是要使用莫名奇妙的方法,例如給IE的 \9、IE7, IE6都看得懂星字符號,於是為了區隔IE6只好再加上只有IE6才看得懂的底線符號,但事後維護或是多人處理專案時,Hack的內容會散得到處都是並且規則很凌亂。例如:

.selector {
    background: #000000; /* all browsers */
    background/**/: #010101; /* for ie9, ie8, ie7 */
    background: #020202\0/; /* for ie9, ie8 */
    background: #030303\9; /* for ie8, ie7, ie6 */
    background/*\**/: #040404\9; /* for ie8 ie7 */
    *background: #050505; /* for ie7 ie6 */
    #background: #060606; /* for ie7 ie6 */
    _background: #070707; /* for ie6 */
}

* html .selector {} /* for ie6 */
*+html .selector {} /* for ie7 */
*:first-child+html .selector {} /* for ie7 */

@media \0screen { /* for ie8 */
    .selector {}
}

:root .selector { /* for ie9 */
    background: #080808\9;
}

除了這些方法其實還有更多怪招,但IE瀏覽器每出一個新版本就像是一款新的瀏覽器總不能都要多個幾個奇怪的寫法,於是整個CSS光是Hack就會讓你眼花撩亂,另一種Hack方法是使用IE才讀得懂的 if 方式,也並不是那麼方便,因為其他主流瀏覽器並不支援並且還要針對不同的IE版本寫多個 if 來處理,例如:

<!--[if IE 6]><html class="ie ie6"><![endif]-->
<!--[if IE 7]><html class="ie ie7"><![endif]-->
<!--[if IE 8]><html class="ie ie8"><![endif]-->
<!--[if IE 9]><html class="ie ie9"><![endif]-->

但這樣的方式直到了IE10也開始不再被支援,IE10的處理方式必須要透過其他方式去處理,例如:

<!--[if !IE]>--><script type="text/javascript">if(Function('/*@cc_on return document.documentMode===10@*/')()){document.documentElement.className+=' ie10';}</script><!--<![endif]-->

到了IE11處理方式又截然不同,難保未來IE12出現之後又是另外一套方法,加上其他瀏覽器,如Chrome, Firefox, Safari, Opera等等,有時候可能會遇到不同狀況時,就得要針對不同瀏覽器去寫CSS Hack,這對我來說是很煩人的事情。

這是以前Firefox的Hack方式:

@-moz-document url-prefix() {
    .selector {
        margin-top: -1px;
    }
}

這是以前舊版Opera的Hack方式
(但新版本Opera改用Webkit核心後,我也不曉得該怎麼跟Chrome與Safari區分)

doesnotexist:-o-prefocus, .selector {
    margin-top: -1px;
}

這是以前針對Webkit的Hack方式

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .selector {
        margin-top: -1px;
    }
}

從IE到各個知名瀏覽器的Hack方式是這麼的麻煩,而且有些閱讀方式大概隔一段時間沒碰就忘記這是什麼東西,於是想弄一個功能,讓網頁讀取時就可以偵測使用者的資訊並且記錄下來,往後在CSS Hack時就不需要再理會上述的這些處理方式,並且用階層的方式就能看出這是給哪一個瀏覽器的Hack。