ใช้ Flexbox (แนะนำ) .container { display: flex; align-items: center; /* จัดกึ่งกลางแนวตั้ง */ justify-content: center; /* จัดกึ่งกลางแนวนอน (ถ้าต้องการ) */ height: 100px; /* ต้องมีความสูง */ } ทางเลือกเก่า (Vendor Prefixes) .container { display: -moz-box; -moz-box-align: cent

แก้ด้วย Responsive Padding Technique (Intrinsic Ratio) ใช้ padding-top แทน height เพื่อรักษาอัตราส่วนวิดีโอ CSS #video-box { padding-top: 56.25%; /* 16:9 aspect ratio */ position: relative; } #video-box video, #video-box object { width: 100%; height: 100%; top: 0; left: 0;

ใช้แอตทริบิวต์ preload=none บอกเบราว์เซอร์อย่าดาวน์โหลดข้อมูลวิดีโอก่อนจนกว่าผู้ใช้จะกด Play ตัวอย่าง <!DOCTYPE html> <html> <body> <video width=350 height=200 controls preload=none> <source src=movie.mp4 type=video/mp4 /> <source src=movie.ogg type=video/o

ทางเลือกสำหรับ IE/Edge ที่ไม่รองรับ SSE 1. ใช้ Polyfill เช่น EventSource Polyfill ทำงานบน IE10/11 if (EventSource in window) return; // โหลด polyfill เฉพาะที่ไม่มี native support 2. ใช้ WebSockets รองรับ IE10+ และให้ Two-way Communication (Bi-directional) ซึ่ง SSE ทำได้แค่ One-way (Server → Client)

ประมวลผลภาพฝั่ง Client ก่อนส่ง Server ใช้ FileReader API อ่านไฟล์ แล้วประมวลผลบน Canvas ก่อนอัปโหลด ตัวอย่าง PHP รับไฟล์ (Server-side) <?php if (isset($_FILES[image])) { $iSize = getimagesize($_FILES[image][tmp_name]); if ($iSize !== false) { $myFile = /tmp/ . basename($_FILES[ima

สาเหตุ: Sub-pixel Rendering เมื่อวาดเส้นตรงบนพิกเซลเต็ม ตำแหน่ง 0.5 จะทำให้เส้นคมที่สุด วิธีแก้ ปรับตำแหน่งเป็น .5 context.moveTo(20.5, 0); context.lineTo(20.5, 50); ตั้งขนาด Canvas ให้ตรงกับ CSS var canvas = document.getElementById(canvas); canvas.width = 250; // ความกว้างจริง (pixels) canvas.he

เบราว์เซอร์ที่ Ember.js รองรับ Ember.js เป็น JavaScript Framework แบบ MVC สำหรับ Single Page Applications เบราว์เซอร์ที่รองรับอย่างเป็นทางการ Internet Explorer (รุ่นล่าสุดที่รองรับ) Microsoft Edge Safari Firefox Chrome Ember.js ใช้ jQuery และรองรับเบราว์เซอร์สมัยใหม่ทั้งหมด รวมถึง IE11+ (รุ่นเก่าอ

Canvas ต้องมี tabindex เพื่อรับ Focus และ Keyboard Events var myTarget, myCanvas; window.onload = function() { myCanvas = document.getElementById(canvas); // ต้องตั้ง tabindex เพื่อให้ canvas รับ focus ได้ myCanvas.tabIndex = 0; myCanvas.focus(); document.addEventListener(moused

Ionic ออกแบบสำหรับ Mobile Hybrid Apps Ionic เป็น Front-end UI Framework สำหรับ Hybrid Mobile Apps (รันใน WebView ผ่าน Cordova/Capacitor) ข้อจำกัดบน Desktop Internet Explorer ไม่รองรับฟีเจอร์ทั้งหมดของ Ionic UI/UX ออกแบบสำหรับ Touch/Mobile ไม่เหมาะกับ Desktop ควรสร้างแอป Desktop แยกต่างหาก (ใช้ Elec

แก้ปัญหา Flickering ด้วย z-index เมื่อ redraw sprite sheet เฟรมก่อนหน้ายังมองเห็นได้ทำให้กระพริบ วิธีแก้: เพิ่ม z-index ของเฟรมใหม่ทีละขั้น เทคนิค ทุกครั้งที่วาดเฟรมใหม่ ให้เพิ่ม z-index ขึ้นไป รีเซ็ต z-index กลับเป็น 0 ทุกๆ รอบหนึ่ง (หรือเมื่อถึงค่าสูงสุด) เพื่อไม่ให้ค่ามากเกินไป วิธีนี้บังคับให้

ติดตั้ง IntelliSense และ Validation Support Visual Studio 2012 รองรับ HTML5 แล้ว VS 2010 มีแค่ IntelliSense ขั้นตอนเปิดใช้งาน Validation ใน VS 2012+ เปิด Visual Studio เมนู Tools > Options ไปที่ Text Editor > HTML > Validation เลือก Target: HTML5 หลังตั้งค่าแล้ว VS จะตรวจสอบและแนะนำโค้ด

IBM Worklight vs PhoneGap PhoneGap (Apache Cordova) เป็นเฟรมเวิร์กพัฒนา Mobile App ด้วย HTML/CSS/JS ให้รันบน iOS, Android, Windows Phone ฯลฯ IBM Worklight (ตอนนี้เรียกว่า IBM MobileFirst Platform) เป็น **Platform ครบวงจร** ที่สร้างบน PhoneGap/Cordova แต่เพิ่มคุณสมบัติสำคัญ: Mobile Browser Simulator

ใช้ <input type=datetime-local> อนุญาตให้ผู้ใช้เลือกวันที่และเวลา ผ่าน Date Time Picker popup ตัวอย่างฟอร์ม <!DOCTYPE html> <html> <head> <title>HTML input datetime</title> </head> <body> <form action= method=get> <label>ชื่อนักเรีย

ใช้ localStorage หรือ sessionStorage บันทึกข้อมูลก่อน unload แล้วคืนค่าเมื่อ load ใหม่ ก่อน Reload/Unload window.onbeforeunload = function() { localStorage.setItem(name, $(#inputName).val()); localStorage.setItem(phone, $(#inputPhone).val()); localStorage.setItem(address, $(#inputAddress

ปัญหา: dragleave ไม่ยิงเมื่อลากออกนอกหน้าต่างใน Firefox ต้องติดตาม element ที่รับ dragenter และ dragleave เอง jQuery Plugin: draghover $.fn.draghover = function(options) { return this.each(function() { var collection = $(), self = $(this); self.on(dragenter, function(ev) {

ใช้ drawImage() สำหรับ Viewport/Camera หลักการ: วาดเฉพาะส่วนของภาพพื้นหลังที่อยู่ใน viewport รูปแบบทั่วไป ctx.clearRect(0, 0, game.width, game.height); // วาดพื้นหลัง: crop จาก (cropLeft, cropTop) ขนาด (cropWidth, cropHeight) // วาดลง canvas ที่ (0,0) ขนาด (viewWidth, viewHeight) ctx.drawImage(backg

ขั้นตอนบันทึก Canvas เป็น PNG สร้าง Data URL จาก Canvas: var dataURL = canvas.toDataURL(image/png); สร้างลิงก์ดาวน์โหลด: <a download=newimg.png href=dataURL>Download</a> หรือตั้ง Header สำหรับการดาวน์โหลดโดยตรง: Content-Disposition: attachment; filename=newimg.png เพิ่มประสิทธิภาพหน

มีประโยชน์มากสำหรับ Accessibility และ SEO <section> และ <article> ช่วย Screen Readers และอุปกรณ์ช่วยเหลือเข้าใจโครงสร้างเนื้อหา ดีต่อผู้ใช้งานที่มีปัญหาด้านสายตา และ eBook readers ตัวอย่าง <section> <section> <h1>Java</h1> <h3>Inheritance</h3> &l

ใช้ Drag and Drop API กับ File Input ก่อนหน้านี้ไม่สามารถตั้งค่า <input type=file> ได้ แต่ตอนนี้สามารถทำได้ผ่าน DataTransfer จัดการ Drop Event function drop(ev) { ev.stopPropagation(); ev.preventDefault(); var d = ev.dataTransfer; var files = d.files; handleFiles(files); }

วัตถุประสงค์ของ crossorigin ตามสเปค: crossorigin เป็น CORS settings attribute ใช้เพื่อให้รูปภาพจากเว็บไซต์ภายนอกที่อนุญาต CORS สามารถใช้ร่วมกับ Canvas ได้ การใช้งาน <img src=... crossorigin=anonymous /> <video src=... crossorigin=anonymous></video> ฝั่ง Server ต้องส่ง Header Access