สร้างเว็บไซต์ที่ดูดีด้วย CSS เท่าที่จำเป็น (2023)

(thecascade.dev)

6 คะแนน โดย GN⁺ 2025-10-07 | 1 ความคิดเห็น | แชร์ทาง WhatsApp

นักพัฒนาจำนวนมากต้องเจอกับปัญหาที่ไม่จำเป็นเพราะ การออกแบบ CSS ที่มากเกินไป
เพียงมี global styles ขั้นต่ำ ก็สามารถสร้างหน้าเว็บที่ดูสะอาดตาและรองรับการแสดงผลแบบ responsive ได้
การจำกัดขนาดและกำหนดให้แสดงผลแบบ block สำหรับองค์ประกอบ รูปภาพ, SVG, วิดีโอ ก็ช่วยแก้ปัญหาเลย์เอาต์พื้นฐานได้
ใช้ฟอนต์ system-ui พร้อมกำหนด ระยะห่างบรรทัด และจำกัดความกว้างสูงสุดของย่อหน้าอย่างเหมาะสม จะช่วยให้การอ่านดีขึ้น
ควรใช้พร็อพเพอร์ตี color-scheme เพื่อรองรับสภาพแวดล้อมที่ผู้ใช้ตั้งค่าไว้ เช่น dark mode ของระบบปฏิบัติการ

สร้างเว็บไซต์ที่ดูดีด้วย CSS เท่าที่จำเป็น

ปัญหาของ CSS ที่ซับซ้อนเกินไปและแนวทางที่ควรใช้

หลายคนมัก ทำโครงสร้าง CSS ของเว็บไซต์ให้ซับซ้อนเกินความจำเป็น
ทั้งที่จริงแล้ว CSS เพียงเล็กน้อยก็เพียงพอสำหรับการสร้าง หน้าเว็บ responsive ที่ดูดีและยึดพื้นฐานที่สำคัญ

HTML พื้นฐานและการจัดการรูปภาพ

แม้จะเขียนแค่ HTML พื้นฐาน เว็บไซต์ก็ยังมี ความ responsive ขั้นพื้นฐาน อยู่แล้ว
แต่อาจเกิดปัญหา overflow ของเลย์เอาต์ จากรูปภาพได้ จึงควรใช้ CSS ด้านล่าง
```
img {
  max-width: 100%;
  display: block;
}
```
หากเกิดปัญหาในองค์ประกอบ SVG, video ในลักษณะเดียวกัน ก็สามารถขยายการใช้งานได้ดังนี้
```
img,
svg,
video {
  max-width: 100%;
  display: block;
}
```

การปรับปรุง typography

ฟอนต์เริ่มต้นของเบราว์เซอร์มัก ดูธรรมดาเกินไปในเชิงดีไซน์
สามารถใช้ system-ui เป็น font family เพื่อเลือกใช้ ฟอนต์ระบบพื้นฐานที่เหมาะกับแต่ละแพลตฟอร์ม
ขนาดฟอนต์และระยะห่างบรรทัดเริ่มต้นมัก ค่อนข้างเล็กเล็กน้อย จึงแนะนำให้ปรับดังนี้
```
body {
  font-family: system-ui;
  font-size: 1.25rem;
  line-height: 1.5;
}
```
แค่ตั้งค่านี้ก็ช่วยให้ดีขึ้นอย่างชัดเจนเมื่อเทียบกับ ค่าเริ่มต้นของเบราว์เซอร์

การรองรับ dark mode

ผู้ใช้จำนวนมากนิยม dark mode ดังนั้นการใช้พร็อพเพอร์ตี color-scheme ที่อิงค่าจากระบบปฏิบัติการจึงมีประโยชน์
```
html {
  color-scheme: light dark;
}
```
พร็อพเพอร์ตีนี้จะทำให้ user agent style สะท้อน ธีมที่ระบบต้องการ โดยอัตโนมัติ
สามารถกำหนดผ่านแอตทริบิวต์ของแท็ก HTML ได้เช่นกัน
```
<html lang="en" color-scheme="light dark"></html>
```
นอกจากอิงค่าที่ระบบต้องการแล้ว การเปิดให้ผู้ใช้ เลือก color scheme ได้เอง ก็ถือเป็น best practice ที่ดีเช่นกัน

การจำกัดความกว้างของคอนเทนต์

ความยาวของย่อหน้าเนื้อหา เป็นปัจจัยสำคัญที่ส่งผลต่อการอ่านอย่างมาก
โดยทั่วไปควรกำหนดให้ เนื้อหาหลักแสดงผลประมาณ 45~90 ตัวอักษรต่อบรรทัด จึงจะเหมาะสมที่สุด
สามารถปรับปรุงการอ่านได้ด้วยการจำกัดความกว้างสูงสุดขององค์ประกอบ main ดังนี้
```
main {
  max-width: min(70ch, 100% - 4rem);
  margin-inline: auto;
}
```
ฟังก์ชัน min() จะเลือกค่าที่น้อยกว่าระหว่าง 70ch และ 100% - 4rem
margin-inline: auto จะช่วย จัดกึ่งกลางในแนวนอน
หากต้องการ ก็สามารถใช้คลาส .container หรือ .wrapper แทน main ได้

ตัวอย่าง CSS ขั้นต่ำฉบับสมบูรณ์

เมื่อนำทั้งหมดมารวมกัน ก็จะได้ชุด CSS ขั้นต่ำตามด้านล่าง ซึ่งเพียงพอสำหรับสร้างเว็บไซต์ที่เสถียรได้
```
html {
  color-scheme: light dark;
}

body {
  font-family: system-ui;
  font-size: 1.25rem;
  line-height: 1.5;
}

img,
svg,
video {
  max-width: 100%;
  display: block;
}

main {
  max-width: min(70ch, 100% - 4rem);
  margin-inline: auto;
}
```

สรุปและการต่อยอด

ตัวอย่างข้างต้นสามารถนำไปใช้ได้ทันทีในฐานะ จุดเริ่มต้นที่เบา หรือสำหรับหน้าเว็บขนาดเล็ก
ในกรณีส่วนใหญ่ ควรต่อยอดจากพื้นฐานนี้ด้วย สไตล์เพิ่มเติม ตามความเหมาะสม

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

GN⁺ 2025-10-07

ความคิดเห็นจาก Hacker News

เป็นบทความเก่า แต่ก็ยังสรุปเหตุผลที่ไม่แนะนำ system ui font family ซึ่งยังใช้ได้อยู่ในบางภูมิภาค
https://infinnie.github.io/blog/2017/systemui.html
- เนื้อหาน่าสนใจ แต่ผมเกลียด st ligature ของฟอนต์นั้นมากจนไม่อยากรับคำแนะนำเรื่องฟอนต์จากเว็บไซต์นั้น
พูดตามตรงคือผมไม่ค่อยเข้าใจนัก เข้าใจว่าอยากทำเว็บเพจแบบมินิมอลที่อ่านง่าย แต่แนวทางที่ต้องใช้สำหรับเรื่องนี้ก็น่าจะเป็นสิ่งที่คนรู้กันดีอยู่แล้วไม่ใช่หรือ ผมสงสัยว่าผู้ใช้เป้าหมายที่ต้องลำบากกับเรื่องแบบนี้คือใคร แล้วก็ยังสงสัยด้วยว่าทำไมเนื้อหานี้ถึงดังบน HN
- ผมเองไง ผมเป็นนักพัฒนาแบ็กเอนด์เป็นหลัก แล้วบางทีก็ทำฟรอนต์เอนด์บ้างในโปรเจกต์เสริม แต่แทบไม่รู้ CSS เลย สำหรับผม วิธีพวกนี้ไม่ได้เป็นอะไรที่ "รู้กันดีอยู่แล้ว" ผมลำบากทุกครั้งเพราะไม่รู้ CSS
- คนที่ลำบากกับแค่ max-width ตัวเดียว? กลุ่มเป้าหมายคือทุกคนที่ทำโฮมเพจส่วนตัว

font-family: System UI;

อันนี้ผิด ไวยากรณ์ที่ถูกต้องคือ

font-family: system-ui;

ผู้เขียนบทความใช้ถูกในบางตัวอย่าง แต่ตัวอย่างแรกเขียนผิด เลยอาจทำให้สับสนได้

ผมสงสัยว่าถ้าชื่อฟอนต์มีสองคำ ต้องใส่เครื่องหมายอัญประกาศคู่หรือเปล่า เช่น

font-family: Times New Roman;

แบบนี้ คือทั้ง times และ Times New Roman ก็ดูเหมือนจะใช้ได้โดยไม่ต้องใส่เครื่องหมายอัญประกาศ เลยสงสัยว่าเป็นข้อยกเว้นเพราะเป็นฟอนต์เก่าหรือ CSS จับคู่ชื่อแบบยืดหยุ่นอยู่แล้ว

https://meyerweb.com/eric/tools/css/reset/
อันนี้ ผมแทบอยากเรียกมันว่าเงินเก่าเก็บเลย
- Eric Meyer คือระดับตำนานของวงการ CSS ตอนปี 2002 ตอนที่ผมยังไม่เข้าใจ box model ผมเข้าใจได้ก็เพราะคำอธิบายของเขา
  https://meyerweb.com/eric/books/
- เห็นอันนี้บ่อย แต่ในสายตาผมมันมีความแปลกแบบอธิบายไม่ถูก ดูไม่ค่อยเข้าตา มันไม่ได้เรียบง่ายพอ และก็ไม่ได้ดูทันสมัย/มินิมอลด้วย ตัวอักษรก็เหมือนจะอ่านยากนิดหน่อย อาจเป็นแค่รสนิยมส่วนตัวของผมก็ได้
- สไตล์ชีต CSS reset คือจุดเริ่มต้นของการปนเปื้อนของสไตล์ แนวทางแบบ Kevin Powell ที่เคารพสไตล์เริ่มต้นของเบราว์เซอร์ดีกว่า แน่นอนว่ายังต้องทดสอบข้ามเบราว์เซอร์ แต่ CSS reset ติดเป็นค่าเริ่มต้นมานานเกือบ 20 ปี แล้วก็ยังมีเฟรมเวิร์กทับเพิ่มเข้าไปอีก ทำให้มีแต่ความซับซ้อนมากขึ้น ทุกวันนี้เรามี CSS Grid, ตัวแปร และของสมัยใหม่อีกมาก จนสามารถหลุดจากวิธีเดิม ๆ แล้วทำอะไรสร้างสรรค์ได้มากขึ้น สมัยก่อนผมเกลียด CSS เพราะเต็มไปด้วยลูกเล่นแก้ปัญหาเฉพาะหน้า แต่เดี๋ยวนี้มันเหมือนต่อเลโก้ที่พอดีกันเป๊ะ CSS reset ทุกวันนี้ไม่ใช่ของจำเป็นเสมอไป แต่เป็นเครื่องมือช่วยให้ปล่อยวางความกลัวได้มากกว่า CSS pre-processor ก็แทบไม่จำเป็นแล้วเหมือนกัน
เป็นคำถามขอคำแนะนำ SSG (static site generator) สำหรับเว็บไซต์วิชาการแบบมินิมอลเรียบง่าย ตัวเลือกคือ Astro หรือ Hugo แต่ Astro รู้สึกซับซ้อนเกินไป ส่วนจะเขียน html/css เองก็ไม่สะดวกเรื่องเลย์เอาต์และการปรับแต่ง ธีมของ Astro ก็ไม่ค่อยมีสำหรับบล็อกส่วนตัว ส่วนใหญ่เป็นแนวองค์กรหรือไม่ก็หวือหวา เรื่องพวกนี้ทำให้ย้อนมาคิดอีกทีว่าทำไมการออกแบบเว็บไซต์มันถึงยากขนาดนี้ นักพัฒนาเว็บตามกระแสนี้กันทันได้อย่างไร ทั้งเฟรมเวิร์ก คอมโพเนนต์ และดีเพนเดนซีจำนวนมหาศาล
- ขอแนะนำ Eleventy(https://11ty.dev/) หรือ Zola(https://getzola.org/) ทั้งคู่เป็นเครื่องมือที่ค่อนข้างใหม่และมีผู้ใช้เก่ง ๆ อยู่มาก
- นี่คือความซับซ้อนตามธรรมชาติของระบบเว็บ ความเรียบง่ายคงอยู่ไม่ได้ ถึงอย่างนั้นก็ยังควรขอบคุณมาตรฐานเปิดและเฟรมเวิร์กที่ใช้ได้โดยไม่ต้องขอไลเซนส์ เพียงแต่ตัวเลือกมีมากเกินไปจนเลือกยาก
- การถกกันแบบนี้เองที่คอยกลบความน่าอับอายของสภาพเว็บยุคใหม่ ซึ่งน่าอายตรงที่แทบไม่มีอะไรมีคุณค่านอกจากเว็บบริการใหญ่ ๆ อย่าง Facebook
- อาจไม่จำเป็นต้องมีตัวเลือกเพิ่มแล้ว แต่ franklin.jl เหมาะมากในแง่ของงานคณิตศาสตร์ การจัดการโค้ดอินไลน์ และความเรียบร้อยสะอาดตา
ตัวเว็บไซต์นี้เองก็ใช้ CSS มากกว่าที่บทความแนะนำไว้เยอะ มากกว่า 300 บรรทัดโดยประมาณ ถึงอย่างนั้นก็ยังพอใช้เป็นจุดตั้งต้นได้
- ขอบคุณที่เช็กเรื่องนี้ให้บนมือถือ ข้อเท็จจริงนี้ทำให้ความน่าเชื่อถือของสื่อนี้ลดลง เดี๋ยวผมจะไปตรวจเองทีหลัง ถึงอย่างนั้นก็หวังว่าเทคนิคที่แนะนำจะถูกนำไปใช้อย่างดี
พอเห็นข้อเสนอว่า "จำกัดความกว้างของเนื้อหาเพื่อให้อ่านง่าย" แล้ว ผมอยากบอกว่าไม่อยากให้ทำแบบนั้น ไม่ว่างานวิจัยด้านการใช้งานจะว่าอย่างไร ผมชอบความกว้างมากกว่า เราคุมความกว้างของเนื้อหาได้เองอยู่แล้วด้วยการปรับขนาดเบราว์เซอร์
- แต่การปรับขนาดเบราว์เซอร์ทำให้ทั้งหน้าต่างแคบลงไปด้วย เลยยิ่งไม่สะดวกกว่าเดิม เช่น ถ้าจะย้ายข้อความ 80 คอลัมน์ที่ติดอยู่ซ้ายสุดให้มาอยู่กลางจอ ก็ต้องคอยปรับขนาดเบราว์เซอร์เรื่อย ๆ ซึ่งยุ่งยากมาก จนบางทีก็ถึงกับเขียนทับสไตล์ชีตของเว็บไซต์เองเลย บางครั้งก็รู้สึกว่าสู้ดูเป็นข้อความล้วนยังดีกว่า หรือไม่ก็สลับไปอ่านใน reader mode
- แทบทุกคนที่ผมรู้จัก ไม่ว่าจะสายเทคหรือไม่ ก็มักเปิดแท็บค้างไว้จำนวนมากตลอดเวลา โอกาสที่ทุกแท็บจะมีแต่ข้อความบรรทัดเดียวคือ 0% ความรู้สึกมันเหมือนว่าปรับขนาดหน้าต่างทุกครั้งยังไม่สะดวกเท่าพิมพ์ออกจากเครื่องพิมพ์ดอตเมทริกซ์มาอ่านเลย พูดเกินจริงนิดหน่อย
- เนื้อหาแบบร้อยแก้วเหมาะกับความกว้างที่ถูกจำกัดมากกว่า บนจอกว้าง การกวาดสายตาไปอ่านจนสุดบรรทัดมันเหนื่อย
- ที่คอมเมนต์นี้ได้คะแนนโหวตสูงสุดก็แสดงให้เห็นว่าไม่ควรจริงจังกับคำแนะนำบน HN มากเกินไป
- การจำกัดความกว้างของเนื้อหานั้นโอเค แต่ผมไม่ชอบการใช้ content-width, ฟอนต์ใหญ่ และ line-height มากเกินไป ทุกวันนี้หลายเว็บใช้ฟอนต์ใหญ่กับระยะห่างบรรทัดกว้างเกินจนต้องเลื่อนหน้าจอเยอะเกินไป ขนาดฟอนต์เริ่มต้นของเบราว์เซอร์ก็เหมาะกับระบบอยู่แล้ว ดังนั้นปล่อยขนาดฟอนต์ไว้แบบเดิมแล้วให้การซูมจัดการจะดีกว่า
ต่อให้อ่านบทความก็ไม่จำเป็น คำตอบมันชัดอยู่แล้ว และคำตอบนั้นคือ 0
- สไตล์เริ่มต้นนั้นโดยเฉพาะเรื่องการรองรับรูปภาพใช้งานบนมือถือไม่สะดวกมาก อย่างที่บทความบอก ถ้าอยากให้มัน "ดูดีพอสมควร" ก็ยากจะบอกว่าค่าเริ่มต้นอย่างเดียวพอ
- ค่าเริ่มต้นของเบราว์เซอร์ใช้ฟอนต์ serif
ถึงทุกวันนี้ CSS reset ก็ยังพอจำเป็นสำหรับการจัดแนวพื้นฐานอยู่บ้าง ถ้าเจาะจงเฉพาะเบราว์เซอร์ในช่วง 5 ปีหลัง ก็ใช้ reset ยอดนิยมที่กระชับและเกลามาดีได้สบาย
- ประเด็นสำคัญไม่ใช่ความเหมือนกันของสไตล์ แต่คือการมีฐานที่อ่านง่าย ถึงจะแสดงผลต่างกันไปตามแพลตฟอร์มหรือเบราว์เซอร์ก็ไม่เป็นไร ขอแค่อ่านง่ายก็พอ ควรโฟกัสที่การใช้งานพื้นฐานมากกว่าความสมบูรณ์แบบด้านความสวยงาม
- reset ถูกยกให้สำคัญเกินจริง ถ้าเป็นอะไรแบบมินิมอลอย่างบล็อกส่วนตัว ต่อให้สไตล์ต่างกันไปตามแพลตฟอร์มเล็กน้อยก็ไม่ใช่ปัญหาใหญ่ มันมาจากสัญชาตญาณของนักออกแบบที่อยากบังคับให้ทุกอย่างตรงกันอย่างหมกมุ่นมากกว่า

img { max-width: 100%; }
การตั้งค่านี้ต้องใช้คู่กับ height: auto เสมอ ไม่อย่างนั้นสัดส่วนรูปจะเพี้ยน
img, svg, video { max-width: 100%; }
ใน Chrome 141 การคำนวณ auto จะผิดเพี้ยนเพราะปัญหา width/height ขององค์ประกอบ SVG ที่ซ้อนกัน ชั่วคราวควรใช้
svg:where(:not(svg svg))
ฟอนต์ system-ui ไม่ใช่แค่ตัวแทนของ sans-serif แบบง่าย ๆ ถ้าเอาฟอนต์ UI ของระบบมาใช้กับเนื้อหาหลัก ในบางคู่ของระบบปฏิบัติการ/ภาษา มันอาจอ่านยากจนแทบใช้งานไม่ได้ ถ้าต้องการ sans-serif ก็ควรใช้ sans-serif ไปเลย
ขนาดฟอนต์เริ่มต้นค่อนข้างเล็กนิดหน่อย ประมาณ 18~20px (1.25rem) กำลังดี แต่บนหน้าจอเล็กไม่ควรเกิน 1rem มากนัก
โดยทั่วไปแนะนำ line-height 1.5~1.7 แต่ 1.7 กว้างเกินไปสำหรับจอเล็ก 1.4~1.5 จะพอดีกว่า และปรับตามขนาดหน้าจอได้ในช่วง 1.4~1.6
font-family: System UI;
นี่เป็นข้อผิดพลาดทางไวยากรณ์ชัดเจน แค่ตรวจสไตล์ชีตก็เห็นได้ทันที
การแยกธีมมืด/สว่างของระบบออกจากธีมของเว็บเป็นความคิดที่ดี Firefox ตั้งค่าเริ่มต้นให้เนื้อหาตามธีมของระบบ และก็ปรับแยกได้เช่นกัน
main { max-width: min(70ch, 100% - 4rem); margin-inline: auto; }
อันนี้หมายถึงมีระยะขอบอย่างน้อยประมาณ 2rem (ถ้ารวม body margin เริ่มต้นก็จะเป็น 2rem+8px) ซึ่งมากเกินไปและตำแหน่งที่เอาไปใช้ก็ดูไม่ค่อยเหมาะ ถ้าจะใช้กับ main การใช้ padding จะสมเหตุสมผลกว่า เช่น

main {
  max-width: 70ch;
  padding-inline: 2rem;
  margin-inline: auto;
}

แต่ในทางปฏิบัติ header หรือ footer ก็มักต้องการระยะขอบด้านข้างแบบเดียวกันอยู่ดี ดังนั้นการปรับ margin ของ body จะเหมาะกว่า

body {
  margin: 1rem;
}

main {
  max-width: 70ch;
  margin-inline: auto;
}

วิธีนี้ลดระยะขอบจากราว ~40px ลงมาเหลือระดับ 16px ได้

ในทางปฏิบัติ การปรับเลย์เอาต์และจูนรายละเอียดเล็ก ๆ น้อย ๆ ส่วนใหญ่แก้ได้ด้วย media query อยู่แล้ว ซึ่งในกรณีนี้สุดท้ายจำนวนโค้ดก็ไม่ได้เพิ่มไปมากเมื่อเทียบกับ CSS ธรรมดาที่เขียนมาดี

สร้างเว็บไซต์ที่ดูดีด้วย CSS เท่าที่จำเป็น (2023)