개인화하십시오!

향상된 접근성 및 개인화 된 사용자 정의로 시작하여 웹 사이트 사용자 경험을 향상시킵니다. 접근성 개선은 청중을 넓히고 장애인을위한 사람뿐만 아니라 모든 사용자의 경험을 향상시킬뿐만 아니라 SEO의 이점도 제공합니다.

마찬가지로, 선호도 쿼리의 사용자 정의는 또한 개인화 된 경험을 제공하는 훌륭한 방법이며, 사용자가보다 편안하고 편리하다고 느끼게합니다.

prefers-reduced-motion 것이 좋은 예입니다. 이 선호도는 사용자가 멋진 애니메이션없이 웹 경험을 선호한다는 것을 의미합니다. 이 선호도를 지원하는 스타일을 작성하고보다 "생생한"대화식 경험을 제공하기 위해이 선호도를 설정하지 않은 사용자를 위해 미디어 쿼리를 작성할 수 있습니다.

고려해야 할 또 다른 선호는 사용자의 색 구성표 선호도입니다. 대부분의 웹 사이트는 이제 기본적으로 밝은 색의 테마를 사용하지만 최근 몇 년 동안 특히 밤에 웹 페이지를 탐색 할 때 어두운 테마에 대한 수요가 높았습니다. 사용자 기본 설정에 맞는 사용자 정의 테마를 제공하는 것은 사용자 경험을 향상시키는 또 다른 방법입니다.

CSS를 사용자 정의 속성에 사용하고 prefers-color-scheme 미디어 기능을 사용하여 이러한 사용자 정의 속성 값을 조정하여 효율적으로 수행 할 수 있습니다. 배경, 텍스트 및 강조 표시와 같은 공통 값을 사용하는 경우 한 곳에서 모든 값을 업데이트 할 수 있습니다.

color-scheme 속성을 사용하여 브라우저의 테마 변환을 자동으로 얻는 것을 잊지 마십시오. 이 속성을 설정하면 브라우저에 페이지에서 색상 테마 (밝은, 어두운 또는 둘 다)가 지원되는지 알려줍니다. 결과적으로 브라우저는 양식 컨트롤 및 브라우저 UI (예 : 스크롤 막대)를 올바른 테마로 자동 변환합니다.

이 데모에서 색상 테마에 텍스트 색상을 설정하지 않더라도 color-scheme: light dark In :root 는 브라우저에 사이트가 밝고 어두운 테마를 지원한다고 말하면 글꼴 색상을 검은 색에서 흰색으로 자동 전환합니다.

시스템 설정을 변경하지 않고 Chrome DevTools의 렌더링 패널에서 어두운 테마를 테스트 할 수 있습니다. 이 이미지는 Houdini의 어두운 모드를 보여줍니다.

어두운 테마를 만드는 또 다른 이점은 사용자 배터리 전원을 절약하는 것입니다. Pixel 6 Lab 연구에 따르면 어두운 테마는 OLED 스크린의 전력 소비의 11%를 절약합니다.

따라서 이제 사용자의 접근성 요구, 선호도 및 배터리 수명을 존중하므로 웹 사이트를보다 사용자 친화적으로 만들 수있는 좋은 방법입니다.

위 내용은 개인화하십시오!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!