Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bom dia pessoal,
Estava eu pesquisando pela internet sobre rounded corners e me deparei com esse código, e juro que não entendi como ele funciona !
XHTML
<div class="bordaBox">
<b class="b1"></b>
<b class="b2"></b>
<b class="b3"></b>
<b class="b4"></b>
<div class="conteudo">
Box com bordas arredondadas sem utilizar imagens.
Fácil utilização e implementação com CSS puro!
Fácil utilização e implementação com CSS puro!
Fácil utilização e implementação com CSS puro!
Fácil utilização e implementação com CSS puro!
</div>
<b class="b4"></b>
<b class="b3"></b>
<b class="b2"></b>
<b class="b1"></b>
</div>
CSS
<style type="text/css">
.bordaBox {background: transparent; width:30%;}
.bordaBox .b1, .bordaBox .b2, .bordaBox .b3, .bordaBox .b4, .bordaBox .b1b, .bordaBox .b2b, .bordaBox .b3b, .bordaBox .b4b {display:block; overflow:hidden; font-size:1px;}
.bordaBox .b1, .bordaBox .b2, .bordaBox .b3, .bordaBox .b1b, .bordaBox .b2b, .bordaBox .b3b {height:1px;}
.bordaBox .b2, .bordaBox .b3, .bordaBox .b4 {background:#CECECE; border-left:1px solid #999; border-right:1px solid #999;}
.bordaBox .b1 {margin:0 5px; background:#999;}
.bordaBox .b2 {margin:0 3px; border-width:0 2px;}
.bordaBox .b3 {margin:0 2px;}
.bordaBox .b4 {height:2px; margin:0 1px;}
.bordaBox .conteudo {padding:5px;display:block; background:#CECECE; border-left:1px solid #999; border-right:1px solid #999;}
</style>
Alguem pode me explicar como funciona, porque roda no IE6 e alem de tudo porque valida no W3C?
Fonte:Clique aqui
Validar não significa que esteja semântico. O validador apenas verifica se o documento está escrito de acordo com o DTD definido. No caso do XHTML Strict, ele valida aplicando as mesmas regras aplicadas aos documentos XML, ou seja, tags aninhadas corretamente, fechamento de todas as tags (vazias ou não), utilização de atributos corretamente, etc.
É isso que o validador faz, ele não analisa se aqui ou ali poderia ter utilizado a tag X ou Y, para o validador isso não importa, o que ele espera é que o documento esteja bem escrito.
Bom, o código apresentado, por exemplo, já não validaria se o DTD fosse o XHTML Strict, por causa da tag <b>, que está em desuso (no lugar dela devemos utilizar a tag <strong>). Além disso, não está semanticamente correto. Entenda, quando se utiliza uma tag apenas para atender uma necessidade visual, isso está errado. Isso porque, sem essa tag (ou as tags) seu conteúdo será acessiível da mesma forma. Mesmo porque já há um sinal bem claro de que algo está errado: a tag está vazia! Oras, que sentido faz ter uma tag vazia? :mellow:
Bom, quando vejo esse exemplo e tantos outros do mesmo tipo faço a seguinte pergunta: por quê? Só para dizer que "consegui fazer bordas arredondadas (ou qualquer outro recurso) sem utilizar imagens ou CSS3!"... Tá e daí? O que eu ganho com isso de fato? http://forum.imasters.com.br/public/style_emoticons/default/closedeyes.gif
É importante identificar qual tag deve ser utilizada em cada elemento de sua página, pois, dessa forma, estará criando um código mais semântico, com uso de tags para seus devidos fins (e não para criar ou simular outras cosinhas apenas para se dizer que "eu consigo fazer isso ou aquilo sem imagens!"...). Isso é semântica: utilizar algo para seu devido fim, com o intuito de atender ao que ele foi realmente projetado...
Abraço!
Frisando o sentido da semântica em html/css, apoio a breve explicação do moderador. É preciso saber usar as tags de acordo com a sua importância. Os desenvolvedores adoram criar divs e spans pra qualquer conteúdo do site. É difícil encontrar sites utilizando <dl>, <em>, <Hs>, e tantas outras tags de acordo com a importância do conteúdo do site.
Um Exemplo simples é o site [http://bm.straightline.jp/](http://bm.straightline.jp/) que usa as tags ideais para as descrições de cada item da galeria. O site é uma "simples" galeria de sites que utiliza com primor css e javascript, ajustando a página de acordo com o tamanho da tela/resolução. Vale a pena dar uma olhada no código pra reparar que usa-se <dl> para as informaçôs de cada item.
Quanto ao assunto de css com borda arredondada com ou sem o uso de imagem, indico este link http://www.smileycat.com/miaow/archives/000044.php#nojavascript que mostra várias maneiras de fazer isso.
Boa tarde,
Pois é Paulo, também penso isso sobre semântica e todo o resto, utilizar cada tag para sua devida finalidade e tudo mais.
Porém o surgimento da minha dúvida foi porque o autor do (post) dizia ser uma solução "elegante", coisa que eu discordei totalmente.
Afinal é como você disse, conseguir bordas arredondadas ou qualquer outro recurso a qualquer custo, só para mostrar que consegue? Não vejo sentido também, mas enfim valeu pela opinião.
Podemos iniciar uma discussão?? Podemos??? :lol:
Bom, o código apresentado, por exemplo, já não validaria se o DTD fosse o XHTML Strict, por causa da tag <b>, que está em desuso (no lugar dela devemos utilizar a tag <strong>
B e I são perfeitamente previstas nos DTD estritos tanto de HTML 4.01 quanto XHTML 1.0/1
Tanto existem e devem ser utilizados que em HTML5 ganharam até valor semântico!
Mesmo porque já há um sinal bem claro de que algo está errado: a tag está vazia! Oras, que sentido faz ter uma tag vazia?
Object, Embed, Iframe, Button, Textarea...
Isso é semântica: utilizar algo para seu devido fim, com o intuito de atender ao que ele foi realmente projetado...
Aqui sim! Concordo em gênero, número e grau! Primeiramente, voltemos às origens: HTML foi uma forma concebida de compartilhar documentos **textuais** enriquecidos. Então, a priore, tenha em mente que as tags HTML são projetadas para apresentar texto. Como já muito bem explicado pelo Public2004, a solução disposta se utiliza de tags <b> para simular pixels. Estamos distorcendo a utilidade da tag.
Com o avanço das tecnologias e chegada de novas necessidades, foram definidos novos elementos interativos e inteligentes a fim de enriquecer o conteúdo textual de documentos HTML. Para isso existem os quadros, as tabelas, os formulários e seus componentes, as imagens e os <object>'s. Mais recentemente em HTML5, para fins visuais, você pode fazer uso da tag <canvas>. Mas em HTML4/CSS2, as tags que mais se encaixam no contexto "deixar agradável aos olhos" são <div> para blocos, e <span> para linhas. Substituindo todas as ocorrências de <b> por <span>, você estará fazendo uso de uma tag para o fim que a mesma foi criada: Estilização visual. A justificativa para este tipo de alternativa gira em torno da economia de bytes: S - P - A - N x B! Briga desleal.
O ideal (semântico) mesmo, é que você deixe o que é apenas informação textual a cargo da marcação, faça uso irrestrito de CSS e por fim, complemente as deficiências com Javascript. Isso inclui a criação dinâmica de elementos HTML, gerando uma solução de bytes mais econômica (e, sem dúvidas, mais elegante) que a proposta no início do tópico.
Basicamente formar "pixels" nos cantos esquerdo e direito em posições específicas para dar o efeito de arredondado.
Não porque validou que seja semântico, os mais entendidos podem esclarecer.
Att.