Web Semântica x CSS

[roberto182 0]

Boa Tarde a todos,

 

Gostaria de saber o seguinte.

 

O desenvolvimento de sites que seguem os padrões web tem por princípio a utilização das tags corretas para marcação do conteúdo, <table> para dados tabulares, <h's> para títulos, <ul> para listas e etc...

 

Porém, buscando na internet por uma solução para um layout 100% fluido encontrei este site (http://csscreator.com/?q=node/20471).

 

Neste site a solução apresentada utiliza-se de propriedades do css como "display: table" e uma marcação que considero <div> mania pela utilização de <div's> em excesso como <div id="fullheightcontainer"> <div id="wrapper"> <div id="outer" class="floatcontainer"> <div id="float-wrap" class="floatcontainer"> <div id="center">.

 

Aí vêm as dúvidas.

Exibir o conteúdo com tabela utilizando a propriedade "display: table" mesmo quando não se está exibindo uma tabela é o ideal?

Aumentar a quantidade de marcações para se alcançar o efeito desejado é recomendado?

 

E uma dúvida que não tem haver com o falado mas que sempre me passo pela cabeça é: O design deve ser feito levando em consideração a alteração do tamanho da fonte pelo usuário(Exibir > Tamanho da fonte)?

 

 

É isso.

 

Abraço!

[RoXbY 3]

Opa Roberto182, beleza?

eu utilizo display:table; em alguns sites sem utilizar tabelas, sem eles não consigo efeitos que eu quero, entretanto sempre busco o menor número de marcações possíveis mas se não tiver como, vai com algumas extras mesmo, não tem problema algum não :/ :)

 

da uma olhada neste vídeo que eu particularmente fiquei de cara com a técnica utilizada, de início não entendi direito o cara fez, vendo novamente eu saquei o "segredo"..

by Diego Eis

 

Quanto ao designer levar em consideração a alteração do tamanho da fonte, acho que ele deveria se antecipar e desenvolver o site com fontes maiores, você não acha? ainda mais hoje em dia com resoluções grandes acho que não tem problema. no mínimo 12px na font é o que eu uso e aí para cima.

 

veja como exemplo o site da www.visie.com.br

 

Mas se o designer não levar em consideração o aumento da letra, não irá morrer por isso já que o usuário vai conseguir ler de qualquer jeito mesmo com o layout destruido.. =)

[programador php 0]

olá!

seguinte! Utilizar display: table; em algo que não é tabela, não me parece fazer muito sentido, deve existir forma de fazer! [ cada caso é um caso ] mas por ser mais facil colocar um display: table o pessoal começou a fazer isso. já quanto ao uso de tags desnecessárias, tome cuidado. As vezes é preciso fazer isso, mas tome cuidado para não poluir todo o seu codigo. abraço

[RoXbY 3]

eu uso display:table; quando eu crio uma div de moldura para uma área onde tem outros dois elementos por exemplo.

 

quase nunca consigo definir uma altura, por isso coloco display:table; pois o FF não renderiza a div moldura na altura das outras, já no ie sim.

ex.:

<div=geral style=display:tabe;>

<div id=esquerda style=width:50%;float:left;>oi</div>

<div id=direita style=width:50%;float:left;margin-left:50%;>oi</div>

</div>

[Guilherme Rambo 4]

Galera, display:table não tem nada a ver com tabelas ou dados tabulares. É apenas uma propriedade do CSS que vai mudar o modo como determinado elemento se comporta, assim como display:block, display:inline, entre outros.

 

Sobre usar mais elementos na marcação para obter o resultado desejado, não vejo nada de mais. Se não há uma maneira mais "limpa" de resolver, paciência...

 

Sobre o "exibir > tamanho da fonte", isso é uma preocupação que você deve ter baseando-se em diversas variáveis, principalmente o público-alvo do site. Se for um site para pessoas idosas, cai bem permitir que a fonte seja aumentada sem estragar o layout. Caso seja um site que tem um público-alvo que em geral enxerga bem, não faz mal quebrar o layout quando aumentar a fonte, o importante é que aqueles que não enchergam bem consigam ler o que está escrito.

 

Outra coisa, Web Semântica é diferente de semântica.

 

[]'s

[roberto182 0]

Sobre usar mais elementos na marcação para obter o resultado desejado, não vejo nada de mais. Se não há uma maneira mais "limpa" de resolver, paciência...

Mas uma coisa é fato. Usar mais marcação para alcançar um efeito visual é o mesmo que é feito num desenvolvimento não-padrão. Tudo bem que numa escala bem menor do que as tabelas aninhadas e gif's invisíveis mas...

 

Agora outro caminho também pode ser aceitar aquela limitação e ser feliz com as outras vantagens e recursos do CSS.

 

Aliás, nesta parte de aceitar limitações eu levantei um tópico para desenvolvedores asp.net que ainda não teve resposta e que se algum desenvolvedor perdido aqui quiser responder... http://forum.imasters.com.br/index.php?showtopic=290773

 

Falow!

[programador php 0]

OPS!

 

falei besteira!

 

 

;)

[brcontainer 16]

olá!

seguinte! Utilizar display: table; em algo que não é tabela, não me parece fazer muito sentido, deve existir forma de fazer! [ cada caso é um caso ] mas por ser mais facil colocar um display: table o pessoal começou a fazer isso. já quanto ao uso de tags desnecessárias, tome cuidado. As vezes é preciso fazer isso, mas tome cuidado para não poluir todo o seu codigo. abraço

não há nenhuma necessidade para o uso desse atributo, pois já tem solução viavel sem ele, lembre-se usa-lo em elementos na página no FF e complacentes tem um BUG e por já haver solução melhor o recomendavel é não usa-lo em momento algum.

[RoXbY 3]

Mas uma coisa é fato. Usar mais marcação para alcançar um efeito visual é o mesmo que é feito num desenvolvimento não-padrão. Tudo bem que numa escala bem menor do que as tabelas aninhadas e gif's invisíveis mas...

 

Agora outro caminho também pode ser aceitar aquela limitação e ser feliz com as outras vantagens e recursos do CSS.

Hmmm.. h1 será sempre h1 aonde quer que ele esteja, mas posso definir através de CSS que h1 filho de classes diferentes serão diferentes.

Um site corretamente desenvolvido pode ser comparado a uma linhagem XML. é tudo padrão. se retirado a folha de estilo, terá cabeçalho, título, sub-título, parágrafos, listagens, formulário e etc. independente do que você escrever na folha de estilo, ele irá absorver e se enquadrar no que queres.

 

agora, tem como não utilizar marcação extra só para isso basta pensar um pouco antes de declarar <span> em muitos dos casos.

[Hanzi West 0]

silverfox,

 

Qual é a solução melhor para os display:table? dei uma olhada e não encontrei

[Guilherme Rambo 4]

Para evitar o bug do display:table no firefox, usa-se o seguinte:

elemento_que_precisa_de_display_table:after {
	content:"-";
	clear:both;
	visibility:hidden;
	display:block;
	height:1px;
}

[]'s

[brcontainer 16]

silverfox,

 

Qual é a solução melhor para os display:table? dei uma olhada e não encontrei

seria a pratica disso:

http://forum.imasters.com.br/index.php?showtopic=261803

 

falow abraço

[Aprendiz CSS 3]

eu particularmente, NUNCA usei display: table

 

mas acho que um dia usarei!

[brcontainer 16]

eu particularmente, NUNCA usei display: table

 

mas acho que um dia usarei!

Aprediz CSS, não use o Display:table; (minha pessoal recomendação), no FF, Opera e complacentes possui um BUG(que acredito que você já tenha lido a respeito) e no Safari além desse BUG, tem uma maneira que ao visualizar impressão e depois voltar a página ela destorce(somente vi no Safari).

Recomendo mesmo o link que eu passei pois ele é compativel com todos browsers atuais que testei, além de ser BEM LÓGICO, quero dizer o clear:; é para aplicações deste tipo mesmo, então na verdade a maneira do link que eu passei é a maneira correta ;)

[Aprendiz CSS 3]

eu particularmente, NUNCA usei display: table

 

mas acho que um dia usarei!

Aprediz CSS, não use o Display:table; (minha pessoal recomendação), no FF, Opera e complacentes possui um BUG(que acredito que você já tenha lido a respeito) e no Safari além desse BUG, tem uma maneira que ao visualizar impressão e depois voltar a página ela destorce(somente vi no Safari).

Recomendo mesmo o link que eu passei pois ele é compativel com todos browsers atuais que testei, além de ser BEM LÓGICO, quero dizer o clear:; é para aplicações deste tipo mesmo, então na verdade a maneira do link que eu passei é a maneira correta ;)

 

valeu

 

bom saber que eu nunca usei e sempre estive certo!

 

hehe

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[brcontainer 16]

E você acredita que teve membro que pensou que isso fosse gambiarra hehehe, mas na verdade o uso do CLEAR é esse mesmo ;p

 

e preferiou ou tabela ou DISPLAY:TABLE aee fazer o que não quiz acreditar =/ ae ficam se matando tentando corrigir o erro ;p