La vista de lectura es una característica muy popular del navegador Firefox, que cambia la apariencia de una página web, y hace que sea más fácil de leer, eliminando cosas que molesten al leer como pueden ser imágenes, anuncios, encabezados y sidebars. La vista de lectura, sin embargo, no está disponible para todas las páginas webs.
Si la función está disponible para una página, podrás ver el icono para activarlo en forma de un libro pequeño que aparece a la derecha de la barra de direcciones.
Cuenta con algunas opciones incorporadas que permiten a los lectores personalizar el aspecto de la vista de lectura. Vamos a echar un vistazo a dichas opciones antes de mostrarte lo que puedes hacer para personalizar aún más el aspecto de la vista de lectura. Como ejemplo, vamos a utilizar un artículo del National Geographic.
Opciones incorporadas
La vista de lectura de Firefox viene con algunas opciones de personalización incorporadas como poner un estilo oscuro o claro, fondos sepia, tamaños de fuente ajustables y, poder ajustar la fuente a serif y sans-serif. También puedes personalizar el theme reemplazando las reglas CSS de estas opciones que vienen ya incorporadas en el navegador.
Yo uso un estilo oscuro con una serif, lo que significa que necesitaré anular las clases CSS que pertenecen, en mi caso, a .dark y a .serif.
Si deseas personalizar otra variante de theme (estilo + fuente), tendrás que utilizar los selectores de CSS apropiados. Puedes comprobarlos con la ayuda de las herramientas de desarrollo de Firefox pulsando la tecla F12.
Creando un fichero CSS personalizado
Debes crear un archivo llamado userContent.css dentro de la carpeta Chrome, dentro de la carpeta de tu perfil de Firefox para la personalización de la vista lecura. Para encontrar la carpeta de tu perfil de Firefox, escribe “about:support” en la barra de direcciones y pulsa Intro.
Verás una página que contiene los datos técnicos relacionados con tu instalación de Firefox. Haz clic en el botón”Mostrar carpeta”, y se te abrirá la carpeta de tu perfil.
Crear una carpeta llamada “chrome” dentro de tu carpeta de perfil (si no existe ya), y también un archivo al cual vas a llamar userContent.css dentro de la carpeta que acabamos de crear, ya sabes, chrome. La ruta del archivo debería ser la siguiente:
...Profilestu-carpeta-de-perfilchromeuserContent.css
Añadiendo las reglas CSS
Una vez que hayas creado y abierto el fichero userContent.css en un editor de código, es el momento de añadir las reglas CSS. Con el fin de personalizar el diseño de la vista de lectura, es necesario referenciar a la etiqueta body con los selectores apropiados.
Puedes utilizar los siguientes selectores para diferentes opciones por defecto:
/* When dark background is selected */
:root[hasbrowserhandlers="true"] body.dark {
}
/* When light background is selected */
:root[hasbrowserhandlers="true"] body.light {
}
/* When sepia background is selected */
:root[hasbrowserhandlers="true"] body.sepia {
}
/* When serif font is selected */
:root[hasbrowserhandlers="true"] body.serif {
}
/* When sans-serif font is selected */
:root[hasbrowserhandlers="true"] body.sans-serif {
}
También puedes combinar clases, para referenciar una combinación específica de opciones:
/* When dark background and serif font are selected */
:root[hasbrowserhandlers="true"] body.dark.serif {
}
/* When sepia background and sans-serif font are selected */
:root[hasbrowserhandlers="true"] body.sans-serif.sepia {
}
No utilices el selector común: :root[hasbrowserhandlers="true"] para referenciar todos los ajustes a la vez. Funcionará sí, pero también afectará a otras páginas del navegador, como por ejemplo “about: newtab”, ya que sus elementos raíz también llevan el atributo hasbrowserhandlers (que se utiliza para referenciar a los controladores de eventos de las páginas internas de Firefox, como “about:pages”).
Aquí tienes el código que he añadido a mi userContent.css. He cambiado la fuente, el estilo de la fuente, los colores, y he ampliado el contenedor de texto. Puedes utilizar cualquier otra regla de estilo de acuerdo a tu gustos personales.
/** userContent.css
***************************/
:root[hasbrowserhandlers="true"] body.dark.serif,
:root[hasbrowserhandlers="true"] body.dark.serif #reader-domain {
font-family: "courier new" !important;
}
:root[hasbrowserhandlers="true"] body.dark.serif {
background-color: #13131F !important;
color: #BAE3DB !important;
}
:root[hasbrowserhandlers="true"] body.dark.serif #reader-domain {
font-style: italic !important;
}
:root[hasbrowserhandlers="true"] body.dark.serif h1,
:root[hasbrowserhandlers="true"] body.dark.serif h2,
:root[hasbrowserhandlers="true"] body.dark.serif h3,
:root[hasbrowserhandlers="true"] body.dark.serif h4,
:root[hasbrowserhandlers="true"] body.dark.serif h5 {
color: #06FEB0 !important;
}
:root[hasbrowserhandlers="true"] body.dark.serif a:link {
color: #83E7FF !important;
}
:root[hasbrowserhandlers="true"] body.dark.serif #container {
max-width: 50em !important;
}
Ten en cuenta que es necesario utilizar la palabra clave !important en userContent.css para todas las reglas CSS. El navegador preferirá los valores de las propiedades especificadas por el usuario antes que los valores especificados por el autor.
Por lo tanto, cualquier valor establecido por el usuario sin la palabra clave !important no funcionará si una hoja de estilo especificadas por el autor también apunta a la misma propiedad, ya que se anulará.
Antes:
Después:
Fuente: hongkiat.com