Como personalizar o Firefox Reader View para melhor legibilidade
O Reader View é um recurso popular do navegador Firefox, que muda a aparência de uma página da Web e torna mais legível por removendo a desordem visual como imagens, anúncios, cabeçalhos e barras laterais. O Reader View, no entanto, não está disponível para todas as páginas iniciais.
Se o recurso estiver disponível para uma determinada página, você encontrará o ícone para ativá-lo na forma de um ícone de livro pequeno exibido à direita da barra de endereço.
Existem algumas opções internas que permitem aos leitores personalizar a aparência do Visão do Leitor. Veremos essas opções antes de mostrar o que você pode fazer para personalizar ainda mais a aparência da Visão do Leitor. Para fins de demonstração, vou usar um artigo do artigo da National Geographic.
Opções pré-construídas
O Firefox Reader View vem com algumas opções de personalização pré-construídas, como escuro, claro e sépia origens, ajustável tamanhos de fonte, e serif e sans-serif tipos de letra. Você pode personalizar o tema sobrescrevendo as regras do CSS dessas opções pré-existentes.
Eu uso uma pele escura com fontes serif, e isso significa que eu preciso para substituir as classes CSS de pertencimento, no meu caso .Sombrio e .serif.
Se você quiser personalizar outra variante do tema (skin + fonte), será necessário use os seletores CSS apropriados. Você pode verificar isso com a ajuda do Firefox Developer Tools, pressionando F12.
Crie o arquivo CSS personalizado
Você precisa criar um arquivo chamado userContent.css dentro de cromada pasta de sua pasta de perfil do Firefox para suas personalizações de visualização do Reader. Para encontrar sua pasta de perfil do Firefox, digite sobre: suporte na barra de URL e pressione Enter.
Você vai encontrar-se em uma página que contém o dados técnicos relacionados à sua instalação do Firefox. Clique no botão Show Folder e ele abrirá sua pasta Profile.
Crie uma pasta chamada cromada dentro de sua pasta de perfil (se ainda não o tiver), e um arquivo chamado userContent.css dentro de cromada pasta. O caminho do arquivo é assim:
… \ Perfis \\ chrome \ userContent.css
Adicione as regras CSS personalizadas
Depois de criar e abrir userContent.css em um editor de código, é hora de adicionar suas regras de CSS. Para personalizar o design do Reader View, você precisa segmentar o tag com os seletores apropriados.
Você pode usar os seguintes seletores para as diferentes opções padrão:
/ * Quando o fundo escuro é selecionado * /: root [hasbrowserhandlers = "true"] body.dark / * Quando o fundo claro é selecionado * /: root [hasbrowserhandlers = "true"] body.light / * Quando sépia o fundo está selecionado * /: root [hasbrowserhandlers = "true"] body.sepia / * Quando fonte serif é selecionada * /: root [hasbrowserhandlers = "true"] body.serif / * Quando a fonte sans-serif é selecionado * /: root [hasbrowserhandlers = "true"] body.sans-serif
Você também pode combinar as classes para segmentar uma combinação específica de configurações.
/ * Quando fundo escuro e fonte com serifa são selecionados * /: root [hasbrowserhandlers = "true"] body.dark.serif / * Quando o fundo sépia e a fonte sans-serif são selecionados * /: root [hasbrowserhandlers = "true" ] body.sans-serif.sepia
Não use o seletor comum : root [hasbrowserhandlers = "true"] corpo para segmentar todas as configurações de uma só vez. Vai funcionar, mas vai também afeta outras páginas do navegador, tal como sobre: newtab, como seus elementos de raiz também carregam o hasbrowserhandlers attribute (que é usado para marcar os manipuladores de eventos de páginas internas do Firefox, como sobre: Páginas).
Aqui está o código que eu adicionei ao meu userContent.css. Alterei a família de fontes, o estilo da fonte, as cores e ampliei o contêiner de texto. Você pode usar qualquer outra regra de estilo de acordo com seu gosto.
/ ** userContent.css *************************** /: root [hasbrowserhandlers = "true"] body.dark.serif,: root [hasbrowserhandlers = "true"] body.dark.serif # leitor-domínio font-family: "mensageiro novo"! important; : root [hasbrowserhandlers = "true"] body.dark.serif cor de fundo: # 13131F! important; cor: # BAE3DB! importante; : root [hasbrowserhandlers = "true"] body.dark.serif # domínio-de-leitor 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 cor: # 06FEB0! importante; : root [hasbrowserhandlers = "true"] body.dark.serif a: link cor: # 83E7FF! importante; : root [hasbrowserhandlers = "true"] body.dark.serif #container max-largura: 50em! importante;
Note que é necessário usar o !importante palavra-chave em userContent.css para todas as regras CSS. O navegador adiciona valores de propriedade especificados pelo usuário antes dos valores especificados pelo autor (o desenvolvedor da página da Web, aqui a Visão do Reader). Portanto, qualquer valor de propriedade especificado pelo usuário sem o !importante A palavra-chave não funcionará se uma folha de estilo especificada pelo autor também segmentar a mesma propriedade, pois ela será substituída.
Resultado final
Você pode ver as alterações do meu tema do Reader View abaixo. Use suas próprias regras de CSS para personalizar o design de sua própria visualização personalizada do Firefox Reader.
Antes
Depois de
Se você quiser mergulhar mais fundo na personalização de temas das ferramentas do Firefox, confira meu tutorial anterior sobre a personalização do tema Ferramentas do desenvolvedor do Firefox.
