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 para WorldWideScripts.net

@pt1wwsAssine o nosso feed para se manter atualizado!

Novo! Siga-nos o que você quiser!


CSS/JS Browser Determiner - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

É leve (gzipped 2kb ou 3,8kb minified) detector navegador JavaScript que pode ser usado em todos os seus projetos web. É criado para ajudá-lo a escrever CSS ou código JavaScript para qualquer navegador específico, versão do browser ou outros enfeites de uma forma muito fácil. Detectar motor de layout, OS, suporte para recursos CSS e muito mais.

É solução indispensável para a construção de cross-browser e multi-plataforma web-sites e aplicações web.

Como funciona? Muito simples. Ele gera uma lista de classes com informações detalhadas sobre o navegador, motor de layout, OS, dispositivo e, em seguida, anexa a tag <html>.

Ao contrário conhecido Modernizr, o CSS / JS Navegador Determiner é principalmente focada não nas características do browser, mas no navegador e no próprio dispositivo. Mas também determina o apoio de características comuns CSS.

Detecção de navegador com 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! 

Detecção de Browser Com 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 } 

E muito, muito mais.

Todos os seletores CSS

  • Navegadores - chrome, safari, firefox, ie, konqueror, opera, operamobi, operamini, crmo, unknown
  • A versão do navegador como: firefox18, firefox18-, firefox18_0 (mas não firefox18_0- ou firefox18_0_1234 ou firefox18_0a1 )
  • Motores de formato: webkit, gecko, trident, presto, khtml
  • Versão de layout como: gecko18, gecko18_0 (mas não gecko18- ou gecko18_0_1 ou gecko18_0a1 )
  • Dispositivos móveis: iphone, ipod, ipad, blackberry, kindle
  • Sistemas de operação: windows, win8, win7, vista, xp, win2003, cros, unix, linux, ios, android, unknown_os
  • CSS3 Básico properties: opacity, gradient, borderradius, borderimage, animation, transition, transform, textshadow, boxsizing, boxshadow. Ou no-gradient, no-borderimage etc...
  • Outros:
    • pc, mobile (qualquer computador não-celular ou dispositivo móvel)
    • desktop, tablet, phone (de acordo com a largura da janela)
    • landscape, portrait (orientação janela de exibição, de acordo com a largura da janela e altura)
    • retina, touchscreen (ou no-retina, no-touchscreen )
    • cookie, flash, java (ou no-cookie, no-flash, no-java )

JavaScript API

  • browser.is_modern - retorna true se é um navegador moderno. Depende se o navegador suporta a propriedade de transição CSS3
  • browser.is_old - oposto do browser.is_modern
  • browser.is_mobile - retorna true se é um dispositivo móvel
  • browser.is_pc - qualquer computador não-móvel, incluindo Mac OS
  • browser.is_desktop - largura da janela 980px e mais
  • browser.is_tablet - largura da janela 768px de 979px
  • browser.is_phone - largura da janela é 767px ou menos
  • browser.is_retina - retorna true se é tela Retina
  • browser.is_touchscreen - - retorna true se é dispositivo touchscreen
  • browser.name - o nome do navegador
  • browser.NAME - como browser.ie, browser.firefox etc. Retorna verdadeiro ou indefinido
  • browser.nameFull - retorna o nome completo do navegador como "Firefox", "Internet Explorer" etc.
  • browser.version - a versão do navegador
  • browser.layout - o nome do motor de layout, como "webkit", "gecko", "tridente", "presto", "khtml" ou "desconhecido"
  • browser.LAYOUT_NAME - como browser.webkit, browser.gecko etc. Retorna verdadeiro ou indefinido
  • browser.layoutFull - nome completo do mecanismo de layout, como "WebKit", "Gecko", "Trident", "Presto", "KHTML" ou "Desconhecido"
  • browser.layoutVersion - a versão do mecanismo de layout, como "533.1" para WebKit / 533.1, "18,0" para Gecko / 18.0, "18.0a1pre" para Gecko 18,0 Alpha 1 pré etc.
  • browser.os - retorna o nome abreviado do sistema operacional, como "janelas", "MacOS", "cros", "unix", "linux", "ios", "android" ou "desconhecido"
  • browser.osFull - retorna o nome completo do sistema operacional, como "Windows", "Mac OS X", "Cros", "Unix", "Linux", "iOS", "Android" ou "Desconhecido"
  • browser.osVersion - retorna a seqüência de versão do sistema operacional, como "7" para o Windows 7, "4.2" para o Android 4.2 etc.
  • browser.device - retorna o nome abreviado do dispositivo móvel, como "iphone", "iPad", "ipod", "blackberry" ou "acender"
  • browser.deviceFull - retorna o nome completo do dispositivo móvel, como "iPhone", "iPad", "iPod", "BlackBerry" ou "Kindle"
  • browser.supports.CSS_PROP - como browser.supports.opacity, browser.supports.gradient etc. Só propriedades predefinidas são alowed ( "propriedades CSS comuns" lista). Por favor, note que a segunda palavra deve ser capitalizado como textShadow, borderRadius, boxSizing etc.
  • browser.mode - retorna "desktop", "tablet" ou "telefone" de acordo com a largura atual da janela
  • browser.orientation - navegador orientação janela como "paisagem" ou "retrato"
  • browser.cookieEnabled - retorna true se os cookies estão habilitados no navegador
  • browser.flashEnabled - retorna True se o Flash Player está instalado e habilitado no navegador
  • browser.javaEnabled - retorna true se o Java está instalado e habilitado no navegador
  • browser.width() - devolve a largura do navegador
  • browser.height() - devolve a altura do navegador
  • browser.supports("css-prop") - determinar se o navegador suportar a propriedade CSS.

Utilities Responsive

CSS / JS Navegador Determiner é também suporta utilitários responsivos básicas para o desenvolvimento móvel-friendly mais rápido. Você pode usar seletores CSS para determinar o desktop, tablet ou plataforma de telefonia. Pode ser útil se você precisar de suporte ágil no Internet Explorer 8 (ou menos), que não suporta CSS3 consultas de mídia.

Demonstração ao vivo e documentação completa

Changelog

Versão 2.3 | 06 de fevereiro de 2014
- pequenas correções de bugs

Versão 2.2 | 15 de dezembro de 2013
- Detecção de flash fixa
- outras correções de bugs

Versão 2.1 | 15 de outubro de 2013
- Fixed detecção de Opera 15+, IE 11
- Voltou a "ou seja," propriedade "de msie" na API JavaScript (então agora é browser.ie )

Versão 2.0.3 | 29 de maio de 2013
- Orientação ao Vivo (paisagem, retrato) atualização para CSS

Versão 2.0.2 | 24 de maio de 2013
- Fixed detecção de dispositivos móveis

Versão 2.0.1 | 11 de maio de 2013
- Opera está se movendo para WebKit em breve, então agora nós pronto para isso!
- Corrigido um link para a documentação (mudou-se para um novo domínio)

Versão 2.0 | 23 de janeiro de 2013
- Almoust total reformulação a partir do zero
- Ainda mais poderoso. Adicionado suporte de novos navegadores, OS, motores de layout, equipamentos e outros recursos
- Novo algoritmo de detecção
- Agora você pode detectar versão do sistema operacional e mecanismo de layout com CSS e JavaScript
- demos Atualizado
- Nova ferramenta de teste adicionado (veja Visualização ao vivo)
- Substituído nome do navegador Firefox do ".mozilla" para ".firefox"
- Substituído ", ou seja" propriedade como "msie" na API JavaScript (então agora é browser.msie )
- Substituído Mac OS a partir de ".mac" para ".macos"
- O mesmo 4kb (minified)!

Versão 1.0.5 | 01 de janeiro de 2013
- Janela fixa de detecção de largura

Versão 1.0.4 | 28 de dezembro de 2012
- Adicionado OS: win8, Win7, Vista, XP
- Adicionado Retina exibe detecção

Versão 1.0.3 | 27 de dezembro de 2012
- Apoio detecção Adicionado iOS
- Corrigido bug crítico com os navegadores Safari
- Outras alterações e correções de bugs


Download
Outros componentes nesta categoriaTodos os componentes deste autor
ComentáriosPerguntas mais frequentes perguntas e respostas

Propriedades

Criado:
26 dez 12

Última Atualização:
23 de junho 14

Navegadores compatíveis:
IE6, IE7, IE8, IE9, IE10, Firefox, Safari, Opera, Chrome

Arquivos incluídos:
JavaScript JS

Software Version:
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, 2.0 script.aculo.us, Outros

Palavras-chave

eCommerce, eCommerce, todos os itens, detecç, ã, o do navegador, css, javascript, roteiro, seletor, userAgent