Existen muchas herramientas de CSS que puedes usar.
El día a día en CSS requiere que sepamos de múltiples etiquetas, navegadores y recursos para estilizar nuestras página web.
En este post, te recomendamos 3 herramientas para trabajar con CSS y hacer tus procesos más sencillos.
Herramientas para trabajar con CSS
MDN
La primera de las herramientas para trabajar con CSS es Mozilla Developper Network, la página que todo desarrollador web debe conocer. Aunque la usamos mucho para HTML, la MDN es una página oficial que documenta los estándares web, incluyendo CSS. Es indispensable para los diseñadores web, ya que tiene una lista enorme de todas las propiedades que tiene CSS con explicaciones detalladas y ejercicios.
Puedes consultar la MDN cada vez que te encuentres con una nueva propiedad.En la mayoría de los casos, puedes acceder a este recurso directamente desde tu software de programación al escribir una etiqueta o propiedad y darle clic en su definición.
CanIUse
La segunda de las herramientas para trabajar con CSS que te recomendamos es el sitio web CanIUse, que no es útil solo para CSS, sino para todo tipo de software de desarrollo web. CanIUse nos da información actualizada sobre cómo los navegadores soportan cada propiedad que queramos implementar.
Al buscar una propiedad, CanIUse nos da una tabla con los navegadores más importantes de ordenador y móvil. Su información es de uso público y la revisa una suite de prueba personalizada que puedes encontrar en su página web.
Además, puedes buscar cuánto se usa esa propiedad en cada navegador según tu región objetivo. Esto te permite definir en qué navegador enfocarte para el diseño de tu página web teniendo en cuenta cómo tus usuarios se comportan. También te ayuda a definir cuánto valor tiene una propiedad dependiendo cuánto la usarán tus usuarios.
Navegador – Inspector
La última de las herramientas para trabajar con CSS de la que te vamos a hablar es el panel ” herramientas CSS de desarrollador” de tu navegador. En este panel podrás inspeccionar y editar el HTML y CSS de cualquier página web.
Esta útil herramienta te permitirá editar en vivo el CSS e intentar diferentes diseños antes de comprometerte a implementarlos en las hojas de estilo de tu sitio web. Al entender la jerarquía y el orden CSS de una página ya creada, podrás ahorrar tiempo en el diseño de tu propio sitio web. Para entender esto de verdad, te recomendamos jugar con los elementos de la página web.
A continuación, te enseñaremos dos maneras para crear y editar estilos desde la sección de estilo en el panel de elementos.
Añade una regla
Puedes usar el botón + en la parte superior derecha de la sección estilo para crear una nueva regla. Esto te ayudará a encontrar los estilos del elemento que has seleccionado previamente y editarlos. Las reglas no se quedan guardadas en ninguna hoja de estilo existente, sino que se guardan en la hoja de estilo del inspector. Podrás encontrar y editar esta hoja de estilo en el panel de fuentes, a la derecha de elementos.
Edita una propiedad
En el panel de estilos puedes editar el nombre o el valor de una propiedad existente en la página web. Para esto, solo tienes que hacer clic en el elemento del sitio web que quieras editar. El código CSS aparecerá en el inspector y podrás ver sus propiedades. Para editar el valor de la propiedad, haz clic sobre este y redacta el nuevo valor. Si estás editando el nombre de la propiedad, basta con pulsar enter o tab para editar su valor.
Ten en cuenta que estos cambios no serán permanentes y que se eliminarán una vez recargues la página web. Por esto, te recomendamos copiar los cambios que te gusten en tu propia hoja de estilo.
Ahora que conoces algunas herramientas CSS para diseñadores web, ¿qué opinas?
Ahora que conoces este conjunto de herramientas para trabajar con CSS, ha llegado el momento de ponerlas en práctica y, así, afianzar tus conocimientos.
Para avanzar con tu formación y aprender más sobre los procesos de desarrollo y diseño de páginas web, te recomendamos nuestro bootcamp intensivo: Bootcamp Desarrollo Web. ¡Inscríbete ahora y conviértete en un profesional en pocos meses!
