Condicionales en CSS

En ocasiones hacer compatible un diseño web con los browsers más habituales se complica y terminamos por recurrir a los famosos IE hacks.

A medida que el número de hacks utilizados empieza a ser notorio, el tamaño de los ficheros css aumenta e inevitablemente la velocidad de carga se resiente. Los condicionales CSS son un recurso interesante que permiten separar los hacks para internet explorer del css principal y cargarlos solo cuando los visitantes accedan desde este navegador, evitando la sobrecarga del resto (firefox,opera,chrome,etc).

El código se introduce dentro del head del html y su uso es así de sencillo:

<!--[if IE]>
   <link rel="stylesheet" href="http://todos-los-ie.css" type="text/css" media="screen" />
<![endif]-->

<!--[if lte IE 7]>
   <link rel="stylesheet" href="http://ie7.css" type="text/css" media="screen" />
<![endif]-->

<!--[if IE 6]>
   <link rel="stylesheet" href="http://ie6.css" type="text/css" media="screen" />
<![endif]-->

Los condicionales css no forman parte del estandar HTML y solo son interpretados por motor de renderizado Triton (Internet Explorer).

Convertir PSD a CSS y XHTML

Hace poco más de un mes comenzó en cristalab un curso en vídeo sobre la maquetación de diseños photoshop en CSS y xHTML, creado por micha. El curso no ha finalizado aún pero ya alcanza su quinta entrega.

Os dejo con la primera parte: organización de carpetas y cortar las imágenes necesarias para empezar a maquetar.

Si os gusto el vídeo aquí tenéis los links al resto del material:

• Segunda entrega: Organizar y cortar los elementos del diseño .PSD
• Tercera entrega: Estructura Visual y Armado de XHTML
• Cuarta entrega: Concepto del Modelo de Bloque y Armado completo de Estructura con el CSS
• Quinta entrega: Javascript

Añade la potencia de PHP a tus CSS

Vía anieto2k descubro CssDispatcher, una biblioteca para manejar CSS sobre PHP que permite procesar múltiples hojas de estilo como plantillas PHP, unirlas, minimizarlas y servirlas dependiendo del navegador.

Mezclar las tecnologías de programación con el lenguaje de estilos CSS puede resultar interesante para grupos de trabajo en los que el diseñador tenga unos conocimientos básicos de programación, esta biblioteca es un claro ejemplo de como añadir potencia y comodidad a la hora de escribir, mantener y aumentar el rendimiento de las hojas de estilo.

Variables PHP en CSS

El uso de variables dentro de las CSS puede ayudarnos a realizar pequeñas modificaciones (cambios de colores o tamaños de texto) sin esfuerzo:

.paginacion { border: 1px solid <?=$rojo ?>; }
.paginacion a { color: <?=$rojo ?>; }

Hojas de estilo adaptadas al browser

Con CssDispatcher definir CSS específicas para el navegador es tan fácil como añadir un segundo parámetro en el constructor de la clase:

$styles = new CssDispatcher;
// Este CSS solo se enviará cuando sea Internet Explorer 6
$styles->add(new Css('ie-hacks.css.php', Css::UA_IE6));
$styles->add(new Css('general.css.php'));
$styles->render();

Puedes especificar las siguientes familias de navegadores: Internet Explorer 6, Internet Explorer > 6 , Gecko y WebKit. También puedes utilizar los sinónimos UA_MOZILLA, UA_FIREFOX, UA_SAFARI y UA_CHROME respectivamente.

Más info

CSS 3D en WebKit

El próximo Safari, que vendrá incluido en Mac OS X Snow Leopard, introducirá efectos tridimensionales renderizados a partir de CSS.

En este video nos muestran un efecto visual 3D, al más puro estilo cooliris, creado con HTML, CSS y JavaScript corriendo sobre la última WebKit nightly.

Además, todos estos efectos tridimensionales con CSS han sido propuestos como estándares. De ser aprobados podríamos verlos en las futuras versiones de cualquier navegador.

Existe una demo que podéis probar siempre que tengáis la última versión de WebKit (r45824 o superior) instalada.

webtips 04: Optimizar la carga de una página web 2/2

Cuarta entrega de webtips, segunda parte. Seguimos con los consejos para agilizar la carga de nuestra web de la mano de Yslow.

En el vídeo se me olvida comentar la subpestaña tools de Yslow. En la misma encontrareis diferentes herramientas listas para usar (hace uso de páginas externas, pero eso es lo de menos). Aquí tenéis el listado de utilidades y sus respectivas descripciones:

Read more

webtips 04: Optimizar la carga de una página web 1/2

Cuarta entrega de webtips. En esta ocasión vamos a ver algunos consejos para agilizar la carga de nuestro proyecto web, tanto del lado de el servidor como de el cliente.

Aquí tenéis la primera parte de el vídeo, 24 minutos. Mañana pondré la segunda, 20 minutos más.

El audio “rasca” un poco, definitivamente tengo que hacerme con un micrófono nuevo que con este no me las arreglo. Tenéis los enlaces a las páginas vistas en el tutorial así como la descarga del vídeo completo en “leer más/read more”.

Read more

Webtips 02 : Efecto con jquery 2/2

Segundo videotutorial (segunda parte), 15 minutos de vídeo donde veremos los últimos pasos para crear el efecto que empezamos la semana pasada.

Tenéis el vídeo en youtube y el link para descargar el vídeo en hd (73 mb – 1440x 900 px).

Read more

Webtips 02 : Efecto con jquery 1/2

Segundo videotutorial, veremos un curioso efecto con css  y jquery inspirado en el efecto  parallax. Aquí teneis la primera parte del video, 26 min, que finalizara la semana que viene. Creo que este video ha quedado bastante mejor que el anterior. Pero bueno… ya me contareis

Como siempre os dejo el vídeo en youtube y el link para descargar el vídeo original en alta resolución (133 mb – 1440x 900 px).

Read more

lo mejor de la semana en la red

Mininova empieza a aplicar filtros a los torrents
El miedo a ser denunciado tras el juicio a piratebay crece entre los distintos trackers.

Mientras tanto el fundador de Pirate Bay nos vuelve a sorprender sacándose de la manga el ataque DDo$.
Ha pedido a la comunidad que le ayuden a pagar los $30 millones de multa que le impusieron enviando cantidades de 13 céntimos USD a la firma de abogados encargada de cobrar la multa. La firma tendrá que pagar al banco un recargo por cada transacción, lo que representará una perdida de dinero mayor que la cantidad recaudada. Qué grande eres Svartholm, qué grande

16 Tips SEO de un empleado de Yahoo!
Interesante articulo para aquellos que tengáis vuestra propia web

Obtener el uso horario mediante la latitud y la longitud en PHP
Hace uso de la API de google maps y geonames.org. Ofrece además el código PHP y  javascript (Mootools).

Firefox 3.6 podría abandonar a Windows 2000
Microsoft ya no vende Windows 2000 y su soporte oficial terminará en Julio del próximo año. De abandonarlo se reduciría la complejidad del código de Firefox

Cubos 3D usando CSS Transformations
La futura especificación CSS3 promete y mucho. Aquí tenéis un pequeño adelanto, que por el momento únicamente funciona sobre Safari, Chrome y Firefox 3.5

videotutorial: sprites css

Primer vídeo de desarrollo web. Aprenderemos a usar sprites css con un ejemplo real. La calidad del sonido flojea un poco, mi primer vídeo… y con trancazo, mejorara en el próximo. Os dejo el vídeo en youtube y el link para descargar el vídeo original en alta resolución (98 mb – 1440x 900 px).

Read more

lo mejor de la semana en la red

7 diferencias javascript entre firefox e internet explorer
Interesante referencia para aquellos que no hagan uso de ningún framework js

Aplicaciones de escritorio en php
Introducción a php-gtk

Crea tus propios diseños css desde 0
960 Grid System, photoshop y un poco de paciencia

Presentaciones de la ultima MySql Conference & Expo 2009
Optimizaciones, clusters, mejoras de rendimiento, etc

Mootools file manager
Curradísimo script para mootools que permite subir,ver y modificar tus ficheros vía browser

Linux llega al 1% de cuota de mercado y Mac OS roza el 10%
Informe del mes de abril de NetApplications

El Partido Pirata sueco en el Parlamento Europeo
Un sondeo revela que obtendría los votos necesarios para contar con un escaño en el Parlamento Europeo

Blogs interesantes sobre seguridad
Recopilación de los mejores blogs de dicha temática (phising, bugs…)

Lo mejor de la semana en la red

OCR con JavaScript
Detección de texto mediante javascript

Introducción a Code Igniter (framework php)
Primeros pasos con CI

50 herramientas para php extremadamente utiles
Debugging, testing, documentación…

Resaltar sintaxis de código en nano (Linux)
Tunning para el famosos editor de texto para consola

Cosas curiosas que podemos hacer con la API Google Maps
Street view, reverse geocoding, etc

40 packs de iconos
Algunos esta realmente bien

30 tecnicas de navegación CSS
Ejemplos funcionales para dar tus primeros pasos con css

Fonera 2.0 ya disponible
Tentación….

Sugerir actualización del navegador a los usuarios de IE6
Yo se lo sugeria también a los usuarios de IE7