1 คะแนน โดย GN⁺ 2025-06-09 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • โฮมเพจส่วนตัวในทศวรรษ 1990 มักใช้ ข้อความกะพริบและข้อความเลื่อน เพื่อทำให้ “อัปเดตล่าสุด” ดูเด่นสะดุดตา และแท็กทั้งสองก็กลายเป็นร่องรอยของวัฒนธรรมเว็บที่พบเห็นได้ยากในปัจจุบัน
  • <blink> เป็นแท็กที่ถูกใส่เข้ามาใน Netscape Navigator 2.0 เมื่อปี 1995 โดย Lou Montulli มักถูกกล่าวถึงว่าเป็นแหล่งที่มาของไอเดียนี้ แต่เขาระบุว่าไม่ได้เขียนโค้ดส่วนที่นำไปใช้งานจริง
  • ในปีเดียวกัน Microsoft Internet Explorer 2.0 ได้เปิดตัว <marquee> ซึ่งให้ เอฟเฟกต์แบบอิงแอตทริบิวต์ สำหรับควบคุมทิศทางการเลื่อน ความเร็ว การวนซ้ำ และการเคลื่อนที่ไปกลับ
  • เมื่อนำแท็กทั้งสองมาซ้อนกัน ใน Netscape จะเห็นข้อความกะพริบ ส่วนใน IE จะเห็นข้อความเลื่อน และแม้ในเบราว์เซอร์ที่ไม่รองรับ ตัวข้อความเองก็ยังอ่านได้
  • <blink> แทบหายไปแล้ว ส่วน <marquee> ยังเหลืออยู่ในเบราว์เซอร์สมัยใหม่บางตัว แต่บนเว็บไซต์จริงมันใกล้เคียงกับ ความย้อนยุคดิจิทัล ที่บั่นทอนการเข้าถึงและความสะดวกในการใช้งานมากกว่า

การแข่งขันด้านเอฟเฟกต์ภาพที่เบราว์เซอร์ยุค 1990 สร้างขึ้น

  • <blink> และ <marquee> เป็นองค์ประกอบการออกแบบเว็บแบบยุค 1990 ที่เป็นตัวแทนของการดึงความสนใจบนโฮมเพจส่วนตัว
  • ดูเหมือนว่าแม้แต่ Macromedia Dreamweaver ก็ยัง扱ับวิธีห่อ <blink> ด้วย <marquee> เหมือนเป็นแอนติแพตเทิร์น
  • <blink>: จากมุกตลกสู่แท็กที่ถูกใช้อย่างแพร่หลาย

    • การประดิษฐ์ <blink> โดยทั่วไปมักยกเครดิตให้ Lou Montulli แต่เขาระบุว่าไม่ได้เขียนโค้ด implementation สุดท้ายด้วยตัวเอง
    • Montulli เป็นผู้สร้างเบราว์เซอร์แบบข้อความล้วน Lynx ก่อนจะเข้าร่วม Netscape ในปี 1994
    • มีเรื่องเล่าว่าเขาพูดว่าเอฟเฟกต์ภาพที่วิศวกร Netscape เสนอกันอยู่นั้นใช้กับ Lynx ไม่ได้ และพูดติดตลกว่าเอฟเฟกต์ที่ฉูดฉาดที่สุดที่ทำได้ในเบราว์เซอร์ทั้งสองฝั่งคือการเปิดปิดข้อความ
    • หลังจากนั้น วิศวกรอีกคนที่ไม่เปิดเผยชื่อได้เพิ่ม <blink> เข้าไปในการทำงานดึกคืนหนึ่ง
    • Netscape Navigator 2.0 ใส่การรองรับ <blink> ในปี 1995 และในช่วงเวลาเดียวกันก็รวม animated GIF และรูปแบบแรกเริ่มของ JavaScript ไว้ด้วย
    • วิธีใช้เป็นโครงสร้างเรียบง่ายที่ไม่มีแอตทริบิวต์ เช่น <BLINK>This is my blinking text!</BLINK>
    • เมื่อข้อเสนอแนะ HTML4 ออกมาในอีก 2 ปีต่อมา <blink> ถูก บันทึกเป็นเอกสาร ในลักษณะเป็นมุกตลก แต่บนเว็บช่วงปลายทศวรรษ 1990 มันถูกใช้อย่างมาก
    • มักใช้กับหัวข้อ “latest updates” ของโฮมเพจส่วนตัว หรือห่อบล็อกทั้งหมดไว้ และสามารถสัมผัสบรรยากาศยุคนั้นได้ที่ Cameron’s World
  • <marquee>: ข้อความเลื่อนของ Internet Explorer

    • Microsoft เปิดตัว Internet Explorer 2.0 ในปีเดียวกับ Netscape Navigator 2.0
    • ในตอนนั้น Internet Explorer ยังอยู่ในขั้นไล่ตามฟีเจอร์ที่ Netscape ทำไว้ แต่แทนที่จะใช้ <blink> กลับเปิดตัว <marquee>
    • <marquee> สามารถควบคุมทิศทางการเลื่อน ความเร็ว การวนซ้ำ และการเด้งไปมาหน้าหลังได้ด้วย แอตทริบิวต์หลายแบบ
    • ตัวอย่างคือ <MARQUEE>Oh my god this still works in most modern browsers!</MARQUEE> และยังทำงานได้ในเบราว์เซอร์สมัยใหม่บางตัว

สิ่งที่เกิดขึ้นเมื่อนำสองแท็กมาซ้อนกัน

  • ช่วงปลายทศวรรษ 1990 การห่อคอนเทนต์ที่อยากเน้นด้วยทั้ง <blink> และ <marquee> ก็พบได้บ้างในระดับหนึ่ง
    • ตัวอย่างคือ <MARQUEE><BLINK>This is my really important message!</BLINK></MARQUEE>
    • ผู้ใช้ Netscape จะเห็นข้อความกะพริบ ส่วนผู้ใช้ IE จะเห็นข้อความเลื่อนหรือเคลื่อนที่ไปกลับ
  • วิธีนี้สอดคล้องกับลักษณะของเว็บที่เบราว์เซอร์จะละเว้นองค์ประกอบที่ไม่รู้จักและเรนเดอร์ต่อไป
    • ตาม Postel’s Law แม้มีอินพุตที่เบราว์เซอร์ไม่เข้าใจ เบราว์เซอร์ก็ควรให้การเรนเดอร์ที่ดีที่สุดแก่ผู้ใช้
    • เหตุผลที่องค์ประกอบ <video> สมัยใหม่ไม่ใช่แท็กแบบปิดตัวเอง แต่เป็นรูปแบบบล็อก ก็เพื่อให้เบราว์เซอร์เก่าที่ไม่รู้จัก <video> สามารถอ่านข้อความ fallback ที่อยู่ข้างในได้
  • แม้ในเบราว์เซอร์ที่ไม่รู้จักแท็กใดเลยในสองแท็กนี้ ข้อความคอนเทนต์ก็ยังอ่านได้ต่อไป
    • ในแง่ที่เพิ่มเอฟเฟกต์ฉูดฉาดเฉพาะในเบราว์เซอร์ที่รองรับ และปล่อยให้สภาพแวดล้อมอื่นเหลือข้อความพื้นฐานไว้ วิธีนี้จึงใกล้เคียงกับ progressive enhancement
    • JavaScript และ CSS ก็สามารถนำไปใช้ตามกฎเดียวกันนี้ได้ ซึ่งช่วยเรื่องการบำรุงรักษาและการเข้าถึง

ปัจจุบันเป็นฟีเจอร์ที่ใกล้เคียงกับร่องรอยทางประวัติศาสตร์

  • Netscape 7 ในปี 2002 เป็นเบราว์เซอร์หายากที่รองรับทั้ง <blink> และ <marquee>
    • แม้จะมีจุดจุกจิกเรื่องลำดับการรองรับและองค์ประกอบที่ซ้อนกัน แต่บนเว็บเพจส่วนตัวบางแห่งก็มีทั้งการเลื่อนและการกะพริบปรากฏพร้อมกัน
  • <blink> เป็น แท็กที่ตายไปแล้วในทางปฏิบัติ และหากจำเป็นจริง ๆ ก็สามารถสร้างเอฟเฟกต์คล้ายกันด้วย CSS ได้
  • <marquee> ยังมีชีวิตอยู่
    • ไม่เพียงมี polyfill แต่ยังมีการรองรับแบบเนทีฟหลงเหลืออยู่ในบางเบราว์เซอร์ด้วย
    • ถึงอย่างนั้นก็ควรหลีกเลี่ยงการใช้ <marquee> บนเว็บไซต์จริง
  • แม้จะน่าสนใจในฐานะสื่อสำหรับเพลิดเพลินกับความย้อนยุคดิจิทัล แต่ไม่มีเหตุผลที่จะบังคับให้ผู้ใช้อื่นต้องเจอกับข้อความที่กะพริบและไหลเลื่อน

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

 
GN⁺ 2025-06-09
ความคิดเห็นจาก Hacker News
  • https://web.archive.org/web/20201111125145/https://danq.me/2...

  • รู้สึกเหมือนเรื่องนี้มีมาตั้งแต่ 3,000 ปีก่อนแล้ว
    ยังจำยุคที่เถียงกันว่าการใช้ navigation ภายใน frame เป็นแนวปฏิบัติที่แย่ไหมได้ หมายถึง frame จริง ๆ ไม่ใช่ iframe ก่อน AJAX เราใช้ HTTP 204 เพื่อส่งข้อความไปยังเซิร์ฟเวอร์โดยไม่ต้องรีเฟรชหน้า และช่วงต้นยุค 2000 ก็ใช้ Dreamweaver วาดเส้นขอบรัฐทับบนแผนที่ประเทศอยู่หลายวัน เพื่อทำ image map ที่คลิกได้
    ถ้าการอัปเดตเทมเพลตของ Dreamweaver ทำให้การเปลี่ยนแปลงหายไป ก็ไม่มี version control ให้กู้คืนได้ และยังเคยประมวลผลตำแหน่งที่คลิกบนภาพจากฝั่ง backend ด้วย เราสตรีมการอัปเดตหน้าเว็บด้วย Motion JPEG และต้องผ่านหลายขั้นตอนเพื่อแก้ PNG alpha blending ใน IE ก่อนจะไปพึ่งวิธีแบบ ActiveX
    เราเคยทำ navigation ของเว็บด้วย Java, Flash, Silverlight และยังจำได้ว่า spacer GIF, conditional comments กับ Firebug นั้นเหมือนผู้กอบกู้แค่ไหน ไม่รู้ว่าแก่ขึ้นตั้งแต่เมื่อไร แต่อยู่ ๆ วันหนึ่งก็เป็นแบบนั้นไปแล้ว

    1. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...
    • ผมเคยสร้างซอฟต์แวร์เว็บด้วย frame และคิดว่าไม่มีปัญหาอะไรเลย จนตอนนี้ก็ยังไม่ค่อยรู้ว่า ปัญหาจริง ๆ ของ frame คืออะไร บางครั้งมีคนพูดถึง accessibility สำหรับ screen reader แต่ก็ยังไม่รู้แน่ชัดว่าปัญหาคืออะไร
    • เคยทำงานให้ลูกค้าที่ต้องรองรับ IE6 และสิ้นหวังทุกครั้งที่ดีไซเนอร์ส่ง mockup Photoshop ที่มี มุมโค้ง มาให้ ท่ามกลางบั๊กและข้อจำกัดสารพัด
      ยังต้องทำ responsive ด้วย แต่ตอนนั้นส่วนใหญ่เป็นการรองรับขนาดเดสก์ท็อปต่าง ๆ และโดยปกติต้องตัดมุมออกมาแล้ววางใน cell ของ table พอทำแบบนี้ด้วยมือไปเรื่อย ๆ ก็เกิดภูมิต้านทานแปลก ๆ ในฐานะนักพัฒนา
    • ยังจำได้ว่าใช้ slice tool ของ Photoshop ตัด GIF อย่างประณีตมาก ๆ แล้วจัดวางให้พอดีใน HTML table
      เป็นดีไซน์ที่เหมาะกับ 800x600 ที่สุด และทุกช่วงเวลาเหล่านั้นก็เลือนหายไปกับกาลเวลาเหมือนน้ำตาในสายฝน
    • ตอนนี้ก็ยังเข้า เว็บที่ใช้ frame หลายครั้งต่อสัปดาห์ ฝั่ง Open Group/POSIX ดูเหมือนจะไม่มีใครบอกพวกเขาว่าสมัยนี้ไม่ควรใช้ frame แล้ว
    • เคยทำเว็บแชตด้วย frame ด้านบนเป็นพื้นที่ที่โหลดข้อความต่อเนื่องไม่สิ้นสุด ส่วนด้านล่างเป็นช่องกรอกที่ได้รับ response 204 เพื่อไม่ให้รีเฟรชเมื่อส่งข้อความ
      ในยุค IE4+ นั่นน่าจะเป็นวิธีที่สง่างามที่สุดแล้ว
  • เป็นของที่เคยทำไว้ก่อนหน้านี้ และทุกครั้งที่เอาให้ดู คนมักตกใจที่ไม่มี JavaScript เลย แอนิเมชันทั้งหมดทำด้วย แท็ก marquee ล้วน ๆ: https://udel.edu/~ianozi/

    • คงเพราะไม่ได้เห็นแท็ก marquee มาราว 20 ปีจนลืมไปแล้วก็ได้ แต่ผมไม่รู้มาก่อนว่า พารามิเตอร์ direction ทำให้เลื่อนแนวตั้งได้
    • https://no-js.abhij.it/
  • เทคนิคที่ผมชอบที่สุดกับ marquee คือการ ซ้อนกัน โดยให้วิ่งคนละทิศทาง
    ถ้าให้ marquee ด้านในเคลื่อนที่สวนทางกับด้านนอกด้วยความเร็วเท่ากัน ก็ทำให้เนื้อหาดูเหมือนเลื่อนไปแล้วหยุดได้ และถ้าเพิ่มหลายชั้นสลับความเร็วกัน ก็ทำเอฟเฟกต์กระเด้งไปมาแบบสุ่มได้ด้วย ผมคิดว่าถ้าจะให้วิธีนี้ทำงาน ต้องกำหนดความกว้างสูงสุดให้ marquee ด้านใน

  • มีเหตุผลหนึ่งที่ marquee มีประโยชน์มาก นั่นคือ HTML injection
    marquee เคลื่อนไหวได้ และแทบไม่มีใครตั้งใจใช้แท็กนี้ จึงระบุได้ง่ายว่าโจมตีสำเร็จหรือไม่เมื่อตรวจช่องโหว่ HTML injection แม้กับคนที่ไม่ใช่สายเทคนิค การอธิบายว่า “สิ่งนี้ไม่ควรขยับ แต่มันขยับ” ก็เข้าใจง่ายกว่า “ข้อความนี้ไม่ควรเป็นตัวหนา แต่มันเป็นตัวหนา” มาก

    • เวลาทำ HTML sanitization ผมจะใส่ marquee อย่างเดียวใน allowlist เป็น easter egg และแทบไม่อนุญาตอย่างอื่นเลย
    • ผมอ่าน Hacker News ผ่านตัว aggregator ที่ทำเอง และบทความนี้ทำให้รู้ว่า aggregator ของผม เสี่ยงต่อ HTML injection บนหน้าจอ (2020) กำลังไหลเหมือน marquee อยู่
    • ผมใช้แท็ก <plaintext> มาตลอด เพราะเป็น element ที่ปิดไม่ได้ จึงเปลี่ยนส่วนที่เหลือของเอกสารให้เป็น HTML ดิบทั้งหมด ทำให้สะดุดตามาก
      https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...
  • แท็ก blink แน่นอนว่าโดนเกลียดมาตั้งแต่ก่อนแล้ว และผมเคยลองค้นหา "blink" ใน binary ของ browser ที่ใช้ทดลองอยู่ น่าจะเป็น Netscape แล้วเปลี่ยนเป็น "blonk" ดู แต่นแต๊น มันไม่กะพริบอีกต่อไป

    • การแก้ binary เมื่อก่อนก็สนุกพอสมควร และตอนนี้ก็ยังสนุกอยู่ จำได้ว่าเคยเปลี่ยน "__gnu_warning" เป็น "__gnu_whining" เพื่อปิดเสียงบ่นจุกจิกไร้สาระรอบ ๆ gets()
      แน่นอนว่ามันมี buffer overrun แหละ แต่ถ้ากำลังเขียนโปรแกรมทิ้ง ๆ อยู่ ก็แค่อย่าทำให้ buffer ล้นก็พอ
    • ผมก็แตะ Slack client แบบนี้เหมือนกัน ข้อดีของแอป Electron คือมันง่ายจริง ๆ และลบฟีเจอร์ที่ไม่ชอบออกได้
      เช่น ปิดการซ่อน notification หรือปิดฟีเจอร์ที่ส่งสัญญาณว่าผมกำลังพิมพ์ข้อความอยู่
  • “อสูรจักปรากฏขึ้นท่ามกลางหมู่เมฆที่หมุนวนแห่งการแก้แค้น บ้านของผู้ไม่ศรัทธาจะพังทลาย และพวกเขาจะถูกเผาไหม้จนถึงพื้นดิน แท็กของพวกเขาจะกะพริบไปจนถึงวันสิ้นโลก”
    เป็นข้อความจาก The Book of Mozilla, 12:10 ใน about:mozilla และตอนนี้ Mozilla ก็กำลังถูกเผาจนถึงพื้นดิน จบแล้ว

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

  • ความเห็นนี้กำลังก่อสร้างอยู่ กรุณากลับมาเยี่ยมชมบ่อย ๆ เพื่อดูอัปเดต

    • visitor counter กับ guestbook อยู่ไหน?
    • หน้านี้ปรับแต่งมาสำหรับเบราว์เซอร์ใด?
    • อย่าลืม [NEW] ด้วย
  • เหตุผลหนึ่งที่ผู้คนไม่ชอบ element เหล่านี้คือมันถูก ใช้เกินควร
    แต่เพราะการใช้เกินควรนั้นเอง ทำให้หลายคนได้ลองเขียน HTML ด้วยตัวเอง สำหรับคนที่เพิ่งเริ่มใช้ HTML การลองใช้ blink หรือ marquee ค่อนข้างให้ความรู้สึกคุ้มค่า และเป็นเหมือนยาเสพติดเริ่มต้นของโลก HTML
    คนที่เคยใช้ element เหล่านี้ก็คงได้เรียนรู้ในที่สุดว่าไม่ควรใช้ หรือไม่ก็อาจยังใช้ต่อเพราะเป็นหน้า mySpace การหัวเราะเยาะ blink กับ marquee เป็นเรื่องง่าย และคล้ายกับที่กราฟิกดีไซเนอร์ดูถูกคนใช้ Comic Sans แต่ข้อห้ามเหล่านี้มีประโยชน์มากในการทำให้ผู้คนมีความมั่นใจว่า “ลองทำดูสักหน่อย”