Chalalo Land

Tecnologías ASP.NET y un poco Más

Contacto


 Si quierer cooperar, yo feliz, muy agradecido :)

De donde me Visitan?

Locations of visitors to this page

Generic Content

Si te gustaron los articulos, y te animas te estaría muy agradecido!


Recent Posts

Tags

Community

Blogs de MVP

Amigos Geeks

Blogs Imperdibles

GODS

Archives

Email Notifications

Visual Studio 2011–Mejoras en el Editor de CSS

Esto es algo que se estaba echando menos, contar con un editor CSS más completo, que nos permitiera mayor facilidad  a la edición de los estilos. Veamos algunas mejoras:

Reducción automática en la finalización de las instrucciones

Es raro el nombre, pero entendámoslo mejor con un ejemplo:

image

Con solo escribir estas tres letras ya tenemos la propiedad CSS que más se ajusta a lo que queremos. Otro caso es escribiendo las primeras letras de la propiedades por ejemplo font-weight (fw):

image

Identación automática de propiedades heredadas

Muy utili a la hora de organizar nuestras  propiedades CSS (bueno, depende como los organices dentro del código), VS11 nos va identando automáticamente el código, una imagen vale más que mil palabras:

image

Te puedes fijar como P es el ancestro de más alto nivel, luego el div que esta dentro de p y finalmente los link que están dentro del div que a su ves está dentro del párrafo. De todas maneras , sino te parece esta forma de Identar, puedes desactivarla, en las opciones de formato del item CSS.

Soporte para CSS Hack

Espera!, primero, si no sabes que son los CSS Hack, te invito a que veas este articulo de anieto2k http://www.anieto2k.com/2006/12/26/css-entendiendo-y-aplicando-los-hacks/ para que vayas entendiendo un poco más estas artes ocultas para mejorar la aplicación de los CSS entre browser los cuales no todos soportan las mismas propiedades. El soporte incluye el IntelliSense y validaciones para las propiedades que comienzan con el (*) y la línea abajo (_)

image

Los selectores Hack típicos también son incluidos con la funcionalidad que antes hablábamos acerca de la identación, por ejemplo, el siguiente selector hack se usa cuando el navegador des IE7 , y sigue conservando la indentación :

Soporte Proveedores de propiedades específicos ( o más breve, soporte para –moz,-webkit)

CSS3 presenta muchas propiedades que han sido implementadas por los diferentes browser en diferentes momentos. Esto ha obligado a los desarrolladores y diseñadores a escribir propiedades especificas para cada navegador, es el caso de, por ejemplo, border-radius.

image

Comentando y des comentando código

Al igual que en nuestro código programático, tenemos acceso a shortcuts en el editor para comentar Control +K C y des comentar con Control +K U.

Color Picker

Como decimos en el Sur de Chile, esto es una “choreza”, un agregado que nos hará más fácil la selección de colores:

image

Luego podemos expandir esta lista a un completo color picker,en donde además tenemos la posibilidad de seleccionar el alpha channel y es agregado automáticamente al valor de la propiedad:

image

Snippets

Los Snippets en el Editor de CSS nos facilitan la creación de estilos cross-browser. Muchas propiedades CSS3 requieren configuraciones específicas para un browser.

image

y luego al seleccionarlo son agregadas todas las variantes específicas por navegador automáticamente:

image

Algo similar ocurre con las muy de moda CSS3 Media Queries, que solo agregando la @ y luego presionando la tecla tab,  tenemos un intellisence muy útil:

image

Además y como es de costumbre con estas características, podemos crear Snippets personalizados.

Regiones

Esto viene a poner orden en nuestro código, y es el mismo concepto que tenemos en nuestro código programático:

image

Luego al minimizar:

image

Como puedes ver está escrito como comentario, por lo que es ignorado por los browser al momento del render del CSS, sin embargo, nos puede facilitar la tarea de organizar nuestras propiedades. (Ojo región debe ser con minúscula )

Por mi parte, gratamente sorprendido Sonrisa

Nos vemos!
Gonzalo

Posted: 17/9/2011 15:26 por Gonzalo Perez | con no comments |
Comparte este post: