IE10 플랫폼 프리뷰 4는 새로운 CSS 속성인 -ms-user-select를 지원합니다. 이에 따라, 웹 개발자는 웹 사이트에서 선택 가능한 텍스트를 보다 정확하고 간편하게 제어할 수 있게 되었습니다. 여러분께서 제가 일하는 모습을 살짝 엿본다면 컴퓨터 화면의 글을 읽으며 텍스트를 선택하는 모습을 보게 될 것입니다. 이렇게 글을 읽는 사람은 비단 저뿐만이 아닙니다. 인터넷 페이지에서 텍스트를 선택하는 것이 다른 여러 상황에서도 중요하기 때문이죠.
-ms-user-select
일반적인 뉴스 웹 사이트를 예로 들어보겠습니다. 대부분의 페이지에는 뉴스 기사가 포함되어 있고 사용자는 텍스트를 선택하여 읽거나 내용을 공유하기 원하기 때문에 기사 내용을 선택할 수 있어야 합니다. 또한, 뉴스 웹 페이지에는 몇 가지 메뉴와 함께 사이트의 다른 부분으로 이동하기 위한 링크도 있습니다. 하지만, 사용자는 이러한 항목을 잘 선택하지 않습니다. 이러한 사용자의 경향에 맞게 웹 개발자는 -ms-user-select를 사용하여 뉴스 기사의 텍스트 선택은 가능하지만 메뉴의 텍스트의 선택은 하지 못하게 지정할 수 있습니다.
이에 대한 예는 IE 테스트 사이트에 나와 있습니다.
전체 페이지에서 -ms-user-select:none을 설정한 다음 블로그 게시물을 포함한 요소에 -ms-user-select:element를 설정하면 블로그 게시물의 내용만 선택할 수 있게 됩니다. -ms-user-select:element는 IE에 처음 도입된 새로운 속성으로, 여러 상황에서 유용하게 활용할 수 있습니다. -ms-user-select:element를 설정하면 사용자가 이 요소의 텍스트를 선택할 수 있지만 선택 가능한 영역이 이 요소의 범위로만 제한됩니다. 뉴스 기사의 내용을 선택하는 대부분의 사용자는 기사 하단에 있는 바닥글 요소를 선택하지 않을 것입니다. -ms-user-select:element를 설정해 놓으면 사용자는 마우스를 정확한 위치로 가져가야 한다는 부담감 없이 기사의 내용만 손쉽게 선택할 수 있게 됩니다.
-ms-user-select:none
-ms-user-select:element
-ms-user-select에서는 다음과 같은 4개의 값을 지원합니다.
text
element
none
auto
auto는 -ms-user-select의 기본값입니다.
개발자는 -ms-user-select를 none으로 설정하여 텍스트 선택을 해제할 수 있습니다. IE에서 텍스트를 -ms-user-select:none으로 설정하면 사용자가 이 텍스트 블록 내에서 선택을 시작할 수 없습니다. 그러나, 사용자가 페이지의 다른 부분에서 텍스트 선택을 시작하면 -ms-user-select가 none인 영역을 포함하여 페이지의 다른 모든 영역도 계속 이어서 선택할 수 있습니다. Firefox의 경우 개발자가 –moz-user-select:none을 설정하면 이 영역에서 선택이 시작되지 않으며 다른 어떤 선택에도 콘텐츠가 포함될 수 없습니다. 한편, Webkit의 경우 –webkit-user-select:none을 설정하면 선택 영역에 텍스트가 포함되지 않는 것처럼 나타나지만 실제로 콘텐츠를 복사하여 붙여 넣으면 콘텐츠가 포함되어 있다는 사실을 알게 됩니다.
–moz-user-select:none
–webkit-user-select:none
user-select는 본래 CSS3 사용자 인터페이스 모듈에서 제안되었습니다. 이 모듈은 이후 CSS3 기본 사용자 인터페이스 모듈로 대체되었지만 이 속성은 정의하지 않습니다. Mozilla 및 Webkit의 경우 이 속성을 자체 접두사를 붙여 지원합니다. 하지만 앞서 설명한 바와 같이 구현하는 방식에는 다소 차이가 있습니다.
user-select
IE 테스트 사이트에서 여러 가지 예를 경험해 보시고 의견을 말씀해 주시기 바랍니다.
—Sharon Newman, 프로그램 관리자, Internet Explorer