ปัญหา: loadDataWithBaseURL ด้วย file:///android_asset/ (Directory) ไม่ทำงาน Android < 4.4 แก้ไข: ระบุ Filename ใน Base URL // ผิด (Android 4.0.1) browser.loadDataWithBaseUrl(file:///android_asset/, html, text/html, UTF-8, null); // ถูกต้อง browser.loadDataWithBaseUrl(file:///android_asset/dummy.htm

ใช้ CloudFlare Workers หรือ Edge Rules CDN ปกติ Serve Static Files แต่สามารถ Config ให้ Rewrite/Reroute ได้ วิธีการ CloudFlare Workers: เขียน Script Intercept Request ทุกตัว Respond ไฟล์ index.html เดียวกัน Page Rules / Edge Rules: Redirect ทุก Path ไป /index.html (301/302 หรือ Internal Rewrite) SP

ใช้ <path> และ Cubic Bezier Curve ประมาณครึ่งคลื่นไซน์ด้วย Cubic Bezier: C 0.3642*W, 0 0.7058*W, H W, H ตัวอย่าง SVG <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>SVG Sine Wave</title> </head> <body> <h2 align=center>H

ใช้ CSS Margin Auto + Display Block HTML <svg id=svgelem height=200 xmlns=https://www.w3.org/2000/svg> <circle id=redcircle cx=50 cy=50 r=50 fill=red /> </svg> CSS #svgelem { display: block; margin-left: auto; margin-right: auto; /* หรือ */ /* margin: 0 auto;

Draw จุดหมุน (Origin) ต้องอยู่ที่ Bottom Center ของรูป var ctx = canvas.getContext(2d); var img = document.getElementById(myImage); // สมมติ width=64, height=120 // 1. ย้าย Origin ไปที่ Bottom Center ของรูป (32, 120) ctx.translate(32, 120); // 2. หมุน (เช่น 90 องศา) ctx.rotate(90 * Math.PI / 180);

IE11 ไม่รู้จัก <main> Element (Unknown Element) Unknown Elements ใน IE ไม่ได้รับ CSS Styles (display: inline default) แก้ไข 2 ขั้นตอน สร้าง Element ด้วย JS (ทำให้ IE รู้จัก): document.createElement(main); ตั้ง CSS Display: main { display: block; } html5shiv จะทำขั้นตอนที่ 1 ให้อัตโนมัติสำห

ใช้ preload=auto บอกเบราว์เซอร์ให้โหลดวิดีโอทั้งไฟล์ล่วงหน้า เมื่อเล่นครั้งต่อไปจะใช้ Cache <!DOCTYPE html> <html> <body> <video width=350 height=200 controls preload=auto> <source src=movie.mp4 type=video/mp4 /> <source src=movie.ogg type=video/ogg />

Web Workers: รัน JavaScript แบบ Background Thread ไม่บล็อก Main Thread (UI Responsive) เหมาะสำหรับ Heavy Computation ข้อจำกัด ไม่เข้าถึง DOM ได้ ไม่เข้าถึง window, document, parent ได้ Communicate ผ่าน postMessage() และ onmessage Heavyweight - ไม่ควรสร้างเยอะ (เช่น 1 Worker ต่อ Pixel ไม่ได้) Synta

อย่าเก็บ Credentials ตรงๆ ใช้ Token แทน Local Storage อ่านได้จาก JavaScript ทุกตัวบน Domain เดียวกัน (XSS Risk) แนวทางที่ปลอดภัย Server สร้าง **Random Token** (ไม่เกี่ยวกับ Password) บันทึก Token ใน Database พร้อม Expiry Date และ User ID ส่ง Token ให้ Client เก็บใน localStorage.setItem(auth_token,

กฎของ HTML Parser ตาม HTML Spec: หากพบ </p> ที่ไม่มี <p> เปิดอยู่ Parser จะสร้าง <p> ว่างขึ้นมาให้อัตโนมัติ แล้วปิดมันทันที เหตุผล HTML4 DTD: </p> เป็น Optional End Tag แต่ <p> Start Tag Required SGML Declaration: OMITTAG YES - Start Tag สามารถ Omit ได้ (Implied) Impl

ใช้ required Attribute เบราว์เซอร์จะแสดง Bubble เอง ไม่ต้องเขียน JavaScript เบราว์เซอร์จะบังคับ Validation และแสดง Error Bubble เอง ตัวอย่าง <!DOCTYPE HTML> <html> <body> <form action=/cgi-bin/html5.cgi method=get> <label>Email: <input type=email name=email req

ใช้ FileReader API อ่านไฟล์ แล้วแสดงใน <img> HTML <script src=https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js></script> <form id=form1> <input type=file id=demo accept=image/* /> <img id=myid src=# alt=preview style=display:none; max-width:300px;

ใช้ user-scalable=no ใน Viewport Meta Tag <meta name=viewport content=width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no> คำอธิบาย width=device-width - ความกว้างเท่าอุปกรณ์ initial-scale=1.0 - ซูมเริ่มต้น 100% maximum-scale=1.0 - ซูมสูงสุด 100% user-scalable=no - **ห้า

ขั้นตอนตรวจสอบและแก้ไข Safe Mode: เริ่ม Firefox แบบ Safe Mode (Disable Extensions) ทดสอบว่าเล่นได้ไหม Hardware Acceleration: Uncheck Use hardware acceleration when available Media Preferences: พิมพ์ about:config ค้นหา media.windows-media-foundation.enabled ตั้งเป็น true แล้ว Restart Format Support:

ใช้แอตทริบิวต์ formnovalidate บน Submit Button ปุ่มที่มี formnovalidate จะ Submit Form โดยข้าม Validation ตัวอย่าง <!DOCTYPE html> <html> <head><title>formnovalidate</title></head> <body> <form action=new.php method=get> <label>Rank: <in

Progress Element ไม่รองรับ ::before/::after ในบาง Browser Browser ไม่ให้ Pseudo-elements บน <progress> (Replaced Element) Workaround: เพิ่ม Static Content ใน CSS progress::-webkit-progress-bar:before, progress::-webkit-progress-bar:after { content: 989; /* Static text */ } ทางเลือกดีกว่า:

ใช้ MediaStreamTrack.getSources() เลือกกล้อง (Deprecated) API เก่า: MediaStreamTrack.getSources() หา sourceId ของกล้องหลัง API ใหม่: navigator.mediaDevices.enumerateDevices() { video.srcObject = stream; }); facingMode: environment (กล้องหลัง) / user (กล้องหน้า) ใช้ง่ายกว่า: { video.src

Mobile ไม่มี Hover ต้องใช้ Click/Touch แสดง Tooltip HTML <p>ตัวอักษร <span class=demo title=this is underscore>underlined</span> ครับ</p> jQuery $(span[title]).click(function() { var $title = $(this).find(.title); if (!$title.length) { $(this).append( + $(this

เพิ่ม crossorigin=anonymous และ CORS Header ฝั่ง Client (HTML) <img src=https://other-domain.com/image.jpg crossorigin=anonymous /> <video src=https://other-domain.com/video.mp4 crossorigin=anonymous></video> ฝั่ง Server (HTTP Header) Access-Control-Allow-Origin: * หรือระบุโดเมนเฉพ

กลยุทธ์การย้ายแบบค่อยเป็นค่อยไป (Progressive Enhancement) เปลี่ยน DOCTYPE: <!DOCTYPE html> ใช้ Semantic Elements: <section>, <article>, <nav>, <header>, <footer> (ร่วมกับ <div> ได้) ใช้ Form Controls ใหม่: type=email, url, date - เบราว์เซอร์เก่าจะ fallback