Maneira mais rápida de desenvolver e testar folhas de estilo de impressão (evite sempre a visualização da impressão)?

179

Este é o meu processo agora:

  1. Salve as alterações em print.css
  2. Abra o navegador e atualize a página.
  3. Clique com o botão direito do mouse e escolha Imprimir> Visualizar impressão (Firefox, mas qualquer navegador realmente)

É o passo 3 que me incomoda e eu estou pensando se é possível cortá-lo do processo com um plug-in ou algo assim. Basta optar por exibir uma página como mídia de impressão e simplesmente atualizar para ver as alterações.

Como você testa suas folhas de estilo de impressão? Você sempre clica na visualização da impressão após uma atualização?

css firefox Michael
fonte
Obrigado pelas sugestões, pessoal. Eu adoraria se o Mozilla adicionasse uma configuração de desenvolvedor para ativar os recursos "Atualizar" na janela de visualização da impressão (não é o padrão para evitar a confusão do usuário final, é claro). Essa é a minha solução ideal, porque (concordando com o Faust) geralmente preciso visualizá-la na Visualização de impressão para mostrar exatamente como será exibida (imagens de fundo, quebras de página, margens, etc.). O Chrome pode ajudar um pouco, pois mostra uma visualização por padrão. Também verei o complemento Firefox PrintPreview recomendado pela slolife.
Michael
Isso não funcionará no Mac, pois não existe a opção Visualizar impressão. No entanto, você pode ter uma opção PDF na caixa de diálogo de impressão, na qual é possível abrir uma visualização "impressa" em um arquivo PDF temporário. Não tenho certeza se esse recurso está embutido no OSX ou porque eu tenho o Acrobat instalado.
Neil Monroe
Apenas esclarecendo, parece que no OSX, a opção Visualizar impressão não está disponível no menu Arquivo ... mas com a extensão Impressão / Visualização da impressão, você pode ter um botão que a inicia. addons.mozilla.org/pt-BR/firefox/addon/printprint-preview
Neil Monroe

Respostas:

208

Você pode usar a Emulação de tipo de mídia do Chrome, conforme aceito na postagem. Ver print css no navegador .

ATUALIZAÇÃO 21/11/2017

O documento atualizado do DevTools pode ser encontrado aqui: Exibir uma página no modo de impressão .

Para visualizar uma página no modo de impressão:
1. Abra o Menu de comandos . ( tl; dr Cmd+Shift+P (Mac) ou Ctrl+Shift+P(Windows, Linux))
2. Comece a digitar Renderinge selecione Show Rendering.
3. Na lista suspensa Emular mídia CSS , selecione imprimir .

ATUALIZAÇÃO 29/02/2016

Os documentos do DevTools foram movidos e o link acima fornece informações imprecisas. Os documentos atualizados sobre emulação de tipo de mídia podem ser encontrados aqui: Estilos de visualização para mais tipos de mídia .

Abra a gaveta de emulação do DevTools clicando no ícone Mais substituições ••• Mais substituições no canto superior direito da janela de exibição do navegador. Em seguida, selecione Mídia na gaveta de emulação.

ATUALIZAÇÃO 12/04/2016

Infelizmente, parece que os documentos não foram atualizados em relação à emulação de impressão. No entanto, o emulador de mídia de impressão foi movido (novamente):

  1. Abra o Chrome DevTools
  2. Bata escno seu teclado
  3. Clique em ⋮ (reticências verticais)
  4. Escolha Rendering
  5. Marque Emular mídia de impressão

Veja a captura de tela abaixo:

configurações de renderização 12/04/2016

ATUALIZAÇÃO 28/06/2016

Os documentos do Google Developers sobre o Chrome DevTools e a opção "Emular mídia" foram atualizados para o Chrome> 51:

https://developers.google.com/web/tools/chrome-devtools/settings?hl=pt_PT#emulate-print-media

Para visualizar uma página no modo de visualização de impressão, abra o menu principal do DevTools, selecione Mais Ferramentas > Configurações de Renderização e ative a caixa de seleção emular mídia com o menu suspenso definido para imprimir .

configurações de renderização 28/06/2016

ATUALIZAÇÃO 24/05/2016

O nome das configurações mudou mais uma vez:

Para visualizar uma página no modo de visualização de impressão, abra o menu principal do DevTools, selecione Mais Ferramentas > Renderização e ative a caixa de seleção Emular mídia CSS com o menu suspenso definido para impressão .

emular mídia CSS

Patrik Affentranger
fonte
2
@SupaIrish Sim, para o Firefox, veja a resposta de Szymon.
djule5
A documentação está completamente desatualizada e não há emular mídia CSS em qualquer lugar dentro da área "mais substituições". Para onde foi?
TetraDev
2
Está localizado em "console (esc)", depois em "3 pontos verticais", depois em "renderização" e "emular mídia de impressão" na parte inferior - por que tão oculto eu não tenho idéia.
TetraDev
no osx selecionar esta opção parece não fazer nada?
v3nt
165

No Firefox, você pode digitar Shift+F2para abrir uma linha de comando da Barra de Ferramentas do Desenvolvedor e digitarmedia emulate print

Você também pode emular outros tipos de mídia dessa maneira.

Szymon Świtała
fonte
3
Percebi que isso pode não refletir a mesma exibição da visualização de impressão - espacialmente quando se trata de espaço em branco extra - verifique se a visualização da impressão não é diferente depois que você terminar esta subetapa.
Jave.web 12/17
15
Infelizmente, o GLCI foi retirado do Firefox com a versão 62. Um arrasto.
Zerpsed
4
Como habilitar isso sem o GLCI (shift + F12)?
StR 18/01/19
3
@StR Você pode imitar estilos de impressão em Firefox outra maneira agora: stackoverflow.com/questions/47877112/...
TylerH
2
Acabei de testar o que o @TylerH disse no Firefox v68 e funciona.
StR 8/08/19
22

A extensão da barra de ferramentas do Firefox + Web Developer tem uma maneira de ativar / desativar várias folhas de estilo.

Procure no menu CSS. Há um menu para desativar e ativar folhas de estilo individuais e também um menu "Exibir por tipo de mídia".

Além disso, para reduzir as etapas de impressão do PrintPreview no Firefox, tente a extensão PrintPreview , que criará um botão da barra de ferramentas.

Para o Chrome, existe uma porta dessa extensão . Pelo que sei com a versão do Chrome, você pode escolher "Mostrar estilos de impressão"

slolife
fonte
12

Eu não usaria nenhum método de teste que não envolva visualização de impressão. Existem muitas diferenças: as imagens de plano de fundo não funcionam de forma alguma na impressão, mas aparecem nos contextos normais da tela, sendo a principal delas.

No Chrome, control+pvai imediatamente para a visualização da impressão. (Apenas esqueça de ir até a barra de menus). Isso é bem fácil.

Faust
fonte
O Chrome definitivamente não se atém ao que é mostrado na emulação da mídia de impressão. Descobri que, se você não tiver a função de pré-impressão de consulta de mídia cromada executando em menos de 2ms, ela não pintará a alteração.
Cchamberlain #
1
O problema com a visualização da impressão é que ela não permite a inspeção de elementos, portanto, a depuração de itens como preenchimento e margens é extremamente difícil. Ver esses elementos separadamente é a melhor coisa que você pode ter ao tentar depurar problemas da caixa.
Seiyria
6

Você pode simplesmente desativar os estilos de tela e alterar o tipo de mídia para "tela" para a folha de estilo de impressão durante o teste. Isso não será exatamente o mesmo que usar uma visualização de impressão real (quebras de página, largura do documento etc.), mas ainda lhe dará uma boa idéia.

Leo
fonte
5

simples para mim (sem @screenpartes ou similar 1 ) com FF :

  • coloque a @media print { ...parte no final do seu conteúdo CSS
  • comentar apenas a declaração do wrapper/*@media print {*/ ... /*}*/
    • aplicando, assim, o material de impressão aos seus estilos, substituindo-os imediatamente, quando aplicável
  • (Estou usando o LiveReload, portanto, minha página do navegador é atualizada imediatamente após salvar as alterações)
  • ( caso contrário , se não estiver usando o LiveReload :), pressione CTRL+Rpara recarregar a página
  • agora você já pode fazer muitos ajustes típicos de CSS de impressão (estilo da fonte, tamanho da fonte, espaçamentos, cores) nas quais ainda não é necessário visualizar a impressão
  • pressione ALT+F+Vpara abrir a visualização da impressão e ALT+Wfechá-la novamente

1 : se houver, comentar / comentar fora, dependendo da mídia testada, pode não ser um grande problema, caso contrário

Andreas Dietrich
fonte
3

Conforme descrito nesta outra postagem ( Usando o Element Inspector do Chrome no modo de visualização de impressão? ), Você pode usar o chrome para simplesmente emular a folha de estilo de impressão. É ótimo, pois você pode usar o inspetor para ver de onde vêm os estilos, em vez de adivinhar quando a caixa de diálogo de impressão é exibida.

Acesse a caixa de diálogo Substituir configurações clicando no ícone de roda dentada no canto inferior direito do Inspetor de elementos do Chrome. Em seguida, selecione imprimir como o tipo de mídia de destino.

Impressionante!

Caridade
fonte
2

Pelo menos no Chrome: durante o desenvolvimento, adicione à etiqueta do corpo onload="window.print()". Isso fará com que o modo de impressão seja aberto imediatamente após a atualização.

Infelizmente, não parece que as ferramentas do desenvolvedor sejam muito úteis, pois é essencialmente um PDF incorporado.

Aliás, existem maneiras de eliminar a etapa 2. Uma popular é o LiveReload.

nafg
fonte
0

Você pode tentar remover temporariamente sua folha de estilo comum e carregar apenas a impressão com uma etiqueta de link normal.

Andrew
fonte
0

No Chrome 62, o cmd-R / cmd-P funciona bem em um Mac para exibir uma boa visualização de uma página com estilo de impressão @media.

Isso é acessível através das reticências verticais no canto superior direito da janela do navegador (não das Ferramentas do desenvolvedor) / Impressão ...

Use esc para cancelar a janela de visualização.

Portanto, para o meu fluxo de trabalho com o IntelliJ IDEA e o Chrome, são: cmd-s, cmd-tab, cmd-r, cmd-p, esc, cmd-tab e estou de volta ao IDE.

O Chrome 62 no Windows 10 tem o mesmo menu Imprimir ... no mesmo local, acessível com ctrl-p: imprimir no Chrome 62

Mojo Techno
fonte