<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:wx="http://ilps.science.uva.nl/WikiXML/wx" xml:lang="pt" lang="pt">
<head>
<title>Cross-browser</title>
<meta name="wx_namespace" content="0"/>
<meta name="wx_pagename" content="Cross-browser"/>
<meta name="wx_page_id" content="478908"/>
</head>
<body>
<div id="wx_article">
<wx:section level="1" title="Cross-browser" id="wxsec1"><h1 class="pagetitle" id="wx1">Cross-browser</h1>

<p id="wx2"><b id="wx3">Cross-browser</b> refere-se à habilidade de um <a href="/wpt/Site" title="Site" wx:linktype="known" wx:pagename="Site" wx:page_id="12734" id="wx4">site</a>, <a href="/wpt/Aplica%C3%A7%C3%A3o_Web" title="Aplicação Web" wx:linktype="known" wx:pagename="Aplicação_Web" wx:page_id="171600" id="wx5">Aplicação Web</a>, contructor <a href="/wpt/HTML" title="HTML" wx:linktype="known" wx:pagename="HTML" wx:page_id="262828" id="wx6">HTML</a> ou <a href="/wpt/Linguagem_de_computador_interpretada" title="Linguagem de computador interpretada" wx:linktype="known" wx:pagename="Linguagem_de_computador_interpretada" wx:page_id="147630" id="wx7">script</a> <a href="/wpt/Side-client" class="new" title="Side-client" wx:linktype="unknown" wx:pagename="Side-client" id="wx8">side-client</a> suportar múltiplos <a href="/wpt/Navegador" title="Navegador" wx:linktype="known" wx:pagename="Navegador" wx:page_id="1335" id="wx9">navegadores</a>.</p>

<p id="wx10">Esta aplicação deve ser construída através de uma forma de programação que utiliza tecnologias compatíveis com qualquer navegador Web que suporte as especificações do <a href="/wpt/W3C" title="W3C" wx:linktype="known" wx:pagename="W3C" wx:page_id="2806" id="wx11">W3C</a>.</p>

<p id="wx12">O termo foi amplamente utilizado no anos 90 por causa da <a href="/wpt/Guerra_dos_browsers" title="Guerra dos browsers" wx:linktype="known" wx:pagename="Guerra_dos_browsers" wx:page_id="57454" id="wx13">Guerra dos browsers</a> e significava que o site construído com essa ideia tinha a capacidade de ser visualizado tanto pelo <a href="/wpt/Internet_Explorer" title="Internet Explorer" wx:linktype="known" wx:pagename="Internet_Explorer" wx:page_id="6932" id="wx14">Internet Explorer</a> como pelo <a href="/wpt/Netscape_Navigator" title="Netscape Navigator" wx:linktype="known" wx:pagename="Netscape_Navigator" wx:page_id="64681" id="wx15">Netscape Navigator</a>, os principais navegadores na época. Durante esse período novas características foram adicionadas aos navegadores sem qualquer coordenação entre as pessoas envolvidas. Isso fez com que alguns navegadores apoiassem alguma característica em particular e funcionava de forma diferente em cada um.</p>

<p id="wx16">O termo ainda é utilizado, mas com menos frequência. O principais motivos são:</p>

<ul id="wx17">
<li id="wx18">
<p id="wx19">As últimas versões do Internet Explorer e do Netscape Navigator têm suporte para HTML 4.0 e <a href="/wpt/CSS" title="CSS" wx:linktype="known" wx:pagename="CSS" wx:page_id="35550" id="wx20">CSS</a> 1.</p>
</li>

<li id="wx21">
<p id="wx22">Melhor compatibilidade da técnica de mainpulação <a href="/wpt/Modelo_de_Objeto_de_Documentos" title="Modelo de Objeto de Documentos" wx:linktype="known" wx:pagename="Modelo_de_Objeto_de_Documentos" wx:page_id="91446" id="wx23">DOM</a> que se tornaram o método preferido para construir scripts para side-client.</p>
</li>

<li id="wx24">
<p id="wx25">O mercado de navegadores alargou e pediu uma compatibilidade maior com o Cross-browser. Hoje em dia um site normalmente suporta outros navegadores como <a href="/wpt/Firefox" title="Firefox" wx:linktype="known" wx:pagename="Firefox" wx:page_id="54549" id="wx26">Firefox</a>, <a href="/wpt/Opera" title="Opera" wx:linktype="known" wx:pagename="Opera" wx:page_id="45523" id="wx27">Opera</a> e <a href="/wpt/Safari_%28navegador%29" title="Safari (navegador)" wx:linktype="known" wx:pagename="Safari_(navegador)" wx:page_id="175171" id="wx28">Safari</a>, além de ser totalmente compatível com o Internet Explorer e Netscape Navigator.</p>
</li>
</ul>

<a id="Exemplos_de_c.C3.B3digo_Cross-browser" name="Exemplos_de_c.C3.B3digo_Cross-browser"/>
<wx:section level="2" title="Exemplos de código Cross-browser" id="wxsec2"><h2 id="wx29">Exemplos de código Cross-browser</h2>

<p id="wx30">Para compreender o exemplo a seguir é necessário que tenha algum conhecimento básico de HTML e <a href="/wpt/JavaScript" title="JavaScript" wx:linktype="known" wx:pagename="JavaScript" wx:page_id="21978" id="wx31">JavaScript</a>:</p>

<pre id="wx32">
&lt;div id="sample" style="position : absolute; top : 100px; left : 100px;"&gt;some text&lt;/div&gt;
</pre>

<p id="wx33">O código acima descreve um bloco de texto que deveria ser mostrado com uma distância do topo de 100 <a href="/wpt/Pixel" title="Pixel" wx:linktype="known" wx:pagename="Pixel" wx:page_id="64637" id="wx34">pixels</a> e 100 pixels da esquerda. No Netscape Navigator 4, seria possível mover o texto com o seguinte código:</p>

<pre id="wx35">
document.layers['sample'].left = 200;
</pre>

<p id="wx36">Entretanto, para ter o mesmo resultado no Internet Explorer 4 seria necessário outro código:</p>

<pre id="wx37">
document.all['sample'].style.left = 200;
</pre>

<p id="wx38">Para o que funcionasse em ambos os navegadores e assim ser Cross-browser seria necessário escrever um outro código:</p>

<pre id="wx39">
if (document.all)
  document.all['sample'].style.left = 200;
else if (document.layers)
  document.layers['sample'].left = 200;
</pre>

<p id="wx40">O código seguinte usa a normalização W3C que funciona nos navegadores <a href="/wpt/Mozilla" title="Mozilla" wx:linktype="known" wx:pagename="Mozilla" wx:page_id="13940" id="wx41">Mozilla</a>, nas novas versões do Internet Explorer e em várias versões de outros navegadores que seguem as normas da W3C:</p>

<pre id="wx42">
document.getElementById('sample').style.left = '200px';
</pre>
</wx:section></wx:section></div>
<div id="wx_categorylinks">
<a href="/wpt/index.php?title=Especial:Categories&amp;article=Cross-browser" title="Especial:Categories" wx:linktype="known" wx:pagename="Especial:Categories" id="wx43">Categorias de páginas</a>: <span dir="ltr" id="wx44"><a href="/wpt/Categoria:Programa%C3%A7%C3%A3o" title="Categoria:Programação" wx:linktype="known" wx:pagename="Categoria:Programação" wx:page_id="44412" id="wx45">Programação</a></span></div>
<div id="wx_languagelinks">
Outras línguas: <a href="http://de.wikipedia.org/wiki/Cross-Browser" class="external" wx:linktype="interwiki" wx:pagename="de:Cross-Browser" id="wx46">Deutsch</a> | <a href="http://en.wikipedia.org/wiki/Cross-browser" class="external" wx:linktype="interwiki" wx:pagename="en:Cross-browser" id="wx47">English</a> | <a href="http://fr.wikipedia.org/wiki/Cross-Browser" class="external" wx:linktype="interwiki" wx:pagename="fr:Cross-Browser" id="wx48">Français</a> | <a href="http://ru.wikipedia.org/wiki/%D0%9A%D1%80%D0%BE%D1%81%D1%81-%D0%B1%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80%D0%BD%D0%BE%D1%81%D1%82%D1%8C" class="external" wx:linktype="interwiki" wx:pagename="ru:Кросс-браузерность" id="wx49">Русский</a></div>
</body>
</html>
