ScottGu's Blog em Português

Os próximos lançamentos do .NET e Visual Studio incluem vários novos e ótimos recursos e capacidades. Com a ASP.NET 4.5 você verá muitas e boas melhorias nas ferramentas e no tempo de execução ao usar Web Forms e MVC - bem como no núcleo da base de código da ASP.NET, no qual estas melhorias são baseadas.

O post de hoje abrange algumas das melhorias que estão sendo adicionadas na próxima versão do Visual Studio e que tornam o trabalho com CSS e CSS3 ainda melhor em projetos ASP.NET.

Seletor de Cores no Editor de CSS

Nas versões anteriores do Visual Studio, o motor da intellisense dentro do editor CSS fornecia uma lista de nomes de cores preestabelecida. A nova versão do Visual Studio substitui esta lista com um seletor de cores completo que facilita a escolha de cores com base nas cores já usadas em outros lugares dentro da folha de estilos - facilitando também a criação de novos estilos de cores personalizados

Quando você estiver no editor de CSS e editar um valor de cor para uma propriedade CSS, um novo seletor de cores aparecerá automaticamente. Por padrão ele exibirá uma lista de cores utilizadas anteriormente dentro da folha de estilos - e mostrará também uma paleta de cores de amostra com cores padrão. Você pode selecionar uma cor a partir desta lista usando o mouse ou teclado:

Você pode selecionar o ícone "+" para expandir a lista em um seletor de cores completo para uma seleção de cores mais granular. O seletor permite que você controle o canal alfa, convertendo automaticamente qualquer cor em um valor RGBA CSS3 ao mover o controle deslizante de opacidade. O seletor de cores também inclui uma função "color selector" (selecionadora de cor) que permite que você use um conta-gotas para selecionar uma cor de qualquer outro web-site que você tenha carregado em um navegador ou de outras aplicações que você tem em execução no seu sistema:

Ótimo Vídeo: Assista esse vídeo de 60 segundos (em Inglês) para ver o seletor de cores em ação. Ele mostra o uso de outras cores na mesma folha de estilo, criação de uma nova cor, uso das capacidades de opacidade da CSS3, bem como o uso do conta-gotas para capturar a cor de outro aplicativo/site.

Suporte Multi-Browser e CSS3 Snippets (Blocos de Código CSS3)

Escrever folhas de estilo às vezes pode parecer um pouco repetitivo quando se trata de trabalhar com todas as versões específicas de cada navegador para as mesmas propriedades CSS3. Muitas vezes você tem que escrever os mesmos valores de propriedades para cada um dos fabricantes de navegadores - que em alguns casos requer que vocês escreva 5 valores idênticos. É um trabalho tedioso, mas necessário para suportar todas as versões do navegador.

A próxima versão do Visual Studio inclui suporte para blocos de código CSS que geram automaticamente todas as propriedades específicas de cada fabricante. Isso significa que você não mais precisará ficar buscando e digitando para que suas propriedades CSS3 funcionem em todos os navegadores.

Blocos de código CSS funcionam igualmente a outros blocos de código de outros editores dentro do Visual Studio. Por exemplo, para invocar o bloco de código para a propriedade CSS3 transition, basta digitar "transition" ou selecionar o mesmo com a ajuda da intellisense dentro de uma folha de estilo:

Em seguida, aperte a tecla TAB e o Visual Studio irá gerar o bloco de código da propriedade CSS transition para suportar todos os prefixos dos fabricantes de navegadores. Ele também irá permitir que você altere o valor apenas uma vez e, em seguida, propagará a mudança automaticamente para todas as outras propriedades:

Ótimo Vídeo: Assista a este vídeo de 60 segundos (em Inglês) para ver os blocos de código CSS em ação. Ele demonstra como blocos de código CSS podem ajudar com prefixos específicos de cada navegador, bem como dar suporte a cenários como consultas de mídia para suportar vários tamanhos de tela e incorporação de tipos de fonte multi-browser.

Indentação Hierárquica de Código CSS

Uma tendência que temos visto ao olhar em folhas de estilo do mundo real é que os desenvolvedores web muitas vezes estão usando identação para criar e manter relações de pai para filho entre as regras de CSS individuais. Isso cria uma hierarquia em formato de árvore que torna mais fácil ver as relações entre as regras e onde elas logicamente se encaixam no documento:

Na versão anterior do Visual Studio era trabalhoso manter essas hierarquias manualmente, e se você mantivesse a hierarquia manualmente, o formatador do código CSS removeria a indentação extra. Isso significa que você tinha que cuidar da formatação de toda a folha de estilo manualmente.

Na próxima versão do Visual Studio estamos adicionando suporte nativo para que você possa criar hierarquias no código CSS, bem como para que você possa manter a indentação manual quando qualquer seleção ou quando todo o documento for formatado. Isto torna realmente fácil rever a estrutura de uma folha de estilo e as relações complexas da ordem de cascateamento das regras que por vezes aparecem dentro das folhas de estilo.

O novo editor de código CSS no Visual Studio também entende e suporta hacks comuns para código CSS (em Inglês), e nós trouxemos esse conhecimento para o mecanismo de indentação hierárquica para manter a posição de uma regra em cascata, mesmo se ela for prefixada com um hack como ilustrado na imagem a seguir:

Ótimo Vídeo: Assista esse vídeo de 60 segundos (em Inglês) para ver o recurso de indentação hierárquica em ação. Ele mostra a criação de regras CSS hierárquicas e como elas irão funcionar mesmo quando se usa hacks CSS.

Sumário

A nova versão da ASP.NET e do Visual Studio irá tornar mais fácil tirar pleno proveito do código CSS dentro de aplicações ASP.NET. 

Este post cobre algumas das melhorias que estamos fazendo no editor de código CSS dentro do Visual Studio. Meu último post cobriu parte do trabalho que estamos realizando no que diz respeito à Combinação e Minificação de Arquivos JavaScript e CSS. Nos próximos posts eu vou falar também sobre algumas das melhorias que estamos implementando para controles de formulário web da ASP.NET e métodos de ajuda da ASP.NET MVC para fazer melhor uso do código CSS.

Espero que ajude,

Scott

P.S. Além do blog, eu uso o Twitter para disponibilizar posts rápidos e para compartilhar links. Meu apelido no Twitter é: @scottgu

Texto traduzido do post original por Leniel Macaferi.