[CSS 방법론] 웹 사이트 적정 수정 수준에 따른 미디어 쿼리 (feat. prefers-reduced-motion)

웹 개발을 하면서 적정 수정 수준이란 것이 있습니다.

웹에서 사람들을 위해 일을 해결하는 일을 할 기회가 있습니다. 

이러한 수정의 범위가 얼마나 다른지에 대해 매우 흥미롭습니다.

 

사용자를 위한 미디어쿼리들이 많이 제공되고 있습니다. 그 중 하나는 

prefers-reduced-motion라는 미디어쿼리 속성일 것입니다.

이 미디어 쿼리는 웹에서 사람들의 경험을 개선하기 위해 독점적으로 사용됩니다. 

모션 감소를 명시적으로 요청한 사용자의 모션을 감소시키는 코드를 작성할 수 있습니다.

@media (prefers-reduced-motion: reduce), (update: slow) {
  *, ::before, ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}

이를 통해 하나의 사이트에 대해 모든 사용자에 대해 움직임이 적은 모든 사용자를 위해 사이트를 수정합니다.

 

그렇다면 어떤 사람들은 브라우저 자체 수준에서 작업하도록 하고싶은 것이 당연합니다. 

또는 해당 작업을 안내하는 표준 조직의 경우, 브라우저가 CSS 수준에서 강제 감소 모션과 같은 것을 구현해야한다고 말하지는 않지만 그렇게 할 수는 있습니다. 

브라우저 또는 표준 수준에서 무언가를 고치면 모든 사용자를 위해 모든 사이트에 대해 무언가를 고칠 수 있습니다.

 

이러한 관점들은 3가지 관점 정도로 나뉩니다.

 

• 모든 사용자를 위해 하나의 사이트 수정
• 한 사용자의 모든 사이트 수정
• 모든 사용자를위한 모든 사이트 수정

단지 하나만 선택할 필요는 없습니다.

우리 대부분은 아마도 첫 번째 경우에서 대부분의 작업을 수행 할 것입니다.

하지만 여러분의 작업 중 다른 작업이 다른 작업을 수행 할 수 있는지 생각해 볼 가치는 있습니다.

 

 

 

출처 : https://css-tricks.com/levels-of-fix/