Bert
Bos, Coordenador das atividades das
CSSCopyright © 1994–2021 W3C® Privacy policy
Criado em 7 de julho de 2011;
Última atualização qua 06 jan 2021 05:40:49
UTC
Esta é uma tradução. Ela pode conter erros ou estar desatualizada em relação à versão original em inglês. Tradutor(a): Maurício “Maujor” Samy Silva
Ver todas as dicas em: index.
As duas tabelas mostradas a seguir podem ser visualizadas por inteiro ou com uma ou mais colunas escondidas. Neste artigo explicaremos dois métodos para obter este efeito. Os métodos são:
| Item | Info | Jan | Fev | Mar | Abr | Mai | Jun | Jul | Ago | Set | Out | Nov | Dez |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Primeiro | 1o. | 56 | 28 | 85 | 24 | 67 | 27 | 67 | 20 | 21 | 74 | 45 | 48 |
| Segundo | 2o. | 34 | 28 | 84 | 74 | 95 | 77 | 21 | 31 | 54 | 34 | 84 | 47 |
| Item | Info | Jan | Feb | Mar | Apr | May | Jun | Jul | Aug | Sep | Oct | Nov | Dec |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Primeiro | 1o. | imo | boo | ba | fie | ro | ore | yu | ek | quo | phe | lei | ats |
| Segundo | 2o. | eu | eo | suh | ohn | hye | lef | wa | bu | orf | ir | soi | se |
Normalmente para ocultar um elemento declaramos o valor 'none' para a propriedade 'display'. As CSS prevêem uma propriedade denominada 'visibility' destinada, também, a ocultar elementos, mas de uma maneira diferente. Para obter o efeito mostrar/ocultar em tabelas nós usaremos a declaração 'visibility: collapse' que foi projetada especialmente para ocultar colunas e linhas de tabelas.
O uso deste método permite ocultar colunas preservando o layout da tabela, ou seja, as colunas desaparecem mas o espaço total das colunas permanece em branco. Isto faz com que o espaço à direita da tabela seja preservado e ela não apresente o efeito de encolhimento.
O valor 'collapse' destina-se a uso interativo: primeiramente as colunas são todas visíveis e a seguir uma ação do usuário (veremos adiante) muda o valor da propriedade 'visibility' de algumas colunas de 'visible' para 'collapse', escondendo-as. As colunas desaparecem e os conteúdos das colunas que permanecem visíveis não se alteram e elas se movem em grupo para a esquerda. Quando o valor da propriedade muda novamente, por ação do usuário, para 'visible', as colunas ocultas reaparecem e o grupo de colunas visíveis se movem de volta para a direita, tudo sem alterar o layout da tabela. Este método não só agiliza o processo de mostrar/ocultar como também facilita o reconhecimento de cada coluna depois que ela é movida.
Para se estilizar colunas de tabelas é necessário que existam
elementos na marcação que permitam reconhecer as colunas. Em
marcação HTML o elemento <col> identifica
colunas. A marcação HTML para identificar as colunas das tabelas
anteriores é mostrada a seguir.
<table> <col> <col> <col class=m01> <col class=m02> <col class=m03> <col class=m04> <col class=m05> <col class=m06> <col class=m07> <col class=m08> <col class=m09> <col class=m10> <col class=m11> <col class=m12> <thead> <tr> <th>...
O atributo class é o seletor para aplicação de regras de estilo conforme exemplo mostrado a seguir:
col.m04 { visibility: collapse }
Esta regra CSS esconde qualquer coluna cujo atributo class seja m04. A seguir precisaremos de uma regra CSS para voltar á condição de coluna visível.
O primeiro método para obtenção do efeito proposto faz uso de folhas de estilos arternativas (ver o artigo "Alternative style sheets" [Folhas de estilos alternativas]). Esta página contém onze folhas com alternativas de estilização denominadas "View for…" que correspondem às onze maneiras diferentes de visualizar as tabelas aqui mostradas. A marcação HTML típica para lincar as folhas de estilos é mostrada a seguir:
<link rel="alternate stylesheet" href="foldingstyle/month02.css" title="View for February"> <link rel="alternate stylesheet" href="foldingstyle/month03.css" title="View for March"> <link rel="alternate stylesheet" href="foldingstyle/month04.css" title="View for April"> ...
Cada uma destas onze folhas de estilos contém apenas duas linhas: uma linha para importar a folha de estilo principal da página e uma linha para ocultar colunas. Por exemplo: mostramos a seguir o arquivo month04.css. Esta folha esconde as colunas .m01, .m02 e .m03, ou seja, as colunas correspondentes aos meses de janeiro, fevereiro e março:
@import "../../CSS/w3c-2010/main.css";
.m01, .m02, .m03 { visibility: collapse }
O método das folhas de estilos alternativas é fácil. Como você viu as regras de estilo são curtas e simples. Por outro lado, alternar folhas de estilos não é um procedimento rápido, pois temos que selecionar uma delas em um menu. Isto exige uma série de movimentos do mouse ou acionamentos de teclas do teclado.
O segundo método para mostrar/ocultar colunas usa o seletor ':target'. Este seletor casa com o elemento do documento que é o destino de um link. (Ver o artigo "A tabbed interface" [Interface com abas] para maiores informações sobre ':target'.)
Podemos usar este seletor para estilizar de maneira diferenciada com base no elemento que é o destino do link. Assim, precisamos apenas acrescentar links e seus elementos destinos na marcação, criando condições de se estilizar diferentes destinos.
Precisaremos de tantos links e seus respectivos destinos quantas
forem as folhas de estilos. Nesta página usamos um elemento <div> vazio como destino do link e colocamos o
elemento <a> dentro das células de cabeçalho
das colunas:
<div class=hack id=view02></div> <div class=hack id=view03></div> <div class=hack id=view04></div> ... <table> ... <th><a title="Clique para esconder as colunas anteriores" href="#view02">Fev<a> <th><a title="Clique para esconder as colunas anteriores" href="#view03">Mar<a> <th><a title="Clique para esconder as colunas anteriores" href="#view04">Abr<a> ...
(O atributo title dá uma dica da finalidade do link.)
Os elementos <div> e <a> extras inseridos na marcação têm a única finalidade de
possibilitar a estilização alternativa e é por esta razão que eu
chamo este método de hack. Provavelmente futuras versões das CSS
criarão uma funcionalidade capaz de mudar a estilização de
elementos de uma forma direta (ver adiante).
Para este método as regras de estilo são um pouco complidadas. Observe a seguir:
#view02:target ~ * .m01 {
visibility: collapse }
Esta declaração determina o fechamento do elemento .m01 se ele for descendente de um elemento que seja irmão adjacente do elemento com ID "view02" e seja o destino do link. Ver a folha de estilo "view.css" para as regras de estilo completas. (Existem 66 regras de estilo para o exemplo desta página.)
Estas regras permitem ao usuário mostar/ocultar colunas clicando nos seus cabeçalhos. Uma vantagem a mais deste método é que cada maneira diferente de apresentar a tabela têm seu próprio URL. Por exemplo: http://www.w3.org/Style/Examples/folding#view06 abre a página com as colunas jan, fev, mar, abr e mai já escondidas.
Em geral, quando você abre uma página a partir de um link o navegador rola a janela até que o destino do link se posicione no topo da janela. Neste caso o destino está invísivel:
.hack { display: none }
Nenhuma especificação define o comportamento do navegador quando o destino é invisível, mas felizmente quando isto acontece o navegador não rola a janela.
Uma vez que esta página usa dois métodos diferentes para mostrar/ocultar colunas um deles deverá ter prioridade. No nosso caso o método das folhas de estilos alternativas tem a prioridade: se você selecionar no menu do navegador a folha de estilos "View for June" e a seguir clicar na coluna para o mês de agosto a coluna para o mês de Junho não fechará.
Reverter a prioridade é fácil. O link para a folha de estilos com as regras para o seletor ':target' é como mostrado a seguir:
<link rel=stylesheet href="foldingstyle/view.css" title="Main">
fazendo com que a folha de estilo seja carregada juntamente com outra folha de estilo denominada "Main" e não com qualquer outra folha de estilo denominada "View for…". Basta remover o atributo title para que os estilos sejam aplicados independentemente de qual folha de estilo alternativa tenha sido carregada.
Esta página mostra duas tabelas cujas colunas são mostradas e ocultas da mesma maneira ilustrando as limitações dos dois métodos usados: é impossível aplicar o efeito de forma independente para cada uma das tabelas.
Como já foi dito, o método com uso do seletor ':target' requer marcação extra. Se for preciso usar na página hyperlinks com outras finalidades, por exemplo: para criar um índice do documento, então este método não poderá ser usado. (Por outro lado você pode desenvolver um método semelhante usando o seletor ':checked' em lugar de ':target'. Isto resolve o problema de hyperlinks, mas pode acarretar outras limitações.)
Por estas razões as CSS poderão, no futuro, criar uma funcionalidade capaz de alternar estilos por ação direta no elemento sem necessidade do uso de hyperlinks.
Até o mês de julho de 2011 o Grupo de Trabalho para as CSS ainda não publicou um Rascunho de Trabalho das especificações com esta funcionalidade, contudo já existem algumas ideias a respeito. Uma das ideias é criar a pseudo-classe ':alternative'. Uma regra tal como:
ul:alternative { content: "+" }
faria com que o elemento <ul> pudesse
alternar entre dois estilos e quando o usuário alterasse para um
segundo estilo alternativo um sinal "+" seria apresentado no lugar
do conteúdo do elemento.
Bert
Bos, Coordenador das atividades das
CSSCriado em 7 de julho de 2011;
Última atualização qua 06 jan 2021 05:40:49
UTC