เทคนิคแฮ็ก HTML ที่หล่อหลอมอินเทอร์เน็ต

 (tedium.co)
2 คะแนน โดย GN⁺ 2023-12-03 | 1 ความคิดเห็น | แชร์ทาง WhatsApp

ความชาญฉลาดของการแฮ็ก HTML

  • ความจำเป็นของการแฮ็ก HTML: บางครั้งต้องเขียนโค้ดที่ไม่สวยงามเพื่อให้ได้ผลลัพธ์ตามที่ต้องการ เนื่องจากโค้ด HTML ทำงานผิดพลาดหรือการพัฒนาเบราว์เซอร์ยังไม่สมบูรณ์ การแฮ็กเหล่านี้บางครั้งก็สร้างสรรค์และควรค่าแก่การจดจำ
  • แฮ็ก @import ของ Netscape Navigator 4.0: ช่วยบล็อก CSS style ที่ Netscape ไม่รองรับ แม้ Netscape จะสนับสนุน JSSS แทน CSS แต่เมื่อ W3C เลือก CSS ทำให้การรองรับ CSS ของ Netscape 4 ถูกเร่งพัฒนา และส่งผลให้ประสิทธิภาพด้อยกว่าเบราว์เซอร์รุ่นหลัง
  • การใช้ตาราง HTML เพื่อจัดเลย์เอาต์: ทำให้สามารถสร้างเลย์เอาต์ที่ทดลองมากขึ้นได้ การใช้ตาราง HTML เป็นเครื่องมือจัดเลย์เอาต์ถือเป็นนิยามของการแฮ็ก และในโลกของอีเมลก็ยังคงใช้อยู่
  • การใช้ขีดล่างนำหน้า CSS style: ทำให้สามารถใช้บางสไตล์กับ IE6 เท่านั้น โดยอาศัยข้อจำกัดของ IE ในการ parse อักขระพิเศษ
  • การใช้ AlphaImageLoader เพื่อแสดงความโปร่งใสของ PNG: เรนเดอร์ความโปร่งใสของไฟล์ PNG ที่ IE6 ไม่รองรับ โดยประมวลผลภาพผ่านฟิลเตอร์
  • Conditional comments: ทำให้สามารถใช้เทคนิคบางอย่างได้เฉพาะใน IE บางเวอร์ชัน โดยแฮ็กฟังก์ชันคอมเมนต์ของ HTML เพื่อให้โค้ดทำงานได้
  • Scalable Inman Flash Replacement (sIFR): ทำให้สามารถใช้ฟอนต์ที่ไม่ใช่ web-safe ได้ โดยใช้ JavaScript hack เพื่อแทนที่ข้อความด้วย Flash embed
  • แฮ็กข้อความ preheader: ป้องกันไม่ให้ข้อความเพิ่มเติมในอีเมลไหลเข้าไปในบรรทัดคำอธิบาย โดยใช้อาร์เรย์ของอักขระเว้นวรรคที่ไม่เป็นมาตรฐานหรือพบได้ไม่บ่อย
  • Google Chrome Frame: แทนที่ IE6 ด้วยหน้าต่าง Chrome โดยทำผ่าน browser plugin
  • แฮ็กตัวเลือกเฉพาะ Webkit: ใช้โค้ด CSS กับเบราว์เซอร์ Webkit เท่านั้น โดยตรวจจับว่าเบราว์เซอร์นั้นรองรับโค้ด CSS เฉพาะบางแบบหรือไม่
  • Responsive design: จัดวางข้อมูลได้อย่างมีประสิทธิภาพในสภาพแวดล้อมที่หลากหลาย โดยเฉพาะบนแท็บเล็ตและมือถือ โดยส่วนใหญ่ใช้ media queries เพื่อจัดวางข้อมูลตามอุปกรณ์

ความเห็นของ GN⁺

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

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

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

 
GN⁺ 2023-12-03
ความคิดเห็นจาก Hacker News

  • พอเข้าใจได้กับการใช้ตารางเพื่อจัดเลย์เอาต์

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

  • ไม่มีการให้เกียรติ spacer.gif เลย

    บน HN ยังใช้อยู่จนถึงทุกวันนี้ และรวมอยู่ในทุกคำขอหน้าเว็บ: s.gif

  • เทคนิคที่ชอบที่สุด:

    • 'Faux columns' เพื่อทำให้แถบด้านข้างดูยาวเท่ากับเนื้อหา
    • ใช้ nine-patch กับ div 9 อัน หรือ ตาราง 3x3 เพื่อแฮ็กเส้นขอบ และให้พื้นหลังวนซ้ำในบางแกน ใน CSS3 มี border-image เข้ามาช่วยเรื่องนี้ แต่สไตล์เส้นขอบแบบนี้ก็ไม่เป็นที่นิยมอีกแล้ว
    • สามารถใช้ nine-patch เพื่อทำเส้นขอบโค้งมนได้ แต่หลายคนใช้ตัวสร้าง HTML เพื่อจำลองเส้นขอบโค้งมนแทน ตามที่อธิบายในบทความ มีความเชื่อดั้งเดิมว่ามาร์กอัปที่เพิ่มเข้ามาจะกินไบต์มากกว่ารูปภาพ แต่ก็มีรอบการรับส่งน้อยกว่าและทำงานได้ง่ายกว่า

  • HN ยังใช้หนึ่งในเทคนิคเหล่านี้อยู่แม้ในปัจจุบัน:

    • ใช้ตาราง HTML เพื่อจัดเลย์เอาต์
    • รายการนี้เน้นให้เห็นว่าการพัฒนาแบบไร้มาตรฐานเข้ารหัสข้อมูลควบคุมลงใน side channel ที่ยอมรับได้หลากหลายแบบอย่างไร
    • ความสับสนและการชนกันที่อาจเกิดจากสิ่งนี้ บางครั้งก็ทำให้เห็นชัดถึงความดูแคลนที่มีต่อกระบวนการของ W3C ซึ่งผสานวิวัฒนาการของเทคโนโลยีเว็บบนฐานมาตรฐานเข้ากับนวัตกรรมที่ขับเคลื่อนโดยเบราว์เซอร์ บางครั้งสิ่งเหล่านี้ก็นำกันไป หรือเกิดขึ้นพร้อมกัน
    • แม้มักถูกวิจารณ์ แต่กระบวนการนี้อาจตีความได้ว่ายั่งยืนและมั่นคงกว่าสิ่งที่มีมาก่อน
    • เลยอดสงสัยไม่ได้ว่า ในบรรดาคนที่วิจารณ์บรรทัดฐานแบบใหม่ของ W3C-ผู้ผลิต จะมีกี่คนที่พอนึกถึงแฮ็กประหลาดกว่า 10 อย่างนี้แล้วอยากกลับไปยุคนั้นจริง ๆ

  • ไม่มีการกล่าวถึงการทำให้หัวข้อสำหรับ accessibility ไม่แสดงบนหน้าจอ โดยย้ายไปตำแหน่ง -10000

  • ไม่มีการพูดถึงการติดตั้ง HTML5 shiv ก่อน CSS เพื่อกำจัดความเพี้ยนเฉพาะของแต่ละเบราว์เซอร์

    ประวัติของ HTML5 shiv

  • จำวันเก่า ๆ อันแสนดีที่ใช้ gif โปร่งใสขนาด 1×1 พิกเซลเพื่อควบคุมเซลล์ตารางได้

  • มีการเสริมถึง   ที่ถูกใช้แพร่หลายในยุคแรก หรือเอนทิตีอักขระเว้นวรรคแบบไม่ตัดบรรทัด:

    ใช้เพื่อดันข้อความไปทางขวาหรือซ้ายภายในคอนเทนเนอร์ หรือใช้คล้ายกับ spacer gif 1x1 เพื่อให้เซลล์ตารางทำงานถูกต้อง บางหน้ามี   อยู่เป็นร้อยตัว โดยทั่วไปใช้เป็นวิธีเพิ่ม margin หรือ padding

  • บางครั้งแยกไม่ออกว่านักพัฒนาเว็บสมัยใหม่เสียคนเพราะ CSS Grid กับการสิ้นสุดของ IE หรือว่าสมัยนั้นต่างหากที่สบายเกินไปเพราะไม่ต้องรับมือกับเฟรมเวิร์กสมัยใหม่และกระบวนการ build ที่ซับซ้อน

  • สงสัยว่าการออกแบบแบบ responsive นับเป็นแฮ็กจริงหรือไม่:

    media query น่าทึ่งมาก การใส่ตรรกะแบบมีเงื่อนไขไว้ใน CSS แทนที่จะใส่ใน JavaScript เป็นข้อได้เปรียบมากเมื่อคุณต้องการ server-side rendering.