Blog Web Standards

Soluções para os problemas enfrentados pelos desenvolvedores HTML e CSS no dia-a-dia

CSS

Estou trabalhando com um novo projeto e uma das páginas internas possui efeito de mix-blend-mode, para que a imagem tenha um efeito com a cor do background em seu elemento pai, como efeitos de layers no Photoshop ou Sketch. Porém este elemento possui algumas div’s com transition de opacidade.

A soma de todas estas características, porém, faz com que o Chrome apresente um bug: esconde um elemento que possui position: fixed (no caso o topo fixo do WordPress, quando logado).

Perdi algumas horas até encontrar a solução que envolve a aplicação da propriedade will-change: opacity no elemento pai, eliminando o bug que envolve o uso de opacity, transition e mix-blend-mode.

É um bug um tanto quanto antigo, já podia ter sido corrigido né?

Surgiu a necessidade de definir imagens em posts de blog que ocupem a largura toda da tela, mesmo dentro de um elemento (container) que respeite os limites da página.

Supondo que o elemento container possua 500px de largura e a imagem dentro dele precise ter 100% da largura da tela, chegamos a esta solução:

See the Pen Full width element inside any width container by Coopers Digital Production (@coopersdigitalproduction) on CodePen.

Neste caso, a questão é definir width: 100vw; para que possua a largura da viewport, além de position: relative; left: 50%; margin-left: -50vw; para que o elemento seja posicionado corretamente na lateral da página, de acordo com as medidas da tela.

Certamente há outras abordagens possíveis (como não usar position e left, porém requer o uso de calc no margin-left, algo que pode dar problemas de compatibilidade).

11 2017 fevereiro

overflow: hidden no Safari do iOS

Autor: Carlitos em CSS

Está tendo problemas com overflow: hidden no Safari? No meu caso estou criando uma tabela com scroll horizontal em telas menores porém, com este problema, ficava um espaço horizontal vazio correspondente a largura total da tabela.

Para resolver isso basta usar position: relative no elemento desejado, ficando desta forma:

elemento { position: relative; overflow: hidden; }

É comum utilizarmos o seletor :nth-child() para selecionar o itens dentro de uma regra específica (segundo, terceiro e assim por diante), em conjunto com :first-child e :last-child.

Porém o CSS também possui um seletor que permite estilizar itens a partir do último filho de determinado elemento, ou seja, na ordem inversa. Para tanto, é só utilizar :nth-last-child(), colocando o índice desejado dentro dos parênteses. Por exemplo, selecionando o penúltimo parágrafo dentro de uma div:

div p:nth-last-child(2) { color: #fff; }

E como fica o suporte aos navegadores? Não se preocupe, a partir do IE9 você não terá problemas, dê uma olhada no Can I use.

Mais informações sobre :nth-last-child()

Se você precisa retirar os cantos arredondados (ou outras características do padrão visual destes elementos) no iOS, é só usar o código abaixo:

textarea, input[type=”text”], input[type=”button”], input[type=”submit”] { -webkit-appearance: none; border-radius: 0; }

Importante: o ideal é não utilizarmos os prefixos (-webkit-) em nosso código, então uma boa dica é usar PostCSS para fazer isso automaticamente.

Pensando em deixar o desenvolvimento de códigos mais prático, publicamos nosso Repositório de Snippets, lugar onde colocaremos trechos de código modulares que usamos comumente em nossos projetos.

Obviamente deixamos aberto a todos e, por isso, deixamos espaço aberto a sugestões, tanto para melhoria dos códigos, como outros snippets a serem implementados.

Além disso, disponibilizamos o download dos snippets em formato de Clips para o editor Coda (Mac OS), assim os códigos podem ser utilizados de maneira mais prática!

03 2010 dezembro

Unidade de medida – em

Autor: g3 em CSS

Por questões de compatibilidade entre os navegadores, nós adotamos como padrão a unidade de medida “em”, principalmente para definição do tamanho das fontes.

“em” é uma medida relativa, isso quer dizer que ela pega como base um valor de referência anteriormente definido.

Exemplo

Coloque em um arquivo html, as seguintes marcações:

Dentro do body:

<div id="conteudo">
  <h1>Olá, aqui é o título</h1>
  <p>E aqui é um <strong>paragráfo</strong>.</p>
</div>

Defina o css abaixo para o html de cima:

html { font-size: 100%; }
body { font-size: .68em; }

#conteudo h1 { font-size: 1.45em; }
#conteudo p { font-size: 1.1em; }
#conteudo p strong { font-size: 1.16em; }

Explicação

  1. html “100%”. Isso atribuí ao html o tamanho da fonte padrão dos navegadores, que é 16px.
  2. body “.68em”. Como o tamanho da fonte padrão dos navegadores é 16px, pegamos 11px que é o valor que queremos e dividimos por 16px. Com isso chegamos no valor “0.68”.

Cálculo feito: 11/16 = 0.68

A idéia é que 11px é igual a 0.68em de 16px.

Em outros casos será da mesma forma, pegamos o valor que queremos e dividimos pelo valor de referência que foi definido anteriormente.

Na tabela abaixo estão os dados sobre as medidas dos elementos h1, p e strong.

Para compreender melhor esses valores definidos, veja a tabela:

Elemento Cálculo para restaurar o valor em pixel. Valor na unidade “px” Cálculo para mudar pixel para “em”. Valor na unidade “em”
h1 1.45(em) * 11(px) 16px 16(px) / 11(px) 1.45em
p 1.1(em) * 11(px) 12px 12(px) / 11(px) 1.1em
strong 1.16(em) * 12(px) 14px 14(px) / 12(px) 1.16em

O valor do strong é dividido por 12 porque ele pega o valor do elemento de referência dele, que é o parágrafo e que tem 12px de tamanho da fonte.

Então temos uma fórmula para conversão de “px” para “em” que é:

(valor a ser convertido) / (valor de referência) = (valor que desejamos)

Usando essa medida conseguimos a compatibilidade desejada entre os navegadores.

Veja mais conteúdo sobre unidades de medida usadas no css:

Última modificação: 12 abril 2011

Listagem horizontal onde os itens de lista vão ficar sempre com tamanho igual (se baseando na altura do maior dos itens): utilizando somente HTML e CSS.

Seria uma listagem no modelo da Americanas.com e Submarino – Porém quando verifiquei o código desses sites vi que não era o ideal, pois utilizam um monte de ULs separadas para cada linha: sendo que deveria ser somente 1.

Pontos positivos – Lista com Display Inline-block

  • Todos itens da linha se adaptam ao tamanho do maior;
  • Sem float: sem preoupações com clear, contemfloat, etc;
  • Possível listar tudo utilizando somente uma UL;

Pontos negativos – Suporte

Veja o exemplo de como vai ficar: Listagem horizontal com itens de mesma altura.

Código HTML

Somente uma listagem UL com items LI contendo uma imagem e um parágrafo.

  <!-- abre listagem -->
    <ul>
      <li>
        <img src="imagens/listagem-item1.jpg" alt="Quadro em aquarela 1" />
        <p>Quadro em Aquarela 60x60px. Pode ser comprado em até <strong>6x no cartão</strong> ou à vista com desconto de <strong>50%</strong> - por Kasper Jeppesen, 2010</p>
      </li>
      <li>
        <img src="imagens/listagem-item2.jpg" alt="Quadro em aquarela 2" />
        <p>Esse item é uma obra de arte fantástica em Aquarela 60x60px - por Kasper Jeppesen, 2010</p>
      </li>
      <li>
        <img src="imagens/listagem-item3.jpg" alt="Quadro em aquarela 3" />
        <p>Obra em Aquarela</p>
      </li>
    </ul>
    <!-- fecha listagem -->

E o CSS:

  #limites ul { list-style: none; letter-spacing: -3px;}
  #limites ul li { display: inline-block; width: 100px; margin: 10px 0; padding: 20px; border-top: 1px #fff solid; text-align: center; vertical-align: top; letter-spacing: normal; zoom: 1; }
  #limites ul li p { text-align: left; }
  • Letter-spacing com valor negativo na UL, pois o display insere automaticamente alguns pixels de margem entre os elementos. Esse valor é zerado novamente no LI (normal).
  • Todos itens se alinham ao topo
  • Paddings com a borda simulam a união dos elementos

Se for testar nos IEs até agora, vai encontrar um BUG como esse:

Quebra de layout nos IEs

Quebra de layout nos IEs

O quadro vermelho indica a quebra, pois esses navegadores não suportam o DISPLAY inline-block corretamente.

Não se preocupe – para concertar isso é só usar um hack para o IE6:

  * html #limites ul li { display: inline; }

E um ajuste para o IE7 – em um CSS separado (se não lembra como fazer, é bom dar uma lida em Conditional comments para Internet Explorer:

  #limites ul li { display: inline; }

Pronto.
Temos uma lista semanticamente correta onde cada linha se adapta ao conteúdo do maior elemento.

Última modificação: 31 maio 2011

Em desuso. Esse código está ultrapassado em nosso padrão, então evitamos usá-lo.

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).
Continuar lendo…

Última modificação: 31 março 2010

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.

Template email marketing. Esse template foi testado no GMail, Hotmail, YahooMail e no ThunderBird.

Se você tem dúvidas em quais clientes testar, pode dar preferência aos clientes que mais cresceram em 2009: iPhone, Apple Mail, Hotmail e Gmail – (fonte).


Link relacionado/fonte: Campaing Monitor.