Existe uma maneira de usar a mesma folha de estilo CSS para mídia impressa e o layout padrão?

Question

Estou procurando uma maneira de usar a mesma folha de estilo para mídia impressa e para o layout padrão na tela. A vantagem para mim será que não precisarei atualizar 2 arquivos toda vez que atualizar o CSS. Eu preferiria ter uma folha de estilo e especificar regras especiais para mídia impressa, denotando -as de alguma forma ... pode não ser possível, mas pensei em colocar a pergunta por aí.

Answer 1

Existe essa sintaxe, embora eu sinceramente não saiba se é suportado em todos os navegadores (deveria ser):

@media print {
    body {
        background: #fff;
        color: #000;
    }
    /* etc */
}

Veja o parte da mídia do padrão CSS2 em W3.

Answer 2

Se você deseja que os estilos sejam os mesmos em todas as mídias, basta definir os estilos comuns na folha de estilo normalmente (ou seja, não em nenhuma regra de mídia), coloque os elementos específicos da mídia nas regras relevantes.

Se você deseja que alguns estilos se apliquem a um subconjunto de mídia, você pode fazer assim:

@media print {
  body { font-size: 10pt }
}
@media screen {
  body { font-size: 13px }
}
@media screen, print {
  body { line-height: 1.2 }
}

Aqui está um link para o Página W3C relevante