Cómo personalizar la vista de Firefox Reader para una mejor legibilidad
Reader View es una característica popular del navegador Firefox, que cambia la apariencia de una página web, y lo hace más legible por eliminando el desorden visual como imágenes, anuncios, encabezados y barras laterales. Reader View, sin embargo, no está disponible, para todas las páginas de inicio.
Si la función está disponible para una determinada página, encontrará el ícono para habilitarla en forma de pequeño icono del libro se muestra a la derecha de la barra de direcciones.
Hay algunas opciones integradas que permiten a los lectores personalizar el aspecto del Vista del lector. Veremos esas opciones antes de mostrarle lo que puede hacer para personalizar aún más la apariencia de la Vista del lector. Para fines de demostración, utilizaré un artículo de National Geographic..
Opciones pre-construidas
Firefox Reader View incluye algunas opciones de personalización predefinidas, como oscuro, claro y sepia. antecedentes, ajustable tamaños de letra, y serif y sans-serif tipografías. Puedes personalizar el tema por anulando las reglas CSS de estas opciones preexistentes.
Utilizo un skin oscuro con fuentes serif, y esto significa que tendré que anular las clases CSS que pertenecen, en mi caso .oscuro y .serif.
Si desea personalizar otra variante del tema (skin + font), necesitará usar los selectores de CSS apropiados. Puede consultarlos con la ayuda de las herramientas para desarrolladores de Firefox presionando F12.
Crear el archivo CSS personalizado
Necesitas crear un archivo llamado userContent.css dentro de cromo carpeta de tu carpeta de perfil de Firefox para tus personalizaciones de Reader View. Para encontrar su carpeta de perfil de Firefox, escriba acerca de: soporte en la barra de URL y presiona Enter.
Te encontrarás en una página que contiene el Datos técnicos relacionados con su instalación de Firefox.. Haga clic en el botón Mostrar carpeta, y se abrirá su carpeta de perfil.
Crea una carpeta llamada cromo dentro de su Carpeta de perfil (si aún no la tiene), y un archivo llamado userContent.css dentro de cromo carpeta. La ruta del archivo se ve así:
... \ Perfiles \\ chrome \ userContent.css
Agregue las reglas CSS personalizadas
Una vez que hayas creado y abierto userContent.css en un editor de código, es hora de agregar sus reglas CSS. Para personalizar el diseño de la Vista de Reader, necesita apuntar al etiqueta con los selectores apropiados.
Puede utilizar los siguientes selectores para las diferentes opciones predeterminadas:
/ * Cuando se selecciona el fondo oscuro * /: root [hasbrowserhandlers = "true"] body.dark / * Cuando se selecciona el fondo claro * /: root [hasbrowserhandlers = "true"] body.light / * Cuando sepia se selecciona el fondo * /: root [hasbrowserhandlers = "true"] body.sepia / * Cuando se selecciona la fuente serif * /: root [hasbrowserhandlers = "true"] body.serif / * Cuando la fuente sans-serif es selected * /: root [hasbrowserhandlers = "true"] body.sans-serif
También puede combinar las clases, para apuntar a una combinación específica de configuraciones.
/ * Cuando se seleccionan el fondo oscuro y la fuente serif * /: root [hasbrowserhandlers = "true"] body.dark.serif / * Cuando se seleccionan el fondo sepia y la fuente sans-serif * /: root [hasbrowserhandlers = "true" ] body.sans-serif.sepia
No utilice el selector común : root [hasbrowserhandlers = "true"] body para apuntar a todos los ajustes a la vez. Funcionará, pero funcionará. También afecta a otras páginas del navegador., como acerca de: newtab, como sus elementos de raíz también llevan la hasbrowserhandlers atributo (que se utiliza para marcar los controladores de eventos de las páginas internas de Firefox, como acerca de: páginas).
Aquí está el código que agregué a mi userContent.css. Cambié la familia de fuentes, el estilo de fuente, los colores y amplié el contenedor de texto. Puedes usar cualquier otra regla de estilo de acuerdo a tu gusto..
/ ** 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;
Tenga en cuenta que es necesario utilizar el !importante palabra clave en userContent.css para todas las reglas CSS. El navegador agrega valores de propiedad especificados por el usuario Ante los valores especificados por el autor. (El desarrollador de la página web dada, aquí la vista del lector). Por lo tanto, cualquier valor de propiedad especificado por el usuario sin el !importante la palabra clave no funcionará si una hoja de estilo especificada por el autor también apunta a la misma propiedad, ya que se anulará.
Resultado final
Puedes ver los cambios de mi tema de Reader View a continuación. Use sus propias reglas de CSS para personalizar el diseño de su propia Vista personalizada de Firefox Reader.
antes de
Después
Si desea profundizar en la personalización del tema de las herramientas de Firefox, consulte mi tutorial anterior sobre la personalización del tema de las herramientas para desarrolladores de Firefox.
