Degradados CSS en Safari, descubre cómo hacerlos correctamente y compatible con Chrome, Firefox…

Degradados CSS en Safari, descubre cómo hacerlos correctamente y compatible con Chrome, Firefox…
5 (100%) 1 voto

Aunque la entrada hoy no corresponde estrictamente con algo propio de WordPress, no sería raro que se presentara este caso mientras editamos el aspecto visual de nuestra página con este CMS. Vamos a ver por tanto, como solucionar este pequeño inconveniente.

Efectos de degradados en diferentes navegadores

En la siguiente imagen vemos como debería de quedar el degradado que buscamos:

Degradados CSS en Safari, cómo hacerlos correctamente

Efecto de degradado correcto en Chrome

Este efecto es muy sencillo de realizar con CSS, y hay cientos de páginas en internet que muestran cómo realizarlo, con una sencilla línea de atributos.

/* Formato del CSS que no funciona en Safari */
 background: linear-gradient(transparent 56px, #fff);

Como vemos en la imagen anterior, este código funciona estupendamente en Chrome y Firefox, no obstante en Safari el renderizado deja mucho que desear:

Degradados CSS en Safari, cómo hacerlos correctamente

Efecto de degradado incorrecto en Chrome

Sin duda, intolerable la forma en que se la que es representado, pero no es culpa del navegador. Vamos a ver cómo hacerlo de la forma correcta.

Dando la vuelta a la tortilla para resolver el problema

Si bien es cierto que podemos indicar que propiedades CSS dedicamos a que navegador dentro de nuestra hoja de estilos, no es menos cierto que resulta más elegante resolverlo todo en una línea.

Dado que el CSS inicial que tenía desplegado sólo funcionaba bien en Chrome y Firefox, parece lógico pensar que en lugar de dar vueltas para hacerlo compatible con Safari lo suyo sería hacerlo al modo de Safari y ver si es adecuado para el resto de navegadores.

Degradado CSS en una línea para todos los navegadores

Para ello, lo mejor es acudir a la buena documentación que tiene Apple sobre Safari, y ahí encontramos la solución.

Basta para ello realizar una búsqueda en Google con las palabras clave “safari linear gradient” para que nos devuelva en los resultados el acceso a dicha documentación, aunque por si no te apetece indagar, te dejo el enlace a la documentación disponible aquí.

El código que funcionaría para todos los navegadores sería el siguiente:

css-correcto-degradado-safari

Atributo degradado CSS para todos los navegadores

Si prefieres copiar y pegar en tu hoja de estilos, te dejo el código por aquí:

/* Formato del CSS que funciona en todos los navegadores */
 background: -webkit-linear-gradient(bottom,white,white 10%,rgba(255,255,255,0))
Por fin, nuestro degradado mostrado correctamente en Safari

Por fin, nuestro degradado mostrado correctamente en Safari

Como curiosidad, el atributo white 10% describe el porcentaje del elemento HTML que va a ser objeto del degradado, no es un indicador de transparencia como podría parecer en un primer momento.

Y listo, con esto hemos terminado y tenemos un interesante degradado CSS que se representará correctamente en todos los navegadores.

Deja un comentario