오버플로우, 초점 맞추기 및 활성 상태의 다른 스타일 설정하기

11745 단어 designa11ycss
여러 해 동안 나는 줄곧 같은 방식으로:hover,:focus과:active주를 설계해 왔다.나는 내가 언제부터 이렇게 하기 시작했는지 기억하지 못한다.다음은 제가 자주 사용하는 코드입니다.
// Not the best approach. I'll explain why in this article
.selector {
  &:hover,
  &:focus,
  &:active {
    // Styles here
  }
}
키보드의 접근성에 더욱 관심을 가지기 시작하면서 (그렇기 때문에 초점에 더욱 관심을 가진다) 나는 우리가 같은 방식으로 정지, 초점, 활동 상태의 스타일을 설정해서는 안 된다고 생각하기 시작했다.
정지, 초점, 활동 상태의 양식은 달라야 한다.
이유는 간단하다. 그들은 다른 주이다.
오늘 나는 너희들에게 이 세 가지 상태를 조금도 힘들이지 않고 만들어 줄 신기한 방식을 보여 주고 싶다.:hover부터 시작합시다.

롤오버 상태의 스타일 설정하기

:hover 사용자가 마우스를 요소 위로 이동할 때 터치합니다.
스톱 상태는 대개 background-color(및/또는color의 변화로 표시됩니다.각 주 간의 차이가 반드시 뚜렷하지는 않다. 왜냐하면 사용자들은 이미 그들이 어딘가를 배회하고 있다는 것을 알고 있기 때문이다.
button {
  background-color: #dedede;
}

button:hover {
  background-color: #aaa;
}

초점 상태의 스타일 설정하기

:focus 원소가 초점을 받을 때 활성화됩니다.요소는 두 가지 방법으로 포커스를 얻을 수 있습니다.
  • 사용자가 초점을 맞출 수 있는 요소
    • 에서tab키를 사용할 때
  • 사용자가 클릭하면 요소에 초점을 맞출 수 있음
    • 포커싱 가능한 요소는 다음과 같습니다.
  • 링크<a>
  • 버튼<button>
  • 표 요소input,textarea 등)
  • 컴포넌트 포함 tabindex
    • 다음은 주의해야 할 몇 가지 요점이다.
  • 사용자는 tabindex="-1" 옵션 카드로 요소에 들어갈 수 없지만, 그것을 클릭할 수 있습니다.클릭하여 초점을 촉발합니다.
  • 사파리와 Firefox(Mac)에서 클릭하면 초점을 맞추지 않는다<button> 요소.More info here .
  • 링크를 눌렀을 때(<a> 손가락을 마우스에서 들어올릴 때까지 링크에 초점을 맞춘다.손가락을 들어올릴 때 href 같은 페이지의 유효함 id 을 가리키면 초점이 다른 곳으로 바뀐다.
    • focus에 대해 우리가 더 관심을 가지는 것은 사용자가 요소를 클릭하는 것이지 요소를 클릭하는 것이 아니다.
    사용자가 탭을 눌렀을 때, 그들은 초점이 어디에 있는지 모른다.그들은 단지 추측할 수 있을 뿐이다.이것이 바로 우리가 사용자의 주의력을 관심 요소에 집중하도록 현저한 변화가 필요한 이유이다.
    기본 초점 스타일은 대부분의 경우 가능합니다.만약 당신이 design your own focus하고 싶다면 다음과 같은 네 가지를 고려해 보세요.
  • 개요 추가
  • 모션 생성
  • 변경background-color
  • 변경color
    • background-color와color의 변화가 자주 수반되기 때문에:hover 윤곽이나 애니메이션이 수반되어야 한다:focus는 의미가 있다.outline, border, box-shadow 속성의 조합을 사용하여 예쁜 초점 스타일을 만들 수 있습니다.나는 "Creating a custom focus style"에서 이를 어떻게 하는지 공유했다.
    button {
  background-color: #dedede;
}

button:hover {
  background-color: #aaa;
}

button:focus {
  outline: none;
  box-shadow: 0 0 0 3px lightskyblue;
}

    활성 상태의 스타일 설정


    당신이 현실 생활에서 사물과 상호작용을 할 때, 당신은 어떤 피드백을 얻기를 기대한다.예를 들어, 만약 당신이 버튼을 눌렀다면, 당신은 버튼이 눌렸으면 합니다.
    이런 피드백은 사이트에서도 매우 유용하다.:active를 사용하여 버튼 시간의 스타일을 설정할 수 있습니다.:active 요소와 상호작용할 때 터치합니다.이러한 상호 작용은 다음과 같습니다.
  • 한 요소(초점을 맞출 수 없는 요소라도 마우스 왼쪽 버튼
    • 을 누릅니다.
  • 스페이스바(버튼 위) 유지
    • button:active {
  background-color: #333;
  border-color: #333;
  color: #eee;
}

    두 가지 이상한 일에 주의해야 한다.
  • 스페이스바를 누르면 버튼의 스페이스바:active가 트리거되지만 Enter 키를 누르면 그렇지 않습니다.
  • 트리거 링크를 입력하지만 활성 상태가 만들어지지 않습니다.공간은 링크를 터치하지 않습니다.

    • 링크의 기본 스타일


    링크에는 기본 활성 스타일이 있습니다.그들이 눌렸을 때 빨간색으로 변할 것이다.

    긍정과 집중의 관계


    초점을 맞출 수 있는 요소를 마우스 왼쪽 버튼으로 누르면 활성 상태가 트리거됩니다.초점 상태도 촉발한다.
    마우스 왼쪽 버튼을 놓아도 요소 위에 포커스가 남아 있습니다.
    👆 링크와 단추를 제외한 대부분의 초점을 맞출 수 있는 요소들은 이렇다.
    링크:
  • 마우스 왼쪽 단추를 눌렀을 때: Firefox의 트리거:active와 :focus 상태, 사파리의 크롬은 트리거만 활성 상태(Mac에서만 테스트)
  • 마우스 왼쪽 단추를 눌렀을 때: :focus 링크에 유지합니다(링크의 href가 같은 페이지의 id와 일치하지 않을 경우).사파리에서 초점이 돌아왔다<body>.
    • 버튼의 경우:
  • 마우스 왼쪽 단추를 눌렀을 때 트리거:active와 :focus 상태는 크롬에만 있습니다.Safari와 Firefox(Mac)에서는 전혀 터치되지 않는다:focus.나는 이 이상한 행동을 썼다here.
    • 버튼을 클릭하려면 가능한 빨리 이 JavaScript를 추가해야 합니다.(원인에 대해서는 위에서 링크한 글을 읽고 더 많은 정보를 얻을 수 있다.)
    document.addEventListener("click", event => {
  if (event.target.matches("button")) {
    event.target.focus();
  }
});
    이 코드가 생기면 버튼을 누르면 다음과 같은 행동이 됩니다.
  • 마우스 왼쪽 버튼을 누른 채 모든 브라우저에서 트리거:active합니다.트리거:focus는 Chrome에만 사용할 수 있습니다.
  • 마우스 왼쪽 단추를 눌렀을 때: 사파리와 Firefox (Mac) 의 트리거 :focus.:focus 다른 브라우저는 열려 있습니다.
    • 위의 JavaScript 세션을 추가한 후 Button이 Safari에서 하는 행동.
    이제 정지, 초점 맞추기, 활동 상태를 알았으니 이 세 가지 상태의 양식에 대해 이야기하고 싶다.

    신기한 조합


    이런 신기한 조합은 사용자가 멈추고 초점을 맞추며 요소와 상호작용할 때 피드백을 얻을 수 있게 한다.필요한 코드는 다음과 같습니다.
    .element:hover,
.element:active {
  /* Change background/text color */
}

.element:focus {
  /* Show outline /*
}
    마우스 사용자의 경우:
  • 사용자가 마우스를 요소 위에 놓으면 background-color(및/또는 color) 변경됩니다.그들은 피드백을 받을 것이다.
  • 사용자가 요소를 눌렀을 때 초점 윤곽이 표시됩니다.그들은 피드백을 받을 것이다.

    • 키보드 사용자의 경우:
  • 사용자가 요소에서 탭 키를 누르면 초점 아웃라인이 표시됩니다.그들은 피드백을 받을 것이다.
  • 요소와 상호작용할 때background-color(과/또는color) 변화가 발생한다.그들은 피드백을 받을 것이다.

    • 쌍방이 다 좋게 하자!

  • 나는 아직 이 신기한 조합을 철저히 테스트하지 못했다.이것은 개념적 증명이다.만약 네가 나를 도와 테스트를 좀 하고 결과를 알게 해 줄 수 있다면, 나는 감격해 마지 않을 것이다.

  • 테스트를 실행하려면 코드 펜을 사용하지 마십시오.Codepen에서 링크의 초점 상태가 이상합니다.마우스 포커스를 링크 위로 가져가면 포커스 아웃라인이 삭제됩니다.왜?몰라요.때때로 나는 어떤 화려한 도구도 이런 것들을 테스트하지 않는 것이 가장 좋다고 생각한다.단순한 HTML, CSS, JS입니다.

    • 비마법(하지만 더 좋을 수도 있음) 조합


    위에서 언급한 바와 같이 사파리와 Firefox(Mac)에서 단추를 누르는 것은 이상한 행동이다.만약 내가 너에게 보여준 자바스크립트 코드 세션을 추가한다면, 이 신기한 조합은 여전히 유효하다.하지만 완벽하지는 않다.
    Safari 및 Firefox(Mac)의 경우 다음과 같습니다.
  • 사용자가 마우스 버튼을 눌렀을 때 모든 것이 바뀌지 않습니다.
  • 사용자가 마우스 단추를 들어올릴 때 요소에 초점을 맞춘다

    • 만약 네가 이것이 충분한 시사점이라고 생각한다면, 신기한 조합은 효과적이다.여기 세워도 돼.
    그러나 만약 충분한 가격이 없다고 생각한다면 각각 설계:hover,:focus와:active를 해야 한다.
    .element:hover {
  /* Change background/text color */
}

.element:active {
  /* Another change in background/text color */
}

.element:focus {
  /* Show outline /*
}
    Safari의 단추 동작입니다. 세 주 모두 스타일 설정을 한 경우.
    이렇게!오늘 뭔가 배웠으면 좋겠어!
    읽어주셔서 감사합니다.본문은 최초로 my blog에 발표되었다.만약 당신이 더 많은 글을 가지고 더 좋은 전단 개발자가 되는 것을 돕고 싶다면, 나의 시사 통신에 등록해 주십시오.
    iOSDC 2017 "새 이미지 포맷 HEIF를 사용한 iOS 응용의 통신량 삭감"에 대한 요약 및 보완
    아래 첨자 조작부호가 왜 인용을 되돌려야 하는지 설명하십시오

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage