home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

การใช้ CSS3 ใน SAP BSP Application โดยไม่ใช้ DOCTYPE Tag

ภาพรวม

SAP BSP (Business Server Pages) แอปพลิเคชันเก่ามักไม่มี DOCTYPE Declaration ทำให้ Browser 進入 Quirks Mode ทำให้ CSS3 ไม่ทำงานเต็มที่ วิธีแก้คือการเพิ่ม DOCTYPE หรือใช้ Library ที่รองรับ Quirks Mode

ปัญหา: Quirks Mode

  • ไม่มี DOCTYPE → Browser ใช้ Rendering Mode แบบเก่า (IE5/Quirks)
  • CSS3 Properties (Flexbox, Grid, Border-radius, Box-shadow, etc.) ไม่ทำงานหรือทำงานผิดปกติ
  • Box Model แตกต่าง (Padding/Border รวมใน Width)

วิธีแก้ไข

1. เพิ่ม DOCTYPE (แนะนำที่สุด)

เพิ่มบรรทัดแรกของหน้า BSP Layout/Page:


<!DOCTYPE html>
<html>
<head>...</head>
<body>...</body>
</html>

หากไม่สามารถแก้ Layout หลักได้ ให้เพิ่มใน Frame/Page ที่ Embed

2. ใช้ JavaScript Inject DOCTYPE (ถ้าแก้ Backend ไม่ได้)


<script>
// Inject DOCTYPE ก่อน Render (ทำงานได้ในบาง Browser)
document.write('<!DOCTYPE html>');
// ต้องวางบรรทัดแรกสุด ก่อน HTML Tag ใดๆ
</script>

⚠️ document.write อาจถูก Block โดย Browser/Content Security Policy

3. ใช้ CSS Reset / Normalize.css


/* รวม Normalize.css หรือ Reset CSS เพื่อลดความแตกต่างระหว่าง Mode */
@import url('https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css');

/* หรือเขียน Reset เอง */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }

4. ใช้ UI Library ที่รองรับ Legacy Browser/Quirks

  • jQuery UI - รองรับ Browser เก่า ได้ดี
  • Wijmo (ComponentOne) - Enterprise Grid/Chart รองรับ IE/Quirks
  • Modernizr - Feature Detection โหลด Polyfill เฉพาะที่ต้องการ
  • SAPUI5 / OpenUI5 - Framework ของ SAP เอง รองรับ BSP ได้ดีที่สุด

5. CSS3 Polyfills สำหรับ Feature เฉพาะ


/* Flexbox Polyfill สำหรับ IE9-10 */
@import 'flexibility'; /* ต้องใช้ JS Polyfill */

/* หรือเขียน Fallback เอง */
.container {
    display: -webkit-box;      /* Old WebKit */
    display: -ms-flexbox;      /* IE 10 */
    display: -webkit-flex;     /* New WebKit */
    display: flex;             /* Standard */
}

แนวทางปฏิบัติใน SAP BSP

  1. Best: เพิ่ม <!DOCTYPE html> ใน Layout/Page หลัก
  2. Good: ใช้ SAPUI5/OpenUI5 (Framework มาตรฐาน SAP)
  3. Acceptable: ใช้ jQuery UI / Wijmo พร้อม CSS Fallback
  4. Last Resort: เขียน CSS แบบเก่า (Float, Table Layout) หลีกเลี่ยง CSS3

สรุป

ไม่มี DOCTYPE = Quirks Mode = CSS3 Broken
แก้ได้โดย: เพิ่ม DOCTYPE, ใช้ SAPUI5, ใช้ Library รองรับ Legacy, หรือเขียน Fallback เอง