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

— Add-On sa WorldWideScripts.net

Mag-subscribe sa aming mga feed upang manatili hanggang sa petsa!

Bago! Sundin amin sa gusto mo!


CSS/JS Browser Determiner - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Ito ay magaan ang timbang (2KB gzipped o 3,8kb minified) detektor browser ng ​​JavaScript na maaaring magamit sa lahat ng iyong mga proyekto sa web. Ito ay nilikha upang makatulong sa iyo na magsulat ng CSS o JavaScript code para sa anumang partikular na browser, bersyon ng browser o watnat sa isang madaling paraan. Nakilalang layout engine, OS, suporta para sa CSS mga katangian at higit pa.

Ito ay lubhang kailangan ng solusyon para sa mga gusali cross-browser at cross-platform ng web-site at mga web-aplikasyon.

Paano ito gumagana? Very simple. Ito ay bumubuo ng isang listahan ng mga klase sa detalyadong impormasyon tungkol sa browser, layout engine, OS, aparato at pagkatapos attaches ito sa <html> tag.

Hindi tulad ng mga kilalang Modernizr, ang CSS / JS determiner Browser ay halos nakatutok na hindi sa mga tampok ng browser ngunit sa browser at ang aparato mismo. Ngunit ito rin ay tumutukoy sa suporta ng mga karaniwang tampok ng CSS.

Pagtuklas Browser Sa 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! 

Browser detection Gamit 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 } 

At marami-marami pang iba.

Lahat ng CSS selectors

  • Browser - chrome, safari, firefox, ie, konqueror, opera, operamobi, operamini, crmo, unknown
  • Bersyon ng browser tulad ng: firefox18, firefox18-, firefox18_0 (ngunit HUWAG firefox18_0- o firefox18_0_1234 o firefox18_0a1 )
  • Layout engine: webkit, gecko, trident, presto, khtml
  • Version Layout tulad ng: gecko18, gecko18_0 (ngunit HUWAG gecko18- o gecko18_0_1 o gecko18_0a1 )
  • Mobile na mga aparato: iphone, ipod, ipad, blackberry, kindle
  • Operasyon system: windows, win8, win7, vista, xp, win2003, cros, unix, linux, ios, android, unknown_os
  • Basic CSS3 properties: opacity, gradient, borderradius, borderimage, animation, transition, transform, textshadow, boxsizing, boxshadow. O no-gradient, no-borderimage etc...
  • Iba pa:
    • pc, mobile (anumang di-mobile na computer o mobile na aparato)
    • desktop, tablet, phone (ayon sa lapad window)
    • landscape, portrait (viewport orientation, ayon sa window lapad at taas)
    • retina, touchscreen (o no-retina, no-touchscreen )
    • cookie, flash, java (o no-cookie, no-flash, no-java )

JavaScript API

  • browser.is_modern - nagbabalik ng tunay na ito ay isang modernong browser. Depende sa kung ito ay sumusuporta browser ang ari-arian transition CSS3
  • browser.is_old - kabaligtaran ng browser.is_modern
  • browser.is_mobile - nagbabalik ng tunay na ito ay isang mobile na aparato
  • browser.is_pc - anumang di-mobile na computer, kabilang ang Mac OS
  • browser.is_desktop - width window 980px at mas
  • browser.is_tablet - width window 768px sa 979px
  • browser.is_phone - width window ay 767px o mas kaunti
  • browser.is_retina - nagbabalik ng tunay na kung ito ay Retina display
  • browser.is_touchscreen - - nagbabalik ng tunay na kung ito ay touchscreen aparato
  • browser.name - ang pangalan ng browser
  • browser.NAME - tulad browser.ie, browser.firefox atbp nagbabalik totoo o hindi tiyak
  • browser.nameFull - nagbabalik ang buong pangalan ng browser tulad ng "Firefox", "Internet Explorer" atbp
  • browser.version - ang bersyon ng browser
  • browser.layout - ang pangalan ng layout engine, tulad ng "webkit", "tuko", "salapang", "madali", "KHTML" o "hindi kilala"
  • browser.LAYOUT_NAME - tulad browser.webkit, browser.gecko atbp nagbabalik totoo o hindi tiyak
  • browser.layoutFull - buong pangalan ng layout engine, tulad ng "WebKit", "Gecko", "salapang", "Presto", "KHTML" o "hindi kilala"
  • browser.layoutVersion - ang bersyon ng layout engine, tulad ng "533.1" para sa WebKit / 533.1, "18.0" para sa Gecko / 18.0, "18.0a1pre" para sa Gecko 18.0 Alpha 1 pre atbp
  • browser.os - Ibinabalik ang maikling pangalan ng sistema ng operasyon, tulad ng "windows", "MacOS", "cros", "Unix", "linux", "ios", "android" o "hindi kilala"
  • browser.osFull - nagbabalik ang buong pangalan ng sistema ng operasyon, tulad ng "Windows", "Mac OS X", "CROs", "Unix", "Linux", "iOS", "Android" o "hindi kilala"
  • browser.osVersion - nagbabalik ang OS version string, tulad ng "7" para sa Windows 7, "4.2" para sa iba Android 4.2
  • browser.device - Ibinabalik ang maikling pangalan ng mga mobile device, tulad ng "iphone", "ipad", "ipod", "blackberry" o "magsunog ng mga"
  • browser.deviceFull - Ibinabalik ang buong pangalan ng mga mobile na aparato, tulad ng "iPhone", "iPad", "iPod", "BlackBerry" o "alab"
  • browser.supports.CSS_PROP - tulad browser.supports.opacity, browser.supports.gradient atbp lamang paunang-natukoy na mga katangian ay alowed ( "Common properties CSS" listahan). Mangyaring tandaan na ang pangalawang salita ay dapat na titik tulad textShadow, borderRadius, boxSizing atbp
  • browser.mode - returns "desktop", "tablet" o "telepono" ayon sa kasalukuyang lapad ng window
  • browser.orientation - browser window orientation tulad ng "landscape" o "portrait"
  • browser.cookieEnabled - Ibinabalik totoo kung pinagana ang cookies sa browser
  • browser.flashEnabled - nagbabalik totoo kung Flash Player ay naka-install at paganahin ang sa browser
  • browser.javaEnabled - Ibinabalik totoo kung ang Java ay naka-install at pinagana in browser
  • browser.width() - Ibinabalik ang lapad ng browser
  • browser.height() - Ibinabalik ang taas ng browser
  • browser.supports("css-prop") - matukoy kung browser ay sumusuporta sa ari-arian ng CSS.

Sumasang Utility

Determiner CSS / JS Browser ay sumusuporta sa basic sumasang utilites para sa mas mabilis na pag-unlad mobile-friendly din. Maaari mong gamitin ang CSS tagapili upang matukoy ang desktop, tablet o platform ng telepono. Maaari itong maging kapaki-pakinabang kung kailangan mo ng suporta mahilig sa Internet Explorer 8 (o mas mababa), na kung saan ay hindi sumusuporta sa CSS3 Media Query.

Live demo at buong dokumentasyon

Changelog

Version 2.3 | 6 Pebrero 2014
- Minor bugfixes

Version 2.2 | Disyembre 15, 2013
- Nakapirming flash detection
- Iba pang mga bugfixes

Version 2.1 | 15 Oktubre 2013
- Nakapirming pagtuklas ng Opera 15+, IE 11
- Nakabukas pabalik sa "ie" property mula sa "msie" sa JavaScript API (kaya ngayon ay ang browser.ie )

Bersyon 2.0.3 | 29 May 2013
- Mga Live na orientation (landscape, portrait) update para sa CSS

Bersyon 2.0.2 | 24 May 2013
- Nakapirming pagtuklas ng mga mobile na mga aparato

Bersyon 2.0.1 | 11 May 2013
- Opera ay gumagalaw sa WebKit sa lalong madaling panahon, kaya ngayon kami ay handa para sa na!
- Nakapirming isang link sa mga babasahin (inilipat sa isang bagong domain)

Version 2.0 | Enero 23, 2013
- Kabuuang reworking almoust mula sa lupa up
- Kahit na mas malakas. Naidagdag na suporta ng bagong browser, OS, layout engine, aparato at iba pang mga tampok
- Bagong algorithm detection
- Ngayon ay maaari mong tuklasin ang bersyon ng OS at layout engine na may parehong CSS at JavaScript
- Nai-update na demo
- Nagdagdag ng bagong tool sa pagsubok (tingnan Live preview)
- Pinalitan ang pangalan Firefox browser mula sa ".mozilla" sa ".firefox"
- Pinalitan "ie" ari-arian sa "msie" sa JavaScript API (kaya ngayon ay ang browser.msie )
- Pinalitan Mac OS mula sa "Mac" sa ".macos"
- Ang parehong 4kb (minified)!

Bersyon 1.0.5 | Enero 1, 2013
- Nakapirming window width detection

Bersyon 1.0.4 | Disyembre 28, 2012
- Added OS: Win8, win7, kaisipan, XP
- Added Retina display detection

Bersyon 1.0.3 | Disyembre 27, 2012
- Support detection Idinagdag iOS
- Nakapirming kritikal bug sa Safari browser
- Iba pang mga pagbabago at pag-aayos ng bug


I-download
Iba pang mga bahagi sa kategoryang itoAng lahat ng mga bahagi ng may-akdang ito
Mga komentoMga madalas itanong at sagot

Properties

Nilikha:
26 Disyembre 12

Huling Update:
23 Hunyo 14

Katugmang Browser:
IE6, IE7, IE8, IE9, IE10, Firefox, Safari, Opera, Chrome

Files Kasama:
JavaScript JS

Bersyon Software:
jQuery, MooTools 1.2, MooTools 1.3, MooTools 1.4, MooTools 1.4.5, YUI 2, YUI 3, EXT JS 3, EXT JS 4, script.aculo.us 1.9, script.aculo.us 2.0, Ibang

Keyword

ecommerce, ecommerce, ang lahat ng mga bagay, tiktik browser, css, javascript, script, selector, useragent