Um guia para o estado das folhas de estilo de impressão em 2018

Hoje, gostaria de voltar a um assunto que já foi abordado na Smashing Magazine no passado - o tópico da folha de estilo de impressão. Neste caso, estou falando de imprimir páginas diretamente do navegador. É uma experiência que pode levar à frustração com imagens enormes (e até publicidade) sendo impressas. Às vezes, no entanto, adiciona um pouco de prazer quando uma página bem otimizada sai da impressora usando um mínimo de tinta e papel e garantindo que tudo seja fácil de ler.

Este artigo irá explorar como podemos criar melhor essa segunda experiência. Vamos dar uma olhada em como devemos incluir estilos de impressão em nossas páginas da web e examinar as especificações que realmente se destacam depois de impressas. Descobriremos o estado do suporte do navegador e como testar melhor nossos estilos de impressão. Em seguida, darei algumas dicas sobre o que fazer quando uma folha de estilo de impressão não for suficiente para suas necessidades de impressão.

Locais-chave para suporte de impressão

Se você ainda não implementou nenhum estilo de impressão em seu site, existem alguns lugares importantes onde uma experiência de impressão sólida será útil para seus usuários. Por exemplo, muitos usuários desejarão imprimir uma página de confirmação da transação após fazer uma compra ou reserva, mesmo que você envie os detalhes por e-mail.

Qualquer informação que seu visitante queira usar quando estiver longe de seu computador também é um bom candidato para uma folha de estilo de impressão. A coisa mais comum que eu imprimo são receitas. Eu poderia carregá-los no meu iPad, mas geralmente é mais conveniente simplesmente imprimir a receita para colocar na porta da geladeira enquanto cozinho. Outros exemplos podem ser direções ou informações de viagem. Ao viajar para o exterior e nem sempre ter acesso aos dados, essas impressões podem ser inestimáveis.

Materiais de referência de qualquer tipo também são frequentemente impressos. Para muitas pessoas, poder fazer anotações em cópias em papel é a melhor maneira de aprender. Novamente, isso significa que as informações estão acessíveis em um formato offline. É fácil para nós nos perguntarmos por que as pessoas querem imprimir páginas da web, no entanto, nosso trabalho geralmente é tornar o conteúdo acessível — no melhor formato para nossos visitantes. Se esse melhor formato for impresso em papel, quem somos nós para argumentar?

Por que esta página seria impressa?

Uma boa pergunta a ser feita ao decidir sobre o conteúdo a ser incluído ou ocultado na folha de estilo de impressão é: “Por que o usuário está imprimindo esta página?” Bem, talvez haja uma receita que eles gostariam de seguir enquanto cozinham na cozinha ou levar com eles ao fazer compras para comprar ingredientes. Ou eles gostariam de imprimir uma página de confirmação depois de comprar um bilhete como prova de reserva. Ou talvez eles gostariam que um recibo ou fatura fosse impresso (ou impresso em PDF) para armazená-lo nas contas em papel ou eletronicamente.

Considerar o uso do documento impresso pode ajudá-lo a produzir uma versão impressa do seu conteúdo que seja mais útil no contexto em que o usuário se encontra ao se referir a essa impressão.

Fluxo de trabalho

Depois de decidirmos incluir estilos de impressão em nosso CSS, precisamos adicioná-los ao nosso fluxo de trabalho para garantir que, quando fizermos alterações no layout, também incluamos essas alterações na versão impressa.

Adicionando estilos de impressão a uma página

Para habilitar uma “folha de estilo de impressão”, o que estamos fazendo é dizer ao navegador para que servem essas regras CSS quando o documento é impresso. Um método de fazer isso é vincular uma folha de estilo adicional usando o elemento <link> .

 <link rel="stylesheet" media="print" href="print.css">

Esse método mantém seus estilos de impressão separados de tudo o que você pode considerar mais organizado, no entanto, isso tem desvantagens.

A folha de estilo vinculada cria uma solicitação adicional ao servidor. Além disso, essa separação agradável e organizada de estilos de impressão de outros estilos pode ter um lado negativo. Embora você possa ter o cuidado de atualizar os estilos separados antes de ir ao ar, a folha de estilo pode sofrer devido a estar fora de vista e, portanto, fora da mente - tornando-se inútil à medida que recursos são adicionados ao site, mas não refletidos nos estilos de impressão.

O método alternativo para incluir estilos de impressão é usar @media da mesma forma que você inclui CSS para determinados pontos de interrupção em seu design responsivo. Este método mantém todo o CSS junto para um recurso. Estilos para pontos de interrupção estreitos a largos e estilos para impressão. Juntamente com as consultas de recursos com @supports , isso incentiva uma forma de desenvolvimento que garante que todo o CSS de um recurso de design seja mantido e mantido em conjunto.

 @media print { }

Substituindo o CSS da tela ou criando regras separadas

Na maioria das vezes, você provavelmente descobrirá que o CSS usado para a exibição da tela funciona para impressão com alguns pequenos ajustes. Portanto, você só precisa escrever CSS para impressão, para alterações nesse CSS básico. Você pode substituir um tamanho de fonte ou família, mas deixar outros elementos no CSS sozinhos.

Se você realmente deseja ter estilos completamente separados para impressão e começar com uma lousa em branco, precisará agrupar o restante dos estilos do site em uma consulta de mídia com a palavra-chave screen.

 @media screen { }

Nesse sentido, se você estiver usando consultas de mídia para seu design responsivo, talvez as tenha escrito para a tela.

 @media screen and (min-width: 500px) { }

Se você quiser que esses estilos sejam usados ​​na impressão, remova a palavra-chave screen . Na prática, no entanto, muitas vezes acho que, se eu trabalho “primeiro móvel”, o layout móvel de coluna única é um ponto de partida muito bom para meu layout de impressão. Por ter as consultas de mídia que trazem os layouts mais complexos apenas para tela, tenho muito menos substituição de estilos para impressão.

Adicione seus estilos de impressão às suas bibliotecas de padrões e guias de estilo

Para ajudar a garantir que seus estilos de impressão sejam vistos como parte integrante do design do site, adicione-os ao seu guia de estilo ou biblioteca de padrões do site, se você tiver um. Dessa forma, há sempre um lembrete de que os estilos de impressão existem e que qualquer novo padrão criado precisará ter uma versão de impressão equivalente. Desta forma, você está dando visibilidade aos estilos de impressão como um cidadão de primeira classe do seu sistema de design.

Noções básicas de CSS para impressão

Quando se trata de criar o CSS para impressão, há três coisas que você provavelmente fará. Você desejará ocultar e não exibir conteúdo irrelevante quando impresso. Você também pode adicionar conteúdo para tornar a versão impressa mais útil. Você também pode querer ajustar fontes ou outros elementos de sua página para otimizá-los para impressão. Vamos dar uma olhada nessas técnicas.

Ocultar conteúdo

Em CSS, o método para ocultar o conteúdo e também impedir a geração de caixas é usar a propriedade display com valor none .

 .box { display: none; }

Usando display: none irá recolher o elemento e todos os seus elementos filho. Portanto, se você tiver uma galeria de imagens marcada como uma lista, tudo o que você precisa fazer para ocultar isso quando impresso é definir display: none no ul .

Coisas que você pode querer ocultar são imagens que seriam desnecessárias quando impressas, navegação, painéis de publicidade e áreas da página que exibem links para conteúdo relacionado e assim por diante. Consultar o motivo pelo qual um usuário pode imprimir a página pode ajudá-lo a decidir o que remover.

Inserindo conteúdo

Pode haver algum conteúdo que faça sentido exibir quando a página for impressa. Você pode ter algum conteúdo definido para display: none em uma folha de estilo de tela e mostrá-lo em sua folha de estilo de impressão. Além disso, no entanto, você pode usar CSS para expor conteúdo que normalmente não é exibido na tela. Um bom exemplo disso seria a URL de um link no documento. Em seu documento de tela, um link normalmente mostra o texto do link que pode ser clicado para visitar essa nova página ou site externo. Quando os links impressos não podem ser seguidos, no entanto, pode ser útil se o leitor puder ver o URL caso deseje visitar o link posteriormente.

Conseguimos isso usando CSS Generated Content. O conteúdo gerado oferece uma maneira de inserir conteúdo em seu documento via CSS. Ao imprimir, isso se torna muito útil.

Você pode inserir uma sequência de texto simples em seu documento. O próximo exemplo tem como alvo o elemento com uma classe de wrapper e insere antes dele a string “Por favor, consulte www.mysite.com para obter a versão mais recente dessas informações”.

 .wrapper::after { content: "Please see www.mysite.com for the latest version of this information."; }

Você pode inserir coisas que já existem no documento porém, um exemplo seria o conteúdo do link href . Adicionamos Conteúdo Gerado após cada instância de a com um atributo href e o conteúdo que inserimos é o valor do atributo href - que será o link.

 a[href]:after { content: " (" attr(href) ")"; }

Você pode usar o seletor CSS :not mais recente para excluir links internos, se desejar.

 a[href^="http"]:not([href*="example.com"]):after { content: " (" attr(href) ")"; }

Existem outras dicas úteis como esta no artigo “I Totally Forgot About Print Stylesheets”, escrito por Manuel Matuzovic.

Estilo de impressão avançado

Se a sua versão impressa se encaixa perfeitamente em uma página, você deve ser capaz de criar uma folha de estilo de impressão de forma relativamente simples, usando as técnicas da última seção. No entanto, uma vez que você tenha algo que imprima em várias páginas (e particularmente se contiver elementos como tabelas ou figuras), você poderá descobrir que os itens quebram em novas páginas de maneira abaixo do ideal. Você também pode querer controlar coisas sobre a própria página, por exemplo, alterando o tamanho da margem.

CSS tem uma maneira de fazer essas coisas, no entanto, como veremos, o suporte do navegador é irregular.

Mídia paginada

A Especificação de mídia paginada CSS é aberta com a seguinte descrição de sua função.

“Este módulo CSS especifica como as páginas são geradas e dispostas para conter conteúdo fragmentado em uma apresentação paginada. Ele adiciona funcionalidade para controlar as margens da página, tamanho e orientação da página e cabeçalhos e rodapés, e estende o conteúdo gerado para permitir a numeração de páginas e a execução de cabeçalhos/rodapés.”

A tela é mídia contínua ; se houver mais conteúdo, rolamos para vê-lo. Não há nenhum conceito de que seja dividido em páginas individuais. Assim que estamos imprimindo, saímos para uma página de tamanho fixo, descrita na especificação como mídia paginada . A especificação de mídia paginada não trata de como o conteúdo é fragmentado entre as páginas, falaremos sobre isso mais tarde. Em vez disso, ele analisa os recursos das próprias páginas.

Precisamos de uma maneira de segmentar uma página individual e fazemos isso usando a regra @page . Isso é usado como um seletor comum, pois direcionamos @page e, em seguida, escrevemos CSS para ser usado pela página. Um exemplo simples seria alterar a margem em todas as páginas criadas ao imprimir seu documento.

 @page { margin: 20px; }

Você pode segmentar páginas específicas com seletores de pseudo-classe de propagação :left e :right . A primeira página pode ser direcionada com o seletor de pseudo-classe :first e páginas em branco causadas por quebras de página podem ser selecionadas com :blank . Por exemplo, para definir uma margem superior apenas na primeira página:

 @page :first { margin-top: 250pt; }

Para definir uma margem maior no lado direito de uma página à esquerda e no lado esquerdo de uma página à direita:

 @page :left { margin-right: 200pt; } @page :right { margin-left: 200pt; }

A especificação define a possibilidade de inserir conteúdo nas margens criadas, no entanto, nenhum navegador parece suportar esse recurso. Eu descrevo isso em meu artigo sobre como criar folhas de estilo para uso com agentes de usuário específicos de impressão, Designing For Print With CSS.

Fragmentação CSS

Enquanto o módulo de mídia paginada lida com as próprias caixas de página, o módulo de fragmentação de CSS detalha como o conteúdo é dividido entre fragmentadores . Um fragmentainer (ou fragment container ) é um container que contém uma parte de um fluxo fragmentado. Este é um fluxo que, quando chega a um ponto em que transbordaria, se rompe em um novo contêiner.

Os contextos nos quais você encontrará fragmentação atualmente estão em mídia paginada, portanto, ao imprimir e também ao usar o layout de várias colunas e seu conteúdo quebra entre as caixas de coluna. A especificação Fragmentation define várias regras para quebrar, propriedades CSS que dão a você algum controle sobre como o conteúdo é dividido em novos fragmentos, nesses contextos. Ele também define como o conteúdo é interrompido na especificação das Regiões CSS, embora isso não seja algo utilizável em vários navegadores no momento.

E, falando em navegadores, a fragmentação é um pouco confusa em termos de suporte no momento. As tabelas de compatibilidade do navegador para cada propriedade no MDN parecem ser precisas quanto ao suporte, porém será necessário testar cuidadosamente o uso dessas propriedades.

Propriedades mais antigas do CSS2

Além das propriedades break-* do CSS Fragmentation Level 3, temos as propriedades page-break-* que vieram do CSS2. Em termos de especificação, eles foram substituídos pelas novas propriedades break-* , pois são mais genéricas e podem ser usadas em diferentes contextos em que ocorrem quebras. Não há muita diferença entre uma página e uma quebra multicol. No entanto, em termos de suporte ao navegador, há melhor suporte ao navegador para as propriedades mais antigas. Isso significa que você pode precisar usá-los no momento atual para controlar a quebra. Os navegadores que implementam as propriedades mais recentes são alias às mais antigas, em vez de eliminá-las.

Nos exemplos a seguir, mostrarei tanto a nova propriedade quanto a antiga onde ela existe.

break-before e break-after

Essas propriedades lidam com quebras entre caixas e aceitam os seguintes valores, sendo o valor inicial auto. Os quatro valores finais não se aplicam a mídia paginada, sendo para multicol e regiões.

• auto
• avoid
• avoid-page
• page
• left
• right
• recto
• verso
• avoid-column
• column
• avoid-region
• region

As propriedades mais antigas de page-break-before e page-break-after aceitam um intervalo menor de valores.

• auto
• always
• avoid
• left
• right
• inherit

Para sempre causar uma quebra de página antes de um elemento h2 , você usaria o seguinte:

 h2 { break-before: page; }

Para evitar que um parágrafo seja destacado do título imediatamente anterior:

 h2, h3 { break-after: avoid-page; }

A propriedade page-break-* mais antiga para sempre causar uma quebra de página antes de um h2 :

 h2 { page-break-before: always; }

Para evitar que um parágrafo seja destacado do título imediatamente anterior:

 h2, h3{ page-break-after: avoid; }

No MDN encontre informações e exemplos de uso para as propriedades:

• quebrar antes
• intervalo
• quebra de página antes
• quebra de página depois

break-inside

Esta propriedade controla quebras dentro de caixas e aceita os valores:

• auto
• avoid
• avoid-page
• avoid-column
• avoid-region

Assim como nas duas propriedades anteriores, há um page-break-inside com alias do CSS2, que aceita os valores:

• auto
• avoid
• inherit

Por exemplo, talvez você tenha uma figure ou uma table e não queira que metade dela termine em uma página e a outra metade em outra.

 figure { break-inside: avoid; }

E ao usar a propriedade mais antiga:

 figure { page-break-inside: avoid; }

No MDN:

• arrombamento
• quebra de página dentro

Órfãos e Viúvas

A especificação Fragmentation também define as propriedades orphans e widows . A propriedade orphans define quantas linhas podem ser deixadas na parte inferior da primeira página quando o conteúdo, como um parágrafo, é dividido entre duas páginas. A propriedade das widows define quantas linhas podem ser deixadas no topo da segunda página.

Portanto, para evitar terminar com uma única linha no final de uma página e uma única linha no topo da próxima página, você pode usar o seguinte:

 p { orphans: 2; widows: 2; }

As propriedades de widows e orphans são bem suportadas (a implementação do navegador ausente é o Firefox).

No MDN:

• viúvas
• órfãos

box-decoration-break

A propriedade final definida no módulo Fragmentation é box-decoration-break . Essa propriedade lida com bordas, margens e preenchimento quebram ou quebram o conteúdo. Os valores que aceita são:

• slice
• clone

Por exemplo, se minha área de conteúdo tiver uma borda cinza de 10 pixels e eu imprimir o conteúdo, a maneira padrão de impressão é que a borda continuará em cada página, no entanto, ela será quebrada apenas no final do conteúdo . Então, fazemos uma pausa antes de ir para a próxima página e continuar.

Se eu usar box-decoration-break: clone , a borda e qualquer preenchimento e margem serão concluídos em cada página, dando a cada página uma borda cinza.

Atualmente, isso só funciona para mídia paginada no Firefox, e você pode descobrir mais sobre quebra de decoração de caixa no MDN.

Suporte ao navegador

Como já mencionado, o suporte do navegador é irregular para mídia paginada e fragmentação. No que diz respeito à fragmentação, um problema adicional é que a quebra deve ser especificada e implementada para cada método de layout. Se você esperava usar Flexbox ou CSS Grid em folhas de estilo de impressão, provavelmente ficará desapontado. Você pode conferir os bugs do Chrome para Flexbox e para Grid.

A melhor sugestão que posso dar agora é manter suas folhas de estilo de impressão razoavelmente simples. Adicione propriedades de fragmentação — incluindo as antigas propriedades page-break-* , bem como as novas propriedades. No entanto, aceite que eles podem não funcionar em todos os navegadores. E, se você achar frustrante a falta de suporte ao navegador, levante esses problemas com os navegadores ou vote nos problemas já levantados. A fragmentação, em particular, deve ser tratada como uma sugestão e não como um comando, mesmo onde é suportada. Seria possível ser tão específico sobre onde e quando você quer que as coisas quebrem que é quase impossível organizar as páginas. Você deve assumir que, às vezes, pode ter uma quebra abaixo do ideal.

Testando folhas de estilo de impressão

Testar folhas de estilo de impressão pode ser um pouco chato, geralmente exigindo o uso de visualização de impressão ou impressão em um PDF repetidamente. No entanto, o DevTools do navegador tornou isso um pouco mais fácil para nós. Tanto o Chrome quanto o Firefox têm uma maneira de visualizar apenas os estilos de impressão.

Raposa de fogo

Abra a barra de ferramentas do desenvolvedor e digite media emulate print no prompt.

cromada

Abra o DevTools, clique no ícone de três pontos e selecione “More Tools” e “Rendering”. Você pode então selecionar imprimir em Emulate CSS Media.

Isso só será útil para testar alterações no layout CSS, conteúdo oculto ou gerado. Ele não pode ajudá-lo com a fragmentação - você precisará imprimir ou imprimir em PDF para isso. No entanto, isso economizará algumas viagens de ida e volta para a impressora e pode ajudá-lo a verificar à medida que desenvolve novas partes do site que ainda está ocultando e mostrando as coisas corretas.

O que fazer quando uma folha de estilo de impressão não é suficiente

Em um mundo ideal, os navegadores teriam implementado mais da especificação de mídia paginada ao imprimir diretamente do navegador, e a fragmentação seria implementada de forma mais completa e consistente. Certamente vale a pena levantar os bugs que você encontra ao imprimir do navegador com os navegadores em questão. Se não solicitarmos que essas coisas sejam corrigidas, elas permanecerão com baixa prioridade para serem corrigidas.

Se você precisar ter um alto nível de suporte de impressão e quiser usar CSS, atualmente você precisaria usar um User Agent específico para impressão, como Prince. Eu detalho como você pode usar CSS para formatar livros ao enviar para Prince no meu artigo “Designing For Print With CSS”.

Prince também está disponível para instalação em seu servidor para gerar documentos bem impressos usando CSS na web, no entanto, tem um preço alto. Uma alternativa é um servidor como o DocRaptor que oferece uma API em cima do mecanismo de renderização Prince.

Existem geradores de HTML e CSS para PDF de código aberto, como wkhtmltopdf, mas a maioria usa mecanismos de renderização de navegador para criar a saída de impressão e, portanto, tem as mesmas limitações dos navegadores quando se trata de implementar as especificações de mídia paginada e fragmentação. Uma exceção é o WeasyPrint, que parece ter sua própria implementação e suporta recursos ligeiramente diferentes, embora não seja tão completo quanto algo como o Prince.

Você encontrará mais informações sobre agentes do usuário para impressão no site print-css.rocks.

Outros recursos

Devido ao fato de que a impressão de CSS realmente mudou muito pouco nos últimos anos, muitos recursos mais antigos na Smashing Magazine e em outros lugares ainda são válidos. Algumas dicas e truques adicionais podem ser encontrados nos seguintes recursos. Se você descobriu um fluxo de trabalho de impressão útil ou uma dica técnica, adicione-o aos comentários abaixo.

• “Eu esqueci totalmente as folhas de estilo de impressão”, Manuel Matuzovic, UX Collective
• “Abordagens de folha de estilo de impressão: lista negra vs lista branca”, Chris Coyier, CSS-Tricks
• “The Perfect Print Stylesheet”, Andreas Hecht, Noupe
• “Como configurar uma folha de estilo de impressão”, Christian Krammer, Smashing Magazine
• “5 dicas e truques poderosos para imprimir folhas de estilo”, Dudley Storey, Smashing Magazine