GN⁺: 파이어폭스 전용 미니맵 (2021)
(stefanjudis.com)- 파이어폭스는 팬시 element() CSS 함수를 지원하는 유일한 브라우저입니다.
- element() CSS 함수를 사용하면 페이지에 임의의 HTML 요소 이미지를 표시할 수 있습니다.
- 블로그 게시물의 미니맵은 element() CSS 함수를 사용하여 만들어졌습니다.
- 미니맵은 실시간으로 동작하며, 텍스트를 선택하거나 스크롤할 때 지연로드 이미지가 표시됩니다.
- 미니맵의 배경 이미지로 다른 HTML 요소를 정의하는 CSS 코드가 제공됩니다.
- 미니맵의 현재 뷰포트 상자를 이동시키기 위한 일부 JavaScript 코드도 있습니다.
- 이 기사는 독자들에게 파이어폭스를 계속 사용하도록 권장하며, 해당 게시물이 HN 1위에 올랐다고 언급합니다.
- 저자는 또한 뉴스레터와 블로그의 다른 자료를 홍보합니다.
Hacker News 의견
- 개발자가 DOM 요소와 사용자 정의 GLSL 셰이더를 접는 JS 라이브러리를 만들었지만, 다른 브라우저에서는 널리 채택되지 않았습니다.
- 일부 사람들은 편집기와 웹 사이트의 미니맵이 작은 크기, 화면 공간 손실 및 색인 및 검색 기능과 같은 더 나은 대안으로 인해 쓸모 없다고 생각합니다.
- Firefox에서
element()기능에 대한 크로스 브라우저 지원의 부재는 놀랍고, 관심, 구현 난이도 및 보안 문제에 대한 의문을 제기합니다. - 미니맵 기능의 실시간 업데이트 및 별도의 뷰포트 특성은 영향과 잠재적인 사용 사례를 가지고 있지만, 요소를 이미지로 변환하고 CSS 필터를 적용하는 것에 대한 의문이 있습니다.
- Chrome에서만 작동하는 사이트에 대항할 필요가 있습니다.
- 미니맵 기능은 사이트에서 브라우저 기능을 손상시키고 살펴보기, 저장 및 번역과 같은 사용자 작업을 제한하는 데 악용될 수 있습니다.
- Firefox의 화면보호기 기능은 유쾌합니다.
- Firefox는 GPU 호환성으로 인해 선호되는 브라우저이지만, 좋은 웹 번역기가 없습니다.
-
-moz-element기능이 다른 브라우저에서 채택될 것을 희망합니다. - 일부 사용자는 기사에서 미니맵 기능을 볼 수 없으며 그 이유를 모릅니다.