Webmaster Libre

Personalmente no soy muy partidaria de usar hacks en las hojas de estilo para solucionar las deficiencias de uno u otro navegador, aún así comprendo que hay circunstancias en las que se hace necesario y siempre viene bien tener el conocimiento por si llegase ese momento.

Paul Irish nos ha ahorrado mucho trabajo haciendo una recopilación de hacks que podremos emplear para los diversos navegadores disponibles. Aquí os la dejo, con los comentarios traducidos:

/***** Hacks con selectores ******/

/* IE 6 y anteriores */
* html #uno  { color: red }

/* IE 7 y anteriores */
*:first-child+html #dos { color: red } 

/* IE 7 y navegadores modernos */
html>body #tres { color: red }

/* Navegadores modernos (IE 7 no) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 y anteriores */
html:first-child #cinco { color: red }

/* Safari */
html[xmlns*=""] body:last-child #seis { color: red }

/*safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }

/* saf3, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { background: #FFDECE; border: 2px solid #ff0000  }
}

/***** Hacks con Atributos ******/

/* ie6 y anteriores */
#once { _color:blue }

/* ie7 y anteriores */
#doce { *color: blue } /* or #color:blue */

/* 'Navegadores Modernos' incluye IE8, estés o no de acuerdo..   */

Paul además nos ha dejado una página de prueba con todos los hacks y un enlace a browsershots donde podréis comprobar como funcionan en los diversos navegadores.

Si hay algo que reprocharle a las hojas de estilo en cascada (CSS) es que cada uno las escribimos de la forma que mejor nos conviene y no siempre las optimizamos, tanto en peso como en reutilización de elementos.

Nicolle Sullivan hace una aproximación a las CSS orientadas a objetos (OOCSS), de manera que se generen una serie de modulos reutilizables y seamos capaces de crear hojas de estilo ligeras y manejables incluso para sitios grandes.

Además de presentarnos la idea mediante la metáfora de crear piezas de lego con las que ir construyendo nuestros sitios, de manera que mantengamos la consistencia en el diseño, el respeto por los estándares, la semántica (separando los contenedores del contenido y el código del diseño) y el peso de los archivos de estilos bajo control, nos deja su código fuente liberado con licencia libre en GitHub.

El concepto me parece muy interesante, sobre todo desde el punto de vista de la facilidad de legar el código a otros desarrolladores y permitir crear nuevas páginas de un sitio con rapidez, sin duplicar elementos y manteniendo la consistencia a lo largo de todo el sitio, independientemente de quien haya tocado.

¿Qué os parece a vosotros?

Vía Ajaxian

Una de las novedades más esperadas de CSS 3 es la posibilidad de definir que cualquier elemento de una página se comporte como parte de una tabla. Con esto podremos hacer que un div pueda tener algunas caracteristicas muy deseadas que ya poseían las celdas de una tabla (sobre todo el centrado vertical, por lo menos en mi caso).

Con esta nueva característica han surgido voces que han empezado a hablar de una nueva forma de componer estructuras de página, sin flotes, sin tantos jaleos, otorgándole a nuestros divs esas cualidades de tabla pero sin llegar a volver a maquetar con tablas.

Es un lío, desde mi punto de vista suena raro ya desde el mismo principio. Salimos en desbandada de las estructuras montadas sobre tablas para volver a algo igual pero puede que incluso más complicado.

Puede que gracias a una inteligente estrategia de marketing, el libro editado por Sitepoint “Everything you know about CSS is wrong” (del que podéis leer un capítulo en Digital Web Magazine, en inglés) se ha extendido como la pólvora la idea de que el futuro está en esta maquetación con pseudo-tablas.

Hasta ahora no había leído más que piropos a esta aproximación y me había reservado mi opinión (no me gusta la idea) para cuando pudiera trabajar más con la idea, siempre pensando que al no haberla probado demasiado no podía juzgar. Pero hoy me entero vía CSS Tricks de que gente tan importante como Eric Meyer pone en entredicho esta idea por poco semántica y por volver a dejarnos atados al orden dentro del código fuente para mostrar los elementos. Por no hablar de la falta de compatibilidad hacia atrás (y si, sé que todo el mundo debería llevar el navegador en la última versión pero también sé que es utópico creer que sucederá).

Como ya digo, para mí la idea es una locura. Prefiero seguir peleandome con los elementos flotados que empezar a falsear elementos y tener que editar el HTML cada vez que quiera cambiar algo de sitio (¿no era esa una de las ventajas de dar estilo con CSS?), pero ¿y vosotros? Maquetación con tablas CSS ¿si o no?

Supongo que ya os habréis dado cuenta de que, cuando seleccionamos texto en una página web el color viene determinado por el navegador.

En algunos casos ese color, generalmente azul, que pone el navegador como fondo al texto seleccionado es o poco legible o simplemente desentona terriblemente con el sitio web.

Mediante CSS podremos controlar el color del texto seleccionado de nuestros sitios y, así, dar un toque más de refinamiento a nuestros diseños.

El código es tan sencillo como:

::selection {  /* Para Safari, Chrome, Konqueror, Opera etc.*/
     background: #006ab3;
     color: #fff;  }
::-moz-selection { /* Para Firefox, Flock, etc. */
     background: #006ab3;
      color: #fff;  }

Como seguro que habréis notado por el código, no funcionará en todos los navegadores. Más correctamente no funcionará en Internet Explorer ni nada basado en su motor, pero ya estamos acostumbrados a eso ¿Verdad?

Podéis comprobarlo en vivo seleccionando cualquier texto en el blog.

Vía Brenezl