PRESENTATION-LEVELS (CSS3)

A informação na web é reutilizada de diversas maneiras. Toda informação publicada é reutilizada por diversos meios de acesso, seja o seu browser, leitor de tela ou robôs de busca. O HTML proporciona essa liberdade para a informação. Por ser uma linguagem muito simples, podemos reutilizar a informação marcada com HTML em diversos meios de acesso. Mas o HTML não cuida da forma com que o usuário vai visualizar a informação em seu dispositivo. O HTML apenas exibe a informação. A maneira que o usuário consome essa informação é diferente em cada um dos meios de acesso e dispositivos. É aí que entra todo o poder do CSS. O CSS formata a informação para que ela possa ser acessível em diversos usar agents (meios de acesso). Se você acessa o site do seu banco pelo monitor de 22’’ da sua casa ou pelo seu celular, a informação tem que aparecer bem organizada em ambos cenários. É o CSS que organiza visualmente essas informações.
Além disso podemos apresentar a informação de diversas formas em um mesmo dispositivo. Por exemplo: você pode ver uma galeria de imagens da maneira convencional, clicando nas thumbs das fotos ou ver em forma de slideshow. Podemos levar essas experiências para websites de conteúdo textual também. A especificação de presentation-levels é uma das especificações que levam o usuário a terem conteúdo mostrados de uma outra forma da qual estamos acostumados. É muito útil para apresentações de slides, com efeitos, transições e etc ou qualquer documento que seria mais bem apresentado no formato de apresentação, como uma proposta, documentos técnicos e etc.

Como funciona o modelo

O modelo por trás da especificação é simples. Cada elemento no documento é definido como um “elemento de apresentação“ ou no formato original “element’s presentation level“ – EPL.
O EPL pode ser explicito em uma folha de estilo ou calculado automaticamente baseado na posição do elemento pela estrutura do documento. É assim que o browser calcula para mostrar os elementos progressivamente, como se faz normalmente em programas de apresentação.

O elemento fica em um dos três seguintes níveis que também são representadas por classes: below-level, at-level e above-level. Dependendo da pontuação de EPL que o browser dá, o elemento fica em um determinado nível. Essas pseudo-classes podem e devem ser modificadas via CSS.

A propriedade presentation-level

A propriedade presentation-level define como os valores de apresentação (EPL) de um determinado objeto devem ser calculados. São três valores possíveis: números inteiros, increment e same.
Quando definimos um valor inteiro, o elemento tem aquele valor fixo.
Quando colocamos increment, o valor do objeto aumenta um ponto em relação ao objeto anterior. Suponha que há duas LI em uma UL. A primeira LI tem o valor de 1, a segunda tem valor de 2 e assim por diante.
Quando definimos o valor same, o browser computa o mesmo valor do objeto anterior.
Isso tudo vai ficar mais esclarecido com os exemplos a seguir.
Utilizando o mesmo exemplo da especificação do W3C, temos o código abaixo:

<!DOCTYPE html>
<html>
<body>
<h1>strategies</h1>
<h2>our strategy</h2>
<ul>
<li>divide</li>
<li>conquer
<p>(in that order)</p>
</li>
</ul>
<h2>their strategy</h2>
<ul>
<li>obfuscate</li>
<li>propagate</li>
</ul>
</body>
</html>

Vamos definir o CSS de presentation-levels para esse HTML adicionado o código CSS:

@media projection {
h1 { page-break-before: always }
li { presentation-level: increment }
:below-level { color: black }
:at-level { color: red }
:above-level { color: silver }
}

Definimos que o H1 irá sempre iniciar em uma nova página.

Mas o mais importante é a propriedade presentation-level que definimos para a LI. Isso quer dizer que a cada LI o browser contará mais um ponto.

As três pseudo-classes que falamos no começo do texto: below-level, at-level, above-level, que formata os elementos que foram mostrados anteriores, o que elemento que está sendo mostrado e o próximo elemento.

Sendo assim, o browser calcula a pontuação de cada um dos elementos utilizados no exemplo como mostra abaixo:

HTML Valor de EPL
<h1>strategies</h1> 0

our strategy

0
<ul> 0
<li>divide</li> 1
<li>conquer</li> 2
</ul> 0

their strategy

0
<ul> 0
<li>obfuscate</li> 1
<li>propagate</li> 2
</ul> 0

Temos um outro exemplo, segue abaixo o HTML e logo depois a tabela com os valores de EPL:

<!DOCTYPE html>
<html>
<style>
@media projection {
h1 { presentation-level: 0; }
h2 { presentation-level: 1; }
h3 { presentation-level: 2; }
body * { presentation-level: 3; }
:above-level { display: none; }
}
</style>
<body>
<h1>strategies</h1>
<h2>our strategy</h2>
<ul>
<li>divide</li>
<li>conquer</li>
</ul>
<h2>their strategy</h2>
<ul>
<li>obfuscate</li>
<li>propagate</li>
</ul>
</body>
</html>

Perceba que agora definimos no CSS que tudo dentro de body tem o valor de 3. Logo o H1 que foi definido como 0 pela propriedade presentation-level tem o valor de 3.

Definimos também display:none; para os próximos elementos. Agora veja a pontuação aplicada:

HTML Valor de EPL
<h1>strategies</h1> 3
<h2>our strategy</h2> 2
<ul> 0
<li>divide</li> 0
<li>conquer</li> 0
</ul> 0
<h2>their strategy</h2> 2
<ul> 0
<li>obfuscate</li> 0
<li>propagate</li> 0
</ul> 0

O W3C tem uma especificação completa e em constante atualização do presentation-levels aqui:

http://www.w3.org/TR/css3-preslev/

Isso ai galera, esse foi mais um tutorial de CSS3. Até mais.

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s