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 1957 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. 😉
