ใๅผ็็ๆฅๆ้จๅธใซใฆใ
๐ฉ๐ปใใใใกใใใใ๏ผใ
๐ฉ๐ปใใใชใใCSSใฎๆ
ๅ ฑใฏใกใใใจใญใฃใใใขใใใใฆใใฎ๏ผใ
๐ฉ๐ปใใฒใพใใ็ตใงๆๅใซ่ฆใใๅ
ๅฎนใงๆญขใพใฃใฆใชใใงใใใใญใ๏ผใ
ใใขใฏใทใงใณไปฎ้ขใฟใฆใใใใใพใ๏ผใ
๐นใใใใ๏ผๅใใใ่จใฃใฆใใชใใฃใใใใชใใฎ๏ผ๏ผใ
๐นใ็ฅใใฌ้ใซๅ
จใใฉใฆใถๅฏพๅฟใใฆใใใฎใใใใใใใใฎใ๏ผใ
๐นใใกใใใจใๅๅผทใใชใใใ๏ผใ
ใใปใปใผใ...ใ
ใใใกใใใฏๆฅๆฅ้จๅธใใใชใใฆใๆฅๆ้จๅธใซไฝใใงใใ๏ผ
๏ผใใคใ๏ผใฎๅฝๆใใใใกใใ้ใใใ๏ผ
ไปๆฅใฏ:focus-visible
ใใๅๅผทใใใพใ๏ผ
ใใจใฏ่จใใใฟใใใใ
ใไฝใใใๅๅผทใใใฐใใใใ ใพใ๏ผใ
๐ฉ๐ปใไปๆนใชใใใญใใ
๐ฉ๐ปใใใใใไปๆฅใฏ:focus-visible
ใซใคใใฆใๅๅผทใใพใใใใ
ใๅใใฆ่ใใใพใใ
ใๆฆ่ฆใ่ชฌๆใใฆใปใใใพใใ
What is :focus-visible
๐ฉ๐ปใใใใๆฉ้่ชฌๆใใใใญ๏ผใ
๐๐๐
- ใพใใ
:focus-visible
ใฏๆฌไผผ่ฆ็ด ใงใใ - ใญใผใใผใๆไฝ๏ผใฟใใญใผใงใฎ็งปๅ๏ผใฎๅ ดๅใฎใฟใในใฟใคใซใ้ฉ็จใใใ
- ใใฆในๆไฝๆใฏๅบๆฌ็ใซในใฟใคใซใ้ฉ็จใใใชใ
๐๐๐
๐ฉ๐ปใใใฃใจใใใชๆใใญ๐ใ
๐ฉ๐ปใใคใพใใใญใผใใผใๆไฝๆใงinput
ใbutton
ใซใใฉใผใซในใใๆใฎในใฟใคใซใ่จญๅฎใงใใใฃใฆใใจใญ๏ผใ
ใใใใใๆฆ่ฆใฏใใใฃใใพใใ
ใใฟใใใใใใฐใงใใใใใชใใใใ
ใ
ใ๐น
๐ค๐ค
ใใฆในๆไฝๆใซๅบๆฌ็ใซใจๆธใใใฎใฏใไปฅไธใฎ็็ฑใใใใพใ๏ผ
-
ใญใผใใผใใงใฎๅ
ฅๅใใตใใผใใใ่ฆ็ด ใฏใใฆในๆไฝๆใงใในใฟใคใซใ้ฉ็จใใใ
- input่ฆ็ด ใชใฉ...
:focus
ไฝฟใใฐใใ๏ผ
ใใงใใใใผใกใใใ
ใ
input
ใbutton
ใธใฎใใฉใผใซในใชใ:focus
ใใใใพ๏ผใ
ใใใใชใๅ
็ใ
:focus
ใไฝฟใใพใใใใฃใฆ่จใฃใฆใใพใใ
๐ฉ๐ปใ็ขบใใซ:focus
ใใใใใญใ
๐นใใงใใใใใใใฎๅใขใฏใทใงใณไปฎ้ขใฎใตใคใไฝใฃใฆใๆใซใbutton
ใใฏใชใใฏใใใจใใฎoutline
ใๆฐใซใชใใฃใฆCSSใงๆถใใฆใใงใใ!?ใ
ใใใ็ขบใใซๆถใใใพ...ใ
๐นใใฌใใฅใผใฎๆใซใณใกใณใใใใฎใซใใใ็ก่ฆใใใงใใ๏ผ๏ผใ
ใ(ใใใ ...ใใฟใใใซใฌใใฅใผ้ ผใใ ใฃใใใ ...)ใ
๐นใๆฌๆฅใฏใขใฏใปใทใใชใใฃใฎ่ฆณ็นใใใๆถใใกใใใกใชใใฎใชใฎใ๏ผใ
๐ฉ๐ปใใงใไปๅพใฏใ:focus
ใใใชใ:focus-visible
ใไฝฟใใฐใใใฎๅ้กใฏ่งฃๆถใใใใฎใใใ
๐ฉ๐ปใใฏใชใใฏๆใซใฏ้ฉ็จใใใใใญใผใใผใๆไฝใฎๆใซใฎใฟ้ฉ็จใใใใใใญใ
ๅฎ้ใใณใผใ่ฆใชใใใใใใชใใพ
ใใใผใกใใ...ใ
ใใใ่จใใใฆใใๅฎ้ใณใผใ่ฆใชใใจใใใใชใใพ...ใ
:focus
ใฎๆๅ
๐ฉ๐ปใใใใกใใใชใใใ่จใใจๆใฃใฆใ็จๆใใฆใใใใ๐ใ
๐ฉ๐ปใใพใใฏ:focus
ใใ่ฆใฆใใใพใใใ๐ใ
๐ฉ๐ปใใฐใฌใผใฎ่ๆฏใใฏใชใใฏใใใฐใไธใค็ฎใฎinputใซใญใผใใผใใง็งปๅใงใใใใใ
See the Pen Untitled by limoza (@limoza) on CodePen.
๐ฉ๐ปใใฏใชใใฏๆใใญใผใใผใๆไฝๆใใใใฉใผใซในใใใใoutline
ใ่กจ็คบใใใใฎใใใใใใใญใใ
ใใใใใพใ๏ผ๏ผใ
:focus-visible
ใฎๆๅ
๐ฉ๐ปใใใใ่ธใพใใฆ:focus-visible
ใ่ฆใฆใฟใพใใใใ๐ใ
๐ฉ๐ปใๅใใใใฐใฌใผใฎ่ๆฏใใฏใชใใฏใใใฐใไธใค็ฎใฎinputใซใญใผใใผใใง็งปๅใงใใใใ๏ผใ
See the Pen `:focus-visible` by limoza (@limoza) on CodePen.
๐ฉ๐ปใใฉใใใใ๏ผใ
๐ฉ๐ปใinput
ใฏใญใผใใผใๅ
ฅๅใใตใใผใใใ่ฆ็ด ใใ
๐ฉ๐ปใใ ใใใใฏใชใใฏๆใญใผใใผใๆไฝๆใฎไธกๆนใงoutline
ใ้ฉ็จใใใฆใใใใ
๐ฉ๐ปใใงใใbutton
ใฏใใฉใใใช๏ผใ
๐ฉ๐ปใใฏใชใใฏๆใฏในใฟใคใซใ้ฉ็จใใใใใญใผใใผใๆไฝๆใฎใฟoutline
ใ้ฉ็จใใใฆใใใ๏ผใ
ใใใณใใ ใพใใใ๏ผ๏ผใ
ใๅผท่ชฟใๅฟ
่ฆใชไบบใใฟใผใฒใใใใฆในใฟใคใซใๅฝใฆใใใฆใใพใใ
๐ฉ๐ปใใใใงใ:focus-visible
ใฎๅฟ
่ฆๆงใใใใฃใใใใ๏ผใ
๐ฉ๐ปใ่ฆใฆใฎ้ใใใจใฃใใซใปใผใในใฆใฎใใฉใฆใถใงใตใใผใใใใฆใใใใ๏ผใ
ใใใผใกใใใใชใฉใจใฃใฆใใๅๅผทใซใชใฃใใพ๏ผใ
ใใใใใใฏ
:focus-visible
ใไฝฟใฃใฆใใใพใ๏ผใ
๐ฉ๐ปใใใใใใญ๏ผใใใกใใ๏ผใ
๐ฉ๐ปใใใใใใๅผใ็ถใใๅๅผท้ ๅผตใใพใใใใญใใใใใใ
ใใปใปใผใ๏ผ๏ผ๏ผใใงใณใ้ฃในใใ๏ผใ
ใ
ใ
ใ
โผๅ่ใซใใใฆใใใ ใใใตใคใ
https://zenn.dev/sakito/articles/c5034684f2266c
https://evoworx.dev/blog/focus-visible/