jlvelazquez.net - accesibilidad, usabilidad, xhtml, css 

Inicio > CSS > Mozilla: navegador centrado en el usuario

 

Artículo de CSS

Mozilla: navegador centrado en el usuario

Personalízalo para saber qué tipo de enlace estás a punto de pulsar.

Si es en ventana nueva, si es a una función de JavaScript... A través de este pequeño artículo, aliñado con un poquito de CSS aprovecharemos las posibilidades que nos ofrece Mozilla para no llevarnos sorpresas mientras navegamos.

¿Por qué en Mozilla?

Mozilla permite dos tipos de personalización; la de la interfaz de la aplicación (por ejemplo, el botón "atrás") y la del contenido de la web (por ejemplo, el color de los enlaces). Cada una de éstas son definidas a través de dos hojas de estilo: userChrome.css para la interfaz y userContent.css para el contenido.

Estas dos hojas de estilo las situaremos (bajo Windows) en la ruta de directorios C:\Documents and Settings\USUARIO\Datos de programa\Mozilla\Profiles\PERFIL\LETRASYNUMEROSALEATORIOS.slt\chrome. PERFIL aparecerá como default si no has creado ningún perfil en Mozilla.

Una vez aquí crearemos con nuestro editor favorito una nueva hoja de estilos que se llamará userContent.css y en la que incluiremos el siguiente código:

a[href^="javascript:"] {cursor: move ! important;}
a[href="#"] {cursor:n-resize ! important;}
:link[target="_blank"], :visited[target="_blank"] {cursor:e-resize ! important;}

Con esas reglas abarcamos tres tipos de enlaces:

  1. a[href^="javascript:"] nos marcará los enlaces del tipo <a href="javascript:funcion()"..>.
  2. a[href="#"] los del tipo <a href="#" onclick="funcion()"...>.
  3. :link[target="_blank"], :visited[target="_blank"] nos avisarán cuando estemos frente a un enlace del tipo <a href="pagina.html" target="_blank">.

Cómo véis, la distinción la hago con tres tipos de cursores y con la regla ! important me aseguro de que prevalezcan mis estilos sobre los del autor. Para ver el efecto, guarda los cambios en el documento y cierra completamente Mozilla (incluido el quick launch).

Esto es aplicable a cualquier elemento de HTML; ¡las posibilidades son infinitas!

Enlaces relacionados:

  • Jesse Ruderman - A fondo con los estilos personalizados en Mozilla. En inglés.
  • Chevrel.org - Foros y noticias sobre Mozilla. En español.

En categoría: CSS | Comentarios: 0 | Ver o añadir comentarios |

Permitida la reproducción parcial o total citando la fuente: jlvelazquez.net