Sejamos sinceros. Configura o layout de uma aplicação Web feita em ASP.NET com WebForms e consequentemente seus WebControls é um desafio e tanto para os Designers. Isso acontece porque ainda é um mistério completo o que vai sair do “outro lado da linha”, ou seja, quais elementos HTML serão gerados na saída do navegador.
A engine de renderização do ASP.NET é inteligente o suficiente para promover mudanças no código gerado dependendo das capacidades do navegador. Mas como essas alterações são mais na questão do comportamento e geração de scripts, é possível estabelecer um padrão de geração de componentes HTML e WebControls para controlar melhor a configuração de estilos.
O pessoal do blog Nima Dilmaghani publicou uma tabela com a correspondência padrão entre WebControls e componentes HTML correspondentes tentar facilitar o mapeamento de estilos, que pode ser vista abaixo.
| ASP.NET Control | HTML Element |
| Label | span |
| TextBox | input type=”text” |
| TextBox TextMode=”MultiLine” | textarea |
| TextBox TextMode=”Password” | input type=”password” |
| Button | input type=”submit” |
| LinkButton | a href=”javascript:__doPostBack(’LinkButton1′,”)” |
| ImageButton | input type=”image” |
| HyperLink | a |
| DropDownList | select |
| ListBox | select size=”4″ gives you 4 rows |
| ListItem | option |
| CheckBox | input type=”checkbox” |
| RadioButton | input type=”radio” seguido de um label para apresentar o texto |
| RadioButtonList | um table com tr e td, sendo um td para cada item da lista. Em cada td, há um conjunto de controles equivalente ao RadioButton |
| Image | img |
| ImageMap | img and a map tag holding one or more of the following 3: |
| CircleHotSpot | area shape=”circle” |
| PolygonHotSpot | area shape=”poly” |
| RectangleHotSpot | area shape=”rect” |
| Table | table |
| TableHeaderRow | tr |
| TableRow | tr |
| TableFooterRow | tr |
| TableHeaderCell | th |
| TableCell | td |
| BulletedList | ul with each list item: |
| ListItem | li |
| HiddenField | input type=”hidden” |
| Literal | Sem html correspondente. |
| Calendar | table complexa |
| AdRotator | a |
| FileUpload | input type=”file” |
| Wizard | uma table complexa. Isso se o estilo padrão for mantido. É possível definir templates customizados para os passos do Wizard, deixa no layout mais amigável a padronizado, facilitando a aplicação de estilos. |
| Xml | <?xml version=”1.0″ encoding=”utf-8″?> |
| MultiView | MultiView não gera elementos html diretamente. Apenas seu conteúdo e controles são gerados. |
| Panel | div |
| PlaceHolder | Placeholder não possui elemento html correspondente. O que será renderizado é referente aos controles que nele forem adicionados através do método PlaceHolder.Controls.Add() não sequência em que forem adicionados. |
| Substitution | Sem html correspondente |
| Localize | Sem html correspondente. O conteúdo é exibido diretamente |
| Validation controls | span |
É bom lembrar que a partir da versão 2.0, o ASP.NET dispõem do recurso de Themes. Este permite um mapeamento entre WebControls e classes CSS, o que em teoria despreocupa os Designers, já que não é mais necessário saber o que será gerado no HTML final. O desenvolvedor mapeia através de um arquivo .skin os controles e as respectivas classes CSS que serão aplicadas e estes. Como sugestão, pela experiência que tive, vale a pena gastar um tempo explicando para os Designers como funciona o arquivo .skin para que a partir daí, ele tenha controle total da aplicação de estilos em páginas aspx baseadas em WebForms.
De resto, é só orientar os desenvolvedores a não poluir demasiadamente o HTML gerado para não atrapalhar a aplicação dos estilos.
Adicionalmente, os colegas do blog ainda listaram 10 regras para a boa utilização e aplicação de css em páginas ASP.NET:
http://nimad.wordpress.com/2007/10/02/10-rules-for-effective-use-of-css-in-aspnet/
Bom divertimento!
Tomás