» CSS Naked Day. Mas eu não vou tirar meu CSS não.

Hoje é o CSS Naked Day, ou o Dia do CSS Nu. Já falei sobre ele uns dois anos atrás. É uma data onde você tira seu CSS e mostra para todo mundo que seu código é estruturado de forma correta e tudo mais.

Mas por que você deixou seu site com CSS então Dulcetti?

Cara, sigo na mesma idéia do Henrique, tanto que ano passado nem cheguei a fazer e comentar.

Meu site é bem estruturado e pronto. Você duvida? Então tire o CSS e veja. Não vou retirar o meu CSS para outros verem que meu HTML é correto e estruturado, porque as pessoas que frequentam este blog estão querendo informação, conteúdo e ele aparece assim, todo sem estilo? O que o cara tem a ver com isso?

Fora que a outra parte, os assinantes do meu Feed, praticamente boaGrandeMeteóricaModafoca parte é desenvolvedor e entende bem(será?) disso. E se quiserem confirmar, retirem o CSS pelo Firefox, Opera ou browser semelhante.

Calma Bruno, calma…

Relaxa, sem exaltações. O que me faria mudar de idéia talvez, seria porque eles estão linkando as pessoas que estão participando disso. Mas deixo pra lá, não vou deixar meu site “nu” por um link.

[ 09/Abr/2008 às 10:43hrs ] [ Por Bruno Dulcetti ] 14 Comentários |

Categorias: CSS, Webstandards

» Hover avançado com bordas em imagens

Falae pessoal. Parece até mentira, mas estou aqui novamente, retornando aos meus tutoriais mirabolantes, fascinantes, geniais e extremamente úteis para todos.

O assunto dessa vez é o mesmo que o tutorial anterior, que falei sobre borda interna em imagens com link. Mostrarei um efeito em links, com bordas, em imagens

E como não poderia deixar de ser, é um efeito que a equipe aqui da Globo.com pediu pro Vinicius, só que ele veio perguntar pra mim se era possível. E como nada é impossível para Mr. Dulcetti. Lá fui eu implementar o efeito. E como não poderia deixar de ser, funcionou. E o melhor, CROOOOOOOOOOSSBROWSER!!!!! Sensacional, sensacional.

Mas de novo bordas em imagens Bruno?

Sim. De novo. Mas relaxem, é um efeito diferente do que eu fiz para o efeito de borda interna dos sites da Globo.com, e que eu creio que muitos já quiseram fazer e não conseguiram, etc.

É um efeito normal, que poderia ser feito normalmente, como eu mostro na figura abaixo:

Um efeito de hover na imagem, onde existe a troca de cor da borda do link. Sim, cor da borda do link e não da imagem. O IE infelizmente não aceita todos efeitos em elemento dentro do link no hover do próprio. Mas lógico que isso você sabia (assim espero).

Ta blz Dulcetti. Mas o tutorial é sobre esse efeito ae?

Quase. É o mesmo efeito, mudança de cor na borda do link e talz. Maaaaaas, a diferença é que não existe esta borda duplicada entre as fotos. Percebam que a largura é de 5px para todos os links, mas como ficam um do lado do outro, entre eles ficam o dobro, ou seja, 10px de borda.

Poréeeeem, o problema é que no hover eu só consigo pintar a borda de um link, fazendo com que continue preta, a borda do próximo link. Veja o exemplo errado.

O problema disso tudo, é que eu não consigo mudar a cor da borda de um link, seja ele próximo ou anterior. Infelizmente não temos essa liberdade. Com isso, tínhamos esse problema e o pessoal não queria isso.

Resumindo, eles queriam o efeito abaixo:

Perceberam que não existe duplicação de borda entre os links? Fazer isso é mole, se não fosse a troca de cor das bordas. Bastava setar borda superior e esquerda na <ul> e inferior e direita na <li>.

Mas como nem tudo são flores né meu povo, lá foi o Dulcetti aqui resolver essa pemba.

Vale ressaltar também, que a borda é colorida no hover, mas a borda preta em cima some, “invadindo” a <li> de cima.

Beleza Bruno. Começa logo então…

Ok, ok. Vamos dar início ao efeito. Vamos primeiro ao HTML:

<ul>
	<li><a href="#"  title=""><img src="escudo-flamengo.gif"  alt="" /></a></li>
	<li><a href="#"  title=""><img src="escudo-flamengo.gif"  alt="" /></a></li>
	<li><a href="#"  title=""><img src="escudo-flamengo.gif"  alt="" /></a></li>
	<li><a href="#"  title=""><img src="escudo-flamengo.gif"  alt="" /></a></li>
	<li><a href="#"  title=""><img src="escudo-flamengo.gif"  alt="" /></a></li>
	<li><a href="#"  title=""><img src="escudo-flamengo.gif"  alt="" /></a></li>
	<li><a href="#"  title=""><img src="escudo-flamengo.gif"  alt="" /></a></li>
	<li><a href="#"  title=""><img src="escudo-flamengo.gif"  alt="" /></a></li>
</ul>

Um código extremamente complicado, difícil de ser entendido, complexo, mas creio que você seja safo para entender sem que o Dulcetti aqui explique ok?

Um bando de <li> com link dentro, com imagem dentro, dentro de uma <ul>. É basicamente isso.

Agora vamos a parte maaaaais complicada, pra variar…

Implementando o CSS do efeito…

Sim. O CSS é a parte mais chatinha de fazer e ser entendida. Eu sempre acho que é a parte mais tenebrosa para um desenvolvedor web.

Vamos ao código?

img {border:0;}
ul {background-color:#000;margin:0;padding:5px 0 0 5px;width:180px;}
ul:after {clear:both;content:".";display:block;height:0;visibility:hidden;}
ul li {border-bottom:5px solid #000;border-right:5px solid #000;float:left;height:40px;width:40px;}


Nada de muito complicado:

• Retiramos a borda das imagens, isso porque quando ela recebe link, fica aquela borda azul linda em volta da imagem;
• Depois colocamos o background da lista, zerando sua margem, colocamos um padding de 5px em volta da ul e finalizando com uma largura de 180px;
• Essa técnica do after serve para os browsers, isso exclui o IE. Ela serve para quebrar o float de um elemento dentro do bloco, nesse caso as li’s
• Adicionei borda na base e na lateral direita da li fechando o quadrante, float para ir pra esquerda, altura e largura de 40px;

De início temos este resultado.

Legal Bruno, mas cadê o hover?

Calmae, muita calma nessa hora. Já deu pra ver o início do resultado, do nosso objetivo. Temos já a estrutura toda montada, li’s arrumadas e sem bug.

Agora falta o principal… O hover.

O tão falado e temido hover…

Como já sabemos, o nosso grande amigo e preferido browser, vulgo IE, não aceita a pseudo-classe :hover.

Okay, ele aceita, mas somente em links. Mas admita fã da Microsoft, esse é um dos maiores pecados do IE. Francamente…

O mais correto era colocar a borda na imagem, como eu tinha dito, mas como citei, o hover no link não deixaria colocar borda na imagem. Portanto, tive que trabalhar em cima do link mesmo.

Mas isso não é problema para Mr. Dulcetti.

Dulcetti… Ta bom, anda logo com isso…

Ok. Empolguei-me. Desculpe. Então vamos ao restante do CSS. Pasmem, são apenas mais duas linhas de código:

ul li a, ul li a img {display:block;}
ul li a:hover {border:5px solid #D2251C;margin:-5px 0 0 -5px;position:absolute;}


Vamos a explicação:

• A primeira linha é completamente difícil e complicada. Quase ninguém utilizou esta propriedade no CSS. Ela transforma o(s) elemento(s) em bloco(s). No nosso caso, link e imagem dentro do link. Precisamos disso para que a imagem não coloque akela margem automática quando não é bloco e para que o link funcione corretamente no nosso caso;
• Agora a grande sacada. Nessa segunda linha, colocamos uma borda com cor vermelha e 5px de espessura. Damos uma margem negativa superior e a esquerda de 5px e colocamos o link com position absolute

Vemos o resultado do efeito finalizado agora.

Legal Bruno. Mas explica melhor…

Seguinte: o link ficando com a borda vermelha de 5px, o que iria acontecer? O link, como bloco e com borda, iria acabar ficando dentro da “borda”, que na verdade é o padding preto da <ul>, formando uma borda dupla. Sendo que uma preta e a de dentro vermelha.

Não queremos esse efeito. E para conseguirmos isso, colocamos a margem negativa do mesmo valor da borda, ou seja, 5px, fazendo com que o link ficasse colado na <ul>.

Mas logicamente que a margem, somente, não era bastante para finalizarmos. No IE fica um samba do crioulo doido, enquanto no Firefox não pintava a borda da esquerda, por causa da borda da <li>, que é preta.

Para resolvermos isso, colocamos o que? O temido position:absolute. Mas como as nossas <li>’s já possuem largura e altura, então não temos problema com isso, pq o tamanho ficará fixo, sem ser mexido.

Resumindo…

É isso. Um efeito simples, porém atrativo e que já recebi algumas dúvidas sobre como fazer e não vi nenhuma resposta, nenhum exemplo de como fazer isso.

E como o código é bem curto, o efeito é simples e rápido, não precisou ficar escrevendo testamentos, etc. Tudo bem que eu poderia fazer outros exemplos, com bugs, etc, mas eu tenho certeza que eu iria terminar só ano que vem e ficaria gigantesco. Então tá bom assim mesmo e está aí.

Espero que gostem e que tenha sido útil. Aquele abraço e beijo na alcatra.

[ 03/Jan/2008 às 15:29hrs ] [ Por Bruno Dulcetti ] 14 Comentários |

Categorias: Artigos, CSS, Webstandards

» Resposta do Desafio: Como “cropar” uma foto com CSS

Como prometido, estou aqui pra postar a “resposta” do “desafio” que postei ontem aqui no Blog.

Algumas sugestões, soluções, bem próximas da que eu arrumei e achei melhor. Vou tentar explicar detalhadamente porque não utilizei tal solução, porque fiz dessa forma, o que não rola, suporte, etc.

Sugestões

O juliano postou uma solução com background, mas como eu disse depois, não é possível, pois o conteúdo é dinâmico, portanto, não rola colocar como background.

A do Michael ficou um pouco extensa, com um span como se fosse uma “máscara”, mostrando somente a área necessária. Mas como sabemos, o IE não nos ajuda quase nunca e não funciona a pseudo-classe :hover, somente em link, mas somente alguns atributos são suportados.

Sobral e Mico citaram o clip, mas como citei acima, o IE não suporta a pseudo-classe e somente alguns atributos são suportados, o que não é o caso do clip, infelizmente. Fora que o clip só funciona em elementos com position absolute ou fixed.

A do Alisson ficou +ou- parecido com a que eu implementei, mas faltaram alguns detalhes, algumas mudanças, para que funcionasse perfeitamente.

Primeira Solução

Chega de conversa e vamos para a primeira solução. Nessa eu utilizei o clip, como o mico e o sobral citaram, mas como falei, preciso da pseudo-classe :hover funcionando perfeitamente no IE, com isso, tive que utilizar um arquivo .htc, que faz com que o IE aceite o hover em qualquer tag.

Código HTML

<div id="fotos">
<a href="#" title="" class="cropFoto"><img src="thumb.jpg" alt="Foto" /></a>
</div>

Código CSS

* {margin:0;padding:0;}

body {padding:20px;}
ul {list-style:none;}
img {border:0;}

#fotos {width:186px;}
#fotos * {display:block;}

#fotos .cropFoto {background-color:#E70202;height:116px;position:relative;}
#fotos .cropFoto img {position:absolute;}
#fotos .cropFoto:hover img {clip:rect(3px 183px 113px 3px);}


Um código simples e curto. Não vou ficar detalhando coisas desnecessárias, somente o que eu acho relevante para o entendimento para um desenvolvedor intermediário, etc.

O link recebe a classe cropFoto, com a cor de background que eu quero que fique a “borda” em volta da imagem. Recebe o valor de altura igual a altura da imagem e recebe um position relative.

A imagem dentro do link recebe um position absolute, lembram que o clip só funciona em elementos com position absolute e fixed? Por isso que também tive que colocar o position relative dentro do link, para a imagem não se basear de acordo com o body, etc.

Veja o exemplo funcionando.

Para mais infos sobre position, visite o artigo que escrevi no imasters sobre o assunto.

Tá Bruno, mas não funcionou no IE

Exatamente. Graças a ele, precisamos utilizar a gambiarra que falei anteriormente, pra funcionar a pseudo-classe :hover. Percebam que só funciona em link, e estou utilizando em um link, mas mesmo assim não funcionou o clip. Ele só aceita alguns atributos no :hover

É só anexarmos o csshover.htc no html, que funciona no IE. Baixe o arquivo .htc aqui e cole o código abaixo entre as tags <head> e </head>:

Código HTML

<!--[if IE]>
<style type="text/css">
body {behavior:url(csshover.htc);}
</style>
<![endif]–>

Veja o exemplo correto funcionando.

Legal Bruno, funcionou direitinho…

Exatamente, mas sempre existe um porém. Temos vantagens em utilizar esse htc, pois teremos hover em todas as tags, mas, como nem tudo é perfeito, temos alguns problemas:

• Esse é um projeto grande, com muito volume de informação, conteúdo, etc. Teremos uma quantidade considerável de imagens com esse efeito no hover;
• Necessita que o servidor tenha o mime type configurado para ele: text/x-component
• Ele faz uma busca por :hover em TODO o stylesheet da página. Onde ele achar o :hover, vai adicionar um evento javascript onmouseover para que o elemento se comporte da forma correta.
• O problema é que esse processamento é no cliente e o tempo que ele leva para fazer isso vai depender do tamanho do CSS, do HTML, além do poder do computador do cara, ou seja, quanto maior o CSS e HTML, mais tempo para execução o efeito vai levar, e como o projeto é grande, queremos sempre a melhor forma, otimizar, etc.

Por essas e outras, tive que buscar uma outra opção, modo, de implementar esse efeito, somente por CSS, sem colocar htc, js, nem nada.

Segunda Solução

Eis que surge uma idéia no início, meio bizarra pra utilizar como solução. E não é que deu certo?

O código HTML utilizado foi o mesmo do exemplo anterior. Abaixo segue o CSS:

Código CSS

* {margin:0;padding:0;}

body {padding:20px;}
ul {list-style:none;}
img {border:0;}

#fotos {width:186px;}
#fotos * {display:block;}

#fotos .cropFoto {overflow:hidden;height:116px;width:186px;}
#fotos .cropFoto:hover {border:3px solid #E70202;height:110px;width:180px;}

Veja este exemplo funcionando.

Legal Bruno… Funcionou só com CSS né?

Então, +ou-. Ainda não está 100%, porque dá um efeito que a imagem se move por causa da borda colocada no link.

É um código bem simples, de fácil entendimento. A imagem o link estão como block, o link está com a largura e altura setada de acordo com o tamanho da imagem. Esse tamanho pode variar, dependendo da imagem, é só modificar no CSS pro tamanho da imagem.

No hover do link, ele diminui 6px de altura e largura e ganha 3px de borda em volta dele, totalizando a mesma largura e altura.

O overflow hidden do link serve pra que mesmo que a imagem seja maior que o link, o que é o caso no estado :hover, ela fique oculta, não quebrando o layout, etc.

Entendi Bruno. E como resolvo pra ficar 100%, sem parecer que a imagem se move?

Simples, apenas uma linha de CSS, colocando uma margem pra imagem, no hover do link:
#fotos .cropFoto:hover img {margin:-3px 0 0 -3px;}

Veja o exemplo final funcionando.

Agora sim hein Graças a Deus, o IE aceita o atributo margin na pseudo-classe hover do link no CSS.

Conclusões

Bom, é uma solução simples, tranqüila, mas que nem sempre vem a cabeça facilmente, rápido. Testei no IE 6, IE 7, Firefox, Opera, Firefox Mac, Safari e todos funcionaram perfeitamente, sem nenhuma diferença.

Algumas coisas precisam de alguns detalhes pra funcionar, por exemplo, o display: block no link, na imagem também pra ficar correto, se fosse usar o clip, lembrar do position: absolute, lembrar do overflow: hidden, etc, etc, etc.

Sempre tem essas pequenas coisas que são essenciais saber no CSS, que você pega com a prática.

Finalizando

Bom, é isso. Qualquer dúvida, correção ou solução melhor, é só comentar que eu posto aqui

Aquele abraço.

[ 26/Jun/2007 às 15:58hrs ] [ Por Bruno Dulcetti ] 12 Comentários |

Categorias: CSS, Webstandards

» Desafio: Como “cropar” uma foto com CSS

E ae pessoal.

Hoje estou aqui com algo diferente. Estava semana passada aqui na Globo.com, implementando um novo projeto, o qual falarei em breve para vocês, quando acabei parando em um probleminha chato.

Um novo efeito de over nos links que o pessoal de design fez no layout. É interessante, gostei, mas fiquei pensando um tempinho em como implementá-lo.

Legal Bruno, mas qual é o desafio?

Então. Vou apresentar o efeito. É como se fosse uma borda de 3px em volta de uma foto, mas só que interna, como se “cropasse” a foto. Veja abaixo:

A largura é de 186px e continua com 186px com o hover do mouse, mas com uma borda de 3px. Se fosse só colocar a borda, seria fácil, porque era só diminuir o tamanho da foto no hover, mas como isso não poderia acontecer, tive que pensar em outra solução.

Colocando somente a borda, a largura ficaria 192px, o que faria quebrar o grid, portanto, não adianta usar somente a borda.

[UPDATE]
O juliano postou uma forma de fazer, mas como background. Esse update é só pra realçar que tem q ser por imagem, pois o conteúdo é dinâmico e a imagem faz parte do conteúdo

Valew ae juliano.
[/UPDATE]

Finalizando

Está lançado. Amanhã estarei publicando as duas soluções que achei. Lembrando que tem que ter suporte na maioria dos browsers, senão em todos

Alguém postando a solução, igual ou diferente, estarei postando amanhã também

Aquele abraço.

Resposta no link http://www.brunodulcetti.com/blog/2007/06/26/resposta-do-desafio-como-cropar-uma-foto-com-css.html

[ 25/Jun/2007 às 12:15hrs ] [ Por Bruno Dulcetti ] 15 Comentários |

Categorias: CSS, Webstandards

» 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.

[ 30/Mai/2007 às 11:47hrs ] [ Por Bruno Dulcetti ] 13 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:

• Clean CSS
• CSS Optimiser
• Online CSS Optimiser/Optimizer : flumpCakes
• Lottery Post: CSS Compressor

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.

[ 23/Abr/2007 às 16:14hrs ] [ Por Bruno Dulcetti ] 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.

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

Categorias: Artigos, CSS, Webstandards