Mejoras del editor de CSS en Visual Studio

Este es el séptimo de una serie de post sobre ASP.NET 4.5

<

div>

<

div>

Las próximas releases de .NET y Visual Studio incluyen un montón de nuevas características. Con ASP.NET 4.5 veremos mejoras realmente increíbles tanto en Web Forms como en MVC, así como en el núcleo de ASP.NET en el que se sustentan ambas tecnologías.

En el post de hoy veremos algunas de las mejoras que traerá Visual Studio que hacen del trabajo con CSS y CSS3 se más sencillo en proyectos ASP.NET
Selector de color CSS

En versiones anteriores de Visual Studio el motor de intellisense del editor de CSS nos mostraba una lista de valores posibles con los nombres de los colores. En la nueva release de Visual Studio se ha modificado este comportamiento para que ofrezca un selector de color que ya se hayan usado en la hoja de estilos – también nos permite crear nuevos colores.

Cuando estamos trabajando en el editor de CSS y editamos una propiedad de color en la CSS, nos aparecerá un selector de color automáticamente. Por defecto muestra una lista con los colores que ya hemos usado en la hoja de estilos – además de una paleta con colores por defecto. Podemos seleccionar un color de la lista tanto con el ratón como con el teclado:

Si seleccionamos el “+” veremos un editor de colores que nos permitirá seleccionar un color de manera más granular. Permite controlar el canal alfa convirtiendo el color automáticamente a la escala RGBA moviendo el selector de opacidad. También incluye la función de selección de color que nos permite seleccionar un color de cualquier otra web que tengamos abierta en un navegador o de cualquier aplicación que estemos ejecutando:

Video: En este video de 60 segundos podemos ver el selector de color en acción. Veremos el uso de otros colores de la misma hoja de estilo, la creación de un color, el uso de la opacidad en CSS3, y la selección de color de otro sitio web o aplicación.

Multinavegador y Snippets CSS3

La creación de hojas de estilo puede ser algo repetitivo cuando trabajamos con las diferentes versiones de las mismas propiedades que cada fabricante tiene. Normalmente tenemos que crear las mismas propiedades para cada navegador – lo que conlleva a escribir n valores idénticos. Es un trabajo tedioso pero necesario si queremos soportar todas las versiones de los navegadores.

La próxima versión de Visual Studio incluye el soporte de snippets CSS que autogeneran todas las propiedades específicas de cada fabricante. Con esto no hará falta buscar y escribir diferentes propiedades para que funcionen en cada navegador.

Los snippets CSS funcionan exactamente igual que en otros editores de Visual Studio. Por ejemplo, para llamar al snippet de la propiedad transition de CSS3, tan solo tenemos que escribir “transition” o seleeccionarlo del intellisense en una hoja de estilo CSS:

 

Ahora pulsamos la tecla de tabulación y Visual Studio ejecutará el snippet generando el código necesario con todos los prefijos se cada navegador. También permitirá cambiar el valor sólo en un lugar y propagarlo a todas las demás propiedades:

Video: En este video de 60 segundos podemos ver los snippets CSS en acción. Muestra cómo los snippets nos ayudan con los prefijos de cada navegador, soportando escenarios de varios tamaños de pantalla.

Indentación jerárquica en CSS

Hemos visto una tendencia en la creación de hojas de estilo que suelen hacer la mayoría de desarrolladores y es usar indentación para crear y mantener relaciones padre/hijo entre las reglas de CSS. Esto termina creando una jerarquía que hace más fácil ver las relaciones entre las reglas y a qué parte lógica del documento pertenecen:

En versiones anteriores de Visual Studio era bastante pesado mantener estas jerarquías a mano, y cuando lo hacíamos el formateador de CSS eliminaba las indentaciones. Con lo que teníamos que preocuparnos de formatear toda la hoja de estilos manualmente.

En la próxima release de Visual Studio se ha añadido el soporte tanto para crear jerarquías de CSS y para mantener el documento formateado. Consiguiendo así una mayor facilidad a la hora de revisar la estructura de una hoja de estilos.

El nuevo editor de CSS de Visual Studio también entiende y soporta los hacks comunes de CSS, y lo hemos incorporado al mecanismo de indentación para mantener la posición en la jerarquía incluso cuando estemos usando algún hack:

Video: En este video de 60 segundo vemos el uso de la indentación jerárquica de CSS. Muestra la creación de reglas CSS, y cómo funcionarán con las hacks de CSS.

Resúmen

Las nuevas releases de ASP.NET y Visual Studio harán más sencillo el trabajo con CSS.

Leed también el post sobre empaquetado y minificación de archivos JavaScript y CSS. En próximos post hablaremos sobre las mejoras en los controles de ASP.NET Web Forms y en los métodos helper de ASP.NET MVC que estamos haciendo para un mejor uso de CSS.

Espero que sirva.

Scott.

Traducido por: Juan María Laó Ramos.

Artículo original.