Com a chegada do HTML5 há alguns meses atrás, chegou também uma panóplia de incompatibilidades entre as suas funcionalidades e os navegadores. Naturalmente, os navegadores mais antigos como Internet Explorer 6 não têm suporte para a grande maioria das funcionalidades Web 2.0 apresentadas na nova versão desta linguagem. HTML5 veio trazer fantásticas funcionalidades que permitem aos web designers criarem designs limpos, funcionais e sem grandes complicações a nível da programação. Neste artigo em que nos baseámos em um artigo dos colegas do Net Tuts, vamos criar um template HTML simples com alguns elementos para que possamos exemplificar aquilo que lhe queremos demonstrar ser possível, renderizar corretamente HTML5 em todos os navegadores inclusivamente no Internet Explorer 6.

Iremos utilizar 5 elementos HTML5 que pelo nome você consegue identificar o que cada um deles irá ser – header, footer, nav, article e hgroup. O único que não tem significado obvio é o hgroup que serve para definir um grupo de cabeçalhos para que possa agrupar o titulo e subtitulo de uma entrada no blog, tornando-o assim o cabeçalho do artigo e não da página. Esta compatibilização com todos os navegadores será possível através de algumas técnicas CSS e utilizando Javascript. Está pronto para começar?

Faça a renderização HTML5 corretamente em todos os navegadores

1. HTML

O HTML que vamos utilizar vai criar um esquema de página como está apresentado abaixo:

Faça a renderização HTML5 corretamente em todos os navegadores

Antigamente você teria de utilizar um conjunto enorme de div’s para criar o layout da sua página e posicionar os elementos. Felizmente esse processo foi bastante facilitado e agora você poder utilizar os elementos para cada zona do seu layout. Assim, para criar o esquema básico do layout crie um documento HTML e insira o seguinte código:

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<html>

	<head>
	    <title>An HTML5 Layout That Works in IE</title>
		<link rel="stylesheet" href="style.css" type="text/css" />
		<!-- <script type="text/javascript" src="CreateHTML5Elements.js"></script> -->
	</head>

	<body>
		<div id="page">

			<header>
				<h1>Faça a renderização HTML5 corretamente em todos os navegadores</h1>
			</header>

			<nav>
				<ul id="links">
					<li>Início</li>
					<li>Artigos</li>
					<li>Sobre</li>
					<li>Contatos</li>
				</ul>
			</nav>

			<div id="posts">

				<article>
					<hgroup>
						<h2>Artigo 1</h2>
						<h3>Subtitulo do artigo 1</h3>
					</hgroup>

					<p>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit,
						sed do eiusmod tempor incididunt ut labore et dolore magna
						aliqua. Ut enim ad minim veniam, quis nostrud exercitation
						ullamco laboris nisi ut aliquip ex ea commodo consequat.
						Duis aute irure dolor in reprehenderit in voluptate velit
						esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
						occaecat cupidatat non proident, sunt in culpa qui officia
						deserunt mollit anim id est laborum.
					</p>
				</article>

				<article>
					<hgroup>
						<h2>Artigo 2 2</h2>
						<h3>Subtitulo do artigo 2</h3>
					</hgroup>

					<p>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit,
						sed do eiusmod tempor incididunt ut labore et dolore magna
						aliqua. Ut enim ad minim veniam, quis nostrud exercitation
						ullamco laboris nisi ut aliquip ex ea commodo consequat.
						Duis aute irure dolor in reprehenderit in voluptate velit
						esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
						occaecat cupidatat non proident, sunt in culpa qui officia
						deserunt mollit anim id est laborum.
					</p>
				</article>

			</div>

			<footer>
				<address>
					<a href="mailto:foo@bar.com">Contate-nos</a>
				</address>
				<p>Copyright</p>
			</footer>

		</div>
	</body>

</html>

Neste momento temos o esquema de página construído, e como poderá confirmar está um código limpo, fácil de perceber, funcional e acima de tudo, correto. Caso seja necessário fazer alguma alteração, é fácil para si ou para outro desenvolvedor ler o código e fazer rapidamente as alterações necessárias sem perder grande tempo à procura de um elemento.

2. CSS

O posicionamento destes elementos seria fácil de fossem div’s, uma vez que sabemos como é que são manuseados pelo navegador, sabemos quais as regras de estilo a aplicar neles. No entanto, neste caso vai ser atribuída a estilização standard pelo navegador – se não sabia, acabou de aprender, os navegadores têm todos uma folha de estilos standard que aplicam ás páginas.

Na hierarquia das folhas de estilo, a folha de estilo aplicada pelo navegador é aquela que fica no último lugar, então se você especificar regras de estilo para algum elemento em uma folha de estilos interna ou externa, estas têm superioridade sobre a folha de estilos aplicada pelo navegador. Mas a grande questão é o que acontece quando o navegador encontra um elemento que não reconhece?

Não há certezas sobre esta matéria, tanto pode não ser estilizado, como pode herdar uma estilização, ou mesmo não ser mostrado ao usuário. Então aquilo que temos de fazer é criar a nossa própria estilização para os elementos, fazendo com que estes sejam reconhecidos mesmo nos navegadores mais antigos, da data em que certos elementos não existiam e por isso mesmo esses navegadores não os reconhecem.

Crie um documento CSS, insira o seguinte código e de seguida linke-o ao documento HTML:

body {
	margin:0;
	padding:0;
	background:white;
	font-family: Helvetica, Arial, sans-serif;
	font-size:14px;
	}

#page {
	width:1000px;
	background:white;
	border:1px solid black;
	margin:auto;
	padding:0;
	}

header, nav, article, footer, address { display:block; }

header, footer { width:100%; clear:both; }

header {
	height:100px;
	width:960px;
	padding:20px;
	background:black;
	color:#ccc;
	}

nav {
	float:left;
	width:210px;
	margin:20px;
	}
	nav ul {
		list-style:none;
		list-style-type:none;
		margin:0;
		padding:0;
		font-size:1.6em;
		font-weight:bold;
		}
		nav ul li {
			margin:5px;
			}

#posts {
	width:700px;
	margin:20px 10px 10px 260px;
	}

footer {
	font-size:0.8em;
	font-weight:bold;
	text-align:center;
	background:#ccc;
	height:200px;
	margin-top:25px;
	padding-top:20px;
	}

h1 { font-size: 4.5em; }
h2 { font-size: 2.0em; margin:0; }
h3 { font-size: 1.4em; margin:0; }
p { font-size: 1.0em; }

article {
	border-bottom: 1px dashed gray;
	margin-bottom: 20px;
	}
article p
	padding:10px;
	}

Salve ambos os documentos e observe o resultado num navegador atual:

Faça a renderização HTML5 corretamente em todos os navegadores

Agora observe o mesmo documento, renderizado em Internet Explorer 6:

Faça a renderização HTML5 corretamente em todos os navegadores

Como poderá confirmar, não tem a estilização que definimos aplicada, isto porque o Internet Explorer 6 não reconhece alguns dos elementos presentes no nosso documento. Então é aqui que entra o Javascript.

3. JAVASCRIPT – ONDE A MAGIA ACONTECE

O método ou técnica que vamos utilizar para que o Internet Explorer 6 reconheça os elementos é chamada de HTML5 Shiv, e consiste em utilizar uma função Javascript ( document.createElement() ) para cada um dos novos elementos que não são reconhecidos. No nosso caso, poderíamos escrever 5 funções para os elementos, mas felizmente existe um script que contém todos os elementos HTML5 num só ficheiro.

Então, para tornar o seu documento compatível com IE6, navegue até a esta linha <!– <script type=”text/javascript” src=”CreateHTML5Elements.js”></script> –> e remova o <!– do início e o –> do fim. De seguida baixe este ficheiro e coloque-o na pasta junto do index.html. Salve o documento e observe o resultado:

O resultado não poderia ser melhor:

Faça a renderização HTML5 corretamente em todos os navegadores

Aí está, conteúdo HTML5 renderizado corretamente em Internet Explorer 6! Poderá baixar os ficheiros fonte aqui para ter em seu poder todo o conteúdo e poder trabalhar com ele.

Abraço!

 

Autor: Diogo Espinha

Blog do Autor | Artigos do Autor:

Workaholic e totalmente viciado em computadores, Internet e desporto motorizado. Adora praticar desporto, é um curioso da programação em PHP, CSS e HTML5 e não dispensa a companhia do seu Mac OSX 86 Snow Leopard!

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos


  1. Criar
    9 de junho de 2012

    Acho que é o sonho de todos os desenvolvedores, principalmente os front-end, que todos os browsers renderizem igual, ou quase igualmente os elementos html e css. O bom é que a Microsoft finalmente saiu da sua zona de conforto e está atualizando o Internet Explorer, que era o mais defasado.

    Um abraço!


RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz