Bruno Dulcetti



Arquivos:

Categorias:

  • Amizade:

  • Artigos

  • Links:

    O meu, o seu, o nosso espaço!

    » Como você escreve seus arquivos CSS? Parte 3

    Falae pessoal.

    Demorei um bocado para essa terceira parte, que eu acho que é a última, pelos meus cálculos e pelos detalhes e informações sobre os arquivos CSS que crio.

    Como vimos nos artigos anteriores, na Primeira e na Segunda Parte, vimos alguns detalhes sobre os arquivos CSS, que na minha opinião, melhora bastante, otimiza seus CSS’s.

    Mostrei vantagens e desvantagens, indentações, múltiplas formas de implementar seus estilos e espero ter ajudado, ou pelo abrir um pouco mais a cabeça da galera, principalmente com quem trabalha com projetos grandes em sua vida profissional.

    Beleza Bruno. Pára de enrolar e fala logo.

    Ok, ok. São apenas dois pontos que citarei nessa terceira parte do artigo:

    1. Utilização de Multi-CSS’s;
    2. Ordem de escrita das propriedades.

    Bom, vamos começar a falar sobre o primeiro.

    Utilização de Multi-CSS’s

    Muitas pessoas ainda possuem dúvidas sobre a utilização, se podem ou não, no que prejudica, no que ajuda, se é que ajuda, a utilização de vários arquivos CSS no seu site.

    Posso utilizar vários CSS’s?

    Não só pode como deve utilizar. Acho essencial a utilização de múltiplos arquivos CSS’s, dependendo da estruturação das páginas. Mas logicamente que existem limites para isso. Não é recomendável a utilização de 30 arquivos CSS’s pequenos, por exemplo, onde se poderia utilizar somente um ou dois. O tempo de renderização aumenta por ter vários arquivos.

    Você pode estar pensando “Caramba! Trinta arquivos? Esse Bruno tá maluco?”. Coisa de maluco, concordo plenamente, mas quando participarem de projetos grandes, verão que os “remendos” sempre acontecem, principalmente se já passou por várias mãos, vai pra aprovação, modifica layout, vai pra desenvolvimento, volta, vai pra qa, etc, etc, etc.

    Acaba passando na mão de várias pessoas, a página possui vários elementos globais, que utilizam CSS’s externos, entre outras coisas mais.

    Entendi Bruno. Mas como faço então?

    Eu fazia de um modo, que hoje eu acho errado, que era chamar um CSS somente e dentro dele eu chamava os outros:

    No HTML:

    <style type="text/css">
    @import "css/estilo.css";
    </style>

    No CSS:

    @import url(estilo2.css);
    @import url(estilo3.css);
    @import url(estilo4.css);

    Ok Bruno. E o que há de errado com esse CSS?

    Errado? Nada. Mas concorda comigo que cada vez que eu chamo o arquivo estilo.css, ele chama todos os outros arquivos CSS’s?

    E se em uma página específica eu não precisar desses CSS’s? Só precisar de um apenas? Eu chamando o estilo.css, já estou chamando os outros e como eu quero economia, otimização, não quero que isso aconteça, correto?

    A mesma coisa acontece se eu colocar todo o conteúdo dentro de um CSS somente. Sempre chamarei somente um, mas dependendo do site, ele pode ter centenas, ou até milhares (isso mesmo) de linhas, o que sobrecarrega bastante.

    Tudo bem que temos cache, mas queremos evitar esses problemas de peso, otimizar, certo? Então vamos fazer um trabalho decente 😀

    Sucesso. Mostra ae o modo correto de implementar essa parte do CSS

    Lembrando que não estou falando que tal modo é certo ou errado, somente o que eu faço e mostro aqui pra vocês opinarem, comentarem, discutirem, etc.

    Eu, geralmente crio um arquivo chamado geral.css, que engloba todas as tags gerais, toda a estrutura do site inteiro, como conteudo, rodape, topo, títulos, etc. Depois eu crio mais um arquivo internas.css, caso seja possível ter somente um arquivo com todas as informações.

    Com isso, temos dois arquivos, sendo que na home eu não chamarei o arquivo internas.css, por motivos óbvios certo? 😀

    Caso seja necessário, eu posso criar alguns outros CSS’s, para títulos, formulários (recomendado), elementos globais (apesar de eu usar no geral.css, mas vai de cada um.), entre outros mais.

    Boa Bruno. E agora é só chamar os arquivos CSS’s necessários no HTML certo?

    Exatamente. Não vou mais precisar escrever no CSS o import, para chamar os outros arquivos. Segue abaixo:

    Possuo três páginas: Home, Quem e Contato; e possuo três arquivos CSS: geral.css, internas.css e formularios.css.

    Home

    <style type="text/css">
    @import "css/geral.css";
    </style>

    Quem

    <style type="text/css">
    @import "css/geral.css";
    @import "css/internas.css";
    </style>

    Contato

    <style type="text/css">
    @import "css/geral.css";
    @import "css/internas.css";
    @import "css/formularios.css";
    </style>

    Na Home eu chamei somente um CSS, o geral.css, que é chamado por todas as páginas. Na página Quem, além do geral.css, chamo o internas.css porque é uma página interna e na página de Contato, eu chamos os três CSS’s porque além de precisar da estrutura contida no geral.css, ele é uma página interna e possui os formulários necessários.

    Bom, resumindo é isso. Com isso, temos uma estruturação, um controle maior dos CSS, cortamos chamadas desnecessárias de classes e ID’s.

    Ordem de escrita das propriedades.

    Exatamente isso que você está pensando, se é que está pensando :D. Eu penso na ordenação das propriedades nos meus CSS’s. Parece loucura, admito, o Arthur mesmo falou comigo que era coisa de maluco, perguntando se existia alguém que realmente fazia isso, e ele tomou um susto quando eu respondi que fazia isso 😀

    Tá Bruno, mas como assim? Como você ordena seus CSS’s?

    Exatamente como você está imaginando agora, em ordem alfabética mesmo. Meio difícil de aceitar no início, concordo, eu fui um pouco assim, mas sem ser xiita.

    Tudo depende da adaptação, em qualquer coisa, seja na vida pessoal, trabalho, convivência, etc. Tudo é questão de hábito e costume.

    É bem chato no início, mas depois que pega o ritmo, costume, vai rápido.

    Entendi Bruno. Mas qual a vantagem de deixar em ordem alfabética os CSS’s?

    Isso varia de cada um, claro. Na minha opinião, o que mais pesou para eu implementar desta forma foi a organização. Por mais que cada um tenha seu modo, sua ordenação, em ordem alfabética eu sempre saberei onde está, aproximadamente, o atributo que eu estou procurando para modificar. Resumindo, eu achei mais fácil pra localizar atributos.

    Finalizando…

    Bom, finalizo aqui mais uma etapa, creio eu que seja a última delas 😀 de escrita de CSS. Provavelmente existem outros links falando sobre, acabou que nem pesquisei sobre isso direito. Qualquer coisa é só postar nos comentários.

    Mandem comentários, dicas, críticas, dúvidas que eu vou abrindo a mente pra, quem sabe, ver outras maneiras, experimentar outros métodos de implementação.

    É isso, aquele abraço.

    [BBL]artigos, css, escrita-no-css[/BBL]

    [ 30/maio/2007 às 11:47hrs ] [ Por Bruno Dulcetti ] Comentários 15 Comentários |

    Categorias: Artigos,CSS,Webstandards

    » Como você escreve seus arquivos CSS? Parte 2

    Dando continuidade ao post anterior, venho aqui mostrar alguns detalhes que acabei não mostrando na primeira parte. É sempre assim, quando queremos falar sobre algo, quando temos a absoluta certeza que está concluído, vemos, mais tarde, que ainda faltava algo :D.

    Ferramentas compactadoras de CSS’s

    Alguns leitores postaram sugestões, opiniões e links interessantes, que postarei aqui alguns dos links citados.

    Falaram sobre escrever como quiser o CSS e depois passar numa ferramenta, otimizador, online para ele fazer a compactação, redução do código, para depois subir e deixá-lo online.

    É uma boa alternativa, porém ainda prefiro fazer na mão mesmo, pois podemos ficar meio que dependentes de tal ferramenta, e se por acaso ela não funcionar mais, não existir mais, estamos perdidos. Ok, sem exageros, mas causa dependência e eu não gosto muito disso.

    Segue a lista de links:

    Dei uma olhada muito rápida nos links e o q mais me agradou foi o Clean CSS, pelas opções, variações de compactação, etc. Mas não cheguei a testar nenhum. Mais pra frente, de repente :P, eu testo :D.

    Retornando a escrita CSS… 😀

    Bom, retornando ao assunto do Post, vou comentar sobre mais alguns pontos de escrita dos CSS’s. Eu batizarei um de hierarquia de elementos e o outro de referência de tags.

    Hierarquia de Elementos

    Quando falo de hierarquia de elementos no CSS, estou falando de elementos filhos sendo hierarquizados dentro dos arquivos CSS’s. Eu, na grande maioria das vezes, não faço hierarquia, utilizando somente a div correspondente.

    Explicarei melhor agora, porque está meio confuso. Veja o código abaixo:
    #geral #conteudo #minhaDiv {background-color:#CCC;border:1px solid #FC3;color:#FFF;height:300px;width:200px;}
    #geral #conteudo #minhaDiv2 {background-color:#CCC;border:1px solid #FC3;color:#FFF;height:300px;width:200px;}
    #geral #conteudo #minhaDiv3 {background-color:#CCC;border:1px solid #FC3;color:#FFF;height:300px;width:200px;}

    Olhando o código, se vc possui o mínimo de conhecimento em CSS, vc percebe que os ID’s #minhaDiv, #minhaDiv2 e #minhaDiv3 são “filhas” do ID #conteudo que é filho do ID #geral certo?

    Geralmente eu não faço desta forma, eu economizo mais. Usando o código deste exemplo, ficaria desta forma:
    #minhaDiv {background-color:#CCC;border:1px solid #FC3;color:#FFF;height:300px;width:200px;}
    #minhaDiv2 {background-color:#CCC;border:1px solid #FC3;color:#FFF;height:300px;width:200px;}
    #minhaDiv3 {background-color:#CCC;border:1px solid #FC3;color:#FFF;height:300px;width:200px;}

    Economizei bastante, pois retirei o “#geral #conteudo ” das linhas.

    Existem pontos fortes e fracos na utilização dessa hierarquia. O Ponto positivo, na minha opinião é que você limita o ID a funcionar SOMENTE quando ele fizer parte dessa hierarquia. E, às vezes, isso não chega nem a ser uma vantagem, pois você possa precisar deste mesmo comportamento em outra hierarquia, mas não funcionará por causa do “#geral #conteudo “.

    Muitos desenvolvedores utilizam a forma hierárquica, pois fica fácil de saber onde aquele elemento está, é filho de quem, etc. Mas se você trabalhar com CSS corretamente, separando seus arquivos CSS’s, com nomenclaturas corretas, você não precisará se preocupar com esses detalhes.

    Referência de Tags

    Este é simples e muitos usam este método. Mostrarei abaixo um exemplo para depois explicar:
    div#minhaDiv {background-color:#CCC;border:1px solid #FC3;color:#FFF;height:300px;width:200px;}
    div#minhaDiv span.minhaClasse {color:#666;}
    div#minhaDiv a.verMais {text-decoration:none;}

    Agora uma breve explicação sobre cada linha:

    › div#minhaDiv

    A div que tiver o identificador #minhaDiv, receberá todas as propriedades setadas.

    › div#minhaDiv span.minhaClasse

    O span que receber a classe minhaClasse e for “filho” da div que tiver o identificador #minhaDiv, receberá todas as propriedades setadas.

    › div#minhaDiv a.verMais

    O link que receber a classe verMais e for “filho” da div que tiver o identificador #minhaDiv, receberá todas as propriedades setadas.

    » Pontos Fortes e Fracos

    A utilização desta forma limita as propriedades a somente estas tags e pronto. Caso no HTML seja modificada alguma estrutura, o funcionamento pode ser danificado, por exemplo, de span, vire div, estas propriedades não funcionarão mais.

    Eu prefiro utilizar sem a referência de tags, a não ser que você tenha múltiplas tags utilizando a mesma classe.

    Finalizando…

    Bom, essa segunda parte é bem menor que a primeira e é assim que eu tentarei fazer sempre, escrever menos, mais direto. Apesar que sou muito detalhista e mastigo bem os tutoriais, artigos, etc. Acho que é melhor assim, mas é preocupante também quando fica grande, cansativo, etc. Mas eu vou treinando para isso não acontecer :D.

    Aquele abraço e valew a contribuição de todos.

    [BBL]artigos, css, escrita-no-css[/BBL]

    [ 23/abr/2007 às 16:14hrs ] [ Por Bruno Dulcetti ] Comentários 6 Comentários |

    Categorias: Artigos,CSS,Webstandards

    » Como você escreve seus arquivos CSS?

    Fala pessoal. Ressurgindo das cinzas como uma Fênix, aqui estou eu novamente, para encher vossos sacos 😀 e saber de vocês e mostrar como eu escrevo meus arquivos CSS‘s.

    Mas por que isso Bruno?

    Simples. Antigamente eu pensava que não tinha diferença na escrita dos CSS’s que eu criava, etc. E na verdade, no início é sempre assim, pouco damos valor a essas pequenas coisas, esses pequenos detalhes.

    Detalhes que fazem a diferença na sua grande parte. Lembrando que não estou falando da utilização das regras, como, quando e porquê usar tal propriedade CSS. Estou falando da escrita mesmo, como você cria, etc.

    Ainda não entendi direito Bruno. Explica melhor essa parte da escrita do CSS

    Vou mostrar um exemplo de uma forma de escrever, criar um arquivo CSS:

    .minhaClasse {
    	background-color: #CCC;
    	border: 1px solid #FC3;
    	color: #FFF;
    	height: 300px;
    	width: 200px;
    }
    
    .minhaClasse2 {
    	background-color: #CCC;
    	border: 1px solid #FC3;
    	color: #FFF;
    	height: 300px;
    	width: 200px;
    }
    
    .minhaClasse3 {
    	background-color: #CCC;
    	border: 1px solid #FC3;
    	color: #FFF;
    	height: 300px;
    	width: 200px;
    }
    

    Peço que não levem em conta que todas as classes estão com as mesmas propriedades. Coloquei mais para não ter que ficar criando, etc. Estou com preguiça e no trabalho, não esqueçam disso 😀

    Legal Bruno. E?

    Perceberam que esta é uma declaração simples de um CSS correto? Imaginem um CSS com 300 linhas de código, parecido com esses que passei agora. Bastante coisa, certo? O arquivo terá muitos ID’s, Classes, declarações para tags, etc.

    Sabemos também que é interessante termos um CSS compacto e leve correto? Com uns 8kb, 10kb no máximo não é verdade?

    Mas muitos não dão tanto valor por meros espaços em branco, coisas que, no início, parecem irrelevante, que geralmente não vão fazer diferença.

    Muitas vezes também por organização no código, entre outros motivos. Creio que quase todos começam assim, criando os códigos bonitinhos, quebrando linha, com indentação, bem organizado.

    Eu mesmo achava horríveis os códigos CSS’s que ficavam tudo em uma linha só, sem espaços, completamente difíceis de serem enxergados, etc. Tinha meio que um preconceito, uma certa dificuldade de aceitar tal forma de criar.

    Verdade Bruno. Mas como você faz seus CSS’s agora?

    Antes de responder essa pergunta, vou explicar porquê mudei minha forma de implementar meus CSS’s.

    › Razão 01 – Tamanho do Site

    Geralmente não pegamos sites gigantes pra fazer, implementar, etc. Pegamos sites pessoais, institucionais, com poucas visitações por mês, etc. Isso ajuda no vício de criar CSS’s mais bonitinhos, arrumados e organizados.

    Mas quando pegamos um projeto grande, algo em torno de milhões de visitas, percebemos a necessidade de melhorias no acesso, leveza do site, entre outras coisas essenciais num Portal.

    › Razão 02 – Visitação ao Site

    Parece que não, mas um CSS com 1kb a menos pode fazer a diferença. Imaginem um Portal como a Globo.com, com milhões de acessos diários. Agora multipliquem esse 1kb a menos com os milhões de acesso ao site. Chegamos num número absurdo de economia de banda, etc.

    › Razão 03 – Quantidade de linhas dos CSS’s

    Diminui absurdamente a quantidade de linhas no CSS. Muitas linhas num CSS não são coisas muito agradáveis, fica difícil de buscar elementos, futuras modificações, etc.

    › Razão 04 – Tamanho total dos CSS’s?

    Sim. Pode ser. Por que não?

    No Videolog, por exemplo, fiz um teste, retirei espaços, tabs, deixando na mesma linha e teve uma redução considerável, pensando em larga escala logicamente. No Videolog temos uns 36kb e pouco de CSS. :O Sim, verdade, projetos grandes necessitam de mais detalhes, principalmente quando temos formulários, grandes variações deles.

    No final, depois das mudanças e economias que fiz, os CSS’s ficaram, no total, com 30kb. Um ganho de mais de 6kb. Parece pouco, depende do ponto de vista, porque o Videolog recebe milhões de visitantes, page views e tudo mais. Imagine o ganho disso, multiplicando por milhões 😉

    Sem esquecer que ainda farei umas otimizações, para não haver chamadas desnecessárias aos CSS’s, por exemplo, páginas que não possuem formulários, não precisam chamar o css “formularios.css”. Algumas mudanças deste tipo ajudam na rapidez e peso da página.

    Interessante. Mas como os seus arquivos CSS estão escritos?

    Mostrarei o exemplo anterior utilizando a forma como estou escrevendo os meus CSS’s:

    .minhaClasse {background-color:#CCC;border:1px solid #FC3;color:#FFF;height:300px;width:200px;}
    .minhaClasse2 {background-color:#CCC;border:1px solid #FC3;color:#FFF;height:300px;width:200px;}
    .minhaClasse3 {background-color:#CCC;border:1px solid #FC3;color:#FFF;height:300px;width:200px;}
    

    Bem menos linhas concordam? Menos espaços em branco, tabs, etc.

    › Desvantagens

    Como nada é perfeito, temos desvantagens também, mas isso geralmente ocorre no início. É uma questão de adaptação. Meus primeiros três, cinco dias aqui na Globo.com foi chato, difícil e contra minha vontade acostumar com isso. Mas depois, pensando em um dos motivos que citei anteriormente, da parte de milhões de acessos, isso diminui absurdamente a quantidade de banda transferida, etc.

    Vou citar alguns pontos chatos nessa utilização:

    1. Desorganização no primeiro contato;
    2. Um pouco difícil de se encontrar/organizar no início;
    3. Falta de hierarquia, tabulação;
    4. Linhas extensas.

    Por enquanto eu vejo esses pontos fracos, mas caso vocês vejam outros, eu vou analisar e posto aqui também, sem problemas. Vou comentar um pouco mais sobre cada um:

    › Desorganização no primeiro contato

    Com certeza, quem ainda não escreve seus CSS’s desta forma, se assusta. No primeiro contato fica meio bagunça, difícil de enxergar, se localizar, concordo. Mas eu juro, com a prática e costume, fica tudo normal 😀 É como comer comida japonesa com hashi. No início é um desastre, mas depois se acostuma, pega a prática. (eu odeio comida japonesa, foi só mesmo para exemplificar :D)

    › Um pouco difícil de se encontrar/organizar no início

    Quando temos várias linhas, com as propriedades, ficamos meio perdidos no início, enrolados, pois são muitos caracteres, códigos, o que acaba confundindo, isso é fato.

    Em contrapartida, quando temos um css como o mostrado no primeiro exemplo, temos uma organização por blocos com várias linhas e não por linhas com várias propriedades, com isso, não achamos os blocos tão facilmente:

    #conteudo .box {
    	background-color: #CCC;
    	border: 2px solid #000;
    	color: #333;
    	width: 200px;
    }
    
    #conteudo .boxTal {
    	background-color: #000;
    	border: 1px solid #666;
    	color: #FFF;
    	width: 200px;
    }
    

    Percebemos que as duas classes estão contidas, somente, no ID conteúdo. Correto? O prefixo #conteudo afirma isso (isso é básico e espero que todos saibam disso).

    Mas percebam que de cara não é tão fácil perceber isso. Pensamos um pouco, nem que sejam alguns milésimos de segundos a mais (ok, ok… dei uma de Steve Krug agora :D). Mas é a pura verdade. Do segundo modo, temos uma melhora visual da hierarquia das linhas, elementos e propriedades:

    #conteudo .box {background-color:#CCC;border:2px solid #000;color:#333;width:200px;}
    #conteudo .boxTal {background-color:#000;border:1px solid #666;color:#FFF;width:200px;}
    
    #lateral .box {background-color:#CCC;border:2px solid #000;color:#333;width:200px;}
    #lateral .boxTal {background-color:#000;border:1px solid #666;color:#FFF;width:200px;}
    

    Percebam que nas duas linhas o #conteudo está um logo abaixo do outro, o que já afirma serem “filhas” do mesmo bloco quando batemos o olho. O mesmo vale para o prefixo #lateral.

    › Falta de hierarquia, tabulação

    Como já vimos, a tabulação é perdida, com isso, sua hierarquia de propriedades de um elemento. Não estou falando da hierarquia de múltiplos elementos e sim hierarquia de elementos › propriedades, quais propriedades são de quais elementos, etc.

    Os elementos são escritos colados na esquerda, enquanto as propriedades são escritas com uma TAB a mais no código, referenciando que essa propriedade é filha do elemento logo acima.

    › Linhas extensas

    Os elementos quando possuem muitas propriedades, muitas declarações, acaba estendendo a linha demais, ficando meio difícil de acompanhar e invadindo o final da tela, não ficando totalmente visível em alguns casos, sendo obrigado a rolar a barra horizontal para verificar tudo.

    Isso é bem normal, nada tão grave ao meu ver. Mas…

    Legal Bruno. Mas podem existir variações nessa forma de escrita?

    Com certeza. Vou mostrar algumas variações nessa forma de Implementar seus CSS’s. Principalmente na parte de propriedades para multi-elementos.

    Vou listar abaixo algumas variedades, mas fiquem à vontade de sugerirem algumas:

    • Com espaços;
    • Com espaços depois das propriedades;
    • Sem espaços;
    • Multi-elementos na mesma linha;
    • Multi-elementos em mais de uma linha.

    Com espaços nas propriedades do CSS

    Vejamos abaixo:

    .minhaClasse { background-color:#CCC; border:1px solid #FC3; color:#FFF; height:300px; width:200px; }
    

    Algumas pessoas fazem desta forma, principalmente para facilitar na identificação das propriedades, separação. Mas tem um ponto importante também, que é abrir o arquivo no Notepad, e como ele é péssimo nos atalhos dos desenvolvedores, não considerando caracteres especiais, desta forma ajuda e muito.

    Com espaços somente depois das propriedades no CSS

    Vejamos abaixo:

    .minhaClasse {background-color:#CCC; border:1px solid #FC3; color:#FFF; height:300px; width:200px;}
    

    O mesmo que o anterior, mas sem espaços após a { de início e } de final das declarações das propriedades.

    Sem espaços

    Vejamos abaixo:

    .minhaClasse {background-color:#CCC;border:1px solid #FC3;color:#FFF;height:300px;width:200px;}
    

    A forma que eu utilizo. É um pouco mais complicada de entender, mas é a mais econômica de todas. E como não abro, geralmente, pelo Notepad os CSS’s, não tenho problemas com ele.

    Multi-elementos na mesma linha

    Vejamos abaixo:

    .minhaClasse, .minhaClasse2, .minhaClasse3 {background-color:#CCC;border:1px solid #FC3;color:#FFF;height:300px;width:200px;}
    

    Caindo agora pra parte de declarações para múltiplos elementos, temos este, que é o utilizado geralmente. Já utilizei bastante, principalmente quando temos poucas propriedades na declaração, mas quando é ao contrário, temos o problema da linha ficar muito comprida, o que eu não acho legal.

    Fora que, às vezes, pode parecer que os múltiplos elementos é um só.

    Multi-elementos em mais de uma linha

    Vejamos abaixo:

    .minhaClasse,
    .minhaClasse2,
    .minhaClasse3 {background-color:#CCC;border:1px solid #FC3;color:#FFF;height:300px;width:200px;}
    

    A forma que utilizo hoje em dia. Acho mais organizada e mais fácil de se localizar.

    Conclusões…

    Fica claro que cada Projeto é um Projeto, cada Profissional é um Profissional. Apenas mostrei aqui alguns exemplos, minha opinião sobre e recomendações, fiquem à vontade para decidirem e discordarem. Estamos ae pra isso 😀

    Acho que em projetos pessoais, como portfólio, sites institucionais, de pouco tráfego, não seja necessário. Assim como um profissional que não esteja numa grande empresa, participando de um Mega Projeto Web, talvez não seja prioridade fazer das formas que citei aqui. Mas acho que pelo menos já deixa o desenvolvedor preparado para Projetos grandes, com muito tráfego, ou até mesmo nos sites e sub-sites da empresa onde trabalhará mais pra frente.

    Finalizando (Ufa :D)

    Fico por aqui, desculpem o tamanho do artigo. Eu até iria dividir em partes, mas não achei legal fazer desta forma. Da próxima vez eu planejo tudo direitinho, para deixar separado, organizado blz?

    Aquele abraço a todos e eu tentarei ser mais ativo no Blog.

    [BBL]artigos, css, escrita-no-css[/BBL]

    [ 20/abr/2007 às 18:19hrs ] [ Por Bruno Dulcetti ] Comentários 20 Comentários |

    Categorias: Artigos,CSS,Webstandards

    » Vertical-align no CSS. Como, quando e por que usar.

    E ae galera. Estou aqui de volta, novamente, depois de uma sumida (pra variar não é verdade? :P). Mas eu juro que tentarei voltar com mais freqüência, postar mais colírios, vídeos do Videolog, etc.

    Que bom Bruno. Mas algo em especial ou só veio pra falar que está sumido?

    Não, não. Estou aqui para postar um artigo sobre uma propriedade CSS, o vertical-align, que vejo por ae que muita gente têm duvida na sua utilização, aplicação.

    Muitos desenvolvedores confundem e comparam com o atributo valign que é colocado dentro da tag <td> no HTML. Realmente é semelhante, o nome mesmo indica isso, mas as funcionalidades e aplicações são diferentes, quando não aplicada em células de tabelas.

    Legal Bruno. Então mostra ae. Quais as diferenças?

    Primeiramente, a propriedade vertical-align não é para ser aplicada em blocos e sim em elementos inline. A não ser que apliquemos em células de uma tabela, como estávamos acostumados.

    Vamos ver um exemplo de como os iniciantes utilizam a propriedade:

    Código HTML:

    <div id="box">
    Meu texto bem aqui.
    </div>

    Código CSS:

    #box {background-color:#F5F4F4;border:2px solid #CCC;height:200px;padding:5px;vertical-align:middle;width:400px;}

    Podemos ver o resultado desse exemplo aqui.

    Não vou explicar detalhadamente o que foi utilizado, pois é bem básico. A única coisa diferente usada foi o vertical-align mesmo.

    Como podemos ver, o resultado não foi satisfatório. O texto continuou no topo da div. Com isso, já podemos ver que confirma como eu disse acima, que a propriedade não funciona em blocos. 😉

    Certo Bruno. Mas como resolver isso então? (Parte 1 – line-height)

    Temos algumas variedades de resolver tal problema. A primeira seria a utilização da propriedade line-height com o mesmo valor da propriedade height. Veremos abaixo:

    #box {background-color:#F5F4F4;border:2px solid #CCC;height:200px;line-height:200px;padding:5px;width:400px;}

    Podemos ver o resultado desse exemplo aqui.

    Restrições e problemas.

    Como sempre, temos restrições nesse exemplo. Na verdade temos em tudo não é verdade?

    • Altura variável dentro do bloco;
    • Mais de uma linha dentro do bloco;

    Vamos às explicações:

    Altura variável dentro do bloco.

    Se tivermos um site dinâmico, onde a altura do elemento pode variar, teremos problemas, pois se o line-height for diferente do height, o texto não ficará centralizado.

    Mais de uma linha dentro do bloco.

    Bem grave esse problema, pois se tivermos mais de uma linha, a distância entre essas linhas ficará absurda, pois será sempre o valor do line-height, portanto, se tivermos três linhas de texto, por exemplo, teremos, no exemplo acima citado, uma altura de três vezes o line-height, pois temos três linhas e 200px de line-height, com isso, 3x200px.

    Veja o exemplo aqui.

    Certo Bruno. Mas como resolver isso então? (Parte 2 – display: table-cell)

    Lembram de eu ter dito que dentro de uma <td> e com o atributo valign fica tranquilo?

    Então tudo funcionaria se eu colocasse um display: table-cell certo? Quase. Graças ao nosso querido e amado internet explorer, não. E ainda por cima, nem no internet explorer 7 funciona. Pelo menos aqui não funcionou.

    Vamos ao exemplo:

    #box {background-color:#F5F4F4;border:2px solid #CCC;height:200px;display:table-cell;padding:5px;vertical-align:middle;width:400px;}

    Podemos ver o resultado desse exemplo aqui.

    Para quem utiliza browser, funciona perfeitamente. Mas para quem não usa, o texto continua no topo. Salve ie. 😀

    Mas então quando devo usar o vertical-align Bruno?

    Esse é o ponto que quero chegar. Como eu disse, o vertical-align são para elementos inline e não em blocos (fora os tds e ths da vida ok? 😉 ). Portanto, temos as restrições e problemas citados.

    Mostrarei alguns exemplos de como e quando usar o vertical-align.

    Alinhando imagem e texto centralizado verticalmente com o vertical-align.

    Veremos no código abaixo, como fazer para alinhar uma imagem e um texto centralizado verticalmente:

    Código HTML:

    <div id="box">
    <img src="http://brunodulcetti.com/artigos/vertical-align/macaco.jpg" alt="imagem" /> Meu texto bem aqui.
    </div>

    Código CSS:

    #box {background-color:# F7F6F1;border:2px solid #CCC;height:200px;padding:5px; width:400px;}
    #box img {vertical-align:middle;}

    Podemos ver o resultado desse exemplo aqui.

    Como podemos ver, a imagem e o texto ficaram centralizados verticalmente. Mas isso entre eles mesmo e não em relação ao bloco que os engloba.

    Tudo bem que neste exemplo eles acabaram ficando, mas porque eu retirei a propriedade height de dentro do CSS no bloco #box. Caso eu coloque um altura, não ficará mais.

    Alinhando inputs e texto centralizado verticalmente com o vertical-align.

    Veremos no código abaixo, como fazer para alinhar um input de texto e um texto centralizado verticalmente:

    Código HTML:

    <div id="box">
    Nome: <input type="text" name="txtNome" id="txtNome" />
    </div>

    Código CSS:

    #box {background-color:#F7F6F1;border:2px solid #CCC;font:80% "Trebuchet MS";padding:5px; width:400px;}
    #box input {border:1px solid #CCC;font:100% "Trebuchet MS";_vertical-align:middle;}

    Podemos ver o resultado desse exemplo aqui.

    Sim, eu sei. Eu utilizei um hack para o internet explorer 6 ou anterior. Mas fiquem tranqüilos, é só pra exemplo. Mostrarei abaixo uma solução correta para isso ;).

    O Firefox já posiciona verticalmente, sem precisar do vertical-align, mas o ie não. E colocando esta propriedade com o valor middle, o ie alinha no centro, mas o Firefox deixa o texto um pouco mais para cima.

    Qual dos dois está correto, não sei ao certo, mas como o Firefox está mais avançado em relação as CSS’s, então deduzo que ele está correto, principalmente pela próxima solução.

    Alinhando inputs e texto centralizado verticalmente com o vertical-align – Parte 2.

    Somente uma segunda solução que funciona em todos.

    Código HTML:

    <div id="box">
    <span>Nome:</span><input type="text" name="txtNome" id="txtNome" />
    </div>

    Código CSS:

    #box {background-color:#F7F6F1;border:2px solid #CCC;font:80% "Trebuchet MS";padding:5px; width:400px;}
    #box input {border:1px solid #CCC;font:100% "Trebuchet MS";vertical-align:middle;}
    #box span {vertical-align:middle;}

    Podemos ver o resultado desse exemplo aqui.

    Agora sim. Sem hacks e funcionando corretamente em todos. A diferença foi colocar um span e setar o vertical-align nele também.

    Com esse exemplo, deduzo que o Firefox está correto na renderização do exemplo anterior. Ele adiciona o vertical-align no input, deixando o texto sem. E no ie, parece que ao colocar no input, o texto já leva como padrão o vertical-align.

    Alinhando inputs e texto centralizado verticalmente com o vertical-align – Parte 3.

    A versão mais correta e semântica para este exemplo:

    Código HTML:

    <div id="box">
    <label for="txtNome">Nome:</label><input type="text" name="txtNome" id="txtNome" />
    </div>

    Código CSS:

    #box {background-color:#F7F6F1;border:2px solid #CCC;font:80% "Trebuchet MS";padding:5px; width:400px;}
    #box input {border:1px solid #CCC;font:100% "Trebuchet MS";vertical-align:middle;}
    #box label {cursor:pointer;vertical-align:middle;}

    Podemos ver o resultado desse exemplo aqui.

    Neste exemplo, utilizei o label que é o mais correto, setando o vertical-align nele e mais um cursor para diferenciar ;).

    Legal Bruno. Muito bom mesmo. Mas o vertical-align só tem o middle como valor no CSS cara?

    Acabei esquecendo de citar mais detalhes sobre essa propriedade não é verdade? Fiquem calmos, estarei falando mais sobre ela abaixo :P:

    • baseline: Valor padrão no CSS. Posiciona o elemento da linha base de acordo com seu “pai”;
    • sub: Deixa o elemento como sub-escrito;
    • super: Deixa o elemento como sobre-escrito;
    • top: Deixa o elemento alinhado ao topo do elemento que estiver mais ao topo da linha;
    • text-top: Alinha o elemento de acordo com o texto que estiver mais alto e seja seu “pai”;
    • middle: Exemplo utilizado nesse post. Deixa os elementos que estiverem com este valor alinhados ao meio com relação à eles mesmos ou à seus “pais”;
    • bottom: Alinha na base do elemento que estiver mais baixo.;
    • text-bottom: Alinha o elemento de acordo com o texto que estiver mais baixo e seja seu “pai”;
    • valor: Valor fixo em pixels, em ou %. Posiciona de acordo com o valor setado a partir da linha base do seu “pai”.

    Resumindo…

    Bom. Tentei passar aqui um pouco dessa propriedade do CSS. Ficou um pouco grande, admito, mas tentei detalhar ao máximo, sem tentar deixar massivo.

    Espero que tenham gostado e tenha sido útil. Caso tenha esquecido de algo ou falado alguma besteira, por favor, comentem que eu modifico ok? 😉

    Finalizando…

    To ficando por aqui, deixando uma homenagem ao Marrelton 😀 camarada que trabalha aqui na parte de desenvolvimento da Globo.com que se amarra nos títulos do meu Blog e talz… Akele abraço ae Elton 😉

    Akele abraço pra geral ae.

    [BBL]xhtml, webstandards, tutorial, web-standards, tableless, semantica, ie, dicas, desenvolvimento, css, artigos, vertical align[/BBL]

    [ 17/jan/2007 às 14:38hrs ] [ Por Bruno Dulcetti ] Comentários 36 Comentários |

    Categorias: Artigos,CSS,Webstandards

    » Até onde vai o limite da Semântica?

    E ae pessoal. Tempo que não posto sobre web standards, css e afins, que são os temas principais desse Blog. Muitos trabalhos, pouco tempo, meio “sem saco” para escrever (blogueiros são humanos também sabiam?) 😛

    Tá blz Bruno, mas isso todos dizem. Vá direto ao ponto…

    Ok, ok… Não estou aqui para falar de trabalho, dar desculpas sobre minha falta de tempo e “saco” sobre postagens no blog, etc. Estou aqui para falar de um assunto que tenho certeza que já passou na cabeça de praticamente todos os desenvolvedores web, que trabalham com webstandards.

    Semântica… A velha e temida semântica…

    Não falarei sobre semântica web, citarei alguns exemplos para vocês entenderem e depois os casos reais para que vocês entendam porque estou escrevendo este post ok?

    Beleza então Bruno cite os exemplos.

    Todos sabemos que as tags <hn> são as tags de título (onde n é o número que varia de 1 a 6), sabemos também que a tag <a> é para links, <p> serve para parágrafos, etc, etc, etc.

    Sabemos que temos tags que são display block e display inline correto? Não sabemos? Okay, explicarei um bocado sobre:

    Display Block

    Traduzindo, são blocos. Os elementos blocks adicionam uma quebra de linha antes e depois dele próprio. Seria como se tivesse um <br /> antes e depois da tag. Podem conter tanto elementos inlines quanto blocks dentro dele.

    Alguns Exemplos:
    • <p>
    • <h1>
    • <div>

    Display Inline

    Ao contrário do block, os elementos inlines não quebram linha. Podem conter outros elementos inlines dentro dele próprio, mas não é permitida a inserção de elementos do tipo block dentro deles.

    Alguns Exemplos:
    • <a>
    • <strong>
    • <em>

    Resumindo…

    Veremos alguns exemplos da forma correta e da forma não-correta de se utilizar elementos inlines e blocks:

    Modo correto

    <p>Aqui vem o <a href="#">meu link com <em>Itálico</em></a></p>

    Resultado

    Aqui vem o meu link com Itálico

    Como no meu css está configurado para os links ficarem em negrito, acabou ficando tudo em negrito onde tem o link ok?

    Neste exemplo podemos ver que temos o parágrafo, que é block, e dentro dele temos um link, que é inline, que dentro dele temos um em q dá ênfase ao termo entre esta tag.

    Resumindo, temos inline dentro de inline, que estão dentro de um bloco, tudo certinho.

    Modo incorreto

    <a href="#">
    <h1>Aqui vem o título</h1>
    <p>Aqui vem o parágrafo</p>
    </a>

    Resultado

    Como o resultado irá invalidar o código, podendo deixar uma bagunça, criei uma página só pra esse exemplo.

    Agora iremos ao ponto chave desse post.

    Vimos que esse segundo exemplo está errado, pois o link, que é um elemento inline, contém elementos blocks (h1 e p). Percebam que MESMO declarando no css o display: block pra link, ele, por padrão na W3C, é inline, portanto é descartado o CSS, ou seja, não é validado pela W3C.

    Beleza Bruno, mas o que podemos fazer?

    Temos uma opção, que seria englobar o h1 e o p dentro de uma div e coloca um link dentro do h1 e outro, com o mesmo href, dentro do p. Veremos neste exemplo.

    Agora sim, ele ficou validado pela W3C, porém, podemos ver dois pontos, o primeiro é que o link não ficou englobado totalmente na div, somente quando passa em cima do texto e a o segundo ponto é que temos que colocar o link duas vezes, com o mesmo endereço e isso pode aumentar de acordo com os elementos dentro dessa div.

    Verdade Bruno… Mas não tem nenhuma opção de conseguirmos validando na W3C?

    Até temos uma opção, que criei aqui agora, mas seria bem do tipo POG.

    Vamos ver o código HTML:
    <div>
    <a href="#"> </a>
    <h1>Aqui vem o título</h1>
    <p>Aqui vem o parágrafo</p>
    </div>

    Aqui, nada demais. Uma div com um link, um título e um texto de parágrafo. A única diferença é no link, que está vazio e por cima de todos. Vamos entender, vendo o código CSS:
    div {
    width: 140px;
    border: 1px solid #900;
    background-color: #E4E5E5;
    position: relative;
    overflow: hidden;
    }

    a {
    display: block;
    width: 1000px;
    height: 1000px;
    position: absolute;
    background-color: #E4E5E5;
    filter: alpha(opacity=0);
    opacity: .0;
    }

    h1, p { font: 12px Verdana; }

    Não entrarei em detalhes na lista de propriedades para a div, pois é bem básica. A única coisa diferente é que coloquei um position relative, porque irei usar dentro dela um bloco com position absolute. Coloquei também um overflow hidden, isso quer dizer que se algum conteúdo ultrapassar o tamanho da div, ele ficará oculto, sem atrapalhar em nada o layout da págin e da div.

    No título h1 e no parágrafo, só coloquei o tipo e tamanho de fonte, nada demais nisso ok?

    Agora que “o bicho pega” :D. No link que a brincadeira começa a ganhar forma e tudo começa a ficar mais fácil de ser entendido.

    O link recebe um display block, com isso, vira um bloco. Mas lembram que ele esta acima do link e do parágrafo, pois ele é inline e não pode englobar blocos?

    OBS: Não importa que você tenha setado no CSS que o link virou bloco, a W3C continuará não validando seu código, pois ela confere com o padrão dos links, e como o <a> é um elemento inline como padrão, não validará. 😉

    Não se assustem com os 1000px para a largura e a altura do link, pois como a div está com overflow hidden, o link só aparecerá dentro do tamanho disposto na div ;). Na verdade um 100% na altura e largura já funciona, mas no ie 6 não funcionou, aconteceu algum bug, ficando só pela metade, vai entender né… 😉

    Legal Bruno, mas o título e o parágrafo desceriam…

    Sim, mas como temos o position absolute, isso não acontece mais. Ele fica grudado na div e o conteúdo que vem depois dele, fica aparecendo também, o link fica por cima deles.

    Só isso? Mas tem mais código lá ué!

    Sim, eu sei. Na verdade, nosso problema teria sido resolvido, mas não podemos esquecer, temos que nos preocupar com o ie. Somente com aquele código, no ie 6 fica ruim, não funcionando totalmente, com o link somente em algumas partes da div.

    Mas isso é resolvido colocando uma cor de background no link, porém, teremos um link por cima de tudo, com uma cor sólida por cima. Ganhamos um problema. Temos um link na div toda, mas como tem uma cor de background, não vemos o conteúdo por trás.

    Mas temos soluções (gambiarras?) para tudo. 😀 Temos uma propriedade no css, a filter, que só funciona no ie. Os valores variam dentro dessa propriedade, podemos colocar opacidade, blur, glow, entre outras coisas que não ficarei aqui citando.

    No nosso caso, precisamos da opacidade, por isso, coloquei o seguinte valor:
    filter: alpha(opacity=0);

    Nesse caso, alpha modifica a opacidade do elemento, que nesse caso é o nosso link. Setei um valor 0 (zero), que significa que quero totalmente transparente. O valor varia de 0 (transparente) até 100 (totalmente visível).

    Mas só resolvemos o problema do ie, conseguimos deixar o link transparente no ie, falta no Firefox também. Mas precisamos só de mais uma propriedade, a opacity, que recebendo 0 (zero), fica totalmente transparente.

    Ufa. Que saco hein Bruno

    Nem me fale isso. É um saco isso tudo, mas conseguimos chegar no resultado final.

    Lembrando que, esse macete não funciona no Opera. Não tenho Opera aqui instalado, por isso não posso confirmar, mas tenho quase certeza que não funciona, ou seja, não é muito legal utilizá-lo :D.

    Voltaaaaaaaaaando ao foco do Post…

    Acabei escrevendo até um pequeno tutorial, mas tudo bem né :D. Acabei saindo do foco do assunto do post.

    Mas voltando ao assunto dele, chegamos no ponto crucial. Vimos aqui que temos soluções para esse probleminha mostrado por mim aqui, mas vimos que é meio chato fazer e não muito funcional, pois como eu disse, não é certo de funcionar no Opera.

    Vale a pena focar a semântica SEMPRE? Ou melhor, vale a pena focar a Validação na W3C?

    Esse é o ponto principal do Post. Em relação a semântica, temos dois lados:

    • Link englobando o título e o parágrafo como um bloco, ficando invalidado na W3C, pois o título seria um h1 e o parágrafo um p;
    • Link englobando um strong e um span, sendo eles o título e o texto do parágrafo do texto, ficando assim, validado, pois é tudo inline.

    Na primeira opção, temos um link englobando tudo e o título sendo título e a descrição sendo um parágrafo, tudo correto, mas como o link é inline, não é validado.

    Na segunda, temos o link englobando tudo e um strong sendo o título e um span sendo a descrição. Passa no validador, mas no olhar semântico, nem tanto.

    É aí que entra a discussão, será que vale MESMO fazer tudo para validar na W3C? Mesmo que para isso você perca a semântica, as vantagens de se utilizar um h1, h2, h3, entre outros? Vale mesmo deixar tudo inline para validar? Será?

    Já vi posts sobre isso, como o do Henrique do Revolução etc, tem outro do Tableless chamado Validar é importante?!, etc.

    Eu acho importante validar na W3C Bruno. Por que você não acha?

    Não ponha palavras na minha boca (ou seria letras nas minhas teclas?), eu só estou dizendo que existem casos e casos. Você pode muito bem ter um site que ao invés de usar h2, utiliza um <p class=”titulo”>, existe o caso de você esquecer de fechar uma tag, etc, etc, etc.

    O caso que citei, foi um caso que está tudo certo, a única coisa “errada” é a utilização do link envolta do título e do parágrafo. Nosso código está semântico, está correto, a não ser pela W3C não permitir links, por serem inline, englobarem blocos.

    Como aqui na Globo o pessoal preza a validação na W3C (pelo menos tentar ao máximo), eles utilizam spans e mais spans dentro de links para não ficar errado na W3C.

    Eu acho que, neste caso, possa dar uma “esquecida” na W3C e colocarmos o link, não vejo mal algum nisso, está tudo funcionando, tudo certo, só a “bendita” W3C falando que meu código está incorreto. Eu não acho e aí? Como que fica isso? 😀

    Mas, isso varia de pessoas e pessoas e eu estou aqui para saber a opinião de cada um que lê este blog, para ver se eu estou viajando, se só eu que penso assim, ou tem desenvolvedores que pensam assim, mas nem sempre agem assim por causa dos seus trabalhos ;).

    Resumindo

    Na verdade, o que eu acho é que a W3C deveria criar uma nova tag, chamada <ablock>, que seria um link também, mas como um bloco, com isso, não precisaríamos nos preocupar com isso não é verdade? Ou melhor, fazer com que consultasse o CSS e visse “se o <a> é um bloco, então valido, senão não valido”, o que seria melhor ainda, pois não seria necessário a espera de novas versões dos browsers, que por parte do FF, Opera seria tranquilo, mas o ie… aff…

    Finalizando…

    E você? O que acha disso? Acha certo “pular a cerca” da validação da W3C nesse caso? Ou você faz parte do grupo “Validação acima de tudo”?

    Deixe sua opinião 😉

    Aquele abraço.

    [BBL]acessibilidade, artigos, css, globo, html, semantica, usabilidade, validacao, w3c, web-standards, webstandards, xhtml[/BBL]

    [ 30/nov/2006 às 17:27hrs ] [ Por Bruno Dulcetti ] Comentários 8 Comentários |

    Categorias: Acessibilidade,Artigos,CSS,Usabilidade,Webstandards

    » Deixando seu menu com uma opção realçada de acordo com a Seção

    E ae galera… Agora estou aqui não para mostrar sites ou vídeos, mas finalmente para o primeiro artigo dentro da nova versão do Blog 😀

    Estava conversando pelo Gtalk com o Lucas Ferreira sobre webstandards, javascript, etc, quando ele me perguntou:
    ” – Ae Dulcetti, por que você não cria um tutorial sobre como deixar o menu selecionado? Não é difícil não usa js nem nada.”

    Ok Lucas, não foi exatamente isso, mas foi por ae ok? 😀

    A Idéia

    Se vocês verificarem no meu portfólio, viajando pelo menu, verão que cada seção que é aberta, o seu respectivo botão fica selecionado.

    Podem ir lá ver, eu espero… 😀

    Então, para utilizar algo parecido é fácil, você precisaria somente colocar uma classe no link da página referente e está tudo pronto.

    Mas se caso você tiver um site grande, que você precisa colocar includes, para caso haja uma modificação, você naum precise ficar modificando em cada página? A coisa complica não é verdade?

    Por isso estou mostrando esta técnica, para resolver esse probleminha.

    As técnicas utilizadas

    Você não precisa de praticamente nada. Nada de javascript, nada de linguagens dinâmicas nem nada disso. Claro que estarei utilizando includes PHP

    Mas então o que eu preciso Bruno?

    CSS, somente isso… E HTML logicamente 😉

    Mas como isso Bruno?

    Mole mole… E explicarei isso agora 😉

    Mão na massa

    Primeiramente eu mostrarei o código, pra em seguida explicar como que foi feito. Lembrando que não explicarei coisas básicas, como tenho feito anteriormente. Caso não saiba algum comando, temos o W3Schools que é uma ótima referência.

    Primeira Parte – HTML

    Vou mostrar abaixo, o código HTML criado para este exemplo:
    <? include 'head.php'; ?>
    <body id="bodyPrimeira">
    <div id="geral">
    <? include 'menu.php'; ?>
    <div id="conteudo">
    <h1>Título H1</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed id ligula. Nunc dapibus, purus quis commodo suscipit, felis risus ultricies pede, ut aliquet lacus mi at nibh. Sed condimentum. Aliquam in sem. Curabitur ornare, mi eu auctor laoreet.</p>
    <h2>Título H2</h2>
    <p>Etiam laoreet pulvinar sem. Sed massa enim, vulputate eget, feugiat blandit, sollicitudin in, mauris. Fusce vestibulum. Nullam elementum. Etiam erat est, interdum vel, ornare ultricies.</p>
    <h3>Título H3</h3>
    <p>Quisque convallis fringilla tortor. Duis tortor diam, placerat semper, fermentum sed, commodo id, magna. Nulla auctor hendrerit ante.</p>
    </div>
    <div id="rodape">Copyright &copy; 2006 - <a href="http://www.brunodulcetti.com/blog/">BrunoDulcetti.com</a></div>
    </div>
    </body>
    </html>

    Não reparem mas utilizei um código parecido com o artigo Menu em Abas sem utilizar imagens. Utilizarei o mesmo código, tanto do CSS quanto do HTML.

    Vamos entender as partes que interessam?

    Vamos sim:

    <? include 'head.php'; ?>

    Isto é um include. Quem trabalha com web já conhece este termo e já deve saber como utilizá-lo (pelo menos eu espero).

    Neste include eu chamo a página head.php, que irá conter o cabeçalho da página, etc.

    <? include 'menu.php'; ?>

    A mesma coisa que o anterior, só que agora chamará a página menu.php, que contém o código do menu que veremos mais a frente.

    <body id="bodyPrimeira">

    Aqui está a novidade, o id dentro da tag <body>. Muita gente desconhece esta técnica e que é possível, é validado, etc. Ela será primordial para a montagem da técnica e a referência para o menu.

    Segunda Parte – Os Includes

    No total temos dois includes, o head.php e o menu.php. Mostrarei os dois, mas falarei somente do segundo, pois o primeiro é apenas um head normal.

    head.php

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Deixando seu menu com uma opção realçada de acordo com a Seção</title>
    <link rel="stylesheet" type="text/css" href="estilo.css" />
    </head>

    Não perderei tempo explicando essa parte do código, pois quem já mexe com html sabe muito bem o que quer dizer cada linha ok?

    menu.php

    <div id="menu">
    <ul>
    <li class="primeira"><a href="#" class="menuPrincipal">Principal</a></li>
    <li><a href="#" class="menuEmpresa">Empresa</a></li>
    <li><a href="#" class="menuServicos">Serviços</a></li>
    <li><a href="#" class="menuPortfolio">Portfólio</a></li>
    <li><a href="#" class="menuContato">Contato</a></li>
    </ul>
    </div>

    Uma lista não ordenada, com suas respectivas li’s. O que importará nessa parte do código são as classes dos links dentro dos li’s: menuPrincipal, menuEmpresa, menuServicos, menuPortfolio e menuContato. No css vocês entenderão melhor o seu funcionamento.

    Terceira Parte – CSS

    É no css que vamos fazer o funcionamento do efeito, ele que definirá quando o evento será executado.

    * { margin: 0; padding: 0; }

    body {
    text-align: center;
    font: 70% "Trebuchet MS", Verdana, Arial, Tahoma;
    background-color: #F1F1F1;
    color: #666666;
    }

    ul { list-style: none; }
    p { margin-bottom: 10px; }
    h1 { margin-bottom: 5px; color: #69A90A; font-size: 170%; }
    h2 { margin-bottom: 2px; color: #81C281; font-size: 150%; }
    h3 { color: #709AFE; font-size: 130%; }

    /* ESTRUTURA */
    #geral {
    margin: 10px auto;
    width: 750px;
    text-align: left;
    }

    #conteudo { background-color: #FFF; color: #666; padding: 10px; }
    #rodape { text-align: center; padding: 10px; }
    #rodape a { color: #54A4FC; }
    #rodape a:hover { text-decoration: none; }

    /* MENU */
    #menu ul { height: 1%; display: table; }
    #menu ul li { float: left; margin: 0 4px; }
    #menu ul li.primeira { margin-left: 0; }
    #menu ul li a {
    display: block;
    float: left;
    padding: 5px 12px;
    background-color: #CCC;
    color: #FFF;
    font-weight: bold;
    }

    #menu ul li a:hover { background-color: #FFF; color: #999; text-decoration: none; }

    /* ID BODY */
    #bodyPrincipal #menu ul li a.mnuPrincipal,
    #bodyEmpresa #menu ul li a.mnuEmpresa,
    #bodyServicos #menu ul li a.mnuServicos,
    #bodyPortfolio #menu ul li a.mnuPortfolio,
    #bodyContato #menu ul li a.mnuContato { background-color: #FFF; color: #999; text-decoration: none; }

    Explique agora Bruno

    Bom, explicarei aqui, somente o que não expliquei no artigo do menu sem abas. Se quiser mais explicação de cada parte desse código css, veja o post Menu em Abas sem utilizar imagens. Lembrando que estou utilizando a mesma estrutura do css e praticamente a mesma no html ;).

    A parte que mais nos interessa é o código abaixo:

    #bodyPrincipal #menu ul li a.mnuPrincipal,
    #bodyEmpresa #menu ul li a.mnuEmpresa,
    #bodyServicos #menu ul li a.mnuServicos,
    #bodyPortfolio #menu ul li a.mnuPortfolio,
    #bodyContato #menu ul li a.mnuContato { background-color: #FFF; color: #999; text-decoration: none; }

    Neste bloco de código, temos cinco elementos recebendo as três propriedades: background-color: #FFF; color: #999; text-decoration: none;

    Se vocês perceberem, as propriedades são as mesmas do hover do link. Preferi colocar separadamente para melhor compreensão de todos. Caso queiram mudar, fiquem à vontade ok? 😉

    Vou pegar agora uma delas pra explicar melhor, porque as outras são exatamente a mesma coisa, só modificando os nomes.

    #bodyPrincipal #menu ul li a.mnuPrincipal

    Vamos listar por partes:

    • #bodyPrincipal: Este é o id que setamos no body da página.
    • #menu ul li: Aqui estamos referenciando o menu e sua lista não-ordenada e seus respeticos li’s.
    • a.mnuPrincipal: Aqui referenciamos os links dentro do li, que tenham a classe mnuPrincipal.

    E isso eh expandido quando setamos várias outras citações, como foi o caso. É só colocarmos o id correto no body de cada página, como está sendo feito em todas as páginas deste efeito.

    Na parte das classes dos li’s é que fará a diferença, como citei anteriormente. Caso não fosse setado nenhjuma classe, ele simplesmente pegaria todos os links de todas as li’s e deixariam marcado… É uma união do id do body com a classe do menu… 😉

    Quarta Parte – Resultado Final

    Aqui nós podemos ver o resultado final desta técnica. Viaje pelos links no menu, veja que o menu realçado modifica de acordo com a seção selecionada. Perceba também, que o código é o mesmo, a não ser pela mudança do id do body ;).

    Finalizando

    Vimos que é bem fácil fazer isso. Aposto que você pensou que fosse mais complicado não é verdade?

    Usamos declarações básicas dentro do css e do html, nada de muito avançado. Mas qualquer dúvida, é só postar.

    Aquele abraço

    [BBL]artigos, css, xhtml, webstandards, tutorial, usabilidade, dicas[/BBL]

    [ 18/set/2006 às 15:05hrs ] [ Por Bruno Dulcetti ] Comentários 17 Comentários |

    Categorias: Artigos,CSS,Webstandards

    » Conditional Comments ou Comentários Condicionais

    Falae galera, tranquilidade? Aqui tudo blz como sempre, bastante trabalho, cansado, mas faz parte naum eh verdade?

    Bom, antes de eu comentar sobre o assunto, adianto para vocês que semana que vem entra a nova versão do meu Blog/Portfólio. Modifiquei um bocado de coisa, agora ele é líquido, estou utilizando alguns recursos em ajax, atualizei algumas informações como onde estou morando, que no atual ainda mostra Niterói :D.

    Ela já esta pronta, só falta eu modificar algumas coisas no Banco de Dados e adicionar o tema aqui no Word Press.

    Falando em Word Press, atualizei ontem para o Word Press 2.0. E digo, ele é bem melhor que o 1.5, vários recursos interessantes, o Akismet jah vem instalado bastanto somente ativá-lo, entre outras vantagens.

    Chega de conversa Bruno e vamos ao assunto?

    Ok, ok, naum precisa ficar bravo 😀

    Hoje falarei sobre os Conditional Comments ou Comentários Condicionais.

    Creio que muitos que frequentam esse Blog sabem que a Microsoft está lançando i.e.7 e tem versões betas por ae. A equipe que está participando da produção da nova versão do browser comentou em seu Blog para que os desenvolvedores naum utilizassem hacks do tipo:

    • html > body
    • * html
    • head:first-child + body
    • head + body
    • body > element

    Caso seja feita a utilização de um deles, o site poderá ser mal renderizado no browser, com isso, complicando a vida pro desenvolvedor. Pra variar o ie faz isso, normal… 😀

    E no Blog, o pessoal da Microsoft aconselhou a utilização dos Conditional Comments ou Comentários Condicionais, que são comentários no código HTML que somente o i.e. reconhece e os outros browsers consideram como um comentário.

    Ah sim… Legal… Não entendi!?

    Tranquilo. Com os tipos e exemplos, você entenderá perfeitamente sobre essa técnica. Primeiro vou mostrar abaixo os diferentes tipos de Conditional Comments:

    » Este serve como como um “Se for IE faça”:

    <!--[if IE]>
    <![endif]-->

    » Este serve como como um “Se for superior ao IE 5 faça”:

    <!--[if gt IE 5]>
    <![endif]-->

    » Este serve como como um “Se for IE 5 ou superior faça”:

    <!--[if gte IE 5]>
    <![endif]-->

    » Este serve como como um “Se for anterior ao IE 5.5 faça”:

    <!--[if lt IE 5.5]>
    <![endif]-->

    » Este serve como como um “Se for IE 6 ou anterior faça”:

    <!--[if lte IE 6]>
    <![endif]-->

    A mudança de um para o outro, além das versões dos browsers, são as letras:

    • gt: greater than ou maior que o browser setado
    • gte: greater than or equal to ou maior ou igual ao browser setado
    • lt: less than ou menor que o browser setado
    • lte: less than or equal to ou menor ou igual ao browser setado

    Cole um destes exemplos no Dreamweaver por exemplo. Você verá que ele deixará cinza, como se fosse um comentário, isto por causa do início do código: <!– ; e o final do código: –>

    Para os que não conhecem (o que eu acho muito difícil), esse eh o modo de se fazer comentário dentro do HTML. Mas a Microsoft implementou essa funcionalidade em seu browser, o i.e.

    Legal Bruno, mas continuo sem entender direito =/

    Relaxa, vamos ver agora isso no HTML para que você entenda melhor a utilização. Veja abaixo o código HTML ou então verifique o exemplo online:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Comentários Condicionais</title>
    <style type="text/css">
    body {
    margin: 10px;
    padding: 3px;
    color: #666;
    background-color: #fff;
    font: 75% Verdana;
    }
    </style>
    <!--[if lte IE 6]>
    <style type="text/css">
    body {
    background-color: #000;
    color: #FFF;
    }
    </style>
    <![endif]-->
    </head>
    <body>
    Texto de exemplo
    </body>
    </html>

    Não utilizei muitas propriedades no CSS porque estou com preguiça de ficar explicando cada linha ok? 😀

    Vou comentar cada parte q utilizei, que convenhamos, naum tem nada de complicado ;). A única coisa diferente é o comentários condicional mesmo.

    Vocês podem perceber que no Internet Explorer 6 ou anterior, o fundo ficou preto e a fonte branca e nos restantes dos browsers o fundo ficou branco e a fonte cinza.

    No CSS eu setei para a tag <body> que ela tenha 10px d margem em todas as direções, padding de 3px em todas as direções, cor de fundo branco, cor da fonte cinza #666 e fonte verdana com 75% do tamanho padrão do Browser.

    Blz Bruno, isso eu vi, essa parte eu entendi. Mas e o resto?

    Agora comentarei sobre o comentário condicional utilizado: <!–[if lte IE 6]> que como vimos acima, quer dizer “igual ou anterior ao ie 6”.

    Com isso, o ie 7 não será afetado com as propriedades setadas dentro dessa condição. Dentro dessa condições eu coloquei a cor de fundo preta e a cor da fonte como branca. Lembrando que, como eu não modifiquei a margin, padding e font, elas continuarão como na primeira setagem, pois na anterior, todos os browsers entendem. É como na utilização dos hacks. 😉 Ele só modificará o que você deixar dentro do “setagem” no CSS.

    Podemos utilizar qualquer uma das versões que eu citei anteriormente, com a versão do browser que você necessita. Lembrando que não funciona em versões abaixo do ie 5.

    Variações na utilização

    Vocês devem estar perguntando agora pra mim “Mas Bruno, você está utilizando o CSS incorporado no html!”.

    Sim, sim, mas pode ficar calmo. Foi só um exemplo para melhor compreensão. Vocês podem colocar a tag <link> ou a <style> dentro da condição, que funcionará da mesma forma. Veja abaixo o exemplo ou confira online:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Comentários Condicionais</title>
    <link rel="stylesheet" type="text/css" href="normal.css" />
    <!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="ie.css" />
    <![endif]-->
    </head>
    <body>
    Texto de exemplo
    </body>
    </html>

    Neste exemplo, utilizei a tag <link> dentro do <head> e dentro da condição. Dentro do <head> eu chamei o arquivo normal.css, que serve para todos os browsers e temos tb o arquivo ie.css que serve somente para o i.e. e está dentro da condição.

    Neste exemplo, ele faz a mesma coisa que o exemplo anterior, mas ao invés do CSS estar incorporado, estou chamando via <link>.

    Cuidados

    Tenha cuidado na sequência que você coloca os comentários condicionais. Eles SEMPRE deverão vir DEPOIS da chamada para todos os browsers. Isso faz com que os comentários condicionais sobrescrevam o CSS anterior. Caso eles sejam colocados ANTES, naum adiantará nada, pois a tag <link> fora do comentário condicional irá sobrescrever.

    E finalizando…

    Pra finalizar, queria dizer q os exemplos mostrados aqui são só de exemplo. Naum creio que vocês irão utilizar um site com fundo diferente para internet explorer, etc.

    Também naum pensem que vocês só podem mudar cores, bordas, etc… Podem mudar o que quiser dentro do CSS, fica por conta de vocês.

    Geralmente, os comentários condicionais são utilizados para resolver bugs no i.e. como box models, problemas de margin e padding, entre outros exemplos.

    Um beijo do magro

    Bom galera, espero ter ajudado e tirado algumas dúvidas de quem de repente tenha. Espero que tenham gostado.

    Esperem por semana que vem… Tchanaaaaaaaaam… uahuahuhahauhau

    Akele abraço.

    [ 04/ago/2006 às 15:00hrs ] [ Por Bruno Dulcetti ] Comentários 11 Comentários |

    Categorias: Artigos,CSS,Webstandards

    « Página Anterior | Próxima Página »

    
    Copyright © 2005 Bruno Dulcetti | Creative Commons
    Bruno Dulcetti atuante na área de desenvolvimento web / webdesign e colaborador na área de webstandards pelo Blog BrunoDulcetti.com - blog. Atuante na área desde 2000. Atuando na cidade de Niterói/RJ - Brasil. E-mail: bruno@brunodulcetti.com