Para todos aquellos (yo incluido) que solo usan la propiedad CSS display con none, block o inline (valor por defecto). Hay un mundo ahí detrás... sobre todo para usarlo para representar elementos "table-like"
Valores posibles
http://www.w3schools.com/css/pr_class_display.asp
Entrando en las profundidades insondables de display
http://www.librosweb.es/referencia/css/display.html
2011/04/05
2011/04/04
Comprobando si el navegador soporta CSS3 con javascript
He encontrado este trozo de código para comprobar si el navegador con el que se está viendo la página soporta cierta propiedad de CSS3. Ojo, hay que pasar la propiedad en notación javascript, es decir, son guión y con la letra siguiente al guión en mayúscula (p.e. border-radius ==> borderRadius)
var supports = (function() {Ejemplo de uso
var div = document.createElement('div'),
vendors = 'Khtml Ms O Moz Webkit'.split(' '),
len = vendors.length;
return function(prop) {
if ( prop in div.style ) return true;
prop = prop.replace(/^[a-z]/, function(val) {
return val.toUpperCase();
});
while(len--) {
if ( vendors[len] + prop in div.style ) {
// browser supports box-shadow. Do what you need.
// Or use a bang (!) to test if the browser doesn't.
return true;
}
}
return false;
};
})();
if ( supports('textShadow') ) {
document.documentElement.className += ' textShadow';
}
2011/04/03
Tablas a la HTML 4.1 y 5
Antes de que me os rasguéis las vestiduras al grito de anatema y apocalipsis, aclaro que no voy a maquetar usando tablas (suspiros de alivio). Solo quiero haceros ver cómo han evolucionado las tablas en HTML para poder usarlas en todo su potencial y para lo que son, para datos tabulados.
El origen
<table>
<tr>
<td></td>
</tr>
</table>
Aburrido, no?, bueno pues voy a poner un ejemplo completo de tabla con sus aditamentos para ver el potencial que tienen. Básicamente lo que quiero recalcar es el uso de los tags <col>, <thead>, <tfooter>, <th> y <td> además del CSS con los pseudo selectores para columnas y filas. Por supuesto, donde sea aplicable se puede usar
El ejemplo completo podéis verlo en http://jsfiddle.net/jrdiaz/QbLYN/
Para ejemplos avanzados con CSS3 podéis visitar http://tympanus.net/codrops/2010/05/03/pimp-your-tables-with-css3/
Y la especificación de tablas HTML5 simplificada para web developers http://developers.whatwg.org/tabular-data.html
El origen
<table>
<tr>
<td></td>
</tr>
</table>
Aburrido, no?, bueno pues voy a poner un ejemplo completo de tabla con sus aditamentos para ver el potencial que tienen. Básicamente lo que quiero recalcar es el uso de los tags <col>, <thead>, <tfooter>, <th> y <td> además del CSS con los pseudo selectores para columnas y filas. Por supuesto, donde sea aplicable se puede usar
El ejemplo completo podéis verlo en http://jsfiddle.net/jrdiaz/QbLYN/
Para ejemplos avanzados con CSS3 podéis visitar http://tympanus.net/codrops/2010/05/03/pimp-your-tables-with-css3/
Y la especificación de tablas HTML5 simplificada para web developers http://developers.whatwg.org/tabular-data.html
2011/04/02
Cebras
Anda que no lleva años dando vueltas el problema de las tablas y pintar cada fila de un color distinto según sea par o impar. Bueno, pues una solución con jQuery en 1 línea es ésta:
$("tr:odd").addClass("odd");Si es que no se puede hacer más en menos. Solo tenemos que acordarnos de lanzarlo al principio. Por supuesto, nuestro CSS tiene que tener algo de chicha:
.odd { background: #ccc; }Ahora bien... si manipulamos una tabla dinámicamente (p.e. la cargamos mediante AJAX) si lanzamos el código tal cual para todos los tr's podemos tener efectos indeseados. Si esto ocurre, siempre podemos resetear las clases antes de llamar al código con:
$("tr").removeClass("odd");Minimalista a más no poder, pero creíais que lo iba a dejar así sin más?... pues no!, se puede hacer más sencillo aún solo con CSS sin javascript... es más, no hay solo una manera si no dos al menos!!!! (IEs 8 y anteriores abstenerse).
Forma 1. nth-child
Usando este pseudo selector de CSS3 se puede hacer la magia. Básicamente lo que define es que para los hijos n, usando una sencilla fórmula se pueden aplicar estilos solo a ellos. Ejemplo:
ul li:nth-child(3n+3) {En el nth-child, n vale desde 0 hasta el número de iteraciones necesarias de modo que si tenemos 3n+3, se aplicará el estilo a los hijos:
color: #ccc;
}
- 3 * 0 + 3 = 3
- 3 * 1 + 3 = 6
- 3 * 2 + 3 = 9
- ...
Así que si queremos aplicar estilo a las filas impares de una tabla habría que hacer:
tr:nth-child(2n+1) {
color: #ccc;
}
Para las pares solo habría que quitar el "+1"
Forma 2. :odd y :even
Vaya tontería, pero si al final resulta que hay un pseudo selector CSS3 que directamente selecciona impar y par respectivamente!. Sí, es prácticamente lo mismo pero te ahorras la fórmula.
ul li:nth-child(odd) { color: #ccc;}ul li:nth-child(even) { color: #ccc;}
Nota: para los no anglófonos... odd = impar, even = par.
2011/04/01
Minimización de fuentes II. Minify.
Lo que hace que funcione esta librería PHP es que incluye en motor de compresión de JSMin que vimos ayer portado a PHP para javascript y CSS (y también HTML) de modo que en tiempo real se minimizan los fuentes ya sean uno a uno o en grupos, lo que además de reducir el tamaño, permite reducir el número de peticiones HTTP.
Antes
Después
La instalación es sencilla... se descarga el paquete y se descomprime en un directorio accesible desde PHP del servidor. A partir de ahí, suponiendo por ejemplo que se ha descomprimido en el document root, solo habrá sustituir las inclusiones javascript y CSS por
<script source="/min/b=directorio_base&f=fichero1.js,fichero2.js,fichero3.js"></script>El directorio base con el b=directorio es opcional y se puede incluir en el nombre de cada fichero.
<link rel="stylesheet" href="/min/b=directorio_base&f=style1.css,style2.css" type="text/css">
Alguno dirá... "espera! y qué pasa con las directivas url() de CSS... si me cambian la localización del CSS, se me escogorciará todo!" y tiene razón... pero el propio minify es capaz de analizar el directorio del CSS y generar el código final con los url cambiados para que se mantenga el camino hasta el fichero indicado en el url.
La ventaja es que las minimizaciones se cachean de modo que cuando se vuelve a pedir el códido minimizado si los fuentes no han cambiado, se devuelve el caché incluso pre-comprimido por gzip haciendo que vaya muy rápido. En el momento que se cambia un fichero, se reminimiza todo y se devuelve el resultado.
Ahora llega el momento es que se está en medio del desarrollo y se quiere depurar el código porque algo está dando lata. Muy fácil... solo hay que añadir al final del URL la coletilla &debug=true (&debug=true) para que no minimice el código y además añada como comentario el número de línea original antes de concatenar los ficheros unos con otros.
Este es el funcionamiento base, pero puede que os pase como a mí, que no me gusta dar "pistas" de la estructura interna de la página o tener mayor control sobre qué se incluyo en el minimizado o no. Pues ello se consigue definiendo grupos de minimización.
Los grupos se configuran en el fichero /min/groupsConfig.php dentro del paquete de minify y son un array asociativo con clave el nombre del grupo y con valor un array con la ruta al fichero a minimizar. Se puede usar en la ruta del fichero el pronombre '//' al principio para indicar el document_root del servidor web. Un ejemplo es:
return array(Para CSSs seria igual. Para incluir un grupo, solo hay que cambiar el /f (&f) del url minimizado, por /g (&g) indicando a continuación el nombre del grupo.
'js' => array('//js/file1.js', '//js/file2.js')
);
Como esto puede ser un tanto engorroso, minify proporciona una herramienta para generar el código a incluir en el groupsConfig.php simplemente abriendo la dirección /min de nuestro servidor sin parámetros, con lo que se muestra una interfaz para añadir ficheros y al final se genera el código PHP a pegar.
Minify, además tiene estructura modular y se le puede integrar el toolchain para el closure compiler de google, otros motores de minimización como por ejemplo el jsmin+ o el yui. Para ésto hay que mirar la documentación.
No hay que llegar a tantas virguerías ya que el caso más común que se puede dar es que haya código ya minimizado porque forme parte de otro paquete y que no se quiera minimizar ya que al reminimizar un código minimizado con otro motor de lugar a un código inválido y nos volvamos locos al no poder depurar. La solución es usar el módulo de trasformación de código que se usaría para cosas más complejas como he dicho antes pero forzando que la salida sea igual a la entarada. Un ejemplo con el jQuery:
//'//directorio/js/jquery-1.5.1.min.js' // Línea inicialnew Minify_Source(array('filepath' => '//directorio/js/jquery-1.5.1.min.js','minifier' => create_function('$a', 'return $a;'))) // Línea nueva
Realmente es más complicado explicarlo que usarlo. Quizás no de la mejor tasa de compresión de todas, pero funciona tan bien y es son tan fáciles de mantener la reglas que no da ni pereza. Yo lo que hago es generar un grupo para el CSS con todos los CSS aplicables y 2 ó 3 grupos de javascript con más o menos paquetes en función del uso más normal en las distintas páginas e incluyo el URL correspondiente en cada página.
Suscribirse a:
Entradas (Atom)