Impressão no CSS

Tempo de leitura: 4 minutos

Impressão no CSS: A web não é só para telas. Muitas vezes, o usuário precisa imprimir um artigo, um recibo ou um formulário. Sem estilos de impressão dedicados, o resultado é um desperdício de tinta, quebras de página ruins e menus de navegação inúteis impressos no papel.

O CSS resolve isso com a media query @media print, permitindo que você defina um layout otimizado para o papel, garantindo legibilidade e economia.

Neste artigo, exploraremos as técnicas para transformar sua página em um documento profissional para impressão.

1. O Ponto de Partida: `@media print`

Todos os estilos de impressão devem ser definidos dentro da regra @media print. O navegador ignora esses estilos na tela, aplicando-os somente quando o usuário abre a caixa de diálogo de impressão.

CSS

/* Este CSS SÓ é aplicado ao imprimir o documento */
@media print {
  /* Regras de estilo para impressão aqui */
}

/* Este CSS é aplicado SOMENTE na tela */
@media screen {
  /* ... */
}

2. Otimização Essencial para Impressão

Ao otimizar para impressão, o foco muda de interatividade para legibilidade e economia.

A. Ocultando Elementos Não Essenciais

O primeiro passo é remover tudo que é irrelevante no papel, como menus, barras laterais, anúncios e footers complexos.

CSS

@media print {
  /* Oculta navegação, botões e barras laterais */
  .navbar, .sidebar, .ad-unit, button, a[href*="mailto"], 
  .no-print {
    display: none;
  }

  /* Garante que o conteúdo principal use a largura total */
  .main-content {
    width: 100%;
    margin: 0;
    float: none; 
  }
}

B. Otimização de Tipografia e Cor

Priorize o texto em preto sobre fundo branco para máxima legibilidade e economia de tinta.

Otimização	Propriedade	Exemplo
Cor do Texto	Garanta que o texto seja escuro (preto).	`color: #000 !important;`
Fundo	Remova cores de fundo ou imagens complexas.	`background: none !important;`
Fonte	Use fontes de leitura fácil no papel (serifadas são clássicas).	`font-family: 'Times New Roman', serif;`
Tamanho	Use unidades absolutas para o papel.	`font-size: 12pt;`

3. Controle de Paginação e Margens

Ao contrário da tela, o papel tem dimensões fixas. O CSS oferece propriedades para controlar como o conteúdo é dividido entre as páginas.

A. Configuração Global da Página (`@page`)

A regra @page permite definir margens globais para o documento impresso.

CSS

@media print {
  @page {
    /* Define margens de 2cm para todas as páginas */
    margin: 2cm; 
  }
}

B. Controle de Quebras de Página

As propriedades break-* substituem as antigas page-break-* e controlam a divisão do conteúdo.

Propriedade	Função	Exemplo
`break-before`	Força uma nova página antes de um elemento (ex: um novo capítulo).	`h2 { break-before: page; }`
`break-after`	Força uma nova página depois de um elemento.	`p.chapter-end { break-after: page; }`
`break-inside`	Impede que o conteúdo seja dividido por uma quebra de página.	`figure, blockquote { break-inside: avoid; }`

C. URLs em Linha

Uma boa prática é fazer com que os links se tornem visíveis, adicionando o endereço URL ao lado do texto.

CSS

@media print {
  a[href]:after {
    /* Mostra o atributo href do link entre parênteses */
    content: " (" attr(href) ")";
  }
  /* Evita mostrar URLs de links de navegação interna (#) */
  a[href^="#"]:after {
    content: "";
  }
}

✅ Conclusão Impressão no CSS

A otimização para impressão não é um detalhe; é uma questão de usabilidade e acessibilidade. Ao utilizar a media query @media print e as propriedades de controle de paginação (como break-inside: avoid;), você pode garantir que seu conteúdo web seja transformado em um documento impresso limpo, legível e profissional. Testar o resultado através da pré-visualização de impressão do navegador é sempre o passo final crucial.

Toda jornada tem um início, e o início para se tornar um desenvolvedor web é dominar as seguintes tecnologias, que você encontra aqui mesmo: