Blog Web Standards

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

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