มินิแมปสำหรับ Firefox โดยเฉพาะ (2021)

 (stefanjudis.com)
1 คะแนน โดย GN⁺ 2023-07-18 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • มินิแมปของบล็อกที่แสดงเฉพาะผู้ใช้ Firefox บนเดสก์ท็อป เป็นกรณีศึกษาของการทดลองใช้ฟีเจอร์ CSS เฉพาะเบราว์เซอร์ แม้ Firefox จะมีส่วนแบ่งตลาดเพียง 4%
  • แกนหลักคือ ฟังก์ชัน CSS element() ที่ Firefox เท่านั้นที่รองรับ และในการใช้งานจริงจะใช้ -moz-element() ที่มี vendor prefix
  • ฟังก์ชันนี้สามารถ แสดงองค์ประกอบ HTML ใดก็ได้เสมือนเป็นภาพ ขณะเดียวกันก็สะท้อนการเลือกข้อความ การเลื่อนหน้า และการเปลี่ยนแปลงของภาพ lazy-loading แบบเรียลไทม์
  • พื้นหลังของมินิแมปใช้ CSS เพียงบรรทัดเดียวในการวาด DOM node #main เป็น background และใช้ JavaScript ร่วมด้วยสำหรับการเลื่อนกล่อง viewport ปัจจุบัน
  • เมื่อใช้ฟีเจอร์เฉพาะของ Firefox ก็สามารถนำบางส่วนของหน้ามาใช้ซ้ำเป็นพื้นหลังของมินิแมปได้ โดยไม่ต้องเรนเดอร์ผ่านแคนวาสแยกต่างหาก

มินิแมปที่อิงกับ element() สำหรับ Firefox โดยเฉพาะ

  • มินิแมปของบทความในบล็อกเป็นฟีเจอร์ที่แสดงให้ผู้ใช้ Firefox บนเดสก์ท็อปเห็นเท่านั้น และมีการระบุว่าส่วนแบ่งตลาดของ Firefox ปัจจุบันอยู่ที่ 4%
  • Firefox เป็นเบราว์เซอร์เดียวที่รองรับ ฟังก์ชัน CSS element() และในการใช้งานจริงจำเป็นต้องใช้ vendor prefix
  • ฟังก์ชัน element() สามารถแสดงองค์ประกอบ HTML ใด ๆ ภายในหน้าเป็นเสมือนภาพได้
    • สิ่งที่แสดงไม่ใช่ภาพหน้าจอแบบคงที่ แต่ทำงานเหมือน ภาพแบบ live
    • การเลือกข้อความหรือการเปลี่ยนแปลงอย่างภาพ lazy-loading ที่ปรากฏระหว่างการเลื่อนหน้าก็จะถูกสะท้อนด้วย

วิธีการทำงาน

  • CSS ที่กำหนดองค์ประกอบ HTML อื่นให้เป็นภาพพื้นหลังมีรูปแบบดังนี้
mini-map .screen-image .canvas {
  background: white -moz-element(#main) no-repeat scroll center center / contain;
}
  • -moz-element(#main) ทำหน้าที่วาด DOM node #main เป็น ภาพพื้นหลัง ของมินิแมป
  • มีการใช้ JavaScript ด้วยสำหรับการเลื่อนกล่อง viewport ปัจจุบันภายในมินิแมป แต่หัวใจสำคัญในการวาด DOM node อื่นคือ CSS เพียงบรรทัดเดียว
  • ใน Firefox สามารถใช้ -moz-element เพื่อแสดงบางส่วนของหน้าในลักษณะมินิแมปได้

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2023-07-18
ความคิดเห็นบน Hacker News

  • เมื่อ 10 ปีก่อนฉันเคยทำไลบรารี JS แนวของเล่นสำหรับพับองค์ประกอบ DOM เหมือนกระดาษชื่อ https://oridomi.com และหวังว่าจะได้ใช้ element() แทนการโคลนโหนดแบบน่าเบื่อทุกครั้งที่พับ
    ผ่านมา 10 ปีแล้ว ฟีเจอร์ CSS เฉพาะทางนี้ก็ยังไม่ได้ถูกรับไปใช้โดยเบราว์เซอร์อื่น และสเปก CSS custom filters ที่ออกมาในช่วงเวลาเดียวกัน ตอนนั้นก็คิดว่าอีกไม่นานคงได้ใช้ แต่จนถึงตอนนี้ก็ยังไม่ได้รับ traction

    • เท่าที่ทราบ ผู้พัฒนาเบราว์เซอร์มองว่าสเปก CSS custom filters ยากเกินกว่าจะนำไปใช้อย่างปลอดภัย
      ด้านหนึ่งก็เข้าใจได้ว่าถ้าทำให้ปลอดภัยไม่ได้ก็ควรเลิกฟีเจอร์นั้นไป แต่อีกด้านหนึ่งฉันอยากได้ CSS custom filters มากจริงๆ และจนถึงตอนนี้ก็ยังนึกถึงงานที่น่าจะทำได้ด้วยมันอยู่บ่อยๆ
      https://lists.webkit.org/pipermail/webkit-dev/2014-January/0...

  • ถ้าใช้เอดิเตอร์ที่มีมินิแมป สิ่งแรกที่ฉันทำคือ ปิดมันทันที
    สำหรับการเขียนโค้ดมันแทบจะเป็นฟีเจอร์ที่ไร้ประโยชน์ที่สุด และบนเว็บก็ดูไร้ประโยชน์พอๆ กัน เนื้อหามันเล็กเกินกว่าจะดูออกว่าจะไปที่ไหน ไม่ว่าจะเป็นหน้าเว็บสั้นหรือยาวก็ไม่คุ้มกับพื้นที่หน้าจอที่เสียไปหรือความรบกวนสายตา และสารบัญที่ดีมีหัวข้ออธิบายชัดเจนหรือฟังก์ชันค้นหาก็ดีกว่ามากสำหรับการนำทางในหน้า
    ที่ที่มินิแมปอาจดูดีได้คือกับสิ่งที่เป็นภาพโดยเนื้อแท้ เช่น รูปขนาดใหญ่หรือแผนที่ ซึ่งตอนซูมแล้วช่วยให้รู้ว่ากำลังดูส่วนไหนของภาพรวมอยู่ เป็นฟีเจอร์แห่งอนาคตที่เท่ดี แต่ implementation นี้ดูไม่ค่อยดีเท่าไร

    • ฉันเปิดไว้ มันทำงานเหมือน แถบเลื่อนที่ใหญ่ขึ้น เวลาเลื่อนด้วยอุปกรณ์ชี้ตำแหน่งอย่างเมาส์หรือแทร็กแพด
      ทุกวันนี้ระบบปฏิบัติการชอบซ่อนแถบเลื่อนหรือทำให้มันเล็กที่สุดเท่าที่จะทำได้ แต่มินิแมปช่วยแก้ปัญหานั้นได้ และยังแสดงรูปทรงโดยรวมของเนื้อหาในไฟล์ให้เห็นเล็กน้อยด้วย ถึงจะอ่านข้อความไม่ได้ แต่ถ้าเป็นไฟล์ที่ทำมานานแล้ว คุณจะรู้ได้ค่อนข้างแม่นว่ากำลังดูอะไรอยู่
    • ฉันใช้ตรงกันข้ามเลย เพราะต้องจัดการไฟล์ยาวๆ บ่อย มินิแมปจึงเป็น แถบเลื่อนที่ดีกว่ามาก สำหรับฉัน
      ถึงจะไม่ค่อยจ้องมันตรงๆ แต่มันอยู่ในสายตาเลยเผลอกวาดตามองอยู่บ่อยๆ แบบไม่รู้ตัว ฟีเจอร์แบบนี้ชัดเจนว่าไม่ได้เหมาะกับทุกคน แต่ไม่ชอบมันก็ไม่ได้แปลว่ามันไร้ประโยชน์
    • มันไม่ได้มีไว้ให้อ่านตัวอักษรเล็กๆ แต่มีไว้ดู รูปร่างของโค้ด
      เช่น VSCode จะแสดงข้อผิดพลาดในมินิแมปด้วยสีแดงที่เห็นเด่นชัด ทำให้กระโดดไปยังตำแหน่งนั้นได้ง่าย
    • มินิแมปยังอาจดีสำหรับการปรับปรุง ฟังก์ชันพรีวิว ของแถบเลื่อนแบบดั้งเดิมด้วย
      แถบเลื่อนบอกความยาวของหน้าเพื่อให้ตัดสินใจได้ว่าจะอ่านต่อไหม แต่มินิแมปช่วยแยกได้ว่าเป็นกรณี “บทความสั้นที่ต่อท้ายด้วยคอมเมนต์หลายหน้าซึ่งข้ามได้” หรือ “บทความที่ยาวเกินจะอ่านตั้งแต่แรก”
    • ฉันค่อนข้างชอบมินิแมป มันไม่ควรเป็นสิ่งจำเป็น และฉันก็เข้าใจเต็มที่ว่าทำไมบางคนถึงอยากปิดมัน มันกินพื้นที่เยอะ และสำหรับคนที่ชอบแบ่งหน้าต่างดูไฟล์บ่อยๆ ก็อาจน่ารำคาญพอสมควร
      แต่ฉันคิดเรื่องโค้ดในเชิง ภาพและตำแหน่ง และมักไม่ค่อยแยกไฟล์จนกว่าจะจำเป็น มันเลยช่วยให้ดู “รูปร่าง” ของไฟล์แล้วกระโดดไปยังจุดต่างๆ ได้เร็ว โดยเฉพาะเมื่อไฟล์แบ่งเป็นส่วนชัดเจน
      ฉันก็เห็นด้วยเรื่องรูปใหญ่หรือแผนที่ โปรแกรมแต่งภาพส่วนใหญ่ก็มีฟังก์ชัน viewport แบบนั้น และมันมีประโยชน์มากตอนทำงานรายละเอียด

  • มองเห็นประโยชน์อยู่ แต่ก็ค่อนข้าง wild มัน อัปเดตแบบเรียลไทม์ ตอนเลือกข้อความ และดูเหมือน viewport แยกอีกอันที่ชี้ไปยังเนื้อหาเกือบชุดเดียวกัน
    ฉันกำลังคิดถึง use case กับผลกระทบของมันอยู่ และมันก็น่าจะทำงานกับองค์ประกอบที่ซ่อนด้วยเทคนิค offscreen หรือ overflow:hidden ได้ด้วย แต่เท่าที่รู้ ถ้าไม่มีไลบรารีก็ยังไม่มีวิธีแปลงองค์ประกอบนั้นเป็นภาพ และคงเพราะเหตุผลด้านความเป็นส่วนตัว
    หน้า MDN ค่อนข้างสั้นเลยมีคำถามเยอะ ถึงจะสามารถใช้ CSS filters และการบิดรูปกับองค์ประกอบโดยตรงได้อยู่แล้ว แต่การที่อันนี้ถูกจัดการเหมือนพื้นหลังจะเปิดความเป็นไปได้ใหม่หรือเปล่า? มันมีมานานแล้วแต่ฉันเพิ่งเคยได้ยิน และไม่คิดว่าฟีเจอร์แบบนี้จะเคยถูกเสนอเข้าชิงใน CSS ด้วย ถ้าตั้งใจทำเพื่อ Firefox อย่างเดียวและไม่สน Chrome ฉันก็สงสัยว่ามันจะมีประโยชน์มากไปกว่าการโคลน viewport แค่ไหน

    • น่าจะมี การใช้งานเจ๋งๆ ได้ไม่น้อย เช่น กระจก แว่นขยาย หรือการคงให้เห็นบางส่วนของหน้าเว็บที่อยู่นอกจออยู่ตลอด
      อย่างเช่นอาจใช้กับงานแก้ไขได้ และน่าจะยังมี use case ที่ฉันนึกไม่ถึงอีกมาก โดยพื้นฐานแล้วมันไม่ใช่ฟีเจอร์ที่จำเป็นสุดๆ แต่แต่ละแบบก็ดูเท่ในทางของมัน

  • ทุกวันฉันเจอ เว็บที่ใช้ได้แค่บน Chrome ตอนนี้ได้เวลาสวนกลับแล้ว :)

    • ฉันใช้แต่ Firefox และท่องเว็บแบบค่อนข้างปกติ เรื่องแบบนั้นแทบไม่ค่อยเจอเลย น้อยกว่าหนึ่งครั้งต่อเดือนมากๆ น่าจะประมาณสามเดือนครั้ง
    • เป็นเรื่องเฉพาะภูมิภาคหรือเปล่า? สำหรับฉันมันเกิดขึ้นน้อยมาก แต่มีบาง เว็บของ Google ที่ใช้ประจำซึ่งทำงานบน Firefox แย่กว่า Chrome
    • บน Firefox ทั้งบน Mac และ Linux ฉันเคยเจอปัญหาที่ checkbox บางอันไม่แสดงขึ้นมาเลย
      เดือนที่แล้วตอนเช็กอินเที่ยวบินระหว่างประเทศของ American Airlines ฉันทำขั้นตอนต่อไม่ได้เพราะ checkbox ที่จำเป็นไม่แสดงใน Firefox จนมารู้ว่าเปิดใน Chrome แล้วมันแสดง จึงไปต่อได้
    • เวลาเจอเว็บแบบนั้นฉันหงุดหงิดมาก โดยเฉพาะใน ปี 2023 ที่ไม่มีข้ออ้างแล้ว
      ฉันเคยเจอหน้าที่ obscure กว่าของเว็บไซต์ Vanguard พังพร้อมคอนโซลเออร์เรอร์ แต่พอเปลี่ยนไป Chrome ก็ใช้งานได้
    • ใช่เลย มันทำให้นึกถึงข่าวลือหรือข้อเท็จจริงเก่าๆ เรื่อง การบ่อนทำลายโอเพนซอร์สเพื่อขัดขวาง Firefox
      ฉันเจอหลายหน้าที่เมื่อก่อนทำงานบน Firefox ได้ดีแต่ตอนนี้ไม่ได้แล้ว และบางครั้งต้องเปิดเบราว์เซอร์อื่น หวังจริงๆ ว่าจะไม่ใช่เรื่องแบบนั้น โดยปกติฉันใช้ Firefox เป็นหลัก

  • น่าประหลาดใจที่ element() บน Firefox รองรับอย่างสมบูรณ์มาตั้งแต่ปี 2011 พร้อม -moz- แต่เบราว์เซอร์อื่นดูเหมือนจะยังไม่รองรับแม้แต่บางส่วน https://caniuse.com/css-element-function
    ถ้ามีการรองรับข้ามเบราว์เซอร์ ก็นึก use case ทรงพลังได้อีกหลายอย่าง ไม่ใช่แค่มินิแมปอย่างเดียว ถ้ามีใครรู้จักคนในทีม Chrome หรือ WebKit ก็อยากรู้เหตุผลว่าเป็นเพราะไม่ค่อยมีความสนใจ ทำให้มีประสิทธิภาพดีได้ยาก หรือมีปัญหาด้านความปลอดภัยที่ซับซ้อนกันแน่

    • เบราว์เซอร์ที่ใช้ Chromium มี -webkit-box-reflect ซึ่งทำหน้าที่บางส่วนที่ element() ทำ https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box...
      โดยเฉพาะคือจัดการการสะท้อนขององค์ประกอบ ส่วนตัวคิดว่า use case ที่ใหญ่ที่สุดของ -moz-element ก็คือเรื่องการสะท้อนนี่เอง

  • มินิแมปก็น่ารักดี แต่ โปรแกรมรักษาหน้าจอ ที่เปิดขึ้นเมื่อปล่อยแท็บ idle ไว้ 3 นาทีสนุกกว่าอีก
    ชอบที่บนเว็บยังมีความขี้เล่นแบบนี้หลงเหลืออยู่

  • สิ่งนี้ดูเหมือนเป็นฟีเจอร์ที่เว็บไซต์ซึ่ง ตั้งใจทำลายความสามารถพื้นฐานของเบราว์เซอร์ อย่างการคลิกขวาบันทึกรูปหรือเลือกข้อความ น่าจะเอาไปใช้ในทางที่แย่มากได้
    ถ้าเรนเดอร์ทั้งหน้าเป็นภาพพื้นหลัง ก็จะไม่สามารถตรวจสอบ บันทึก หรือแปลเนื้อหาได้อีก นี่เป็นแค่ตัวอย่างแรกที่นึกออก และน่าจะมีวิธีไม่หวังดีอีกสารพัดที่จะใช้ฟังก์ชันนี้มารังแกผู้อ่าน

    • เห็นด้วยว่ามันดูมีโอกาสถูกนำไปใช้ในทางที่แย่ได้ แต่ตัวอย่างที่ยกมาไม่ค่อยตรง ฟังก์ชันที่พูดถึงนั้นทุกวันนี้ก็ปิดกั้นได้อยู่แล้วด้วย CSS หรือ JS เพียงนิดเดียว จึงไม่จำเป็นต้องทำให้ซับซ้อนด้วย element canvas
      เหตุผลที่เว็บไซต์ส่วนใหญ่ไม่ทำแบบนั้น ไม่ใช่เพราะทำไม่ได้ แต่เพราะจริง ๆ แล้วไม่ได้อยากทำ และเว็บไซต์ห่วย ๆ ก็มี บทลงโทษทางเศรษฐกิจ คือผู้ใช้จะหนีไปหาคู่แข่ง
      แต่ในพื้นที่ที่ไม่ใช่ตลาดเสรี เช่น พอร์ทัลอินทราเน็ตของบริษัทหรือเว็บไซต์รัฐบาลท้องถิ่นห่วย ๆ หลักการนี้ใช้ได้ไม่ดี จึงมักเห็นสิ่งที่เป็นปฏิปักษ์ต่อผู้ใช้บ่อยกว่า โดยทั่วไปแล้ว การคิดว่าต้องคอยจำกัดผู้ดูแลเว็บไซต์โดยเจตนาเพื่อให้คุณภาพเว็บดีขึ้นนั้นเป็นความเข้าใจผิด จริง ๆ แล้วตรงกันข้าม

  • น่าประทับใจที่มินิแมปทำงานได้ดีแค่ไหนกับบทความยาว ๆ ผมลองคลิกสุ่มไปเจอ https://www.stefanjudis.com/notes/should-responsive-images-w... แล้วมินิแมปก็ขึ้นมาทันที และอัปเดตแบบซิงก์กับการกระทำอย่างการเลือกข้อความด้วย จนรู้สึกเหมือนเวทมนตร์นิด ๆ
    น่าเสียดายอยู่นิดที่มันยังควบคุมมินิแมปเพื่อเลื่อนหน้าแบบ Sublime Text ไม่ได้ แต่ในมุมคนทำเว็บก็น่าจะทำยากกว่า ถึงอย่างนั้นการที่เว็บทำอะไรแบบนี้ได้ก็น่าทึ่งมาก และก็สงสัยว่าถ้าจะให้ Chrome หรือ Safari รองรับฟีเจอร์ CSS ซับซ้อนนี้จะต้องใช้แรงงานมากแค่ไหน

    • แปลกดี ในต้นฉบับเห็นชัด แต่ในโพสต์นี้กลับไม่เห็น อาจเป็นเพราะส่วนขยายก็ได้?

  • ช่วงปีที่ผ่านมาใช้ Firefox เพราะมีความเข้ากันไม่ได้แปลก ๆ ระหว่าง GPU กับการถอดรหัสวิดีโอของ Chrome
    มันทำให้เกิดเฟรมดรอปและคุณภาพ YouTube ลดลง นอกจากเรื่องที่บน Firefox ไม่มีเว็บแปลภาษาที่ดีจริง ๆ แล้ว ก็แทบไม่เจอปัญหาใหญ่ -moz-element ดูดีมาก และอยากให้มีในเบราว์เซอร์อื่นด้วย

    • ใช้ Firefox มาตลอดตั้งแต่ Opera แทบจะจบไปแล้ว แต่ในช่วง 3–6 เดือนที่ผ่านมา ผมพยายามจริงจังมากที่จะใช้ Vivaldi
      เหตุผลหลักคือมันมีพอร์ตพกพามาให้เป็นค่าปริยาย และหาโปรไฟล์ได้จากการดูแค่โฟลเดอร์ จึงสะดวกกับการซิงก์มาก แต่ช้ามาก ต่อให้ปิดเมลกับฟีดที่กิน CPU หนัก ๆ ก็ยังทำให้มันเร็วขึ้นไม่ได้ พอกลับมาใช้ Firefox แล้วจัดการใหม่ ก็รู้สึกว่ามันลื่นมากจนคิดว่ามี 3 โปรไฟล์คือ normal, dev, media แล้วใช้บุ๊กมาร์กจัดการที่เหลือน่าจะดีกว่า
      ตัวเลือก UI และความสามารถในการปรับแต่งของ Vivaldi นั้นยอดเยี่ยม แต่พอรวม Tree Style Tabs กับแอดออนอีกบางตัว รวมถึงการแฮ็ก CSS ของ UI เข้าไป สุดท้ายก็กลับมาใช้ Firefox เป็นเบราว์เซอร์หลักอีกครั้งและทำเหมือนไม่มีอะไรเกิดขึ้น
      อย่างไรก็ตาม อยากให้ Firefox แคช WebGL shaders ที่คอมไพล์แล้ว ตรงนี้ Chrome เหนือกว่ามาก อาจจะมีวิธีปรับใน settings ก็ได้ แต่ผมยังไม่ได้ไปดู และในค่าเริ่มต้น เวลารีโหลดหน้าที่มี shader เยอะ ๆ Chrome จะเกือบเสร็จทันทีแม้บนมือถือ ขณะที่ Firefox อาจใช้เวลานาน ขึ้นอยู่กับ shader

  • ถ้าจากนี้ไปเราเริ่มเห็นคำว่า ทำงานได้ดีที่สุดบน Firefox แทน “ทำงานได้ดีที่สุดบน Chrome/Edge” ก็คงดีเหมือนกัน