Resolução de problemas de CSS

Criou CSS personalizado para os seus formulários, mas não conseguiu ver esses estilos quando visualizou o seu site? Existem alguns problemas comuns que podem fazer com que o CSS não apareça corretamente num site.

Este tutorial apresenta opções para solucionar o problema do seu CSS não estar a funcionar e oferece possíveis soluções.

Cache do navegador

Os navegadores costumam armazenar em cache ou temporariamente os recursos dos sítios Web que visita para melhorar a velocidade de carregamento. Alguns sites também utilizam plug-ins para armazenamento em cache adicional. Muitas vezes, quando não vê os seus estilos personalizados no seu sítio, isso deve-se ao facto de o navegador ou outro sistema ter guardado em cache uma versão mais antiga do seu sítio.

Aqui está um tutorial que o guiará pelos principais passos para limpar as caches do seu site e dos plugins.

Se a limpeza da cache do browser não funcionar, eis algumas estratégias adicionais que pode experimentar:

Experimentar um navegador diferente

Cada navegador guarda a sua cache dos sítios que visita. Ao abrir o seu sítio num navegador diferente (ou no modo privado oferecido por alguns navegadores, como a janela anónima do Chrome), pode frequentemente ver uma versão não armazenada em cache do seu sítio.

Perguntar ao seu anfitrião se tem uma cache

Alguns anfitriões fornecem cache para o seu site diretamente nos seus servidores, que é onde os ficheiros do seu site são armazenados. Se não tiver a certeza, poderá contactar o seu anfitrião para perguntar se o seu sítio está em cache e, se estiver, pedir-lhe que limpe essa cache por si.

Experimentar uma fonte de Internet diferente

Ocasionalmente, o simples facto de carregar o seu sítio através de uma fonte de Internet diferente pode ajudar a contornar uma cache existente. Se tiver um dispositivo móvel com dados disponíveis, a forma mais simples de o fazer é desligar temporariamente o WiFi no seu dispositivo e voltar a carregar a página.

Formato CSS inválido

As CSS têm de ser escritas num formato específico para que um browser as compreenda. Existem muitas ferramentas online para verificar se o seu CSS é válido, incluindo o CSS Validator da W3School. Esta é uma excelente opção se tiver muitas CSS personalizadas e pelo menos alguma experiência anterior na criação de CSS.

No entanto, se estiver a utilizar apenas uma pequena quantidade de CSS, por vezes pode ser mais fácil fazer uma verificação rápida do seu próprio formato. Comecemos por ver um excerto de CSS válido:

div.wpforms-container-full .wpforms-form .wpforms-title {
    font-size: 26px;
    margin: 0 0 10px 0;
}

Eis porque é que este CSS é válido ou "legível" pelos browsers:

• Formato correto do seletor: Se o seletor incluir várias partes, tem de ser escrito do "maior" para o "mais pequeno". No exemplo acima, div.wpforms-container-full é o maior elemento de contentor no HTML, enquanto .wpforms-form está dentro desse contentor. O mais pequeno e último item do seletor, .wpforms-titleestá contido dentro de ambos os outros elementos. Em qualquer outra ordem, o browser não conseguirá ler este seletor.
• Two brackets: There must be an opening curly bracket ({) right after the CSS selector and at the end of the property and value list. Forgetting that closing bracket (}) is a common mistake, and will usually prevent all CSS below it from being shown in the browser.
• Dois pontos e ponto e vírgula: Certifique-se de que inclui dois pontos (:) entre cada propriedade e valor CSS e um ponto e vírgula (;) após cada valor para que o browser possa ler as suas CSS (por exemplo, font-size: 26px;).
• Utilização correta dos espaços em branco: Na maior parte das vezes, as CSS não são muito exigentes quanto ao espaço em branco (que inclui separadores e espaços). No entanto, há uma exceção para as unidades. 26px funcionará, por exemplo, enquanto 26 px não o fará.

Para obter mais informações sobre como escrever CSS com a sintaxe correta, pode consultar este tutorial da W3Schools.

Especificidade das CSS

Uma vez que todos os temas e a maioria dos plug-ins contêm os seus próprios conjuntos de estilos, é frequente que os seus estilos personalizados tenham de "competir" com os estilos existentes. Nessas situações, o seletor CSS mais específico ganhará quase sempre em relação a um seletor menos específico.

Por exemplo, aqui está o CSS padrão que define o tamanho da fonte dos títulos de formulários no WPForms:

div.wpforms-container-full .wpforms-form .wpforms-title {
    font-size: 26px;
}

Vamos tentar substituir esse CSS para tornar a fonte maior. Pode ser tentador usar um seletor CSS curto como este:

.wpforms-title {
    font-size: 40px;
}

Esse CSS é válido, mas seus estilos não serão exibidos no navegador. Em vez disso, serão aplicados os estilos predefinidos porque têm um seletor mais específico. Em vez disso, teria de utilizar o mesmo seletor mais longo que o estilo predefinido para as suas CSS personalizadas:

div.wpforms-container-full .wpforms-form .wpforms-title {
    font-size: 40px;
}

Utilizar !important em CSS

Em algumas situações, é possível forçar um trecho menos específico de CSS a funcionar, incluindo o !important antes do ponto e vírgula. É sempre melhor tentar primeiro um seletor mais específico (como descrito acima), mas por vezes isto pode oferecer uma solução rápida.

É importante notar, no entanto, que adicionar o !important nem sempre funciona. Vamos tentar esta abordagem para o CSS que discutimos no último exemplo:

.wpforms-title {
    font-size: 40px !important;
}

Nesta situação, o browser prefere a especificidade do CSS predefinido em vez da !important pelo que este CSS não será aplicado ao seu sítio.

Vejamos um exemplo em que a adição do !important regra faz trabalho. Por padrão, o asterisco (*) que marca um campo 'obrigatório' no WPForms será vermelho:

Aqui está o CSS que cria esse estilo (#ff0000 é um código hexadecimal para a cor vermelha):

div.wpforms-container-full .wpforms-form .wpforms-required-label {
    color: #ff0000;
}

Em vez disso, queremos que estes asteriscos apareçam a azul. Podemos copiar o seletor completo do CSS acima, ou podemos utilizar um seletor curto e adicionar o !important como neste excerto de CSS:

.wpforms-required-label {
    color: #007acc !important;
}

Pode ser difícil saber se o !important A regra funcionará, por isso é provável que tenha de experimentar e testar.

É isso aí! Cobrimos as estratégias de solução de problemas mais comuns a serem usadas quando o CSS não está funcionando. Se você ainda está tendo problemas para estilizar seus WPForms, entre em contato com o suporte para que possamos ajudá-lo.

A seguir, gostaria de personalizar ainda mais os seus formulários? Consulte o nosso tutorial sobre a personalização de campos de formulário individuais para obter detalhes e exemplos.