Exportar (0) Imprimir
Expandir Tudo

Regiões

As Regiões CSS (Folhas de Estilos em Cascata) compõem um recurso de layout de página para aplicativos da Windows Store que usam JavaScript no Windows 8 e para o Internet Explorer 10. As Regiões CSS são definidas pelo W3C (World Wide Web Consortium) na especificação de Regiões CSS, que no momento é uma Versão Preliminar de Trabalho. Ao usar esse recurso, os desenvolvedores e designers podem pegar um único fluxo de conteúdo HTML de texto e imagens, e segmentar esse fluxo em vários contêineres vazios definidos em um modelo HTML padrão. Os modelos HTML são documentos praticamente vazios de conteúdo original, porém compostos principalmente de contêineres vazios que são dimensionados e posicionados para dar um layout específico ao conteúdo recebido.

Isso permite que um fluxo contínuo de conteúdo seja reestruturado em um layout mais adequado, por exemplo, para consumo em tablet.

Dentro de uma única página, as Regiões CSS permitem que os desenvolvedores da Web desenvolvam layouts de conteúdo complexos equivalentes aos que podem ser vistos em uma revista ou jornal, onde várias regiões do mesmo fluxo de conteúdo (texto, imagens relacionadas, vídeo e assim por diante) são moldados em torno de elementos de conteúdo independentes, como histórias ou anúncios alternativos.

Implementando Regiões CSS

Para implementar as Regiões CSS, você primeiro precisa de um arquivo HTML para servir de fluxo de conteúdo. Trata-se de um documento HTML autônomo que contenha seu próprio DOM (Document Object Model) e seu próprio estilo CSS. No diagrama a seguir, o fluxo de conteúdo é representado pelo arquivo "content.html".

Você precisa então de um documento HTML para servir de host para o fluxo de conteúdo. Esse documento host, ou página mestra, é responsável pelo dimensionamento e posicionamento das regiões CSS, bem como pela definição do identificador de fluxo no qual o fluxo de conteúdo será transmitido. No diagrama a seguir, a página mestra é representada pelo arquivo "master.html".

Um diagrama mostrando uma “equação” conceitual: um arquivo master.html, com vários quadros, além de um arquivo content.html com um fluxo de conteúdo HTML é igual a um arquivo master.html com seus quadros preenchidos com conteúdo do fluxo

Quando a página mestra estiver totalmente renderizada, ela conterá regiões conectadas com o conteúdo de fluxo incluído. É importante lembrar que esta fragmentação é somente para fins de apresentação e não afeta a estrutura DOM do documento de fluxo de conteúdo.

Criar uma fonte de dados

As Regiões CSS exigem que duas novas propriedades CSS permitam que o conteúdo flua de uma fonte de dados para uma região, depois para outra e assim por diante. Tanto a fonte de dados quanto um identificador são necessários para estruturar o fluxo de conteúdo. Primeiro, coloque uma fonte de dados em um elemento iframe para carregar em um documento HTML separado. Em sua página mestra, crie um iframe com ID exclusiva; por exemplo:


<iframe id="flow1-data-source" src="content-source.html"></iframe>

Depois, crie um seletor de CSS que especifica a fonte de dados usando a propriedade -ms-flow-into:


#flow1-data-source {
  -ms-flow-into: flow1;
}

Lembre-se que, ao colocar a propriedade -ms-flow-into no elemento iframe, o elemento age como se a propriedade display estivesse definida para "nenhum". Este elemento iframe não deve ser renderizado, e não participará da fragmentação do conteúdo ou do layout. Este elemento tem a única função de identificar a fonte de dados de onde o fluxo deve ser criado.

Criar um Contêiner de Região CSS

Qualquer elemento não substituído pode ser usado como um contêiner de Região CSS; entretanto, os elementos div são os mais comuns usados para essa finalidade.

Para criar um a contêiner de Região CSS, na página mestre, primeiro atribua aos elementos que pretende usar como contêineres um nome de classe exclusivo, por exemplo:


<div class="flow1-container"></div>
<div class="flow1-container"></div>
<div class="flow1-container"></div>


Crie um seletor CSS que especifica a fonte de dados da qual será aceito o fluxo de conteúdo usando a propriedade -ms-flow-from:


.flow1-container {
  -ms-flow-from: flow1;
}

O conteúdo em elementos que são designados como contêineres da Região CSS será renderizado na ordem da fonte DOM na página mestre. Quando regiões são definidas estaticamente, o conteúdo fica fragmentado entre os elementos de contêiner definidos no DOM.

Estendendo Regiões CSS

Você pode usar recursos de layout independentes da origem da fonte para criar cenários de layout mais complexos. Por exemplo, o novo recurso Alinhamento com a Grade pode ser usado para criar um layout complexo com fluxo livre. Por exemplo, imagine a seguinte marcação:


<!DOCTYPE html>
<html lang="en-us">
<head>
<style type="text/css">
#data-source {
  -ms-flow-into: flow1;
}
.flow-container {
  -ms-flow-from: flow1;
}
#grid {
  display: -ms-grid;
  -ms-grid-columns: 1fr 1fr 1fr 1fr;
  -ms-grid-rows: 384px 384px;
}
.A {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-row-span: 2;
}
.B {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
}
.C {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}
.D {
  -ms-grid-row: 1;
  -ms-grid-column: 4;
}
.E {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  -ms-grid-column-span: 3;
}
</style>
</head>
<body>
  <iframe id="data-source" src="content-source.html"></iframe>
  <div id="grid">
    <div id="region1" class="A flow-container"></div> 
    <div id="region2" class="B flow-container"></div>
    <div id="region3" class="C flow-container"></div> 
    <div id="region4" class="D flow-container"></div>
    <img class="E" src="image.png" />  
  </div>
</body>
</html>


Isto faz o conteúdo fluir como indicado no diagrama a seguir. As setas indicam a direção do fluxo do conteúdo.

Um diagrama que mostra o fluxo do conteúdo de quadro a quadro dentro de um layout de Grade.

Vamos trocar a ordem dos primeiros dois quadros e dos últimos dois quadros:


<iframe id="data-source" src="content-source.html"></iframe>
<div id="region1" class="B flow-container"></div>
<div id="region2" class="A flow-container"></div> 
<div id="region3" class="C flow-container"></div>
<div id="region4" class="E flow-container"></div>
<img class="D" src="image.png" />

Isso muda o fluxo, conforme mostrado neste diagrama revisado:

Um diagrama que mostra o fluxo de conteúdo de quadro a quadro dentro de um layout de Grade com quadros que foram trocados de posição. O conteúdo ainda flui sequencialmente, mesmo que cada quadro esteja em um local diferente dentro da Grade.

Isso permite especificar visualmente o layout de sua página sem mudar drasticamente a marcação do modelo e sem interromper o DOM do conteúdo de origem.

Outros cenários de Regiões CSS

Além dos dois exemplos dados anteriormente, as Regiões CSS permitem vários outros cenários úteis:

  • Criar dinamicamente regiões de conteúdo adicionando um novo div à página mestra quando o div atual estiver completo.
  • Permitir que o usuário modifique o documento de conteúdo e que o conteúdo atualizado flua novamente como esperado. Por exemplo, o usuário pode escolher aumentar o tamanho do texto, fazendo com que cada div seja gerado novamente para garantir a visibilidade de todo o conteúdo.
  • Acessar um intervalo de fragmento associado a uma região de conteúdo específica.

Referência de API

Regions

Amostras e tutoriais

Exemplo de regiões CSS

Demonstrações do Test Drive do Internet Explorer

Prática: Regiões CSS3

Postagens no blog do IE

Criando páginas centradas em Rich Text no IE10

Especificação

Módulo de Regiões CSS3

 

 

Mostrar:
© 2014 Microsoft