1. Web Design e DesenvolvimentoDesenvolvimento do siteComo detectar o tipo de navegador do usuário no CSS3
CSS3 para manequins

Por John Paul Mueller

Na maioria dos casos, os desenvolvedores não escolhem o navegador de um usuário. Para determinar se um usuário específico pode trabalhar com seu aplicativo CSS3, é necessário primeiro detectar o navegador do usuário - e depois determinar se esse navegador é aceitável.

Criar o código necessário para executar esta tarefa manualmente não é impossível, mas pode ser difícil. Artigos como o do Javascripter.net informam como executar essa tarefa, mas uma olhada no código deve indicar que é uma tarefa complexa. (Você pode ver a saída deste código de exemplo aqui.)

O jQuery torna possível realizar a detecção com relativa facilidade. O exemplo a seguir mostra um método para detectar o nome e a versão do navegador do usuário. Ele se baseia na versão 1.x mais recente do jQuery, que é a versão 1.10.1 no momento da redação deste documento. (Você pode encontrar o código completo para este exemplo na pasta Capítulo 06jQuery do código para download como BrowserDetect.html.)



 
  Detectar um navegador 
 
 
 
 
 

Informações do navegador

 

    var browser =   $ .uaMatch (navigator.userAgent) .browser;   $ ('p [id = "nome"]'). html (   "Nome do navegador: " + navegador + "");    

    $ ('p [id = "versão"]'). html (   "Número da versão: " + $ .browser.version +   "");    

Esta é uma página HTML5, portanto, começa com a declaração HTML, . Este exemplo começa com uma estrutura básica que inclui as tags , , e <body>.</p><p>O código começa com a primeira tag </ins><div class="neighbor-articles"><h4 class="ui header">Veja também</h4><a href="/learn/comptia-certification-a-exams-installing-removing-and-repairing-applications/" title="Exames de certificação CompTIA A +: instalando, removendo e reparando aplicativos">Exames de certificação CompTIA A +: instalando, removendo e reparando aplicativos</a><a href="/learn/praxis-core-for-dummies-cheat-sheet/" title="Praxis Core For Dummies - Dicas e truques">Praxis Core For Dummies - Dicas e truques</a><a href="/learn/how-to-build-circles-and-spheres-in-minecraft/" title="Como criar círculos e esferas no Minecraft">Como criar círculos e esferas no Minecraft</a><a href="/learn/how-to-create-voter-lists-for-your-political-campaign/" title="Como criar listas de eleitores para sua campanha política">Como criar listas de eleitores para sua campanha política</a><a href="/learn/apple-watch-games/" title="Apple Watch Games">Apple Watch Games</a></div></main><div class="push"></div></div><footer><div class="flags-footer"><a href="https://ar.catskillwoodnet.org/learn/how-to-detect-the-user-s-browser-type-in-css3/"><i class="sa flag"></i></a><a href="https://bn.catskillwoodnet.org/learn/how-to-detect-the-user-s-browser-type-in-css3/"><i class="in flag"></i></a><a href="https://bg.catskillwoodnet.org/learn/how-to-detect-the-user-s-browser-type-in-css3/"><i class="bg flag"></i></a><a href="https://ca.catskillwoodnet.org/learn/how-to-detect-the-user-s-browser-type-in-css3/"><i class="es flag"></i></a><a href="https://zh.catskillwoodnet.org/learn/how-to-detect-the-user-s-browser-type-in-css3/"><i class="cn flag"></i></a><a href="https://hr.catskillwoodnet.org/learn/how-to-detect-the-user-s-browser-type-in-css3/"><i class="hr flag"></i></a><a href="https://cs.catskillwoodnet.org/learn/how-to-detect-the-user-s-browser-type-in-css3/"><i class="cz flag"></i></a><a href="https://da.catskillwoodnet.org/learn/how-to-detect-the-user-s-browser-type-in-css3/"><i class="dk flag"></i></a><a href="https://nl.catskillwoodnet.org/learn/how-to-detect-the-user-s-browser-type-in-css3/"><i class="nl flag"></i></a><a href="https://et.catskillwoodnet.org/learn/how-to-detect-the-user-s-browser-type-in-css3/"><i class="ee flag"></i></a><a href="https://tl.catskillwoodnet.org/learn/how-to-detect-the-user-s-browser-type-in-css3/"><i class="ph flag"></i></a><a href="https://fi.catskillwoodnet.org/learn/how-to-detect-the-user-s-browser-type-in-css3/"><i class="fi flag"></i></a><a href="https://fr.catskillwoodnet.org/learn/how-to-detect-the-user-s-browser-type-in-css3/"><i class="fr flag"></i></a><a href="https://de.catskillwoodnet.org/learn/how-to-detect-the-user-s-browser-type-in-css3/"><i class="de flag"></i></a><a href="https://el.catskillwoodnet.org/learn/how-to-detect-the-user-s-browser-type-in-css3/"><i class="gr flag"></i></a><a href="https://iw.catskillwoodnet.org/learn/how-to-detect-the-user-s-browser-type-in-css3/"><i class="il flag"></i></a><a href="https://hi.catskillwoodnet.org/learn/how-to-detect-the-user-s-browser-type-in-css3/"><i class="in flag"></i></a><a href="https://hu.catskillwoodnet.org/learn/how-to-detect-the-user-s-browser-type-in-css3/"><i class="hu flag"></i></a><a href="https://id.catskillwoodnet.org/learn/how-to-detect-the-user-s-browser-type-in-css3/"><i class="id flag"></i></a><a href="https://it.catskillwoodnet.org/learn/how-to-detect-the-user-s-browser-type-in-css3/"><i class="it flag"></i></a><a href="https://ja.catskillwoodnet.org/learn/how-to-detect-the-user-s-browser-type-in-css3/"><i class="jp flag"></i></a><a href="https://ko.catskillwoodnet.org/learn/how-to-detect-the-user-s-browser-type-in-css3/"><i class="kr flag"></i></a><a href="https://lv.catskillwoodnet.org/learn/how-to-detect-the-user-s-browser-type-in-css3/"><i class="lv flag"></i></a><a href="https://lt.catskillwoodnet.org/learn/how-to-detect-the-user-s-browser-type-in-css3/"><i class="lt flag"></i></a><a href="https://ms.catskillwoodnet.org/learn/how-to-detect-the-user-s-browser-type-in-css3/"><i class="my flag"></i></a><a href="https://mr.catskillwoodnet.org/learn/how-to-detect-the-user-s-browser-type-in-css3/"><i class="io flag"></i></a><a href="https://catskillwoodnet.org/learn/how-to-detect-the-user-s-browser-type-in-css3/"><i class="no flag"></i></a><a href="https://pl.catskillwoodnet.org/learn/how-to-detect-the-user-s-browser-type-in-css3/"><i class="pl flag"></i></a><a href="https://ro.catskillwoodnet.org/learn/how-to-detect-the-user-s-browser-type-in-css3/"><i class="ro flag"></i></a><a href="https://ru.catskillwoodnet.org/learn/how-to-detect-the-user-s-browser-type-in-css3/"><i class="ru flag"></i></a><a href="https://sr.catskillwoodnet.org/learn/how-to-detect-the-user-s-browser-type-in-css3/"><i class="rs flag"></i></a><a href="https://sk.catskillwoodnet.org/learn/how-to-detect-the-user-s-browser-type-in-css3/"><i class="sk flag"></i></a><a href="https://sl.catskillwoodnet.org/learn/how-to-detect-the-user-s-browser-type-in-css3/"><i class="si flag"></i></a><a href="https://es.catskillwoodnet.org/learn/how-to-detect-the-user-s-browser-type-in-css3/"><i class="es flag"></i></a><a href="https://sv.catskillwoodnet.org/learn/how-to-detect-the-user-s-browser-type-in-css3/"><i class="ch flag"></i></a><a href="https://ta.catskillwoodnet.org/learn/how-to-detect-the-user-s-browser-type-in-css3/"><i class="sg flag"></i></a><a href="https://te.catskillwoodnet.org/learn/how-to-detect-the-user-s-browser-type-in-css3/"><i class="in flag"></i></a><a href="https://th.catskillwoodnet.org/learn/how-to-detect-the-user-s-browser-type-in-css3/"><i class="th flag"></i></a><a href="https://tr.catskillwoodnet.org/learn/how-to-detect-the-user-s-browser-type-in-css3/"><i class="tr flag"></i></a><a href="https://uk.catskillwoodnet.org/learn/how-to-detect-the-user-s-browser-type-in-css3/"><i class="ua flag"></i></a><a href="https://ur.catskillwoodnet.org/learn/how-to-detect-the-user-s-browser-type-in-css3/"><i class="pk flag"></i></a><a href="https://vi.catskillwoodnet.org/learn/how-to-detect-the-user-s-browser-type-in-css3/"><i class="vn flag"></i></a></div>catskillwoodnet.org<!-- --> © <!-- -->2020<!-- --> </footer></div></div></div></body></html>