- แท็ก <blink> และ <marquee> ที่ปรากฏขึ้นในยุคเริ่มต้นของเว็บช่วงทศวรรษ 90 เคยเป็นองค์ประกอบเชิงสัญลักษณ์ของงานออกแบบเว็บในเวลานั้น
- แท็ก <blink> ถูกนำมาใช้ใน Netscape Navigator 2.0 และแม้จะมีจุดประสงค์เชิงขำขันกับความงามที่ไม่ค่อยน่าชื่นชม ก็ยังถูกใช้อย่างแพร่หลาย
- เพื่อตอบโต้เรื่องนี้ Microsoft จึงนำแท็ก <marquee> มาใส่ใน Internet Explorer เพื่อให้ควบคุมแอนิเมชันข้อความได้หลากหลายยิ่งขึ้น
- เมื่อนำสองแท็กนี้มาซ้อนกัน ก็สามารถสร้างเอฟเฟ็กต์แอนิเมชันที่ต่างกันตามเบราว์เซอร์ได้ และถูกยกเป็นตัวอย่างของหลักการ Progressive Enhancement
- ปัจจุบัน <blink> หายไปแล้ว และ <marquee> ก็ไม่แนะนำให้ใช้อีกต่อไป แต่ทั้งคู่ยังถูกพูดถึงในฐานะตัวแทนของประวัติศาสตร์เว็บและ ความโหยหาอินเทอร์เน็ตยุคเก่า
บทนำ: หวนระลึกถึงแท็ก <blink> และ <marquee>
- ไม่นานมานี้ระหว่างคุยกับเพื่อนร่วมงานที่เป็นนักพัฒนาเว็บ ผู้เขียนได้พูดติดตลกถึงแท็ก HTML <blink> และ <marquee> ก่อนจะพบว่าอีกฝ่ายไม่รู้จักแท็กทั้งสองนี้เลย
- ทุกวันนี้แท็กเหล่านี้อาจฟังดูแปลกหูสำหรับนักพัฒนารุ่นใหม่ แต่ครั้งหนึ่งมันเคยเป็น องค์ประกอบเชิงสัญลักษณ์ของงานออกแบบเว็บยุค 90
ที่มาและประวัติของแท็ก <blink>
- ผู้สร้างแท็ก <blink> มักถูกเข้าใจกันว่าเป็น Lou Montulli ผู้สร้างเบราว์เซอร์ Lynx แต่จริง ๆ แล้วเขาเปิดเผยว่าไม่ได้เป็นคนเขียนโค้ดนี้ด้วยตัวเอง
- ตามคำบอกเล่าของเขา ระหว่างการสนทนาในบาร์กับวิศวกรของ Netscape มีการเสนอเล่น ๆ ถึง “เอฟเฟ็กต์ข้อความกระพริบ” ที่ใช้ได้แม้กับ text browser อย่าง Lynx และวิศวกรอีกคนก็นำไอเดียนั้นไปลงมือทำจนเสร็จในชั่วข้ามคืน
- ในปี 1995 แท็ก <blink> ถูกนำมาใช้อย่างเป็นทางการใน Netscape Navigator 2.0 และร่วมกับ GIF แบบเคลื่อนไหวกับ JavaScript ยุคแรกเริ่ม ก็ช่วยกำหนดประสบการณ์ของเว็บไซต์ส่วนบุคคลในยุคนั้น
- แท็ก <blink> ใช้งานโดยไม่มีแอตทริบิวต์ และแม้ใน HTML4 จะถูกบันทึกอย่างเป็นทางการว่าเป็น แท็กเชิงล้อเล่น ก็ยังถูกใช้อย่างเกินพอดีในช่วงปลายทศวรรษ 90
- มันถูกใช้บ่อยเพื่อดึงความสนใจให้ข้อความหลากหลายประเภท เช่น การเน้น “อัปเดตล่าสุด”
<marquee> และการแข่งขันระหว่างเบราว์เซอร์
- ในปีเดียวกันนั้น Internet Explorer 2.0 ที่ Microsoft เปิดตัว ได้เลือกนำแท็ก <marquee> มาใช้แทนแนวทางของ <blink> จาก Netscape
- แท็ก <marquee> สามารถปรับแอนิเมชันได้ด้วย แอตทริบิวต์หลากหลายแบบ เช่น ทิศทางการเลื่อน ความเร็ว และการวนซ้ำ
- หาก <blink> เป็นลูกเล่นเชิงขำที่อาจทำลายความอ่านง่ายของภาพรวมได้ <marquee> ก็เป็นเอฟเฟ็กต์ที่ตั้งใจเน้นความเด่นชัดอย่างเปิดเผย
- ช่วงปลายยุค 90 การใช้สองแท็กนี้ร่วมกัน—<marquee> ซ้อน <blink>—กลายเป็นวิธีที่นิยมสำหรับสร้างเอฟเฟ็กต์ต่างกันตามเบราว์เซอร์ (IE และ Netscape)
Progressive Enhancement และความเข้ากันได้ของเว็บ
- การซ้อน <blink> กับ <marquee> เกี่ยวข้องกับ Postel’s Law (หลักความยืดหยุ่น/การยอมรับ) ที่ว่าเว็บเบราว์เซอร์จะเพิกเฉยต่อแท็กที่ไม่รองรับ แต่ยังคงเรนเดอร์เนื้อหาด้านในตามปกติ
- องค์ประกอบ HTML ใหม่ ๆ (เช่น <video>) ก็ด้วยเหตุผลนี้จึงมักใช้รูปแบบแท็กที่ไม่ปิดตัวเอง เพื่อช่วยให้เข้ากันได้ดีขึ้น
- เมื่อใช้แท็กอย่าง <blink>/<marquee> เบราว์เซอร์ที่ไม่รู้จักแท็กเหล่านี้ก็ยังอ่านเนื้อหาข้อมูลได้อยู่
- เว็บตั้งอยู่บนแนวคิดของ Progressive Enhancement คือมอบข้อมูลให้ผู้ใช้ทุกคนก่อน และให้เพียงบางเบราว์เซอร์ได้รับเอฟเฟ็กต์เสริมเพิ่มเติม
การเปลี่ยนแปลงและการรองรับในเบราว์เซอร์ต่าง ๆ
- ผู้ใช้ Opera แม้จะจ่ายค่าไลเซนส์ก็แทบไม่เคยได้เห็นเอฟเฟ็กต์ <blink> หรือ <marquee> แต่ก็ไม่ได้มีปัญหาในการเข้าถึงเนื้อหา
- Netscape 7 แทบจะเป็นเบราว์เซอร์เดียวที่รองรับทั้ง <blink> และ <marquee> พร้อมกัน ทำให้สามารถสร้างเอฟเฟ็กต์เลื่อน + กระพริบพร้อมกันได้ ซึ่งนับเป็นเอฟเฟ็กต์ที่พบเห็นได้ยากมากบนเว็บ
บทสรุป: สถานะในปัจจุบันและบทเรียนต่อการออกแบบเว็บ
- ปัจจุบันแท็ก <blink> หายไปอย่างสิ้นเชิง แล้ว (เบราว์เซอร์สมัยใหม่ไม่รองรับ) และหากจำเป็นก็สามารถแทนที่ได้ด้วย CSS animation
- ส่วน <marquee> แม้บางเบราว์เซอร์ยังคงมี การรองรับพื้นฐานหรือ polyfill อยู่ แต่ก็ยังไม่แนะนำให้ใช้งาน
- ทั้งสองแท็กยังคงถูกจดจำในฐานะสัญลักษณ์ของประวัติศาสตร์เว็บและสุนทรียะออนไลน์ในอดีต ตลอดจนเป็นกรณีศึกษาสำคัญเรื่องเว็บมาตรฐาน การเข้าถึง และ การบำรุงรักษา
- หากสนใจความโหยหาโลกดิจิทัลยุคก่อน ก็สามารถไปดูข้อมูลหรือเว็บไซต์เกี่ยวกับงานออกแบบเว็บสมัยก่อนหน้าได้
1 ความคิดเห็น
ความเห็นจาก Hacker News
จำได้ว่าเมื่อก่อนมีเว็บประมาณตามลิงก์ข้างล่างนี้ https://web.archive.org/web/20201111125145/https://danq.me/2020/11/11/blink-and-marquee/
ฉันรู้สึกเหมือนเป็นคนที่อยู่มาตั้งแต่ 3,000 ปีก่อน จำยุคที่มีการถกเถียงกันอย่างดุเดือดว่า frame navigation เป็นแนวปฏิบัติที่แย่หรือไม่ได้อยู่เลย (ไม่ใช่ iframe แต่เป็น frame) ถ้ามีใครรู้จัก frame ก็ยินดีมาก ก่อนที่ AJAX จะออกมา ฉันเคยใช้ HTTP 204 เองเพื่อส่งข้อความไปยังเซิร์ฟเวอร์โดยไม่ต้องรีเฟรชหน้า ในช่วงต้นยุค 2000 ก็เคยทำ image map ด้วย อ้างอิง image map: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/map เคยใช้ Dreamweaver วาดเส้นขอบแผนที่อยู่หลายวันจนได้แผนที่ประเทศที่คลิกได้ด้วย Dreamweaver template นั้นไม่ได้ใช้ version control เวลาจะอัปเดตก็มักทำการแก้ไขหายหมดและกู้คืนไม่ได้บ่อย ๆ ยังจำได้ว่าเคยใช้
input type=imageเพื่อให้ฝั่งแบ็กเอนด์จัดการตำแหน่งที่คลิกบนภาพ เคยทำสตรีมอัปเดตบนหน้าด้วย motion JPEG ด้วย ซึ่งใน Chrome ยังใช้ได้อยู่ แต่ใน Firefox ค่อนข้างงอแงนิดหน่อย ตอนพยายามแก้ปัญหา PNG alpha blending บน IE ก็ลองมาหลายวิธี สุดท้ายเคยใช้เวอร์ชัน ActiveX ได้อยู่พักหนึ่ง แต่พอ flat design กลายเป็นกระแสก็ไม่จำเป็นอีกแล้ว เรื่อง navigation ก็เคยใช้มาหมดทั้ง JAVA, Flash, Silverlight ยังจำได้ชัดเจนด้วยว่า spacer GIF, conditional comments และหลัง Firebug ออกมา สภาพแวดล้อมการพัฒนามันสะดวกขึ้นมากแค่ไหน เวลาผ่านไปจนไม่รู้ตัวว่าแก่ลงตอนไหนเมื่อก่อนเคยพัฒนาซอฟต์แวร์เว็บด้วย frame และก็ไม่ได้รู้สึกว่ามีปัญหาอะไรเป็นพิเศษ คนมักพูดถึง accessibility แต่จนถึงตอนนี้ฉันก็ยังไม่ค่อยเข้าใจว่ามันมีปัญหาอย่างเป็นรูปธรรมตรงไหน
จำได้ว่าต้องทำงานให้ลูกค้าที่ขอซัพพอร์ต ท่ามกลางบั๊กประหลาดและข้อจำกัดทั้งหลายของ IE6 พอนักออกแบบส่งดีไซน์มุมโค้งจาก Photoshop มาให้ ก็ได้แต่ถอนหายใจทุกครั้ง ตอนนั้นคำว่า responsive จริง ๆ แล้วก็แค่รองรับความละเอียดเดสก์ท็อปหลายขนาด ต้องตัดมุมออกมาเป็นรูปภาพแล้วเอาไปวางใน cell ของตารางทีละชิ้น งานทำมือแบบนี้ทำให้รู้สึกว่าพลังใจของนักพัฒนาแข็งแกร่งขึ้นมาก
จำช่วงที่ใช้เครื่องมือ slice ของ Photoshop แบ่งภาพอย่างละเอียด ส่งออกเป็น gif แล้วพยายามจัดวางให้พอดีเป๊ะในตาราง HTML ได้ ตอนนั้นมีดีไซน์จำนวนมากที่ปรับให้เหมาะกับความละเอียด 800x600 ความทรงจำทั้งหมดนี้เหมือนละลายหายไปกับกาลเวลา
ตอนนี้ก็ยังมีเว็บบางแห่งที่ฉันเข้าไปหลายครั้งและยังใช้ frame อยู่ เว็บไซต์ Open Group/POSIX ก็ยังใช้ frame อยู่จนถึงตอนนี้
เคยทำเว็บแชตด้วย frame ด้านบนเป็นหน้าต่างแชตที่โหลดซ้ำแบบไม่สิ้นสุด ด้านล่างเป็น input box และตอนส่งข้อความก็ใช้ 204 เพื่อกันไม่ให้รีเฟรช ยังสามารถส่งสคริปต์เล็ก ๆ ไปให้ frame ด้านบนเพื่อสั่ง reload frame ด้านขวาที่มี user list ได้ด้วย ใช้กับเพื่อนไม่กี่คนอยู่ราวปี 2000
ก่อนหน้านี้เคยทำเว็บที่ทำแอนิเมชันด้วยแท็ก marquee ล้วน ๆ ไม่มี JavaScript เลยสักนิด และถ้าเอาไปให้ใครดูทุกคนก็มักจะทึ่ง https://udel.edu/~ianozi/
ลูกเล่นที่ฉันชอบที่สุดกับแท็ก marquee คือการซ้อนกัน ถ้ากำหนดทิศทางต่างกัน แล้วตั้งให้ marquee ด้านในมีความเร็วเท่ากับทิศตรงข้าม ก็จะได้เอฟเฟกต์เหมือนหยุดนิ่งชั่วขณะแล้วค่อยเคลื่อนที่ ถ้าปรับความเร็วต่างกันก็ทำการเคลื่อนไหวที่ซับซ้อนขึ้นได้ จำได้ว่าวิธีนี้จะทำงานดีต้องตั้งความกว้างสูงสุดให้ inner marquee ด้วย
เมื่อก่อนฉันเกลียดแท็ก blink มากเสียจนเคยไปแก้ไฟล์ไบนารีของเบราว์เซอร์ที่ใช้ (น่าจะเป็น Netscape) โดยเปลี่ยน
blinkเป็นblonkเพื่อไม่ให้มันกะพริบอีกต่อไปฉันก็มักทำ binary tweak แบบนี้กับไคลเอนต์ Slack อยู่บ่อย ๆ (เพราะเป็นแอป Electron เลยง่ายมาก) ฟีเจอร์ที่ฉันไม่ชอบก็ลบออกได้ง่าย เช่น ซ่อนการแจ้งเตือน หรือปิดสัญญาณว่ากำลังพิมพ์ เป็นต้น
ถ้ามีใครใช้แท็ก blonk ขึ้นมาจริง ๆ ตอนนี้ก็คงมี blonking ไปแล้วก็ได้ ดูเป็นการแฮ็กที่ขำดี
การแก้ไบนารีนี่สนุกดีเหมือนกัน ฉันเคยเปลี่ยน
__gnu_warningเป็น__gnu_whiningเพื่อกำจัดข้อความเตือนของ gets() เรื่องบัฟเฟอร์โอเวอร์รันก็ช่างมันบ้าง แต่กับโค้ดที่เขียนแบบลวก ๆ ก็ไม่จำเป็นต้องใส่ใจนักฉันใช้แท็ก marquee มีประโยชน์มากในการทดสอบ HTML injection เพราะแทบไม่มีใครใช้แท็กเคลื่อนไหวนี้แล้ว เลยรู้ได้ทันทีว่าการโจมตีสำเร็จหรือไม่ แม้แต่คนที่ไม่ใช่สายเทคนิค ถ้าให้ดูว่าข้อความมันเคลื่อนไหวในเวลาที่ไม่ควรเคลื่อนไหว ก็เข้าใจความเสี่ยงได้ง่ายกว่าการทำตัวหนาเสียอีก
ตอนทำ HTML sanitization ฉันมักเหลือแค่ marquee ไว้ใน whitelist เป็น easter egg แล้วบล็อกอย่างอื่นแทบทั้งหมด
ฉันดู Hacker News ผ่าน custom aggregator แล้วโพสต์นี้ทำให้รู้เลยว่ามันมีช่องโหว่ HTML injection บทความปี 2020 กำลังวิ่งไปทั่วหน้าจอเป็น marquee อยู่เลย
“สัตว์ร้ายจะปรากฏตัวท่ามกลางเมฆหมุนวนแห่งการล้างแค้น บ้านของผู้ไม่ศรัทธาจะถูกทำลาย และแท็กของพวกเขาจะกะพริบไปจนกว่าจะถึงอวสาน” – The Book of Mozilla, 12:10 (about:mozilla) อ่านแล้วก็รู้สึกว่าตอนนี้ Mozilla เองก็กำลังเลือนหายไปด้วย เหมือนบรรยากาศวันสิ้นโลก
ทำให้นึกถึงสมัยที่ฉันรันเว็บไซต์ของชั้นในหอพักมหาวิทยาลัยจากคอมพิวเตอร์ของตัวเอง ตอนนั้นมีข้อความยาว 997 คำใน marquee ที่ฉันเขียนพร่ำเพ้อเรื่องผู้หญิง ความหดหู่ ปรัชญา และเรื่องอื่น ๆ อีกมากมาย ตอนท้ายของข้อความมีเครื่องหมาย ! ที่ลิงก์ไปยังหน้าลับ สุดท้ายก็มีคนหาเจอ เพราะอ่านเนื้อหายาว ๆ จาก view source ไปเรื่อย ๆ แล้วเจอหน้านั้นเข้า
เพื่อนฉันเคยเอาแท็ก blink ไปครอบ middle name ของตัวเองเสมอ เพื่อทดสอบอย่างรวดเร็วว่ามีการขาดการ escaping และมีโอกาสเป็น XSS หรือไม่ เมื่อก่อนวิธีง่าย ๆ แบบนี้ก็มีประสิทธิภาพมากพอในการหาช่องโหว่
คอมเมนต์นี้กำลังอยู่ระหว่างก่อสร้าง โปรดแวะกลับมาดูการอัปเดตบ่อย ๆ
แล้วตัวนับจำนวนผู้เข้าชมกับสมุดเยี่ยมอยู่ตรงไหน
อยากรู้ว่าหน้านี้ปรับให้เหมาะกับเบราว์เซอร์ไหน
อย่าลืมใส่ป้าย [NEW]