는 방문자가 글꼴 크기 및 언어와 같은 측면을 개인화 할 수 있도록하여 웹 사이트의 사용자 경험을 향상시킵니다. 이 튜토리얼은 스타일 스위처를 구축하고 로컬 스토리지를 사용하여 선호도를 기억하는 방법을 보여줍니다.
주요 개념 :
스타일 스위처는 개인화를 허용하여 UX를 향상시킵니다. 로컬 스토리지는 방문 사이에 선호도가 저장되도록합니다
구현에는 스위처 용 HTML, 스타일 용 CSS 및 JavaScript가 선택 및 스토리지를 처리합니다. 브라우저 호환성 (특히 이전 IE 버전)을 고려하십시오
많은 스타일의 경우 외부 CSS 파일에서 관리하고 개별 클래스를 변경하는 대신 교체하십시오.
로컬 스토리지는 서버 상호 작용없이 지속적인 스토리지 (최대 5MB)를 제공합니다. 페이지로드에서 저장된 환경 설정을 확인하십시오
스위처 구축 :
스타일 선택을위한 요소를 포함하여 기본 HTML로 시작하십시오. 이벤트 리스너 (IE를위한 및 폴리 필드 사용)는 스타일 변경에 반응합니다. 함수는 선택한 스타일에 따라 신체 클래스를 업데이트합니다. 대규모 프로젝트의 경우 외부 CSS 파일을 사용하여 태그의 속성을 사용하여 교체하십시오.
선호도 기억 :
로컬 스토리지 (
, )를 사용하여 선택한 스타일을 저장하고 검색하십시오. 페이지로드에서 저장된 환경 설정을 확인하고 - 를 사용하여 적용하여 이벤트 핸들러를 발사하십시오.
고급 고려 사항 :
-
여러 스타일 : - 많은 스타일의 경우 외부 CSS 파일을 사용하여 클래스 변경에 의존하는 대신 교체하십시오.
접근성 :
키보드 접근성 ( 사용) 및 스크린 리더 호환성 () 보장.
브라우저 호환성 : 폴리 플릴을 사용하여 구형 브라우저를 지원하십시오
테스트 :
다른 브라우저와 장치에서 철저히 테스트하십시오
이 방법은 웹 사이트 모양을 사용자 정의하는 사용자 친화적 인 방법을 제공하고 더 나은 사용자 경험을위한 선호도를 기억합니다. 로컬 스토리지의 사용은 서버 라운드 트립을 피하기 때문에 효율적이고 사용자 친화적입니다.
위 내용은 간단한 스타일 스위처 생성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
