- Minimap blog chỉ hiển thị với người dùng Firefox desktop là một ví dụ thử nghiệm tính năng CSS dành riêng cho trình duyệt, trong bối cảnh thị phần Firefox thấp, chỉ 4%
- Điểm cốt lõi là hàm CSS
element() chỉ Firefox hỗ trợ; trong triển khai thực tế dùng -moz-element() có vendor prefix
- Hàm này hiển thị một phần tử HTML bất kỳ như hình ảnh, đồng thời phản ánh theo thời gian thực cả việc chọn văn bản, cuộn trang và thay đổi của ảnh tải lười
- Nền của minimap được đảm nhiệm bởi một dòng CSS vẽ node DOM
#main làm background, còn việc di chuyển khung viewport hiện tại có dùng thêm JavaScript
- Tận dụng tính năng riêng của Firefox có thể tái sử dụng một phần trang làm nền minimap mà không cần render canvas riêng
Minimap dựa trên element() dành riêng cho Firefox
- Minimap trong bài blog là tính năng hiển thị với người dùng Firefox desktop, và thị phần Firefox hiện được nhắc là 4%
- Firefox là trình duyệt duy nhất hỗ trợ hàm CSS
element(), và khi dùng thực tế cần có vendor prefix
- Hàm
element() có thể hiển thị một phần tử HTML bất kỳ trong trang như hình ảnh
- Đối tượng được hiển thị không phải là ảnh chụp màn hình tĩnh, mà hoạt động như hình ảnh live
- Những thay đổi như chọn văn bản hoặc ảnh tải lười xuất hiện trong lúc cuộn cũng được phản ánh
Cách triển khai
- CSS định nghĩa một phần tử HTML khác làm ảnh nền có dạng như sau
mini-map .screen-image .canvas {
background: white -moz-element(#main) no-repeat scroll center center / contain;
}
-moz-element(#main) có vai trò vẽ node DOM #main làm ảnh nền của minimap- Việc di chuyển khung viewport hiện tại trong minimap cũng dùng JavaScript, nhưng phần cốt lõi để vẽ một node DOM khác chỉ là một dòng CSS
- Trong Firefox, có thể dùng
-moz-element để hiển thị một phần trang như minimap
1 bình luận
Ý kiến trên Hacker News
10 năm trước tôi đã làm một thư viện JS kiểu đồ chơi để gấp các phần tử DOM như giấy là https://oridomi.com, và đã hy vọng mọi người sẽ dùng element() thay vì phải sao chép node một cách nhàm chán mỗi lần gấp lại
Giờ đã 10 năm trôi qua mà tính năng CSS ngách này vẫn chưa được các trình duyệt khác chấp nhận, và đặc tả CSS Custom Filters cùng thời khi đó tôi cũng tưởng sắp được dùng ngay, nhưng đến giờ vẫn chưa có traction
Một mặt thì tôi hiểu việc từ bỏ một tính năng nếu không thể làm cho nó an toàn, nhưng mặt khác tôi thực sự muốn có CSS Custom Filters và đến giờ vẫn thường nghĩ đến những việc lẽ ra có thể làm được với nó
https://lists.webkit.org/pipermail/webkit-dev/2014-January/0...
Nếu dùng editor có minimap thì việc đầu tiên tôi làm là tắt nó đi
Với việc viết code thì đây gần như là tính năng vô dụng nhất, và trên website cũng có vẻ vô dụng tương tự. Nội dung quá nhỏ nên khó biết mình sẽ đi tới đâu, và dù là trang ngắn hay dài thì lợi ích cũng không đủ để bù cho phần không gian màn hình bị mất hay sự xao nhãng gây ra; một mục lục đúng nghĩa có tiêu đề rõ ràng hoặc chức năng tìm kiếm sẽ tốt hơn nhiều cho việc điều hướng trang
Nơi minimap có thể hay là với những đối tượng mang tính trực quan về bản chất như ảnh lớn hoặc bản đồ, nơi khi phóng to nó giúp biết mình đang nhìn phần nào của tổng thể. Đây là kiểu tính năng nghe có vẻ tương lai và thú vị, nhưng cách triển khai này không có vẻ quá xuất sắc
Hệ điều hành ngày nay có xu hướng ẩn thanh cuộn hoặc làm chúng nhỏ nhất có thể, còn minimap giải quyết được vấn đề đó đồng thời cũng cho thấy một chút hình dạng trực quan của nội dung file. Không đọc được chữ, nhưng nếu là file đã làm việc lâu thì bạn sẽ biết chính xác mình đang nhìn vào đâu
Tôi hiếm khi nhìn chằm chằm vào nó, nhưng vì nó nằm trong tầm mắt nên tôi vô thức quét qua khá thường xuyên. Kiểu tính năng này rõ ràng không dành cho tất cả mọi người, nhưng không thích nó rồi kết luận nó vô dụng là một sai lầm
Ví dụ VSCode hiển thị lỗi rất nổi bật bằng màu đỏ trên minimap, nên việc nhảy đến vị trí đó sẽ dễ hơn
Thanh cuộn cho biết độ dài của trang để bạn quyết định có tiếp tục đọc hay không, còn minimap giúp phân biệt giữa “một bài ngắn nhưng phía sau có thêm nhiều trang bình luận có thể bỏ qua” với “một bài vốn dĩ quá dài để đọc”
Tuy vậy, tôi nghĩ về code theo kiểu thị giác và không gian, và cũng có xu hướng không chia nhỏ file cho đến khi cần, nên nó giúp tôi nhìn “hình dạng” của file để di chuyển nhanh. Đặc biệt đúng khi file được chia thành những phần rõ ràng
Tôi cũng đồng ý với ý về ảnh lớn hay bản đồ. Hầu hết trình chỉnh sửa ảnh đều có kiểu viewport như vậy, và nó khá hữu ích khi làm việc chi tiết
Tôi thấy được công dụng, nhưng cũng khá wild. Khi chọn văn bản thì nó cập nhật theo thời gian thực, và trông như một viewport riêng hướng tới gần như cùng một nội dung
Tôi đang nghĩ về các use case và hệ quả của nó; nó cũng có thể được làm cho hoạt động với các phần tử bị ẩn bằng offscreen hay mẹo
overflow:hidden. Tuy vậy, theo tôi biết thì vẫn chưa có cách nào biến phần tử đó thành ảnh nếu không dùng thư viện, có lẽ vì lý do bảo vệ quyền riêng tưTrang MDN khá ngắn nên tôi có nhiều câu hỏi. Có lẽ ta có thể áp dụng trực tiếp các bộ lọc và biến dạng CSS lên phần tử, nhưng việc nó được xử lý như nền liệu có mở ra khả năng mới nào không? Dù đã tồn tại từ lâu mà đây là lần đầu tôi nghe tới, tôi cũng không ngờ loại tính năng này lại từng được đưa vào danh sách đề cử của CSS. Nếu chỉ nhắm Firefox và không quan tâm Chrome, tôi tự hỏi ngoài việc sao chép viewport thì còn được dùng đến mức nào
Ví dụ có thể dùng cho mục đích chỉnh sửa, và có lẽ còn nhiều use case tôi chưa nghĩ tới. Về cơ bản đây không phải những tính năng thật sự cần thiết, nhưng mỗi cái đều có nét hay riêng
Tôi gặp website chỉ chạy trên Chrome mỗi ngày. Đã đến lúc phản công rồi :)
Tháng trước khi làm check-in chuyến bay quốc tế của American Airlines, trên Firefox checkbox cần thiết không hiện ra nên tôi không thể hoàn tất quy trình check-in; chỉ sau khi phát hiện trên Chrome nó có hiển thị thì tôi mới làm tiếp được
Tôi từng gặp vài trang obscure hơn trên website Vanguard bị vỡ kèm lỗi console, còn chuyển sang Chrome thì lại hoạt động
Tôi thấy nhiều trang từng chạy tốt trên Firefox giờ lại không chạy nữa, và thỉnh thoảng phải mở trình duyệt khác. Tôi thật sự mong không phải như vậy. Mặc định tôi vẫn dùng Firefox.
element()đã được hỗ trợ đầy đủ trên Firefox kèm-moz-từ năm 2011, trong khi các trình duyệt khác dường như còn chưa hỗ trợ một phần, điều này khá bất ngờ https://caniuse.com/css-element-functionNếu có hỗ trợ đa trình duyệt thì không chỉ minimap mà còn có thể nghĩ ra thêm vài trường hợp sử dụng rất mạnh mẽ. Nếu có ai quen với đội Chrome hay WebKit thì tôi muốn biết lý do. Không rõ là vì thiếu quan tâm, khó triển khai với hiệu năng tốt, hay có vấn đề bảo mật phức tạp nào đó
element()làm https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box...Cụ thể là xử lý phản chiếu của phần tử. Cá nhân tôi thấy trường hợp sử dụng lớn nhất của
-moz-elementcũng chính là phản chiếu đóMinimap thì dễ thương đấy, nhưng trình bảo vệ màn hình bật lên khi để tab ở trạng thái idle 3 phút còn thú vị hơn
Thật vui khi web vẫn còn giữ được chút tinh nghịch như vậy
Cái này trông như một tính năng có thể bị các trang web cố tình phá hỏng chức năng trình duyệt mặc định như lưu ảnh bằng chuột phải hay chọn văn bản lạm dụng nặng nề
Nếu render toàn bộ trang thành ảnh nền thì người ta sẽ không còn kiểm tra, lưu hay dịch nội dung được nữa. Đây chỉ là ví dụ đầu tiên tôi nghĩ ra thôi, và có vẻ sẽ có đủ kiểu cách độc hại để hành hạ người đọc bằng hàm này
Lý do đa số website không làm vậy không phải vì họ không đủ khả năng, mà vì thực sự họ không có ý định làm thế, và các website tồi sẽ phải chịu trừng phạt kinh tế khi người dùng bỏ sang đối thủ
Tuy nhiên, trong các lĩnh vực không phải thị trường tự do như cổng intranet công ty hay website chính quyền địa phương tệ hại, nguyên lý này không hoạt động tốt nên các thứ thù địch với người dùng xuất hiện thường xuyên hơn. Nói chung, nghĩ rằng phải cố tình áp ràng buộc lên người vận hành website thì chất lượng web mới tăng là một sai lầm; thực tế là ngược lại
Thật ấn tượng khi minimap hoạt động tốt đến vậy với bài viết dài. Tôi bấm bừa rồi vào https://www.stefanjudis.com/notes/should-responsive-images-w... và minimap xuất hiện ngay lập tức, còn cập nhật đồng bộ cả với những thao tác như chọn văn bản nên hơi có cảm giác như phép thuật
Hơi tiếc là không thể điều khiển minimap để cuộn như trong Sublime Text, nhưng từ góc độ người viết website thì có lẽ sẽ khó triển khai hơn. Dù vậy, việc web có thể làm được chuyện này vẫn rất tuyệt, và tôi tò mò không biết cần bao nhiêu công sức để hỗ trợ tính năng CSS phức tạp này trên Chrome hay Safari
Tôi đã dùng Firefox suốt năm qua vì có một sự không tương thích kỳ quặc giữa GPU và giải mã video của Chrome
Bị rớt frame và chất lượng YouTube bị giảm xuống. Ngoài chuyện Firefox thực sự không có trình dịch web nào tốt thì tôi không thấy vấn đề lớn nào.
-moz-elementtrông hay đấy, mong là nó cũng có mặt trên các trình duyệt khácLý do chính là nó mặc định cung cấp bản portable có thể tìm ra profile chỉ bằng cách nhìn thư mục, nên rất tiện cho đồng bộ. Nhưng nó quá chậm. Ngay cả khi tắt mail và feed ngốn CPU thì vẫn không thể làm nó nhanh lên, và khi quay lại Firefox rồi sắp xếp lại, nó nhẹ hẳn đến mức tôi thấy cứ dùng 3 profile
normal,dev,mediacùng bookmark để xử lý phần còn lại thì hơnCác tùy chọn UI và khả năng cấu hình của Vivaldi rất tuyệt, nhưng khi cộng thêm Tree Style Tabs, vài addon và cả mấy cú hack CSS cho UI thì tôi lại quay về lấy Firefox làm trình duyệt chính và coi như chưa từng có chuyện gì xảy ra
Tuy vậy, tôi ước Firefox sẽ cache shader WebGL đã biên dịch. Riêng khoản đó thì Chrome vượt trội hoàn toàn. Có thể chỉnh bằng thiết lập nào đó, nhưng tôi chưa kiểm tra, và ở trạng thái mặc định, khi tải lại các trang có nhiều shader thì Chrome gần như xong ngay cả trên di động, còn Firefox có thể mất khá lâu tùy shader
Nếu giờ chúng ta bắt đầu thấy “hoạt động tốt nhất trên Firefox” thay vì “hoạt động tốt nhất trên Chrome/Edge” thì cũng ổn đấy