Controlando a seleção com a CSS user-select

O Platform Preview 4 do IE10 inclui suporte para a nova propriedade CSS, -ms-user-select, o que torna mais fácil para os desenvolvedores da Web controlar exatamente qual texto pode ser selecionando em seus sites. Se me observasse o dia todo na minha estação de trabalho, você notaria que sempre seleciono texto enquanto faço leituras no computador. Não sou o único a ler dessa forma; selecionar texto na Internet é importante em muitos outros cenários.

Considere um site de notícias típico. A maioria das páginas inclui um artigo de notícias, cujo conteúdo o usuário precisa ser capaz de selecionar seja porque ele lê selecionando texto ou porque deseja compartilhar o conteúdo. Além disso, em uma página da Web, há alguns menus e links para outras partes do site. Os usuários normalmente não precisam selecionar esses itens. Usando o -ms-user-select, o desenvolvedor da Web pode determinar que a seleção de texto seja permitida no artigo de notícias, mas não nos menus.

O site de "test drive" do IE inclui um exemplo disso.

Aplicar -ms-user-select:none na página inteira e -ms-user-select:element no elemento que contém a postagem do blog permite que somente o conteúdo da postagem seja selecionado. O -ms-user-select:element é uma nova propriedade, introduzida pelo IE, que acreditamos que possa ser útil em muitas situações. Aplicar -ms-user-select:element significa que o usuário pode selecionar o texto do elemento, entretanto, a seleção ficará restrita aos limites do elemento. Quando selecionam o conteúdo de um artigo de notícias, as pessoas provavelmente não desejam selecionar os elementos do rodapé exibidos após o artigo. Aplicar -ms-user-select:element torna mais fácil aos usuários selecionar somente o conteúdo do artigo, sem terem de se preocupar em colocar o mouse na posição exata.

O -ms-user-select aceita quatro valores:

• text – o texto pode ser selecionado
• element – o texto pode ser selecionado, ficando restrito aos limites do elemento
• none – o texto não pode ser selecionado
• auto – se o elemento contiver texto editável, como um elemento de entrada ou elemento com conteúdo editável, o texto pode ser selecionado. Outras formas de seleção são determinadas pelo valor do nó pai.

O auto é o valor padrão do -ms-user-select.

O desenvolvedor pode desativar a seleção de texto, definindo -ms-user-select como none. No IE, quando o texto é definido como -ms-user-select:none, o usuário não pode iniciar uma seleção nesse bloco de texto. Entretanto, se o usuário começasse a selecionar texto em uma área diferente da página, a seleção continuaria para qualquer área da página, incluindo aquelas em que o -ms-user-select estivesse definido como none. No Firefox, se o desenvolvedor usar a definição –moz-user-select:none, a seleção não poderá ser iniciada nessa área e também não poderá ser incluída em nenhuma outra seleção. No Webkit, o uso da definição –webkit-user-select:none fará parecer que o texto não está incluído na seleção, entretanto, se copiar e colar o conteúdo, você verá que ele na verdade está incluído.

O user-select foi proposto inicialmente no módulo User Interface for CSS3 (Interface do usuário para CSS3); esse módulo foi substituído desde então pelo CSS3 Basic User Interface (Interface do usuário básica para CSS3), embora ele não defina a propriedade. Tanto o Mozilla quanto o Webkit dão suporte a suas próprias versões prefixadas dessa propriedade. Entretanto, conforme discutido acima, há algumas diferenças nas implementações.

Brinque com os exemplos no site de "test drive" do IE e dê a sua opinião.

—Sharon Newman, gerente de programas, Internet Explorer