ꯃꯔꯨꯑꯣꯏꯕꯥ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯆꯠꯂꯨ꯫ ꯗꯣꯛꯌꯨꯃꯦꯟꯇꯁꯤꯡ ꯅꯦꯚꯤꯒꯦꯁꯅꯗꯥ ꯆꯠꯂꯨ꯫
Check
in English

ꯏꯟꯇꯔꯦꯛꯁꯅꯁꯤꯡ ꯇꯧꯕꯥ꯫

ꯌꯨꯖꯔꯁꯤꯡꯅꯥ ꯋꯦꯕꯁꯥꯏꯠ ꯑꯃꯒꯤ ꯀꯟꯇꯦꯟꯇꯁꯤꯡꯒꯥ ꯀꯔꯝꯅꯥ ꯏꯟꯇꯔꯦꯛꯇ ꯇꯧꯕꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯍꯣꯡꯗꯣꯛ ꯍꯣꯡꯖꯤꯟ ꯇꯧꯕꯥ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡ꯫

ꯇꯦꯛꯁꯠ ꯈꯅꯕꯒꯤ ꯃꯑꯣꯡ꯫

ꯌꯨꯖꯔꯅꯥ ꯃꯗꯨꯒꯥ ꯏꯟꯇꯔꯦꯛꯇ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯈꯅꯕꯒꯤ ꯃꯑꯣꯡ ꯑꯗꯨ ꯍꯣꯡꯗꯣꯀꯎ꯫

ꯌꯨꯖꯔꯅꯥ ꯀ꯭ꯂꯤꯛ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯄꯦꯔꯥꯒ꯭ꯔꯥꯐ ꯑꯁꯤ ꯃꯄꯨꯡ ꯐꯥꯅꯥ ꯈꯅꯒꯅꯤ꯫

ꯄꯦꯔꯥꯒ꯭ꯔꯥꯐ ꯑꯁꯤꯒꯤ ꯗꯤꯐꯣꯜꯇ ꯁꯦꯂꯦꯛꯇ ꯕꯤꯍꯦꯕꯤꯌꯔ ꯂꯩ꯫

ꯌꯨꯖꯔꯅꯥ ꯀ꯭ꯂꯤꯛ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯄꯦꯔꯥꯒ꯭ꯔꯥꯐ ꯑꯁꯤ ꯈꯅꯒꯠꯄꯥ ꯌꯥꯔꯣꯏ꯫

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫
<p class="user-select-all">This paragraph will be entirely selected when clicked by the user.</p>
<p class="user-select-auto">This paragraph has default select behavior.</p>
<p class="user-select-none">This paragraph will not be selectable when clicked by the user.</p>

ꯄꯣꯏꯟꯇꯔ ꯏꯚꯦꯟꯇꯁꯤꯡ꯫

ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯅꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯏꯟꯇꯔꯦꯛꯁꯅꯁꯤꯡ ꯊꯤꯡꯅꯕꯥ ꯅꯠꯠꯔꯒꯥ ꯍꯥꯄꯆꯤꯟꯅꯕꯥ .pe-noneꯑꯃꯁꯨꯡ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯄꯤꯔꯤ꯫.pe-auto

ꯂꯤꯉ꯭ꯛ ꯑꯁꯤ ꯀ꯭ꯂꯤꯛ ꯇꯧꯕꯥ ꯌꯥꯔꯣꯏ꯫

ꯂꯤꯉ꯭ꯛ ꯑꯁꯤ ꯀ꯭ꯂꯤꯛ ꯇꯧꯕꯥ ꯌꯥꯏ (ꯃꯁꯤ ꯗꯤꯐꯣꯜꯇ ꯕꯤꯍꯦꯕꯤꯌꯔꯅꯤ)꯫

pointer-eventsꯄ꯭ꯔꯣꯄꯔꯇꯤ ꯑꯗꯨ ꯃꯗꯨꯒꯤ ꯃꯃꯥ-ꯃꯄꯥꯗꯒꯤ ꯏꯅꯍꯦꯔꯤ ꯇꯧꯔꯀꯄꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯂꯤꯉ꯭ꯛ ꯑꯁꯤ ꯀ꯭ꯂꯤꯛ ꯇꯧꯕꯥ ꯌꯥꯗꯦ꯫ ꯑꯗꯨꯝ ꯑꯣꯏꯅꯃꯛ, ꯂꯤꯉ꯭ꯛ ꯑꯁꯤꯒꯤ pe-autoꯀ꯭ꯂꯥꯁ ꯑꯃꯥ ꯂꯩ ꯑꯃꯁꯨꯡ ꯀ꯭ꯂꯤꯛ ꯇꯧꯕꯥ ꯌꯥꯏ꯫

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫
<p><a href="#" class="pe-none" tabindex="-1" aria-disabled="true">This link</a> can not be clicked.</p>
<p><a href="#" class="pe-auto">This link</a> can be clicked (this is default behavior).</p>
<p class="pe-none"><a href="#" tabindex="-1" aria-disabled="true">This link</a> can not be clicked because the <code>pointer-events</code> property is inherited from its parent. However, <a href="#" class="pe-auto">this link</a> has a <code>pe-auto</code> class and can be clicked.</p>

.pe-noneꯀ꯭ꯂꯥꯁ (ꯑꯃꯁꯨꯡ ꯃꯁꯤꯅꯥ ꯁꯦꯠ ꯇꯧꯕꯥ CSS ꯄ꯭ꯔꯣꯄꯔꯇꯤ) ꯑꯁꯤꯅꯥ pointer-eventsꯄꯣꯏꯟꯇꯔ ꯑꯃꯒꯥ (ꯃꯥꯎꯁ, ꯁ꯭ꯇꯥꯏꯂꯁ, ꯇꯆ) ꯏꯟꯇꯔꯦꯛꯁꯅꯁꯤꯡ ꯈꯛꯇꯃꯛ ꯊꯤꯡꯏ꯫ ꯂꯤꯉ꯭ꯛ ꯑꯃꯁꯨꯡ ꯀꯟꯠꯔꯣꯂꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ .pe-none, ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ, ꯍꯧꯖꯤꯀꯁꯨ ꯀꯤꯕꯣꯔꯗ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯐꯣꯀꯁ ꯇꯧꯕꯥ ꯌꯥꯕꯥ ꯑꯃꯁꯨꯡ ꯑꯦꯛꯁꯟ ꯇꯧꯕꯥ ꯌꯥꯏ꯫ ꯀꯤꯕꯣꯔꯗ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯁꯤꯡꯒꯤꯗꯃꯛꯇꯁꯨ ꯃꯈꯣꯌ ꯑꯁꯤ ꯃꯄꯨꯡ ꯐꯥꯅꯥ ꯅ꯭ꯌꯨꯠꯔꯤꯂꯥꯏꯖ ꯇꯧꯕꯥ ꯉꯝꯅꯕꯥ, ꯅꯍꯥꯛꯅꯥ ꯃꯈꯥ ꯇꯥꯕꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯃꯊꯧ ꯇꯥꯕꯥ ꯌꯥꯏ ꯃꯗꯨꯗꯤ tabindex="-1"(ꯃꯈꯣꯌꯅꯥ ꯀꯤꯕꯣꯔꯗ ꯐꯣꯀꯁ ꯐꯪꯍꯟꯗꯅꯕꯥ) ꯑꯃꯁꯨꯡ aria-disabled="true"(ꯃꯈꯣꯌꯕꯨ ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡꯗꯥ ꯏꯐꯦꯛꯇꯤꯕ ꯑꯣꯏꯅꯥ ꯗꯤꯁꯦꯕꯜ ꯑꯣꯏꯕꯒꯤ ꯋꯥꯐꯝ ꯑꯗꯨ ꯌꯧꯍꯅꯕꯥ), ꯑꯃꯁꯨꯡ ꯑꯣꯏꯊꯣꯀꯄꯥ ꯌꯥꯕꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯁꯤꯖꯤꯟꯅꯅꯕꯥ꯫ ꯃꯈꯣꯌꯕꯨ ꯑꯦꯛꯁꯟ ꯇꯧꯕꯥ ꯌꯥꯍꯟꯗꯅꯕꯥ ꯃꯄꯨꯡ ꯐꯥꯅꯥ ꯊꯤꯡꯏ꯫

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯌꯥꯕꯥ ꯇꯥꯔꯕꯗꯤ, ꯍꯦꯟꯅꯥ ꯂꯥꯏꯕꯥ ꯁꯣꯂꯨꯁꯟ ꯑꯗꯨꯗꯤ:

  • ꯐꯣꯔꯝ ꯀꯟꯠꯔꯣꯂꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ, disabledHTML ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫
  • ꯂꯤꯉ꯭ꯀꯁꯤꯡꯒꯤ ꯑꯣꯏꯅꯗꯤ, hrefꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨ ꯂꯧꯊꯣꯀꯎ, ꯃꯗꯨ ꯅꯟ-ꯏꯟꯇꯔꯑꯦꯛꯇꯤꯚ ꯑꯦꯉ꯭ꯀꯔ ꯅꯠꯠꯔꯒꯥ ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ ꯂꯤꯉ꯭ꯛ ꯑꯃꯥ ꯑꯣꯏꯍꯜꯂꯨ꯫

ꯁꯥꯁꯁ ꯇꯧꯕꯥ꯫

ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯤ ꯑꯦ.ꯄꯤ.ꯑꯥꯏ

ꯏꯟꯇꯔꯦꯛꯁꯟ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯑꯁꯤ ꯑꯩꯈꯣꯌꯒꯤ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯤ ꯑꯦ.ꯄꯤ.ꯑꯥꯏ.ꯗꯥ scss/_utilities.scss. ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯤ API ꯑꯁꯤ ꯀꯔꯝꯅꯥ ꯁꯤꯖꯤꯟꯅꯒꯗꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯇꯃꯁꯤꯜꯂꯨ꯫

    "user-select": (
      property: user-select,
      values: all auto none
    ),
    "pointer-events": (
      property: pointer-events,
      class: pe,
      values: none auto,
    ),