• Saltar a la navegación principal
  • Saltar al contenido principal
Código Genesis

Código Genesis

Tutoriales de WordPress y Genesis Framework

  • Empieza aquí
  • Cuenta
    • Suscripción
    • Perfil
    • Actualizar tarjeta
    • Favoritos
    • Salir
  • Suscribirse
  • Acceder

Aplicar estilos CSS solo a un navegador web

Descubre en este tutorial cómo realizar cambios de CSS que solo afecten a un navegador web (Chrome, Firefox, Edge, Safari…).

Uno de los desafíos para los diseñadores/desarrolladores/implementadores web es que tenemos que asegurarnos de que el resultado final de nuestro trabajo en la web se vea correctamente, no solo en tropecientas resoluciones distintas, sino también en «todos» los navegadores web.

Si llevas en esto el suficiente tiempo te habrás dado cuenta de que los navegadores no renderizan el contenido exactamente igual.

Esto es debido a que utilizan distintos motores de renderizado. Actualmente hay 3 predominantes:

  • Blink/Chromium (desarrollado por Google) > Chrome, Edge, Brave…
  • Gecko (desarrollado por Mozilla) > Firefox
  • WebKit (desarrollado por Apple) > Safari

Si te encuentras en una situación en la que alguno de los navegadores no renderiza el contenido igual que el resto y quieres corregirlo, por suerte, puedes hacerlo usando unas líneas de CSS.

Vamos a ver cómo hacerlo:

Snippets para modificar el CSS en un determinado navegador

A continuación puedes ver qué código tienes que usar si solo quieres que afecte a un tipo de navegador:

Para ver este código y los otros 1801 snippets de esta web,
identifícate o suscríbete aquí.

Solo tienes que elegir el navegador y sustituir el selector, la propiedad y el valor, por los que te interesen.

Como ves en el caso de Firefox y Safari tienes dos posibles estrategias. Y también puedes usar el último snippet si quieres realizar modificaciones tanto en Safari como Chrome.

Conclusiones

Ahora ya sabes cómo realizar modificaciones de CSS que solo afecten a determinados navegadores web.

Si tienes alguna duda te leo en los comentarios. Y si quieres dejarme una sugerencia para futuros tutoriales, envíamela a través del formulario de contacto.

Todo ventajas de ser suscriptor. 😉

CSS

Nahuai Badiola

Desarrollador web especializado en WordPress y Genesis Framework. CEO de Código Genesis y cofundador de OsomPress (temas y plugins para WordPress).

Para dejar dudas o preguntas sobre este código, puedes login o suscribirte.

  • Empieza aquí
  • Sobre Código Genesis
  • Preguntas frecuentes
  • Contacto

Aviso legal · Política de privacidad · Política de cookies · Condiciones de contratación
Copyright © 2023 · Código Genesis

¿Has olvidado tu contraseña?