@media screen and (-webkit-min-device-pixel-ratio:0)

{

	div

	{

		color: red; /* The text will appear red only in Safari and Google Chrome */

 	}

}

El código está claro que no es estandar y solo funciona en Safari/WebKit, Firefox e Internet Explorer.

//HTML

 <div class="example-date">  

  <span class="day">31</span>

   <span class="month">July</span>

   <span class="year">2009</span> 

</div>  

//CSS .year { 	

/* WebKit, Safari */ 	-webkit-transform: rotate(-90deg);   	

/* Firefox 3.5+*/ 	-moz-transform: rotate(-90deg);	  	

/* Internet Explorer */ 	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }

Visto en: Anieto2K 

• px: Ofrece el máximo de precisión a la hora de indicar un tamaño. Aunque se olvidan del usuario, no hacen caso a la configuración del visitante.
• em: Los más difíciles de cuadrar debido al concepto tan abstracto que los envuelve, pero ofrece una forma de ofrecer al usuario mayor control sobre el texto.
• %: Sin duda la opción más limpia y clara de enteder.
• pt: Los pensados para ser usados únicamente para impresión. Están basados en puntos reales de tinta en un papel.
• palabras clave: Sorprendentemente se trata de una de las técnicas más consistente en todos los navegadores.

Conociendo las técnicas y las peculiaridades de cada uno podremos ajustar más nuestro CSS a nuestras necesidades.

Actualización

Las palabras clave o keywords son los que conocemos como xx-small, x-small, small, medium, large, x-large, xx-large. Dependen completamente de la configuración del cliente, que al igual que % y em, permiten que sea la configuración del visitante defina el tamaño ideal.

Ejemplos

Esto es una fuente a tamaño large

Esto es una fuente a 125% del tamaño. (Usa el tamaño del elemento padre como referencia)

Esto es una fuente a 1.3em.

Esto es una fuente a 24px.

Esto es una fuente a 24pt.

Fuente anieto2k

Mirando al pasado. En el inicio sólo había tablas

Esta frase no es del todo cierta, aunque si lo parezca. Las tablas existían como el resto de etiquetas HTML, pero la introducción de border=0 hizo posible que los diseñadores de páginas web contáramos con una rejilla para organizar texto e imágenes y maquetar nuestras páginas. Hasta entonces las tablas se habían utilizado para lo que habían nacido: para organizar datos tabulares.

Posteriormente y gracias a las imágenes transparentes se podían fijar tamaños, posicionar celdas, párrafos, imágenes y una serie de trucos destinados a que la página se viese bien en todos los navegadores. La guerra de navegadores supuso el alejamiento de los estándares marcados por la W3C, allá por 1999. Lo que complicaba aún mas el código y en ocasiones se acudía a distintas versiones para distintos navegadores.

Pero ¿qué tienen de malo maquetar con tablas?

Se puede afrontar desde varios puntos de vista, el primero puede ser el semántico: sencillamente no es lo correcto, no se crearon para eso y no se deben utilizar para eso. Trabajando de esta forma mezclamos presentación y contenido. De esta forma las tablas deben dejarse para lo que sirven: presentación de datos tabulares.

Si queremos fijarnos en objetivos para la empresa: trabajando con estándares un rediseño, un cambio, una modificación a nivel de diseño gráfico es más rápido y por tanto menos costoso. Las páginas serán más accesibles. Los archivos son menos pesados con lo que será menor el tiempo de descarga, menor el consumo de ancho de banda y menor espacio en el servidor.

La solución está clara: CSS y marcado estructural

Pero ¿Por qué utilizar CSS y HTML?

Porque los navegadores actuales van teniendo soporte para estándares, con diferencias, pero se han acercado al estándar. Una vez te acostumbras a sus peculiaridades se puede trabajar para todos ellos.

Por otro lado, la diversidad de dispositivos actuales y futuros desde los que nos podemos conectar (teléfonos móviles, PDAs. Tablet PC, TV) hace que sea necesario separar estructura y contenido, siempre y cuando queramos llegar a cubrir todos los ámbitos. De esta forma con simples cambios en las hojas de estilo, podremos visualizar nuestra aplicación web en todos los dispositivos, adaptando su apariencia al dispositivo.

Garantizar la accesibilidad de un sitio es más fácil si cumplimos estándares. Aunque no garantice la accesibilidad de una página web, ya que debemos tener en cuenta otros factores

Pero sigo sin verlo claro ¿que ventajas?

Accesibilidad. Separar forma y contenido permite hacer llegar la información a diferentes dispositivos, navegadores, lectores de pantalla Posibilitando en buena medida el acceso a personas con discapacidad.

Ancho de banda. Para sitios con muchas visitas trabajar con estándares puede representar un ahorro muy grande. Reduciendo costes con el envío de información innecesaria al usuario. Páginas construidas con XHTML y CSS pueden llegar a reducir un 50% el tamaño de la página original.

Tiempos de carga. Menos código hace que las páginas tarden menos en cargar mejorando la experiencia de usuario. La cualidad más apreciada por los usuarios en un site es la velocidad de descarga. Un usuario medio tarda 10 segundos en perder la atención en la máquina.

Buscadores. Una página diseñada con estándares aparecerá en mejor posición en los resultados de búsqueda debido a que el código es más limpio, las páginas sólo llevan contenido (no diseño), semánticamente es más correcto. La accesibilidad está ligada al posicionamiento en buscadores, google navega como si fuese ciego.

Independencia del dispositivo. El uso de estándares facilita el acceso al contenido de las páginas Web a través de diferentes navegadores y dispositivos. Por lo tanto el mismo sitio Web puede usarse tanto en un teléfono móvil como en el PC, TV, impresora sólo tocando un archivo (CSS) Utilizar estándares puede significar llegar al 100% de los usuarios que visitan la red.

Mantenimiento. Al separar estructura y presentación se permite realizar cambios en todo el sitio editando un único archivo. Cuando se requiera un cambio de aspecto tiempo y coste serán muy reducidos. No es necesario tocar las páginas desarrolladas ni cambiar contenido del sitio.

Control por parte del usuario. El usuario del sitio tiene el control sobre la página, independientemente del dispositivo con el que se conecte. La personalización de su navegador le será útil para visitar el sitio. El usuario puede modificar a su antojo tamaños de letra, colores, botones

Futuro. Los Navegadores se están adaptando a los estándares, de esta forma se garantiza la viabilidad de los proyectos a largo plazo. CSS 2.0 es compatible con el 99% de los navegadores y, si se usa bien, sirve para cualquier plataforma. Un sitio desarrollado con estándares utiliza una tecnología fácilmente compatible con otros productos.

Gestión. Las partes de la página pueden ser cambiadas de disposición, diseño, tamaño en función del dispositivo, la página Por lo que ya no hace falta montar páginas para imprimir, para PDA

Resumiendo

• Mejora la Accesibilidad
• Reducción del ancho de banda
• Menor tiempo de carga
• Optimización para buscadores
• Independencia del dispositivo
• Facilita el mantenimiento (rediseño)
• Entrega el control al usuario
• Garantiza el futuro de la aplicación
• Más fácil de gestionar

Pero ¿eso sacrificará el diseño?

Rotundamente no, trabajar con estándares no significa renunciar al diseño de nuestro sitio web. Significa cambiar un poco nuestra mentalidad a la hora de diseñar, pero sobre todo, a la hora de maquetar. Cualquier diseño se puede maquetar mediante XHTML y CSS, incluso es mejor para realizar una actualización.

Los botones están diseñados para un aspecto muy similar al HTML básico para los input de type button, pero pueden manejar muchas mas interacciones que con un diseño básico. Los botones que estamos usando son lo que ellos denominan “imageless”, y son enteramente creados con HTML y CSS, algunos con JavaScript para determinadas cosas particulares. También son fácilmente skinnables con unas pocas líneas de CSS, que fue un factor clave, ahora que Gmail tiene temas.

Demo: http://stopdesign.com/archive/2009/02/04/recreating-the-button.html
License: License Free

1) Mejorando el escalado y resampleado de las imagenes en Internet Explorer

En Internet Explorer 7 la propiedad de escalado por el método bicubic está deshabilitada por defecto y debemos activarla nosotros desde nuestro CSS indicando que los elementos <img /> recibirán ese estilo:

img {

  -ms-interpolation-mode: bicubic;

}

-ms-interpolation-mode, especifica el método de resampleado de imagenes del navegador.

2) Añade opacidad a Internet Explorer 8

Pese a que la lógica nos decía que Internet Explorer 8 iba a soportar opacity en nuestros CSS, tendremos que esperar a la versiñon final para ver si esta será definitivamente soportada por el navegador, por el momento podemos especificarlo en nuestros CSS:

element {

  -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=80)”;

}

3) 32 hojas de estilo como máximo para Internet Explorer

Internet Explorer limita a 32 el número de hojas de estilo invocadas por página, ya sea mediante el uso de <link /> o @import url;. Si se pasa este número, las siguientes no serán procesadas. Es importante tener esto en cuenta si algun día te encuentras con esto.

4) Cargando en CSS no obstructivo

Los cargando son útiles para indicar al usuario que algo se está procesando y que debe esperar a que esto termine. Cuando se trata de cargar imagenes, es recomendable usar la propiedad background de nuetro CSS para mostrar una imagen de fondo que será reemplazada por la imagen que deseamos mostrar en el momento que esta esté cargada completamente.

img {

   background: white url(’Images/Loading.gif’) no-repeat center;

}

5) Distingir entre Google Chrome y Safari con CSS

Detectar si nuestro usuario está usando Google Chrome o Safari es dificil desde nuestro CSS, pero no imposible. Ahora con este hack podemos distinguir que navegador está usando nuestro usuario pese a que los dos estén usando el mismo motor de renderizado (WebKit).

/* Google Chrome hack */

body:nth-of-type(1) .elementOrClassName {

/* properties go here */

}/* Safari hack */

body:first-of-type .elementOrClassName{

/* properties go here */

}

6) Resetear las transperiencias de los hijos de padres transparentes en Internet Explorer

Cuando hacemos un contenedor transparente los hijos de este absorven la transpariencia del padre convirtiendose en transperentes ellos tambien, para corregir esto debemos resetear la opacidad del elemento:

.parent{

...

filter: alpha(opacity=30);

}.child{

...

position: relative;

// En caso de tener una opacidad diferente

filter: alpha(opacity=50);

}

7) $style, obtén cualquier propiedad CSS de cualquier Objeto

$style es una función crossbrowser que permite obtener cualquier propiedad CSS especificada en nuestro CSS sobre cualquier elemento.

function $style(ElementId, CssProperty) {

 function $(stringId) {

 	return document.getElementById(stringId);

 	}

 	if($(ElementId).currentStyle) {

 		var convertToCamelCase = CssProperty.replace(/\-(.)/g, function(m, l){return l.toUpperCase()});

 		return $(ElementId).currentStyle[convertToCamelCase];

 	}

 	else if (window.getComputedStyle) {

 		var elementStyle = window.getComputedStyle($(ElementId), “”);

 		return elementStyle.getPropertyValue(CssProperty);

 	}

}

8 ) Emulando border-color: transparent en Internet Explorer 6

Por suerte en Internet Explorer 7 ya está soportada este propiedad, pero en Internet Explorer 6 no, y por desgracia aún tenemos que darle soporte. Por suerte podemos solventarlo:

.testDiv {

 ...

 border: solid 10px transparent;

}

// IE Hack

*html .testDiv {

 border-color: pink;

 filter: chroma(color=pink);

}

9)  Exótico hack CSS para Internet Explorer

Ya vimos hace tiempo los diferentes CSS hacks que existían y este es uno de los no recomendados ya que nos evita validar nuestros CSS, pero en situaciones no nos queda otro remedio que sucumbir y mirar para otro lado:

h1{

 color: green;

.color: red;

}

10) Marca de agua en CSS

Una marca de agua nos añade un texto definido por nosotros sobre una imagen, en este caso mediante CSS podemos añadirselo para que el efecto visual sea el de usar una marca de agua, pero no lo añade a la imagen, por lo que no solucionaría problemas de copia de contenido. Ver un ejemplo.

Visto en anieto2k

Styled Menus es un sitio que ofrece una linda colección de menúes en CSS gratuitos para utilizar en nuestros diseños. Todos los códigos son válidos, con lo cual se ajustan a los estándares de diseño y se pueden utilizar en cualquier tipo de sitio sin problemas.

Al entrar en algunos de los menúes tenemos la descripción del mismo, los navegadores en los cuales ha sido probado sin problemas, el enlace de descarga hacia el código fuente y las imágenes (en el caso de que se utilicen), y lo más interesante, un demo del menú funcionando.

Hasta el momento conté 28 menúes disponibles, supongo que a medida que pase el itmepo irán agregando muchos más, pero creo que es un sitio muy interesante que hay que tener en nuestros marcadores.

Visto en punto geek