más que HTML desarrollo web con estándares
Accesskey en Opera
El atajo de teclado para las accesskey, en los principales navegadores, suele ser Ctrl o Alt + accesskey (un listado completo). En cambio, en Opera la combinación de teclas es Shift + Esc + accesskey.
Aunque en un principio puede parecer más complicado, al tener que pulsar una tecla más, tiene dos ventajas fundamentales:
- Se elimina el problema de posibles conflictos entre las accesskey y los atajos de teclado del navegador
- Con la combinación Shift + Esc, se nos muestra un listado con todas las accesskey disponibles en el documento, lo que hace mucho más intuitivo su uso.
Para Firefox existe una extensión, View Accesskeys, para acceder a las accesskey con Shift + Esc, al igual que en Opera, aunque es una extensión expermiental (por ejemplo no funciona en Ubuntu).
Conflictos entre date_format de MySQL y sprintf de PHP
Un fragmento de código de este tipo:
sprintf (SELECT DATE_FORMAT(fecha, '%d') AS dia FROM tabla WHERE nombre=%s, $name);
Devuelve un error de PHP, ya que se interpreta %d como un parámetro de sprintf, cuando en realidad lo es del date_format de MySQL. Afortunadamente, la solución es muy sencilla.
Para que PHP no interprete el símbolo % como un parámetro de sprintf, debemos indicarlo con %%. Aplicado al ejemplo anterior:
sprintf (SELECT DATE_FORMAT(fecha, '%%d') AS dia FROM tabla WHERE nombre=%s, $name);
Más información
Transparencias en CSS3
Con CSS3, disponemos de 2 propiedades para modificar la transparencia de un elemento: opacity y background: rgba
Opacity
Puede tomar valores entre 0 (totalmente transparente) y 1 (totalmente opaco). El valor de esta propiedad se propaga a los hijos del elemento en cuestión.
opacity: 0.5;
Internet Explorer no soporta esta propiedad, pero podemos obtener el mismo resultado con un filtro propietario.
Degradados lineares sin imágenes
Con la salida de la versión 3.6 de Firefox, los principales navegadores (Firefox, Safari e Internet explorer) ya soportan propiedades para hacer degradados lineares sin imágenes. Además, Google Chrome, al estar basado en Webkit, como Safari, es muy probable que lo haga próximamente.
En los navegadores basados en Gecko y Webkit, podemos hacer degradados con varios colores, en cualquier ángulo e incluso radiales. Lamentablemente, Internet explorer sólo permite degradados lineares entre dos colores, así que vamos a centrarnos en ese caso.
Mostrar siempre las barras de desplazamiento
Si nos encontramos ante una web centrada horizontalmente, y pasamos de una página sin scroll vertical a otra que sí lo tiene (o viceversa), se produce un pequeño salto en la alineación. Al aparecer la barra de desplazamiento, el área de visualización del navegador se reduce y, por tanto, el centro se desplaza unos píxeles, lo que provoca ese salto en la alineación de la web.
Ocurre en todos los navegadores actuales, a excepción de Internet Explorer 6 y 7 que siempre muestran la barra de desplazamiento (cuando no hay scroll, aparece inactiva). Este comportamiento es que el podemos recrear en el resto de navegadores para evitar esos pequeños saltos. De la siguiente manera:
body { overflow-y: scroll; }
Comprobado en Internet Explorer 8, Opera 10.10, Safari 4.0.4, Google Chrome 3.0 y Firefox 3.5.5
Además, aunque la propiedad overflow-y no es válida para CSS 2.1, sí lo es para CSS 3.
Frameworks de desarrollo rápido de CSS
Los frameworks CSS más conocidos, como Blueprint, YUI o 960, nos proporcionan una serie de clases con estilos predefinidos que podemos aplicar. En cambio existen otros frameworks CSS enfocados en simplificar y agilizar el desarrollo de nuestras propias hojas de estilo.
Algunos de ellos son:
Conflictos entre las accesskey y los atajos de teclado del navegador
A pesar de que las accesskey son un punto importante de cara a la accesibilidad de una web, un mal uso de ellas puede tener como resultado una peor experiencia de usuario. Por ejemplo, cuando las accesskey de una web entran en conflicto con los atajos de teclado del navegador.
Por ejemplo, para el menú Archivo en Internet Explorer se usa la combinación Alt + a. Si usáramos ese mismo accesskey (a) en nuestra página, la combinación Alt + a ejecutaría el accesskey de la web y no el menú del navegador, que dejaría de ser accesible mediante atajo de teclado.
Los principales navegadores afectados por este problema son:
- Internet Explorer 5 (y superiores)
- Firefox 1.5 (e inferiores)
- Safari (Windows)
- Google Chrome
Para evitar estos conflictos es recomendable usar sólo una serie de valores “seguros” (que no usan los navegadores) para las accesskey. Estos valores son los números del 0 al 9.
Combinar clases en los selectores CSS
Según el estándar, en los selectores de CSS podemos combinar varias clases, por ejemplo:
.clase1.clase2 {} //No funciona en Internet Explorer 6 e inferiores
Este selector sólo afectará a los elementos que tengan todas las clases.
Incluso podemos combinarlo con un selector por id:
#identificador.clase1.clase2 {} //Funciona a partir de Internet Explorer 4
Esto puede ser una herramienta muy potente a la hora de trabajar con nuestras hojas de estilos.
Ejecutar eventos con jQuery sólo una vez
En jQuery disponemos el método bind para asignar un manejador de evento a un determinado elemento, del siguiente modo:
$("img").bind("click", function(){
//Código a ejecutar cada vez que se haga click en el elemento
});
¿Pero qué sucede si queremos ejecutar el evento una sola vez? Para eso disponemos del método one:
$("img").one("click", function(){
//Código a ejecutar sólo la primera vez que se haga click en el elemento
});