Introdução às Regiões CSS

Artigo original escrito por Chris Mills e acessível aqui.
Translation by Nicolas Chevallier, publicado a 24 de Fevereiro de 2014.
Licença: Esta tradução é disponibilizada sob uma Licença Creative Commons Licença Creative Commons

h2>Introduction

CSS3 adiciona muitas características para nos ajudar a construir layouts, complexos e flexíveis de forma mais fácil e lógica, sem ter de recorrer ao JavaScript e a dolorosos hacks. Uma destas características é descrita no módulo CSS Regions nível 3 – a ideia básica aqui é que escreva o seu conteúdo dentro dos bons velhos elementos HTML semânticos, depois defina também um conjunto separado de contentores (não-semânticos) que servirão de base para ancorar os seus templates que definem o layout, etc. Depois organize o seu conteúdo nos seus contentores de layout usando as propriedades básicas das regiões. Isto é perfeito, porque significa que pode manter o seu conteúdo completamente separado das suas preocupações de disposição, sem duplicar semântica ou dados e sem afectar a acessibilidade. E como bónus, oferecer alternativas inteligentes utilizando Modernizr é muito simples. Vamos ver como implementar isto!

Regiões está actualmente em fase de rascunho, pelo que poderá mudar um pouco antes do seu lançamento final. No momento da redacção deste artigo, apenas funciona em Canárias Cromadas, IE10 (de uma forma diferente, envolvendo IFrame ) e Ópera 16, mas vale sempre a pena brincar com estas tecnologias desde cedo, para que possa aprendê-las com antecedência e fornecer dicas valiosas para os escritores de citações. No Chrome/Opera, é necessário activar a opção “características do WebKit experimental” (digite about:flags num novo separador e procure esta opção, ou execute o navegador de linha de comando do Terminal com a opção --enable-experimental-webkit-features) para que isto funcione.

Para dar feedback sobre as Regiões, contacte o grupo de trabalho CSS através da sua lista de correio .

Exemplo de Regiões

Para mostrar como funcionam as regiões, tomemos um exemplo. Pode testar o exemplo das regiões ao vivo , ou ver como se parece na figura 1.

css exemplo de regiões mostrando um layout complexo com conteúdo moldado em diferentes caixas

Figure 1: Um layout complexo feito usando regiões CSS.

Separámos de facto completamente o nosso conteúdo de qualquer tipo de layout, o que nos traz de volta à intenção original do CSS. O conteúdo pode ser arranjado nos contentores de layout, independentemente do seu tamanho e posição, e reordenar o conteúdo quando esses contentores mudam de tamanho. Tente exibir a página de exemplo alterando o tamanho da janela do navegador. Qualquer conteúdo que não caiba nas três primeiras regiões acabará na quarta caixa no fundo, que estou a utilizar como uma espécie de caixa de transbordo (caso contrário, o conteúdo transbordaria para fora da terceira área e para baixo do ecrã). O conteúdo organiza-se nas regiões pela ordem em que aparecem na fonte original.

A primeira coisa a notar no código HTML para o meu exemplo é a estrutura de disposição não-semântica na qual organizarei o conteúdo. Portanto, aqui estão as nossas regiões:

<div class="layout"> <div class="text-container"><!-- --></div> <div class="text-container"><!-- --></div> <div class="image-container"> <img src="../base-styles/grim-north.jpg" alt="A map of the North of England"> </div> <div class="text-container"><!-- --></div></div><div class="text-overflow"><!-- --></div>

Nota: adicionámos comentários vazios para nos livrarmos de um bug de layout particularmente estranho, onde o IE6 insere linhas vazias quando encontra linhas vazias <div> s.

No CSS, podemos criar um modelo de layout tão complexo quanto quisermos – pode ser tão criativo quanto quiser! Fiz isto:

/* positioning and styling for fancy containers */.layout { height: 600px; position: relative;}.text-container, .text-overflow { background: -webkit-repeating-linear-gradient(top, rgba(150,150,150,0.3) 0px, rgba(150,150,150,0.3) 1px, transparent 2px, transparent 40px), -webkit-linear-gradient(top left, rgba(255,255,255,1), rgba(200,200,200,1)); background: -moz-repeating-linear-gradient(top, rgba(150,150,150,0.3) 0px, rgba(150,150,150,0.3) 1px, transparent 2px, transparent 40px), -moz-linear-gradient(top left, rgba(255,255,255,1), rgba(200,200,200,1)); background: -ms-repeating-linear-gradient(top, rgba(150,150,150,0.3) 0px, rgba(150,150,150,0.3) 1px, transparent 2px, transparent 40px), -ms-linear-gradient(top left, rgba(255,255,255,1), rgba(200,200,200,1)); background: repeating-linear-gradient(to bottom, rgba(150,150,150,0.3) 0px, rgba(150,150,150,0.3) 1px, transparent 2px, transparent 40px), linear-gradient(to bottom right, rgba(255,255,255,1), rgba(200,200,200,1)); padding: 2rem; box-shadow: 0.5rem 0.5rem 20px black;}.layout .text-container { position: absolute; width: 25%; height: 300px; z-index: 2;}.layout .image-container { position: absolute;}.layout div:nth-of-type(1) { top: 0; left: 0; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg);}.layout div:nth-of-type(2) { top: 2rem; left: 30%; -webkit-transform: rotate(1deg); -moz-transform: rotate(1deg); -ms-transform: rotate(1deg); transform: rotate(1deg);}.layout div:nth-of-type(3) { display: block; top: 15rem; left: 50%; border: 1px solid black; -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg); -ms-transform: rotate(4deg); transform: rotate(4deg);}.layout div:nth-of-type(4) { top: 25rem; left: 67.5%; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotate(10deg);}.text-overflow { height: auto;}

Next, note que o conteúdo real da página está contido dentro de um conjunto de elementos semânticos, como deve ser:

<article class="content"><h2>Introduction</h2><p>Hello, dear readers…</p></article><article class="content"> …</article>

Regiões criadoras

Agora vamos olhar para o código das regiões – é realmente simples em comparação com o que mostrei acima! Para definir que um elemento, ou uma série de elementos contém o conteúdo que pretende passar nas suas regiões, é necessário usar o flow-into:

.content { -webkit-flow-into: article; -moz-flow-into: article; -ms-flow-into: article; flow-into: article;}

Next, especificarei os recipientes em que se deve colocar o conteúdo, usando o flow-from propriedade, que assume a mesma id como mostrado acima.

.text-container { -webkit-flow-from: article; -moz-flow-from: article; -ms-flow-from: article; flow-from: article;}.text-overflow { -webkit-flow-from: article; -moz-flow-from: article; -ms-flow-from: article; flow-from: article; }

Nota: “item” pode ser o que você quiser – é um identificador que você define, para um passo intermédio chamado “fluxo nomeado” – você expõe o seu conteúdo no fluxo nomeado usando , e o fluxo nos seus recipientes usando flow-from .

É assim tão simples – agora verá o conteúdo exposto nos contentores de layout.

Nota: O suporte actual do browser ainda não é perfeito – poderá encontrar algumas coisas que não funcionam utilizando regiões. Por exemplo, não consegui fazer com que as multicolunas trabalhassem numa região, apesar de ser explicitamente mencionado nas especificações.

Alternate display

Criar alternativas para navegadores não suportados é bastante fácil até às regiões. Pode detectar o apoio das Regiões utilizando Modernizr (2.6 e posteriores), depois em navegadores que não o suportam, fornecer algum estilo para o conteúdo semântico em si, não os contentores de layout. Vejamos como isto foi feito no nosso exemplo.

P>Primeiro precisamos de criar uma versão de Modernizr que lide com a detecção de características regionais. Para o fazer, precisamos de visitar a página de downloads da Modernizr , clicar em “non core detects” para expandir a lista de opções disponíveis, e verificar “css-regiões”, depois clicar em “Generate!”, depois em “Download”.

Para adicionar detecção de regiões ao nosso exemplo, basta adicionar:

<script src="Modernizr.css-regions.js"></script>

P>Próximo, posso adicionar algum estilo alternativo para fornecer um layout simplificado para navegadores que não suportam regiões. Vou fazer isto utilizando um selector de .feature-no-regions, como Modernizr adiciona o feature-no-regions class ao <html> tag, quando o site é renderizado em browsers que não suportam regiões:

.feature-no-regions .layout, .feature-no-regions .text-overflow { display: none;}.feature-no-regions .content { float: left; width: 48%; padding: 1%;}

Aqui, simplesmente escondi os recipientes de layout usando display: none; , depois defini como caixa flutuante os dois itens com uma largura e enchimento, para que os navegadores não suportados exibam algo utilizável que não pareça demasiado horrível (ver Figura 2). É claro que é bem-vindo para produzir algo muito mais interessante!

um esquema simples de duas colunas destinado a ser utilizado pelos navegadores que não suportam regiões CSS.

Figure 2: Um esquema simples de duas colunas, apresentado pelos navegadores que não suportam regiões CSS, via Modernizr.

Sumário

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *