Blog Web Standards

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

Um recurso muito interessante das CSS media features é a possibilidade de escrevermos regras baseadas no input primário do usuário, ou seja, se o dispositivo utilizado para acesso tiver capacidade para hover (exemplo do mouse), executa a regra determinada no CSS.

Veja como é simples:

Lembrando que tablets também podem ter acesso a larguras acima de 1024px, impossibilitando usarmos somente breakpoints como medida para determinar se está sendo usado touchscreen ou não.

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

Estávamos enfrentando um problema com o preenchimento de formulários no plugin Contact Form 7 do WordPress: ao utilizar o autocomplete do navegador em determinados campos, as informações destes inputs não estavam sendo enviadas.

A razão disso é que, aparentemente, o plugin utiliza Ajax para envio do formulário e, desta forma, não detecta que o campo foi preenchido de fato, assumindo que seu valor é vazio.

Para corrigir este problema, inserimos o atributo autocomplete=off nos campos do formulário, para que a funcionalidade seja desabilitada:

  $('form.wpcf7-form input').each(function(){
    $(this).attr('autocomplete', 'off');
  });

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; }

Estamos desenvolvendo os e-mails utilizando o Foundation for Mails, e notei algo que pode ser muito útil.

Por padrão, esse framework gera o HTML minificado (sem espaços, tudo em uma mesma linha), o que não é interessante, principalmente para peças de e-mail marketing, pois algum programador irá precisar editá-lo depois. Sempre importante pensar no fluxo do projeto e na manutenção! Impossível mudar conteúdo de uma peça de email quando está tudo minified.

No site do Foundation, pode ver toda a documentação e processo inicial, mas vou colocar rapidamente os passos aqui, o que estou utilizando:

  1. Versão SASS – http://foundation.zurb.com/emails/docs/sass-guide.html
  2. Crie todo o código necessário enquanto roda no terminal “npm start”
  3. Desenvolva seu código 🙂
  4. Finalize a operação no terminal
  5. Na raiz do projeto encontre o arquivo com o nome “gulpfile.babel.js”
  6. Faça uma busca por: “collapseWhitespace” (sem as aspas)
  7. Provavelmente o valor esteja “true”. Mude para “false” (sem aspas)
  8. Volte para o terminal e rode o comando “npm run build” (sem aspas)

Agora é só ir na pasta /dist e conferir o trabalho final. Código organizado e com todo CSS inline. Dúvidas? Pode colocar aí nos comentários!

A grande vantagem de usar essa metodologia do Foundation é a facilidade de se produzir e-mails responsive. Vale a pena!

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

Última modificação: 17 agosto 2017

Um dos pontos que mais afetam a usabilidade, levando em conta principalmente o acesso por dipositivos móveis, é o tempo de carregamento do site, devido ao peso dos arquivos estáticos (imagens, css, scripts, etc.) e número de requisições.

Além da minificação do código, concatenação de arquivos e consequente diminuição de requisições, podemos utilizar a compressão Gzip no servidor do site (se o recurso estiver habilitado, claro) através do arquivo .htaccess. Basta editá-lo e incluir as linhas abaixo:

# BEGIN GZIP
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/opentype

# For Olders Browsers That Can’t Handle Compression
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
# END GZIP

Caso prefira, você pode editar a lista dos tipos de arquivos que serão comprimidos. Para checar se a compressão fez “efeito”, há uma ferramenta online que pode te auxiliar.

Nossa equipe havia planejado criar um site com uma extensa documentação sobre o que tudo o que envolve o trabalho de um front-end developer, além de indicações para designers de interface web para melhorar a produtividade e coesão entre ambas as partes. Depois de praticamente 4 anos em stand by, finalmente publicamos nosso projeto simplesmente chamado Front-End Development, que além da excelente documentação, possuirá artigos com dicas e idéias que contribuam com a comunidade dos front-end developers.

O intuito é voltar a atualizar o Blog Web Standards, utilizando como suporte ao Front-End Development, porém com artigos mais voltados a resolução de problemas que todos podemos enfrentar no desenvolvimento de novos projetos.

Esperamos que todos aproveitem esta novidade e fiquem a vontade para comentar e dar sugestões!