css

user-select

퓨어프 2023. 11. 14. 18:14
반응형

CSS 속성 은 사용자가 텍스트를 선택할 수 있는지 여부를 제어합니다. 이는 텍스트 상자를 제외하고 브라우저 사용자 인터페이스( chrome )의 일부로 로드된 콘텐츠에는 아무런 영향을 미치지 않습니다.

 

Chrome - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

In a browser, the chrome is any visible aspect of a browser aside from the webpages themselves (e.g., toolbars, menu bar, tabs). This is not to be confused with the Google Chrome browser.

developer.mozilla.org

 

/* Keyword values */
user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
user-select: all;

/* Global values */
user-select: inherit;
user-select: initial;
user-select: revert;
user-select: revert-layer;
user-select: unset;

 

 


참고:
 
user-select 은 상속된 속성이 아니지만 초기 auto 값으로 인해 대부분의 경우 상속된 것처럼 동작합니다. WebKit/Chromium 기반 브라우저는 속성을 상속된 대로 구현합니다. 이는 사양에 설명된 동작을 위반하며 이로 인해 몇 가지 문제가 발생합니다 
. 
지금까지 Chromium은 최종 동작이 사양을 충족할 수 있도록 
문제를 해결하기 로 결정했습니다.

 

 

none

요소와 해당 하위 요소의 텍스트는 선택할 수 없습니다. 개체 에는 Selection이러한 요소가 포함될 수 있습니다.

auto

사용된 값은 auto다음과 같이 결정됩니다.

  • ::before및 의사 요소 에서 ::after사용된 값은 다음과 같습니다.none
  • 요소가 편집 가능한 요소인 경우 사용되는 값은 다음과 같습니다.contain
  • user-select그렇지 않고 이 요소의 상위 요소에 사용된 값이 이면 all사용된 값은 다음과 같습니다.all
  • user-select그렇지 않고 이 요소의 상위 요소에 사용된 값이 이면 none사용된 값은 다음과 같습니다.none
  • 그렇지 않으면 사용된 값은 다음과 같습니다.text

text

텍스트는 사용자가 선택할 수 있습니다.

all

요소의 콘텐츠는 원자적으로 선택됩니다. 선택 항목에 요소의 일부가 포함되는 경우 선택 항목에는 모든 하위 요소를 포함하여 전체 요소가 포함되어야 합니다. 하위 요소에서 더블 클릭이나 컨텍스트 클릭이 발생한 경우 이 값을 가진 가장 높은 상위 요소가 선택됩니다.

contain

요소 내에서 선택을 시작할 수 있습니다. 그러나 선택 항목은 해당 요소의 경계에 포함됩니다.

 

 

참고:
 CSS UI 4에서는 값 의 이름이 element contain

https://github.com/w3c/csswg-drafts/commit/3f1d9db96fad8d9fc787d3ed66e2d5ad8cfadd05

반응형