bittersweet dev

Continuando o assunto CSS3 e as maravilhas que ele nos trará, hoje apresentarei a propriedade box-shadow. Com esta propriedade podemos aplicar sombras em elementos utilizando somente CSS. Assim como o text-shadow, essa propriedade veio trazer um pouco de alívio para webdevelopers e webdesigners. Onde antes eram necessárias imagens, definições de backgrounds, POG’s e outras práticas não menos nocivas, agora há possibilidade de definição direto no seu CSS. Não é uma maravilha esse pessoal da W3C?

Definição

A propriedade box-shadow pode ser aplicada a qualquer elemento e é aceito atualmente pelo Firefox 3.5+ (utilizando o prefixo -moz a propriedade) e pelo Safari 3.1+ (utilizando o prefixo -webkit a propriedade). Não preciso dizer que os –projetos de browsers– de Redmond não aceitam (ainda) esta propriedade.

O box-shadow não faz parte do box-shadow, ou seja, não influencia no tamanho total que o elemento terá na tela.

A propriedade é declarada da seguinte maneira:

box-shadow:5px 5px 10px #ccc;
/* implementação para o firefox */
-moz-box-shadow:5px 5px 10px #ccc;
/* implementação para safari */
-webkit-box-shadow:5px 5px 10px, #ccc;

Onde:

• o primeiro valor é a posição horizontal da sombra em relação ao elemento. Valor positivo projeta a sombra para a direita e negativo para a esquerda;
• o segundo valor é a posição vertical da sombra em relação ao elemento. Valor positivo projeta a sombra para baixo e negativo, adivinhem?, para cima;
• o terceiro valor é o blur da sombra, só aceita valores positivos ou 0 (zero);
• o quarto e último valor é a cor da sombra;

A propriedade aceita multiplas sombras. Podemos implementar inúmeros efeitos desta forma. Para isso é só separar a declaração de cada sombra com vírgulas:

box-shadow: 5px 5px 10px #333, -5px -5px 10px #ccc;

Exemplos

Vamos então colocar a mão na massa e implementar os dois exemplos acima, primeiro a sombra simples:

E agora o exemplo com múltiplas sombras:

Para aqueles que estão me taxando de louco ou acham que essa é a versão web do conto A Roupa Nova do Rei, seguem as respectivas imagens com o que você deveria ter visto aqui:

Sombra Simples

Sombra Múltipla

E por hoje é só pessoal! Dúvidas, críticas, sugestões?

Quem nunca recebeu aquele layout finalizado, com um título sombreado e silenciosamente pensou: “P*** ****, lá vou eu fazer um text-replacement novamente”. Essa atitude era comum entre os webdevelopers, mas finalmente o pessoal da W3C veio solucionar nossos problemas.

Definição

O text-shadow pode ser aplicado a qualquer elemento que tenha texto, lógico, e é aceito pela grande maioria dos browsers modernos: Firefox 3.5, Opera 9.5+, Safari 3+. Infelizmente, mesmo com todas as melhorias (e realmente foram muitas) no Internet Explorer 7 e mais ainda no Internet Explorer 8, eles ainda não suportam essa propriedade, ou seja, escolheram a pílula azul.

A propriedade text-shadow é usada da seguinte maneira:

text-shadow: 2px 2px 2px #00f;

Onde:

• os dois primeiros valores são as coordenadas top left, para onde a sombra será projetada;
• o terceiro valor é o blur da sombra;
• o quarto valor é a cor da sombra;

A propriedade também aceita multiplas sombras. Sim! Até degradê é possível de se implementar usando somente CSS. Para isso, é só separar a declaração das sombras usando vírgulas:

text-shadow: 2px 2px 2px #000, 4px 4px 2px #00f;

Essa propriedade não é nova. Na verdade ela foi proposta na especificação do CSS2. A definição completa da propriedade pode ser encontrada aqui.

Exemplos

Vamos então implementar então os dois exemplos acima, primeiro a sombra simples:

bittersweet dev – CSS3: Propriedade text-shadow

E também o com sombras multiplas:

bittersweet dev – CSS3: Propriedade text-shadow

Pra quem não viu nada diferente nessas frases dê uma olhada nas imagens abaixo que representam respectivamente os exemplos acima:

… e uma dica, tome a pílula vermelha, ou seja, use um browser decente!

Aguardem novos posts explicando as novas propriedades do CSS3, até lá, deixe seu comentário, dúvida ou critica

text-shadow: 2px 2px 4px #f00;

Como todo o desenvolvedor Web, sofro diariamente com as dores de cabeça causadas pelos browsers que não seguem os padrões (ok, Internet Explorer). É um tal de margem duplicada pra cá, texto misteriosos que se replicam em final de blocos, uma maravilha!

Para contornar esses problemas que nosso “querido” Internet Explorer nos causa, temos algumas práticas interessantes, dentre elas, as que eu utilizo utilizava posso destacar os CSS Hacks e os CSS Condicionais

CSS Hacks

Podemos definir como CSS Hacks as formas que encontramos de “enganar” o browser (IE, sempre IE) para que ele  renderize corretamente corretamente o CSS da página. Esses Hacks somente se aplicam aos browsers que tem essa falha, lógico.

Podemos citar alguns Hacks famosos:

/* IE 6 e anteriores */
* html #um  { color: red }
 
/* IE 7 e anteriores */
*:first-child+html #dois { color: red } 
 
/* IE 7 e browsers modernos */
html > body #tres { color: red }
 
/* Somente browsers modernos (sem IE 7) */
html > /**/body #quatro { color: red }

Apesar de parecer ser uma solução simples, os Hacks tornam o CSS não-válidos, o que na minha opinião é um problema. Sem contar o fato de que estamos enganando o browser para ele renderizar algo que ele não foi feito para suporta, ou seja, processamento extra.

CSS Condicional

Como o próprio nome já diz, é o uso de uma folha de estilos condicional, ou seja, só é carregada quando for determinado browser que estiver fazendo a requisição, e o melhor, sem javascript!

Essa prática faz uso dos conditional comments, um comentário HTML com uma sintaxe especial que é interpretado única e exclusivamente pelo Internet Explorer. Os browsers modernos os enxergam apenas como comentários comuns, sem interpretá-los.

Por exemplo, se quisermos que um estilo seja carregado somente no IE 6, fazemos o seguinte:

<!--[if IE 6]>
	<link rel="stylesheet" href="main_ie.css" mce_href="main_ie.css" type="text/css" media="all" />
< ![endif]-->

A lado bom de se utilizar os CSS Condicionais é que a folha de estilo é válida, pois não usa nenhum hack que possa a ver a invalidá-la. Por outro lado, temos requisições extras que vão ser feitas de acordo com o browser.  Além disso, com está no <head>, a renderização da página fica aguardando ela estar totalmente carregada.

Uma nova esperança!

Eis que lendo um artigo do Paul Irish, surgiu uma luz no horizonte, que resolve o problema das multiplas requisições de folhas de estilos e também da espera pelo carregamento.

A solução é fazer o uso de conditional comments não para alternar entre folhas de estilos a ser carregadas, e sim para aplicar ou não uma class no <body> do documento da seguinte maneira:

  <!--[if lt IE 7]> <body class="ie6"> < ![endif]-->
  <!--[if IE 7]>    </body><body class="ie7"> < ![endif]-->
  <!--[if IE 8]>    </body><body class="ie8"> < ![endif]-->
  <!--[if !IE]>-->                 <!--<![endif]--></body>

Isso  faz com que de acordo com o browser, seja adicionado a class (ie6, ie7 ou ie8) no corpo do documento, possibilitando corrigir as falhas de renderização direto na folha de estilo principal, facilitando até a manutenção do código.

Como exemplo, para adicionar alguma correção, fariamos o seguinte no CSS:

    div#container{margin-left:10px;}
    //corrigindo o famoso bug da margem dupla
    body.ie6 div#container{margin-left:5px;}

E é isso!

De agora em diante, essa é a solução que utilizarei!

Segue alguns links interessantes sobre o assunto:

• http://jigsaw.w3.org/css-validator/
• http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
• http://paulirish.com/2009/browser-specific-css-hacks/
• http://www.quirksmode.org/css/condcom.html

Continue reading

Segue a tradução do artigo 10 Cool Things We’ll Be Able To Do Once IE6 Is Dead; And A Few We Can’t do site Ajaxian. Vale a pena conferir o que estamos perdendo quando desenvolvemos pensando em IE6.

James Edwards tem uma pequena lista que ousa sonhar com uma vida pós IE6. Ele nos deu uma lista de 10 coisas que que poderemos fazer quando este dia chegar:

Usar child-selectors

Não vamos mais precisar definir intermináveis regras para remover as regras dos child-selectors. Com os eles no CSS2  poderemos especificar regras CSS que sejam aplicadas apenas no elemento filho, não nos descendentes em geral.

Usar PNGs de 24-bit

Não vamos mais precisar adaptar imagens em diferentes backgrounds coloridos para que tenhamos um anti-aliasing descente. Com o suporte ao canal alpha do PNG, poderemos usar imagens com sombras, glows e outros efeitos de opacidade, com segurança que todos os navegadores gráficos poderão vê-los.

Usar attribute selectors

Não vamos mais precisar definir classes de tipagem para os inputs – coisas como <input class=”text” … /> – quando podemos endereça-las com os attribute seletors do CSS2, como input[type="text"]. Podemos usar até mesmo o attribute selector substring-matching do CSS3 (suportado por todos os navegadores modernos, inclusive o IE7), que pode ser muito útil quando definimos seletores que se aplicam a um grande numero de atributos, diminuindo significantemente o número de código que teremos que fazer.

Usar um grande número de propriedades display

Poderemos usar coisas como display:inline-block ao invés de float:left. Isso significa não ter mais os intermináveis float dentro de float dentro de float, ou ainda o duvidável uso do overflow:hidden, só para os blocos ficarem posicionados corretamente. (Embora eu deva dizer que teremos que esperar até o Firefox 3 para termos isso também!).

Usar min-width e max-width

Apesar da implementação do propriedade width do IE6 ser muito parecida com a correta implementação do min-width, não é a mesma coisa, e não serve para o mesmo propósito; e isso não faz nada para o max-width. Com o fim do IE6 virá uma nova renascença dos designs em block, com a grande flexibilidade que os designers vem reclamando a anos.

Jogar fora 90% dos CSS hacks (e 90% da razão pela qual precisamos deles!)

No nos preocuparemos com repetições bizarras de caracteres, misteriosos blocos invisíves ou frustantes margens duplicadas; com o fim do IE6 acabará a necessidade de diagnosticar e curar tantos bugs de reendenização

Adicionar abreviações que todos poderão ver

Apesar de pessoalmente só usar o elemento <abbr> e nunca usar <acronym>, ainda sim me aborreço ao lembrar que os usuários do IE6 não verão a expansão, e me aborrece mais ainda as ocasiões que eu preciso usar scripts para eles (e não posso).

Confiar novamente no z-index

Não vamos mais precisar coçar nossas e refletir sobre o porque a camada X estão acima da camada Y quando deveria estar abaixo, imaginando o que podemos ter feito de errado, só pra lembrar que – duh – não fizemos nada de errado, é apenas o contexto de empilhamento do IE6.

Poupar tempo e dinheiro

Gastar um tempo consideravelmente menor hackeando significa menos tempo de desenvolvimento e menos custos.

Aproveitar novamente!

Escrever CSS vai se tornar prazeiroso como costumava ser. Isso é, até nossas expectativas aumentarem novamente e o IE7 se tornar nosso monstro

Mas ainda teremos que esperar pelos contadores CSS, box-sizing, e um JavaScript mais decente (e muito muito mais, como Canvar e suporte a SVG).

Tomara que o update automático para o IE8 coloque tudo nos eixos

O que é um Sprite?

Sprite é uma técnica utilizada originalmente em jogos 2-D  que tem por principio colocar todas as ações de um personagem (movimentos) em uma só imagem, e só mudar a posição que deve ser mostrada na tela. Quando foi criada essa técnica, o hardware era muito limitado, por isso havia a necessidade de otimizar os gráficos para não sobrecarregar o processador.

Exemplo de Sprite do jogo Super Star Wars: The Empire Strikes Back, para SNES

No desenvolvimento Web, os Sprites são amplamente utilizados em ícones e em menus rollover.

Por que utilizar Sprites

Vários sites, como Google e Yahoo, utilizam essa prática para otimizar o carregamento das imagens usadas. Ao invés de requisitar 15 imagens, é feita a requisição de uma só imagem. Isso pode parecer muito pouco de for pensar em 10, 20 acessos, mas pense em milhões de acessos simultâneos? A economia de requisições neste caso é enorme.

A utilização de Sprites trás também a facilidade de alteração do tema do site. Imagine um site com 15 icones: Para mudar o tema, seria necessário mudar 1 por 1 os ícones. Utilizando os Sprites, seria necessário apenas mudar uma imagem que contém todos os ícones.

Como usar essa técnica

Vou demonstrar 2 exemplos do uso da técnica, um para ícones e outro para menus rollover.

O primeiro passo é criar o Sprite contendo as imagens necessárias. Para este exemplo, criei 4 estágios de botões (bem simples, diga-se de passagem):

Menu Sprite

Feito isso, vamos colocar a mão na massa e fazer o HTML.

<ul>
	<li id="opcao1"><a href="#">Opção 1</a></li>
	<li id="opcao2"><a href="#">Opção 2</a></li>
	<li id="opcao3"><a href="#">Opção 3</a></li>
</ul>

Cada item tem definido um ID, pois  cada um terá um fundo (ícone) diferente.

Agora que temos o HTML, podemos estilizar usando CSS. Para este caso, usaremos a seguinte definição, abstraindo os estilos comuns e mostrando apenas o necessário para fazer a “mágica”:

ul li{background:url(menu_sprite.png) 0px 0px no-repeat;}
ul li#opcao1:hover{background-position:-70px 0px;}
ul li#opcao2:hover{background-position:-140px 0px;}
ul li#opcao3:hover{background-position:-210px 0px;}

Explicando tudo

ul li: Aqui eu defino o background padrão para os botões do menu e posiciono ele na posição (0px, 0px), pois é essa a posição da imagem que eu quero que apareça. Cabe aqui explicar a sintax da propriedade background:

É a combinação de algum ou todos os valor para background-color, background-image, background-repeat, background-attachment e background-position

Como a mesma regra se aplica a todos os links, só alterando a posição, vou colocar a explicação somente para a primeira opção.

ul.li#opcao1:hover: Aqui se aplica a propriedade background-position{ -70px 0px; }, ou seja, deslocar a imagem de background 70 pixels para a esquerda quando o mouse estiver sobre o li, fazendo aparecer a outra imagem do sprite.

Dessa maneira, temos um menu rollover usando apenas uma imagem e a prática do CSS Sprite, com o seguinte resultado:

Menu Sprite com o rollover

O exemplo desta técnica está disponível aqui

Links interessantes sobre o assunto:

CSS Sprite Generator

HTMLDog