Texto fora da tela para copiar e colar

A relação entre HTML e CSS é especial: misturar conteúdo via HTML com apresentação de CSS para criar uma apresentação incrível. Às vezes, porém, o senhor precisa usar truques de CSS apenas para aprimorar a funcionalidade. Esse pode ser um desses casos.

Ao navegar pelo código do console do Firefox DevTools, notei uma técnica muito inteligente para ocultar o texto na tela, mas garantir que ele esteja presente durante um copiar + colar. A técnica é a seguinte:

<p>Jenny don't change your number <span class="copy-only">8675309</span></p>

.copy-only {
  display: block;
  position: absolute;
  left: -9999999px;
  top: -9999999px;
}

Com o CSS acima, a tela exibe “Jenny don’t change your number” (Jenny não mude seu número), enquanto a cópia dessa linha resultaria em “Jenny don’t change your number 8675309” (Jenny não mude seu número).

Quando o senhor coloca o texto fora da tela por meio do CSS, ele ainda é copiado para a área de transferência quando o usuário faz uma operação de cópia. Basicamente, o senhor está escolhendo o que será copiado, o que pode ser muito útil se espera que os usuários copiem seu conteúdo.