Solución de problemas de CSS

Ha creado CSS personalizado para sus formularios, pero no ha podido ver esos estilos al ver su sitio web? Hay algunos problemas comunes que pueden hacer que el CSS no aparezca correctamente en un sitio.

Este tutorial le guiará a través de opciones para solucionar por qué su CSS no funciona y ofrecerá posibles soluciones.

Caché del navegador

Los navegadores a menudo almacenan en caché o guardan temporalmente recursos de los sitios web que visita para mejorar la velocidad de carga. Algunos sitios también utilizan complementos para almacenamiento en caché adicional. A menudo, cuando no ve sus estilos personalizados en su sitio, se debe a que el navegador u otro sistema ha almacenado en caché una versión anterior de su sitio.

Aquí tiene un tutorial que le guiará a través de los pasos principales para limpiar la caché de su sitio y de los complementos.

Si borrar la caché de su navegador no parece funcionar, aquí tiene un par de estrategias adicionales para probar:

Probar un navegador diferente

Cada navegador guarda en caché los sitios que visita. Al abrir su sitio en un navegador diferente (o en el modo privado que ofrecen algunos navegadores, como la ventana de incógnito de Chrome), a menudo puede ver una versión de su sitio sin caché.

Preguntar a su proveedor de alojamiento si tiene caché

Algunos proveedores de alojamiento ofrecen almacenamiento en caché para su sitio directamente en sus servidores, que es donde se almacenan los archivos de su sitio. Si no está seguro, es posible que desee ponerse en contacto con su proveedor de alojamiento para preguntar si están almacenando su sitio en caché y, si lo están, pedirles que limpien esa caché por usted.

Probar una fuente de Internet diferente

Ocasionalmente, simplemente cargar su sitio a través de una fuente de Internet diferente puede ayudar a omitir una caché existente. Si tiene un dispositivo móvil con datos disponibles, la forma más sencilla de hacerlo es desactivar temporalmente el WiFi en su dispositivo y recargar la página.

Formato CSS inválido

El CSS debe escribirse en un formato específico para que un navegador lo entienda. Hay muchas herramientas en línea para verificar que su CSS es válido, incluido el Validador CSS de W3School. Esta es una excelente opción si tiene mucho CSS personalizado y al menos un poco de experiencia previa creando CSS.

Sin embargo, si solo está utilizando una pequeña cantidad de CSS, a veces puede ser más fácil hacer una verificación rápida del formato usted mismo. Comencemos por observar un fragmento de CSS válido:

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

Aquí le explicamos por qué este CSS es válido o 'legible' por los navegadores:

• Formato de selector correcto: Si el selector incluye varias partes, debe escribirse de lo 'más grande' a lo 'más pequeño'. En el ejemplo anterior, div.wpforms-container-full es el elemento contenedor más grande en el HTML, mientras que .wpforms-form está dentro de ese contenedor. El elemento más pequeño y último en el selector, .wpforms-title, está contenido dentro de ambos otros elementos. En cualquier otro orden, el navegador no podrá leer este selector.
• Dos llaves: Debe haber una llave de apertura ({) justo después del selector CSS y al final de la lista de propiedades y valores. Olvidar esa llave de cierre (}) es un error común y normalmente evitará que todo el CSS posterior se muestre en el navegador.
• Dos puntos y punto y coma: Asegúrate de incluir dos puntos (:) entre cada propiedad y valor CSS, y un punto y coma (;) después de cada valor para que el navegador pueda leer tu CSS (por ejemplo, font-size: 26px;).
• Uso correcto de espacios en blanco: En su mayor parte, el CSS no es muy exigente con los espacios en blanco (que incluyen tabulaciones y espacios). Una excepción a esto, sin embargo, son las unidades. 26px funcionará, por ejemplo, mientras que 26 px no.

Para obtener más información sobre cómo escribir CSS con la sintaxis adecuada, puedes consultar este tutorial de W3Schools.

Especificidad CSS

Dado que todos los temas y la mayoría de los plugins contienen sus propios conjuntos de estilos, a menudo encontrarás que tus estilos personalizados deben "competir" contra los estilos existentes. En tales situaciones, el selector CSS más específico casi siempre prevalecerá sobre un selector menos específico.

Por ejemplo, aquí está el CSS predeterminado que establece el tamaño de fuente de los títulos de los formularios en WPForms:

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

Intentemos anular ese CSS para hacer la fuente más grande. Puede ser tentador usar un selector CSS corto como este:

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

Ese CSS es válido, pero sus estilos no se aplicarán en el navegador. Se aplicarán los estilos predeterminados en su lugar porque tienen un selector más específico. En su lugar, necesitarías usar el mismo selector más largo que el estilo predeterminado para tu CSS personalizado:

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

Uso de !important en CSS

En algunas situaciones, puedes forzar que un fragmento de CSS menos específico funcione incluyendo la regla !important antes del punto y coma. Siempre es mejor intentar primero un selector más específico (como se describe anteriormente), pero a veces esto puede ofrecer una solución rápida.

Sin embargo, es importante tener en cuenta que agregar la regla !important no siempre funcionará. Intentemos este enfoque para el CSS que discutimos en el último ejemplo:

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

En esta situación, el navegador prefiere la especificidad del CSS predeterminado sobre la regla !important, por lo que este CSS no se aplicará a tu sitio.

Veamos un ejemplo donde agregar la regla !important sí funciona. Por defecto, el asterisco (*) que marca un campo 'obligatorio' en WPForms será rojo:

Aquí está el CSS que crea ese estilo (#ff0000 es un código hexadecimal para el color rojo):

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

Queremos que estos asteriscos aparezcan en azul en su lugar. Podríamos copiar ese selector completo del CSS anterior, o podríamos usar un selector corto y agregar la regla !important, como en este fragmento de CSS:

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

Puede ser difícil saber si la regla !important funcionará o no, por lo que probablemente necesitarás intentarlo y probarlo.

¡Eso es todo! Hemos cubierto las estrategias de solución de problemas más comunes para usar cuando CSS no funciona. Si todavía tienes problemas para estilizar tus WPForms, por favor ponte en contacto con el soporte para que podamos ayudarte.

¿A continuación, te gustaría personalizar aún más tus formularios? Consulta nuestro tutorial sobre cómo personalizar campos individuales del formulario para obtener detalles y ejemplos.