UserCSS를 사용하여 액세스할 수 없는 사이트를 직접 액세스할 수 있도록 만든 방법

에서 언급했듯이 저는 웹에서 특정 유형의 움직임에 민감합니다. 오랫동안 웹 사이트의 스타일에 액세스하여 변경하고 그러한 종류의 움직임을 포함하지 않도록 수정하는 방법이 있는지 궁금했습니다.

몇 주 전에 동료가 사용자 스타일로 이 작업을 수행하는 방법을 시연했습니다. 마침내 누락된 부분을 찾았습니다. 문제가 되는 항목을 제거하거나 변경하는 방법은 이미 알고 있었지만 페이지에 새 스타일을 삽입하는 방법은 몰랐습니다.

이 블로그 게시물에서는 Mimmit Koodaa의 (기술에 더 많은 여성을 끌어들이기 위한 핀란드 이니셔티브) 웹페이지에 대한 몇 가지 간단한 개선 사항을 작성한 방법을 공유합니다. 그들은 일부 애니메이션과 자동 재생 비디오를 배경으로 가지고 있습니다. 이러한 애니메이션은 저를 약간 어지럽고 구역질나게 만들 수 있고 자동으로 재생되는 동영상은 주의를 산만하게 할 뿐이므로 웹 사이트에서 이러한 요소를 제거하고 싶었습니다.

첨필

사용자 스타일을 사이트에 주입하기 위해 Stylus Chrome 확장 프로그램을 사용하고 있습니다. 자세한 내용을 보려면 다음 저장소를 참조하세요.

오픈스타일 / 첨필

스타일러스 - 사용자 스타일 관리자

Stylus 확장의 기본 아이디어는 사용자가 userstyles.org 또는 자체 호스팅 사용자 스타일(접미사 .user.css 및 .user.styl 포함)에서 사용자 스타일을 사용, 편집 및 저장할 수 있다는 것입니다. 저는 Github에서 제 코드를 자체 호스팅하고 있으며 블로그 게시물 끝에서 리포지토리 링크를 찾을 수 있습니다.

스타일 작성

언급했듯이 UserCSS로 스타일을 작성하고 있습니다. 구문 또는 일반적으로 UserCSS에 관심이 있는 경우 Stylus' docs about UserCSS으로 이동하십시오.

생기

웹 사이트on the page for this spring's launch event에는 세로로 스크롤할 때 제목 뒤에 가로로 이동하는 애니메이션이 있습니다. 그것은 나에게 특히 문제가 되므로 제거하고 싶었던 것 중 하나입니다.

저는 애니메이션을 끄기 위해 많은 웹사이트를 만지작거렸고 다양한 솔루션을 보았습니다. 나는 내가 무엇을 찾을지 조금 두려웠다. 이번에는 옛날 트랜지션으로 애니메이션을 만들어서 기뻤습니다. 쉽게 고칠 수 있습니다.

모션을 줄이는 대신 "동작 제거"솔루션을 사용하기로 결정했습니다. 모든 제목에는 elementor-motion-effects-container 클래스가 있으며 헤더 뒤에 제목 요소와 이미지를 래핑합니다. 그 이미지는 전환되는 이미지입니다. 따라서 컨테이너 내부의 모든 요소를 ​​대상으로 지정하고 전환을 없음으로 설정할 수 있습니다. 움직이는 다른 것이 나타날 경우를 대비하여 모든 하위 요소를 대상으로 지정합니다.

.elementor-motion-effects-container > * {
    transform: none !important;
}

출시 웹 사이트의 또 다른 문제는 이미지 갤러리였습니다. 이미지가 나타날 때 애니메이션을 제거하고 싶었습니다. 그들은 미끄러지고 약간 산만했습니다.

속성을 설정할 올바른 클래스를 찾는 것은 쉽지 않았습니다. 다른 변환을 가진 여러 클래스를 살펴보고 마침내 올바른 요소를 찾았습니다.

애니메이션을 제거한 방법은 다음과 같습니다.

.elementor-gallery-item__image.e-gallery-image {
    transition-duration: 0s !important;
    transition-property: none !important;
 }

동영상

같은 페이지에서 영웅/배너 뒤에 자동 재생 동영상이 있습니다. 자동 재생 속성을 조작하거나 css로 동영상을 일시 중지하는 것이 불가능하기 때문에 동영상을 삭제하기로 결정했습니다. 운 좋게도 실제로 비디오 뒤에 정적 배경 이미지가 있으므로 무언가를 제거할 때 레이아웃이 엉망이 되지 않습니다.

video {
  display: none;
}

완벽한 스타일

저장소에서 설치 방법에 대한 전체 스타일 및 지침을 찾을 수 있습니다.

에바조나파눌라 / mimmit-koodaa-motion-safer-css

Mimmit Koodaa-website를 위한 모션 안전 UserCSS

마무리

웹 사이트의 스타일을 수정하여 웹을 더 유용하게 만들 수 있는 도구를 발견하게 되어 매우 기쁩니다. 물론 UserCSS에 대한 수많은 다른 사용 사례가 있으며 빨리 살펴보고 싶습니다.

그러나 이것은 웹을 사용 가능하고 접근 가능하게 만드는 책임이 사용자에게 있음을 의미하지는 않습니다. 접근성은 확실히 개발자가 사용자 인터페이스를 만들 때 배우고 관심을 가져야 하는 것입니다. 나 자신을 위해 사이트를 수정할 수 있는 도구가 있다고 해도 대부분의 사람들이 가지고 있다는 의미는 아닙니다.

UserCSS 또는 유사한 솔루션을 사용해 본 적이 있습니까?

Daria Nepriakhina에 Unsplash님의 표지 사진