Por todos es conocido que a diario utilizamos un variado número de navegadores. Para los desarrolladores web supone un handicap el hecho de tener que adaptar las especificaciones en cuanto a formato y estilo de los contenidos online, para que todos los usuarios que accedan a la información queden satisfechos.
Cada navegador tiene parámetros css básicos preestablecidos con los que se muestran los contenidos web. Estos podemos verlos en las siguientes fuentes para conocer de primera mano la necesidad de resetear antes de desarrollar nuestro proyecto.
- Formato para iexplorer: http://www.iecss.com/
- Formato para Mozilla: http://www.iecss.com/firefox-3.6.3.css
- Formato para Chrome y Safari: http://www.iecss.com/webkit-r61376.css
Dicen que vale mas una imagen que mil palabras, por tanto, vamos a ver un ejemplo. Construimos un documento html básico con su respectivo documento css vinculado.
Obteniendo los siguientes resultados en los distintos navegadores:
Todos vienen con las configuraciones predeterminadas que nombrábamos al principio de este artículo. Que nos generan un molesto borde blanco en los extremos del contenido. ¿Cómo podemos evitar estas configuraciones para nuestros diseños? La respuesta es sencilla, reseteando los valores CSS. Ello se consigue añadiendo una entrada en el documento de hoja de estilos con el siguiente formato:
Con el * lo que hacemos es englobar a todos los elementos a los que se puede dar formato. El siguiente paso es llevar a cero los parámetros que por defecto el navegador trae con valores. Obteniendo los siguientes resultados:
De esta manera conseguimos que nuestros diseños comiencen en la coordenada 0,0. Lo cual da un toque de profesionalidad y calidad a los trabajos y mejora la adaptación de los contenidos a todos los tipos de pantalla y navegador. Hasta aquí la entrada de hoy. Especial agradecimiento a Rubén Soler por permitirme colaborar mano a mano en su blog.
Les saluda Martin Schwarz Torres @martin_scto
Hasta la próxima