ASP.NET: Declaración DOCTYPE y su efecto sobre el diseño de webforms

22 11 2010

Supongo que más de uno se habrá preguntado que significa o para que sirve el tag (o declaración) DOCTYPE que encontramos en los web form creados en Visual Studio. Tras crear un nuevo webform observaremos que se nos crea la siguiente declaración tras la directiva @Page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Pues bien, el tema tiene su miga! Para los más curiosos os recomiendo el link http://aspnetresources.com/articles/doctype.aspx donde se explica muy detalladamente el origen, significado y alguna que otra curiosidad al respecto. Pero el motivo de mi artículo no es el de explicar su significado o propósito (para eso ya hay páginas enteras). El motivo de este artículo es el comentaros una de las consecuencias una vez más de no prestar (o no tener suficiente tiempo para prestar…) atención a los que por defecto nos crea Visual Studio.

Ejemplo de webform creado en VS2008 SP1 (NET 2.0) donde se añade automáticamente el DOCTYPE

En esta ocasión tras haber creado muchas páginas ASP.NET en muchas integraciones de MSCRM he descubierto ( o mejor dicho, por fin he podido prestar atención!!!) los efectos de esa ‘inofensiva’ declaración DOCTYPE. Pues bien, los que tengáis paciencia o interesa por haber leído el link donde se describe la declaración DOCTYPE habréis comprendido, entre otras cosas, que esa declaración permite que la página tan sólo utilice objetos con compatibilidad sobre unas versiones de IE (no entraré en detalle). Pero, nunca hubiera imaginado que esa declaración afectaría al comportamiento de ciertos estilos o controles!!!

Uno de los temas en los que he dedicado más tiempo ha sido en poder crear un formulario web en el que el contenido de la página se redimensionara al variar el tamaño de la ventana. Una de las opciones que uno piensa en primer lugar és crear una tabla con altura y anchura 100%, ¿correcto?. Pues bien, si dejamos la declaración DOCTYPE que nos aparece al crear el web form, el atributo altura 100% (height en el style) NO funcionará! Por tanto, desde hace mucho tiempo he utilizado la solución del control panel y código JavaScript en los eventos onload y onresize para redimensionar el panel al cambiar las dimensiones de la ventana… Harto de ver en mil y un foros que la gente utilizaba el height 100%, me paré a investigar porqué a mí no me funcionaba y, finalmente, encontré la explicación en la declaración DOCTYPE.

Como conclusión, para poder utilizar todas las novedades del lenguaje HTML, así como las característica completas de JavaScript y, en definitiva, estar a la última, se debe eliminar la declaración DOCTYPE que añade Visual Studio al inicio de los nuevos web forms que creemos. Muy probablemente seguro que existe alguna cofiguración de VS para evitar que se cree esa declaración por defecto… si alguien la conoce o la encuentra, por favor, añadidlo en u comentarios a este artículo, gracias.

Resultado de mostrar una <table> con la dimensión height a 100% con la declaración DOCTYPE

El mismo código anterior pero sin la declaración DOCTYPE

Como observamos en el ejemplo, sin la declaración DOCTYPE la dimensión height: 100% actúa correctamente!!! Con lo cual es mucho más simple crear formularios autodimensionables sin la necesidad de usar código JavaScript para realizar la ubicación y dimensionado de los controles.

P.D.: No he entrado en mucho detalle sobre el entorno de programación… pero si creo que es importante destacar que esta situación la he encontrado creando formularios web con Visual Studio 2008 SP1 en proyectos con NET Framework 2.0 (probablemente con proyectos NET Framework 3.0 o 3.5 no ocurra esto).

Anuncios

Acciones

Information

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s




A %d blogueros les gusta esto: