WorldWideScripts.net Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
JavaScript / Miscellaneous

CSS/JS Browser Determiner

— アドオンWorldWideScripts.netへ

@ja1wws日付まで滞在するために私達のフィードを購読する!

新しい!あなたがそれを望むように私たちに従ってください!


CSS/JS Browser Determiner - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

それは、軽量(縮小さ2キロバイトの gzip圧縮されたか3,8kb)すべてのWebプロジェクトで使用することができるJavaScriptのブラウザ検出器です。 それはあなたが非常に簡単な方法で、特定のブラウザのCSSやJavaScriptコード、ブラウザのバージョンやその他もろもろを書くのを助けるために作成されています。 レイアウトエンジン、OS、CSSの機能とより多くのサポートを検出します。

これは、クロスブラウザ、クロスプラットフォームのWebサイトやWebアプリケーションを構築するために不可欠なソリューションです。

それは動作しますか? 非常にシンプル。 これは、ブラウザ、レイアウトエンジン、OS、デバイスに関する詳細な情報を持つクラスのリストを生成し、<html>タグに添付します。

よく知られているModernizrとは異なり、CSS / JSブラウザデタミナーは、ほとんどのブラウザの機能ではなく、ブラウザやデバイス自体にない焦点を当てています。 しかし、それはまた、一般的なCSSの機能のサポートを決定します。

CSSでブラウザ検出

 .opera.element {color:red} // All versions of Opera.ie8.element {color:red} // MSIE 8.ie7_5.element {color:red} // MSIE 7.5.ie8-.element {color:red} // MSIE 8 or less.chrome24-.element {color:red} // Chrome 24 or less (25 version is the maximum available).webkit.element {color:red} // Webkit based browsers such as Chrome, Safari, IOS, Android etc..gecko18.element {color:red} // Browsers that based on Gecko v18.macos.element {color:red} // Mac OS only.windows.element {color:red} // Any version of Windows.win7.element {color:red} // Windows 7 only.pc.element {color:red} // Any non-mobile computer including Mac OS.mobile.element {color:red} // Any mobile device.desktop.element {color:red} // Window width 980px or more.iphone.element {color:red} // iPhone.ipad.landscape.element {color:red} // iPad in landscape orientation.android.element {color:red} // Device with Android OS.android.crmo.element {color:red} // Chrome Mobile on Android OS.mobile.tablet.element {color:red} // Only mobile device with current width of the window from 768px to 979px.boxsizing.element {color:red} // Browser that supports the CSS3 box-sizing property.no-gradient.element {color:red} // Browser that does not supports CSS3 gradients.cookie.element {color:red} // Cookies enabled.no-flash.element {color:red} // Flash is not installed... and so much more! 

JavaScriptでブラウザ検出

 if (browser.ie && browser.version <= 8 ) { // Code for MSIE 8 or less } if (browser.is_mobile) { // Code for mobile devices } if (browser.is_old) { // Code for old browsers such as: // MSIE 9 or less // Firefox 3.6 or less // Safari 3.0 or less // Opera 10.1 or less } if (browser.supports("border-radius")) { // Code for browsers that supports the CSS3 border-radius property } if (browser.is_desktop) { // Window width is 980px or more } 

そして、はるか-はるかに。

すべてのCSSセレクタ

  • ブラウザ- chromesafarifirefoxiekonqueroroperaoperamobioperaminicrmounknown
  • のようなブラウザのバージョン: firefox18firefox18-firefox18_0 (ただしfirefox18_0-またはfirefox18_0_1234またはfirefox18_0a1
  • レイアウトエンジン: webkitgeckotridentprestokhtml
  • のようなレイアウトのバージョン: gecko18gecko18_0 (ただしgecko18-またはgecko18_0_1またはgecko18_0a1
  • モバイルデバイス: iphoneipodipadblackberrykindle
  • オペレーションシステム: windowswin8win7vistaxpwin2003cros unixlinuxiosandroidunknown_os
  • 基本CSS3 properties: opacity, gradient, borderradius, borderimage, animation, transition, transform, textshadow, boxsizing, boxshadow. またはno-gradientno-borderimage等...
  • その他:
    • pcmobile (非モバイルコンピュータまたはモバイルデバイス)
    • desktoptabletphone (ウィンドウ幅に応じて)
    • landscapeportrait (ビューポートの向き、ウィンドウの幅と高さに応じて)
    • retinatouchscreen (またはno-retinano-touchscreen
    • cookieflashjava (またはno-cookieno-flashno-java

JavaScriptのAPI

  • browser.is_modern -それは近代的なブラウザの場合はtrueを返します。 ブラウザがCSS3のトランジションプロパティをサポートしているかどうかに依存します
  • browser.is_old - browser.is_modernの反対
  • browser.is_mobile -それは、モバイルデバイスの場合はtrueを返します。
  • browser.is_pc -非モバイルコンピュータ、MacのOSを含みます
  • browser.is_desktop -ウィンドウ幅980px、より
  • browser.is_tablet -ウィンドウ幅768pxに979px
  • browser.is_phone -ウィンドウ幅が767px以下であり、
  • browser.is_retina -それはRetinaディスプレイだ場合はtrueを返します。
  • browser.is_touchscreen - -それはタッチスクリーンデバイスの場合はtrueを返します。
  • browser.name -ブラウザの名前
  • browser.NAME - browser.ieなど、browser.firefoxなどtrueまたはundefinedを返します
  • browser.nameFull - "Firefoxの"、 "Internet Explorerの"などのように、ブラウザの完全な名前を返します。
  • browser.version -ブラウザのバージョン
  • browser.layout -レイアウトエンジンの名称、「webkitの"、"ヤモリ"、"トライデント"、"さきがけ"、" KHTML」または「不明」のように
  • browser.LAYOUT_NAME - browser.webkitなど、browser.geckoなどtrueまたはundefinedを返します
  • browser.layoutFull -レイアウトエンジンの正式名称は、「WebKitの」、「ヤモリ」のような、 "トライデント"、 "プレスト"、 "KHTML」または「不明」
  • browser.layoutVersion -レイアウトエンジンのバージョン、「533.1」のWebKit / 533.1、「18.0」のGecko / 18.0用のため、「18.0a1pre」のGecko 18.0アルファ1の事前等等
  • browser.os - 、「窓」のように、操作システムの短い名前を返します」のMacOS」、「開発業務受託機関(CRO)」、「UNIX」、「リナックス」、「イオス」、「アンドロイド」または「不明」
  • browser.osFull -の「Windows」、「マックOS X」、「クロ」のように、操作システムの完全な名前を返し、「UNIX」、「リナックス」、「iOSの」、「アンドロイド」または「不明」
  • browser.osVersion -アンドロイド4.2などに、Windows 7の"7"のように、「4.2」を、OSのバージョン文字列を返します。
  • browser.device - 、「iphone」のように、モバイルデバイスの短い名前を返します"アプリ"、 "iPodの"、 "ブラックベリー」または「キンドル」
  • browser.deviceFull - 「iPhone」、「iPadの"、" iPodの"、"ブラックベリー」または「キンドル」のように、モバイルデバイスの完全な名前を返します。
  • browser.supports.CSS_PROP - browser.supports.opacityなど、browser.supports.gradient等のみ事前定義されたプロパティが(alowedされている「共通のCSSプロパティ」リスト)。 2番目の単語がtextShadow、borderRadius、boxSizingなどのように大文字にする必要がありますのでご注意ください
  • browser.mode -ウィンドウの現在の幅に合わせて戻っ「デスクトップ」、「タブレット」または「電話」
  • browser.orientation - 「風景」または「ポートレート」などのブラウザウィンドウの向き
  • browser.cookieEnabled -ブラウザでクッキーが有効になっている場合はtrueを返します。
  • browser.flashEnabled Flash Playerがインストールされている場合はtrueを返し、ブラウザで有効になって-
  • browser.javaEnabled - JAVAがインストールされ、ブラウザで有効になっている場合にtrueを返します。
  • browser.width() -ブラウザの幅を返します。
  • browser.height() -ブラウザの高さを返します。
  • browser.supports("css-prop") -ブラウザはCSSプロパティをサポートしているかどうかを決定します。

応答ユーティリティ

CSS / JSブラウザデタミナーもある速いモバイル向けの開発のための基本的な応答Utilitesををサポートしています。 あなたは、デスクトップ、タブレットや携帯電話のプラットフォームを決定するためにCSSセレクタを使用することができます。 あなたはCSS3メディアクエリをサポートしないのInternet Explorer 8(以下)、で迅速なサポートが必要な場合には役に立ちます。

ライブデモと完全な文書

変更履歴

バージョン2.3 | 2014年2月6日
- マイナーバグ修正

バージョン2.2 | 2013年12月15日
- 固定フラッシュ検出
- その他のバグ修正

バージョン2.1 | 2013年10月15日
- オペラ15+、IE 11の修正された検出
- (そう、今ではのJavaScript APIの「MSIE」から「IE」プロパティにスイッチバックbrowser.ie

バージョン2.0.3 | 2013年5月29日
- CSSのライブ向き(ランドスケープ、ポートレート)更新

バージョン2.0.2 | 2013年5月24日
- モバイル機器の修正された検出

バージョン2.0.1 | 2013年5月11日
- オペラはそのため、我々は準備ができて今すぐに、WebKitのに動いています!
- (新しいドメインに移動)のドキュメントへのリンクを修正しました

バージョン2.0 | 2013年1月23日
- 地面からの総リワークalmoust
- さらに強力。 新しいブラウザ、OS、レイアウトエンジン、デバイス、およびその他の機能のサポートが追加されました
- 新しい検出アルゴリズム
- 今、あなたはCSSとJavaScriptの両方でOSとレイアウトエンジンのバージョンを検出することができます
- 更新デモ
- 新しいテストツールが追加(ライブプレビューを参照してください)
- "は.mozilla」を「.firefox」からFirefoxブラウザ名を置き換え
- JavaScriptのAPIの置き換え"すなわち"プロパティを"MSIE"(今、それはだbrowser.msie
- "の.Mac」を「.macos」からMac OSの置き換え
- 同じ4キロバイト(縮小さ)!

バージョン1.0.5 | 2013年1月1日
- 固定窓幅検出

バージョン1.0.4 | 2012年12月28日
- 追加されたOS:win8、win7の、ビスタ、XP
- 追加された網膜ディスプレイ検出

バージョン1.0.3 | 2012年12月27日
- 追加されたiOSの検出をサポート
- Safariのブラウザを修正致命的なバグ
- その他の変更やバグ修正


ダウンロードしてください
このカテゴリー内の他のコンポーネントこの著者のすべてのコンポーネント
コメントよくある質問と回答を求めた

プロパティ

作成された:
12月26日12と前​​回更新

キーワード

eコマース, eコマース, すべてのアイテムには, ブラウザの検出, CSS, JavaScriptのスクリプト, セレクタ, のuserAgent