CSS

Comparativa de CSS3 vs CSS

Logo de CSS

Smashing Magazine, que es en mi opinión el sitio con el mejor contenido de diseño de páginas de Internet, acaba de publicar un artículo que compara principalmente el performance y agilidad de crear un sitio web usando las nuevas cualidades de CSS3 como gradientes, esquinas redondeadas, etc., en contraste con crear el mismo diseño pero utilizando las típicas técnicas para lograr estos efectos que la versión actual de CSS no permite.

El artículo está en la siguiente liga: CSS3 vs CSS : A Speed Benchmark

Como resultado del análisis del artículo se determinó que el sitio que utiliza CSS3 se puede crear 33% más rápido, es 9.5% menor en tamaño físico (KBs) y realiza 45% menos peticiones (viajes) al servidor. Y considerando que, al menos en Google, el tiempo de carga es ahora un factor que influye en el posicionamiento de los sitios en los resultados de búsqueda, definitivamente les recomiendo leer este artículo.

Espero les sirva.

Tip: Problema con multiples etiquetas de FORM en una WebForm de ASP.NET

.NET Logo

.NET Logo

Estoy trabajando en adaptar un diseño HTML/CSS a una aplicación existente de ASP.NET, en Webforms.

Ya estando casi todo lo visual adaptado, y viendose bien, me faltaba transformar una forma de log-in a mark-up de XML, para poder hacer el código de Login.

Como el usuario debía poder loggearse desde cualquier ASPX de la parte pública, decidi transformar los controles de log-in originales en un ASP.NET User Control (ASCX), para poder tener la logica de todo el log-in en un solo lugar, y poder reutilizar el User Control en todas las paginas publicas.

Cree el puro ASCX con el Markup, y abri la pagina en IE. Todo bien.

Convertí el <input type=”button”> a un <asp:ImageButton>.  Error, tengo que agregar la etiqueta de <form runat=server>.

Agregué la etiqueta, View in Browser, no mas error, pero todo el contenido del panel derecho se desplazó hacia abajo.

Despues de batallar como 1 hora con el problema, e intentar googlear, me topé con un artículo que tenía como título “Multiple forms causing strange CSS problem“. Pero yo no tengo multiples formas (eso creí), así que lo ignoré.

Despues de media hora de moverle…recordé que todo el problema empezó cuando agregué la etiqueta de <form runat=server> al ASPX. Regreso al mark-up del User Control (ASCX) y ahi estaba…no había borrado la etiqueta de <form> original al momento de pasar el HTML de la forma de log-in.

Borre la etiqueta de <form> del User Control, y listo…el diseño se ve bien otra vez.

Así que como moraleja….Tener mas de una etiqueta <form> en una ASP.NET Webform te genera problemas raros de CSS.

El layout perfecto de 3 columnas en CSS

Este es un post rápido… estoy por rediseñar un sitio web que utiliza frames, una sola imagen como menú de navegación (image map) y prácticamente que va en contra de cualquier buen principio de diseño web.

Normalmente me gusta crear el layout completamente desde cero, usando solamente codigo mío, pero como no tengo tanto tiempo disponible, tuve que recurrir a utilizar un layout ya hecho. Probablemente tengo más de 300 páginas agregadas como bookmark referentes a CSS, así que fue difícil encontrar el layout que necesitaba.

Al layout que necesito se le conoce como el Holy Grail de CSS….es uno de los layouts más usados, pero que tienen alto nivel de complejidad para lograr diseñarlo sin errores y que sea vea bien en todos los navegadores.

Agradezco a Matthew James Taylor por haberse tomado tiempo de no solamente crear el layout perfecto de 3 columnas en CSS, sino por detallar muy bien el codigo fuente y compartirlo con el mundo.

Tip Rapido: Como hacer que Internet Explorer 7 redimensione las imagenes con mejor calidad

Casi todos los navegadores, con excepcion de Internet Explorer, utilizan interpolación cúbica al momento de redimensionar una imagen, es decir, cuando especificamos un width y height menores a los que la imagen realmente tiene.

Bueno, con solo agregar este estilo a la hoja de estilos, las imagenes redimensionadas se veran mucho mejores en Internet Explorer de lo que se veian antes.


img { -ms-interpolation-mode:bicubic; }

Referencia: msInterpolationMode property

 Scroll to top