Blog Web Standards

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

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!

22 2012 março

Padrão de formulários

Autor: g3 em HTML

Sempre utilizamos um estilo base para formulários quando trabalhamos com páginas de cadastro, login, etc. Consequentemente possuímos uma forma bem similar para escrever nossos códigos para formulários. Por isso com o passar do tempo fomos testando e incrementando nosso padrão para formulário. Tanto a parte de código HTML quando CSS.

Atualizamos o post do Documento base para CSS. Agora no arquivo “geral.css” contém os estilos necessários para estilizar um formulário default.

Abaixo está nosso HTML pré-definido para formulário:

<!-- abre form -->
<form action="#" method="post">
  <fieldset>

    <!-- abre #instrucoes_formulario -->
    <aside id="instrucoes_formulario">
      <p class="erro">Verifique os campos com asterisco e destaque vermelho.</p>
      <!-- <p>Preencha os campos obrigatórios (*).</p> -->
    </aside>
    <!-- fecha #instrucoes_formulario -->

    <ol>
      <li class="erro">
        <label for="nome">* Nome</label> <input type="text" name="nome" id="nome" /> <em>Apenas letras</em>
      </li>
      <li class="erro">
        <label for="senha">* Senha</label>
        <input type="password" name="senha" id="senha" />
        <em>Ex.: Asd@123</em>
      </li>
      <li>
        <label for="email">* E-mail</label>
        <input type="email" name="email" id="email" />
        <em>exemplo@exemplo.com</em>
      </li>
      <li class="erro">
        <label for="telefone">Telefone</label>
        <input type="tel" name="telefone" id="telefone" />
        <em>(xx) xxxx-xxxx</em>
      </li>
      <!-- input[type=date] é suportado apenas no Opera -->
      <!--
      <li>
        <label for="data">Data</label>
        <input type="date" name="data" id="data" />
        <em>yyyy-mm-dd</em>
      </li>
      -->
      <li>
        <label for="site">Site</label>
        <input type="url" name="site" id="site" value="http://www.exemplo.com/" />
        <em>http://www.exemplo.com/</em>
      </li>
      <li>
        <label>Números</label>
        <input type="number" name="campo_numero" id="campo_numero" />
        <em>Use apenas números</em>
      </li>
      <li>
        <!-- <p> parágrafo com title servindo como label dos campos da listagem a seguir -->
        <p title="Escolha alguma das opções XXXX">Opções</p>
        <!-- <ul> listagem de campos à parte do fluxo de preenchimento -->
        <ul>
          <li>
            <label title="Selecionar opção a"><input type="radio" name="#" /> Opção a</label>
          </li>
          <li>
            <label title="Selecionar opção b"><input type="radio" name="#" /> Opção b</label>
          </li>
          <li>
            <label title="Selecionar opção c"><input type="radio" name="#" /> Opção c</label>
          </li>
        </ul>
        <em>Mensagem de teste</em>
      </li>
      <li>
        <!-- <ol> listagem de campos que fazem parte do fluxo de preenchimento -->
        <ol>
          <li class="erro">
            <label for="campo_selecao">Campo seleção</label>
            <select name="campo_selecao" id="campo_selecao">
              <option>Selecione</option>
            </select>
            <p class="erro">Selecione algum xxxxx</p>
          </li>
          <li class="erro">
            <label for="campo_exemplo1">Campo exemplo 1</label>
            <input type="text" name="campo_exemplo1" id="campo_exemplo1" />
            <p class="erro">Mensagem de erro</p>
          </li>
        </ol>
        <em>Ex. vários campos na mesma linha.</em>
      </li>
      <li>
        <label for="mensagem">Mensagem</label>
        <textarea rows="3" cols="30" name="mensagem" id="mensagem"></textarea>
        <em>Mensagem de ajuda</em>
      </li>
      <li class="confirmacao">
        <label for="confirmar" title="Confirmar XXXXX"><input type="checkbox" name="confirmar" id="confirmar" /> Exemplo de campo de confirmação.</label>
      </li>
    </ol>
    <button type="submit">Botão de enviar</button>
  </fieldset>
</form>
<!-- fecha form -->

Este é um padrão que prevê várias possibilidades para formulários, portanto remova e inclua conforme sua necessidade os códigos HTML e CSS. Sempre fazemos esse procedimento no início de cada projeto.

Veja o exemplo do HTML para formulários implementado em nosso framework.

07 2011 outubro

Google Chrome Frame

Autor: g3 em Ferramenta

Última modificação: 13 junho 2012

Chrome Frame

O Google Chrome Frame possui uma proposta de simplesmente “substituir” o motor de renderização do Internet Explorer, habilitando praticamente todos os recursos que estariam disponíveis no navegador Google Chrome.

É como um Plugin que pode ser instalado mesmo por usuários que não possuam permissões de Administrador no Sistema Operacional, funcionando de forma oculta sem mudar a forma de navegar que o usuário já esta acostumado.

Disponível somente para Internet Explorer a partir da versão 6 em Windows a partir da versão XP.

Implementando Chrome Frame

Para ativar o Chrome Frame ao renderizar uma página basta incluir a meta abaixo dentro da tag head.

  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />

Além do código para ativar o Chrome Frame incluímos a informação para forçar o Internet Explorer a renderizar com a sua última versão (IE=Edge).

Incluíndo aviso de instalação

Coloque o código abaixo antes de fechar a tag body.

<!--[if lt IE 8]>
  <script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
  <script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
<![endif]-->

Definimos com conditional comments que ao carregar a página, será apresentado o aviso de instalação apenas aos usuários de Internet Explorer 7 e versões anteriores.

Veja nosso Documento base para HTML, nele utilizamos esse recurso. Devido a mensagem default de instalação do Chrome Frame ser muito invasiva, fizemos uma versão customizada. Faça download do Framework padrão e teste o código em versão inferior ao Internet Explorer 7 para visualizar a nossa customizacao.

Mais sobre Chrome Frame:

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!