Com os recursos que temos atualmente, podemos fazer cantos arredondados diretamente pelo CSS para os browsers Firefox e Safari, graças a propriedades exclusivas de suas engines.
O CSS3 promete unificar tudo isso introduzindo a propriedade border-radius mas, até o momento, a melhor opção que temos é o DD_roundies, um script que possibilita fazermos bordas arredondadas sem imagens para os browsers mais populares: Internet Explorer 6, 7 e 8 além de Firefox e Safari (Google Chrome).
Para usá-lo é bastante simples: baixar o script e chamar as funções do javascript especificando o raio das bordas que você deseja.
<script src="DD_roundies.js"></script>
<script type="text/javascript">
// <![CDATA[
/* EXEMPLOS */
/* somente IE */
DD_roundies.addRule('.roundify', '10px');
/* variação de raio, somente IE */
DD_roundies.addRule('.something_else', '10px 4px');
/* variação de raio, "todos" os browsers */
DD_roundies.addRule('.yet_another', '5px', true);
// ]]></script>
O interessante de usar essa técnica para todos os browsers (incluindo Firefox e Safari) é que mantemos nosso CSS limpo e sua aplicação mostrou-se muito eficaz, já que não se faz mais necessário o uso de imagens para fazer os cantos arredondados.
O único porém que percebi até o momento é no uso das bordas arredondadas para Internet Explorer 8, não mostrando a propriedade background-image caso utilizada.
Explicação detalhada
Faça download do script DD_roundies e coloque o arquivo junto com o HTML. Caso o arquivo baixado esteja na mesma pasta que o arquivo HTML inclua esse js em seu HTML dentro da tag head:
...
<head>
<title>Exemplo</title>
<script type="text/javascript" src="DD_roundies_0.0.2a-min.js"></script>
</head>
...
Agora para colocarmos canto arredondado em algum elemento siga o exemplo.
Coloque dentro da tag body uma div:
...
<body>
<div>Meu exemplo de canto arredondado</div>
</body>
...
Logo abaixo do código que colocou antes no head, inclua também o código para fazer os cantos arredondados que desejar e um CSS para que veja o que fez:
...
<head>
<title>Exemplo</title>
<script type="text/javascript" src="DD_roundies_0.0.2a-min.js"></script>
<script type="text/javascript">
DD_roundies.addRule('div', '10px', true);
</script>
<style type="text/css">
div { border: 1px solid red; }
</style>
</head>
...
Esse código que colocou é apenas para fazer os cantos arredondados em qualquer div com um raio de 10 pixel e funcionar em todos navegados (true). Quando for usar em seu dia-a-dia mude conforme a necessidade, por exemplo:
...
DD_roundies.addRule('div.conteudo ol li', '20px', true);
...
ou assim, com cantos diferentes:
...
DD_roundies.addRule('div.topo .busca form', '20px 0 0 20px', true);
...
Essa ordem usada para deixar os cantos diferentes é a seguinte: Top-Left, Top-Right, Bottom-Left e Bottom-Right.
Veja o exemplo de pronto com cantos arredondados. Caso tenha uma dúvida, comente!
Sabe aquele bug que você encontra em situações específicas e pede ajuda pra alguém e, um tempo depois, acaba esquecendo a solução?
Pensando nisso, criamos o Histórico de Bugs, um repositório que lista diversos tipos de erros e suas respectivas soluções. Você pode contribuir colocando seu comentário, aprimorando a solução, ou até enviar um novo bug (com sua solução, é claro!) através de nosso formulário de contato.
O objetivo, como sempre, é fazermos algo simples e direto.
15 2009 outubro
Autor: g3 em HTML
Incrementamos o conteúdo do Checklist para HTML.
Assim como temos definido a ordem das propriedades CSS, também documentamos uma ordem para os atributos de HTML.
Agora o Checklist para HTML possui a seção sobre Ordem dos atributos HTML.
Além de termos inaugurado nosso tema personalizado para o Blog Web Standards, vocês podem nos seguir no Twitter e acompanhar nossas últimas atualizações na caixa lateral do site.
Gostaríamos de agradecer os elogios que temos recebido e vários links, tudo isso pois temos o objetivo de ajudar os desenvolvedores a encontrar a solução de seus problemas!
Sei que email marketing não tem muita ligação com Web Standards, mas todo mundo precisa saber que já existem projetos relacionados e também serve como um guia para produzir esse tipo de material.
Quais são os limites do email marketing utilizando HTML? O que podemos colocar de CSS também, levando em conta algo que funcione nos programas desktops e também nos webservices?
CSS
Pode ser utilizada a tag “style” no head ou no body (só não funciona no AOL MAC, Note 6, Gmail e Hotmail). Mas como no GMail isso não funciona, a dica é usar style inline. Como o Notes 6 tem um suporte mínimo, não levei ele em conta ok? 
Propriedades CSS válidas para todos*:
- Background-color:
- Border;
- Border-collapse;
- Color;
- Display, Float e Height(só não funciona no Outlook 07);
- Font-family (não funciona no Gmail);
- Font-size;
- Font-style;
- Font-weight;
- Line height;
- Table-layout;
- Text-align;
- Text-decoration;
- Text-indent;
- Text-transform;
- Letter-spacing;
- Padding;
* Todos testados (Yahoo antigo/novo, Gmail antigo/novo, Live Mail, Hotmail, AOL Web, MobileMe.) / (Outlook (2003 e 07), Windows Mail, Mac Mail, Entourage (2004, 2008), Thunder-bird 2, AOL (9, 10), Mac).
Existem pessoas focadas nos webstandards para os emails: os chamados e-mail standards. Eles mostram screenshots de cada browser como resultados de seus testes, além de dizer o que falta para cada Email Client ficar show para suportar os standars. Ex.: Para o Google Mail ainda é necessário suportar o CSS no header, e não utilizar mais a técnica inline.
Estrutura HTML / CSS
Resumindo: Como construir um e-mail marketing utilizando pelo menos um pouco de webstandards?
- A estrutura deve ser em tabelas;
- Utilizar as propriedades que todos os emails clients aceitem (ou pelo menos a maioria deles);
- CSS inline (apesar de não ser standard, é o que podemos usar);
- Layout com largura fixa até 580px e a altura pode ser variável (dependendo do layout).
- Mesmo com todos os cuidados, é possível que o usuário veja a mensagem desconfigurada. Por isso um link do tipo “se você está vendo o email desconfigurado, acesse a outra versão.”
HTML: tags que devemos evitar
Tags HTML que não devem ser utilizadas, por não serem suportadas por muitos clientes de email: (segundo um HTML Email Guide que li).
- DOCTYPE
- HTML tag
- BODY tag
- Meta tags
- Head tag
- Base tag
- Link tag
- Script tag
- Title tag
- Applet tag
- Frameset tag
- Frame tag
- IFrame tag
- Comments
Template de E-mail Marketing HTML, utilizando o que falei nesse post. *No topo a mensagem para visualizar o outro formato do email, evitei usar o “clique aqui” por ser termos que são buscados para codificar como Spam.
. Esse template foi testado no GMail, Hotmail, YahooMail e no ThunderBird.
Link relacionado/fonte: Campaing Monitor.
22 2009 abril
Autor: g3 em CSS
A forma seguinte de alinhamento vertical e horizontal é uma combinação de:
- Posicionamento absoluto
- Margens negativas
Para começar entender como funciona esse método copie o código XHTML abaixo e insira dentro da tag body:
<div id="limites">
<div id="conteudo">
<h1>Alinhamento vertical e horizontal com <abbr title="eXtensible Hypertext Markup Language">XHTML</abbr> e <abbr title="Cascading Style Sheets">CSS</abbr></h1>
<p>Olá mundo!</p>
</div>
</div>
Nesse exemplo o elemento que precisa posicionar no meio da tela será a div#limites.
Como padrão de documento base para CSS coloque o seguinte reset:
* { margin: 0; padding: 0; z-index: 1; }
E agora para começar a posicionar a div#limites no meio da tela declare o seguinte código:
#limites { position: absolute; top: 50%; left: 50%; width: 680px; height: 400px; background-color: #eee; }
Isso vai fazer que a div#limites tenha os seguintes estilos:
- posição absoluta
- canto superior esquerdo a uma distância igual a 50% do tamanho da tela
- largura e altura
- fundo cinza.
Com isso o resultado será meio estranho visualmente, mas esta tudo ok.
Veja ampliado
Agora é preciso puxar a div#limites para cima e para esquerda usando margim negativa, é por esse motivo que é necessário a div#limites ter uma largura e altura definida.
Puxe então a div#limites para cima ↑ com um valor igual à metade da sua altura ( margin-top: -200px; ) e o mesmo deve ser feito para o lado esquerdo ←, puxe para esquerda à metade da sua largura ( margin-left: -340px; ).
Veja ampliada
Com isso é possível posicionar a div#limites exatamente no meio da tela.
Veja ampliada
Veja o arquivo pronto do exemplo sobre alinhamento vertical e horizontal deste post.
Outros exemplos e links interessantes
Em nosso último artigo comentamos uma forma de inserir vídeos do YouTube em seu site, com código válido, de acordo com as normas da W3C. Porém muita gente entrou em contato conosco falando que era um processo “braçal”, que demandava muito empenho.
Para solucionar este problema, criamos o Gerador de embed YouTube válido W3C que, obviamente, só precisa do URL além das dimensões desejadas para o vídeo; logo abaixo é gerado um código que você só precisa copiar e colar, garantindo que o seu código continue válido, além de funcionar em todos os browsers (inclusive IE6!).
Quer saber como inserir vídeos do YouTube em seu site, mantendo seu código validado? Veja abaixo o código para fazer isso de maneira simples:
<!--[if !IE]> -->
<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/id-do-video" width="425" height="344">
<!-- <![endif]-->
<!--[if IE]>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/id-do-video" />
<!--><!--dgx-->
<param name="loop" value="true" />
<param name="menu" value="false" />
<p>Seu navegador não suporta o vídeo.</p>
</object>
<!-- <![endif]-->
Bom, como pode-se perceber, é só substituir o “id-do-video” pelo próprio id do vídeo, localizado na URL do mesmo. Simples, não é?
Fugindo um pouco do nosso foco, vamos mostrar a vocês nosso mascote: Firefox. Nada mais justo não é?
Vindo diretamente da Mozilla, este querido “panda avermelhado” veio alegrar nosso ambiente de trabalho 
Ah, e pra arrematar também encomendamos um pôster… Assim a gente sensabiliza sensibiliza qualquer um que ainda se atreva a usar Internet Explorer!
Quer saber alguma maneira de testar seu site no Internet Explorer 6, 7 e 8?
A melhor opção que encontramos atualmente é o IETester, aplicativo que já utilizamos há algum tempo. Seu maior trunfo é a opção de abrir todas estas versões do IE, cada uma em uma aba distinta, deixando seu trabalho de revisão muito mais fácil. O único porém é que você precisa do IE7 original para que funcione corretamente no programa.
Além desta opção temos o Multiple IE, que oferece um instalador para cada versão do Internet Explorer, ferramenta que também já foi muito utilizada em nossa equipe.
Além dessas opções, há alguns sites que geram imagens da sua página, uma para cada browser. O melhor exemplo é o Browsershots, mas é uma opção que não se compara aos softwares citados anteriormente.
Para finalizar, outra opção promissora é o Xenocode Browser Sandbox, que permite visualizar o site em diversos browsers, não se prendendo somente ao IE. Na teoria é algo muito bonito, mas na prática se mostrou bem lento… Talvez com o tempo o serviço melhore e mostre mais viável para o trabalho do dia-a-dia.
