- matcha.css ช่วยตกแต่งองค์ประกอบ HTML ได้ทันทีเหมือน stylesheet เริ่มต้นของเบราว์เซอร์ ลดงาน CSS ที่ต้องทำเองในงาน prototyping อย่างรวดเร็ว, HTML แบบ static และเอกสารที่สร้างจาก Markdown
- ใช้งานได้ด้วย `` หนึ่งบรรทัด โดยไม่ต้องมีขั้นตอน build, dependency, JavaScript หรือการตั้งค่า และขนาด gzip เริ่มต้นอยู่ที่ประมาณ 8.81kB
- ใช้โครงสร้างเอกสารและองค์ประกอบ semantic เพื่อจัดการพฤติกรรมต่าง ๆ ด้วย CSS ล้วน เช่น submenu จาก ``, การแสดง
*สำหรับช่องกรอกที่จำเป็น และสีเส้นขอบตามสถานะการตรวจสอบความถูกต้องของ input - มี preset ได้แก่ Default, Lite, Utility classes, Istanbul coverage และ custom builder พร้อมทั้งสามารถโหลดไดเรกทอรีสไตล์ย่อยโดยตรงได้
- เป็นโอเพนซอร์สภายใต้ไลเซนส์ MIT แม้ utility class และฟีเจอร์ layout จะสะดวก แต่เพราะต้องเพิ่ม class ลงในเอกสาร จึงอาจทำให้ห่างจากการใช้งานแบบ อิง semantic ได้
CSS แบบ drop-in สำหรับตกแต่งเอกสาร HTML ได้ทันที
- matcha.css เป็นไลบรารีแบบ drop-in ที่ใช้ CSS ล้วนในการจัดสไตล์องค์ประกอบ HTML
- มุ่งเน้นให้ HTML element ดูดีขึ้นในลักษณะคล้าย stylesheet เริ่มต้นของเบราว์เซอร์ โดยผู้ใช้ไม่ต้อง patch เอกสารเอง
- เหมาะกับการ prototyping อย่างรวดเร็ว, หน้า HTML แบบ static, เอกสารที่สร้างจาก Markdown และนักพัฒนาที่ต้องการใช้ขอบเขตองค์ประกอบ HTML อย่างครบถ้วนโดยไม่ลงลึกกับรายละเอียด CSS มากนัก
- หน้านี้เองก็ถูกจัดสไตล์ด้วย matcha.css
นำมาใช้ได้ด้วยหนึ่งบรรทัดและย้อนกลับได้ง่าย
- ใช้งานได้โดยไม่ต้องมีขั้นตอน build, dependency, JavaScript, การตั้งค่า หรือการ refactor เอกสาร
- ขนาด build เริ่มต้นตาม gzip คือ
~8.81kB - เพิ่มบรรทัดต่อไปนี้ลงใน `` ของเอกสารเพื่อใช้งาน
- เมื่อต้องการลบก็เพียงเอา `` นั้นออก และถูกออกแบบมาให้ไม่ต้อง refactor หรือจัดระเบียบเอกสารใหม่
- asset ถูก host บน Vercel และใช้งานได้ผ่าน JSdelivr ซึ่งเป็นบริการ CDN สำหรับเผยแพร่แพ็กเกจ npm ด้วย
- เวอร์ชันสาธารณะทั้งหมดมีให้ในไดเรกทอรี /v/ และโดยค่าเริ่มต้นจะเสิร์ฟจาก branch
main
การจัดสไตล์โดยใช้โครงสร้าง semantic
- matcha.css ปรับสไตล์ตามโครงสร้างเอกสารและลำดับชั้นของ element
-
ตัวอย่างพฤติกรรมอัตโนมัติ
- เมื่อซ้อนองค์ประกอบ `` จะสร้าง submenu แบบ implicit
- เมื่อใช้
ร่วมกับจะเติมเครื่องหมาย*เพื่อระบุช่องที่จำเป็นโดยอัตโนมัติ [data-color-scheme="light"]บังคับใช้ light mode และ[data-color-scheme="dark"]บังคับใช้ dark mode[data-color-scheme]สามารถนำไปใช้กับองค์ประกอบเฉพาะเพื่อบังคับ color scheme แบบเลือกเฉพาะจุดได้:rootใช้ตั้งค่า CSS variable และ@media (prefers-color-scheme)ใช้ตั้งค่า mode ตามการตั้งค่าสภาพแวดล้อมของผู้ใช้- ไม่ใช้กฎ
!importantจึง override style ได้ง่ายเมื่อจำเป็น
ตัวเลือกการ build และการ deploy
- นอกจาก build เริ่มต้น ยังมี preset build ตามวัตถุประสงค์
- Default
~8.81kB: semantic styling และฟีเจอร์เสริมทั้งหมด ยกเว้น@istanbul-coverage - Lite
~5.59kB: semantic styling ทั้งหมด,@break-words,@discrete-scrollbars - Utility classes
~3.43kB:@root,@utilities - Istanbul coverage
~1.94kB:@root,@syntax-highlighting,@istanbul-coverage
- Default
- หากต้องการเลือกเฉพาะฟีเจอร์ที่จำเป็น สามารถใช้ custom builder ได้
- สำหรับการปรับแต่งที่ซับซ้อนกว่า สามารถ fork แล้ว patch เองได้เช่นกัน
- ไดเรกทอรีย่อยแต่ละรายการของ github.com/lowlighter/matcha/styles ถูกเสิร์ฟโดยตรงจากเว็บไซต์
- ตัวอย่างเช่น หากต้องการใช้เฉพาะ
@syntax-highlightingก็สามารถ includemod.cssของส่วนนั้นโดยตรงได้ - หากไม่ได้จัดเตรียม CSS variable เอง ก็มีโอกาสสูงที่จะต้องใช้แพ็กเกจ
@root - ไฟล์
mod.cssทั้งหมดมี alias เป็นไดเรกทอรีแม่เพื่อความสะดวกด้วย
- ตัวอย่างเช่น หากต้องการใช้เฉพาะ
ขอบเขตขององค์ประกอบ HTML ที่ถูกจัดสไตล์
-
โครงสร้างเอกสาร
- จัดสไตล์
section,article,header,footer,aside,nav,menu,hgroup, องค์ประกอบหัวข้อ และอื่น ๆ - `` ถูกออกแบบมาให้ผสานเข้ากับกรณีที่ container แม่เป็น
display: flexได้อย่างเป็นธรรมชาติ ภายในจะแสดงเหมือน breadcrumb และ `` จะแสดงเหมือนรายการนำทาง
- จัดสไตล์
-
ข้อความและองค์ประกอบ inline
- มีสไตล์ให้กับ
,,,,,,,,,,,,,,,,,, `` และอื่น ๆ - tooltip เริ่มต้นของเบราว์เซอร์ไม่สามารถจัดสไตล์ได้ ดังนั้นสำหรับ CSS tooltip ให้ใช้ attribute
[data-title]แทน[title]
- มีสไตล์ให้กับ
-
องค์ประกอบฟอร์ม
- จัดสไตล์
,,,,,,,, `` - องค์ประกอบ input จะไม่ทำการตรวจสอบความถูกต้องเพิ่มเติมนอกเหนือจากที่เบราว์เซอร์ทำ
:user-validใช้เส้นขอบ--successและ:user-invalidใช้เส้นขอบ--danger- หากใช้ pattern
จะตรวจจับ required ได้โดยอัตโนมัติ แต่ทำไม่ได้ใน pattern
- จัดสไตล์
-
ตารางและสื่อ
- `` ใช้ border collapse และหาก parent มีความกว้าง จะใช้ overflow อัตโนมัติ
- สามารถห่อด้วย container
.table-responsiveได้ ,, `` จะได้รับสไตล์มุมโค้ง
-
และและก็เป็นเป้าหมายการจัดสไตล์เริ่มต้นด้วย::backdropของ `` จะแสดงเมื่อใช้dialog.showModal()- แนะนำให้ใช้ `` เพื่อให้เบราว์เซอร์ปิด dialog เมื่อ submit โดยไม่ต้องใช้ JavaScript
ความสะดวกและต้นทุนของฟีเจอร์ layout
- matcha.css มีตัวเลือก layout เอกสารให้ด้วย
- การเพิ่ม class
.layout-simpleให้กับ element จะเปิดใช้ layout แบบเรียบง่าย - โครงสร้างที่ต้องใช้ประกอบด้วย
.layout-simple,header:first-of-type,main:only-of-type,aside,nav,footer:last-of-typeเป็นต้น - โครงสร้างจะเปลี่ยนตามเงื่อนไข media
- บนหน้าจอพื้นฐาน จะจัดโดยมี
headerและmainเป็นศูนย์กลาง - ที่
min-width: 960pxจะเป็นโครงสร้างasideกับmain - ที่
min-width: 1280pxจะใช้โครงสร้างasideสองรายการกับmain
- บนหน้าจอพื้นฐาน จะจัดโดยมี
- บนหน้าจอขนาดเล็ก
aside:nth-of-type(1)จะถูกซ่อน และสามารถทำให้กลับมาแสดงด้วยdata-expandหรือทำให้พับได้ด้วยdata-expandable - การใช้ layout อาจจำเป็นต้อง refactor เอกสาร และเมื่อหยุดใช้ matcha.css ในภายหลัง ก็อาจต้อง refactor อีกครั้ง
Utility class เป็นฟีเจอร์เสริมมากกว่า
- matcha.css มี utility class บางส่วนเพื่อความสะดวก
- class เกี่ยวกับสีมีดังนี้
.default,.muted,.accent,.active,.variant,.success,.attention,.severe,.dangerbd-*เปลี่ยนสีเส้นขอบ,bg-*เปลี่ยนสีพื้นหลัง,fg-*เปลี่ยนสไตล์ foreground
.flashใช้สร้าง block ที่ดึงความสนใจ และสามารถผสมกับ class สีได้- มี utility สำหรับ text, size, position, display, flex, overflow, cursor, selection, pointer-events, sizing, resize, shadow และ SVG fill/stroke
- margin และ padding ใช้ class แบบเลขที่อิงค่าต่าง ๆ ได้แก่
0,.125,.25,.5,.75,1,1.25,1.5,1.75,2,3,4 - utility class ต้องเพิ่ม class ลงในเอกสาร จึงอาจทำให้ย้ายออกจาก matcha.css ในภายหลังได้ยาก
- หาก utility ที่มีให้ไม่พอหรือมีข้อจำกัด ควรพิจารณาใช้หรือย้ายไปใช้ utility-first CSS framework
- matcha.css ไม่ได้มีเป้าหมายที่จะเป็น CSS framework แบบครบชุด
การแสดงโค้ด, หน้าตา editor และ Shadow DOM
- matcha.css มี class สำหรับ syntax highlighting ที่ทำตาม
@media (prefers-color-scheme) - ยังมี class สำหรับสร้างรูปแบบ code editor ด้วย
- โครงสร้างที่ต้องใช้คือ
.editor,> textarea,> div.highlight - สไตล์เสริมนี้ไม่ได้ทำ syntax highlighting จริง ๆ แต่จัดสไตล์เฉพาะหน้าตาของ code editor
- การ highlight จริงต้องใช้ไลบรารี syntax highlighting เช่น highlight.js
- โครงสร้างที่ต้องใช้คือ
- matcha.css นิยาม CSS variable ด้วย pseudo-class
:hostจึงเข้ากันได้กับ Shadow DOM - ภายใน Shadow DOM สามารถ import matcha.css อีกครั้งและใช้ custom styles แยกต่างหาก โดยถูก isolate ไม่ให้ชนกับส่วนอื่นของเอกสาร
การรองรับเบราว์เซอร์และไลเซนส์
- matcha.css ระบุว่าถูกสร้างให้เข้ากันได้กับเบราว์เซอร์สมัยใหม่ทั้งหมด
- ตารางการรองรับมี Chrome 92%, Edge 96%, Safari 94%, Firefox 95%, Opera 95%, Android Chrome 96%, iOS Safari 93%, Samsung Internet 96% เป็นต้น
- เผยแพร่เป็นโอเพนซอร์สและใช้ MIT License
- repository อยู่ที่ github.com/lowlighter/matcha
1 ความคิดเห็น
ความเห็นจาก Hacker News
ชอบแนวคิดที่นำ แหล่งความจริงเพียงหนึ่งเดียว ของเลย์เอาต์เอกสารกลับมาไว้ที่ HTML และสำหรับเอกสารที่ไม่ต้องการดีไซน์ซับซ้อนก็ดูเหมือนจะช่วยเพิ่มประสิทธิภาพได้
แต่ตัวเลือกด้านดีไซน์พื้นฐาน โดยเฉพาะสีและงานตกแต่ง ยังน่าเสียดายอยู่บ้าง แม้จะไม่ใช่นักออกแบบมืออาชีพ แต่ก็เคยโดนผู้ใช้บ่นเรื่องซอฟต์แวร์ที่ตัวเองทำมามากพอ จนพอจะจับความรู้สึกแปลก ๆ ได้เมื่อเทียบกับงานที่นักออกแบบเก่ง ๆ ซึ่งมีพื้นฐานเรื่องทฤษฎีสี ความหนาแน่นของข้อมูล หรือกราเดียนต์เป็นคนทำ
ถ้าผู้เขียนกำลังอ่านอยู่ ก็สงสัยว่าเคยคิดจะหยิบสุนทรียะจากโปรเจกต์ FOSS อื่นอย่าง Bulma หรือ Tailwind มาใช้ หรือร่วมงานกับนักออกแบบมืออาชีพบ้างไหม รู้สึกว่า jgthms ก็แวะมาเว็บนี้บ้างเป็นครั้งคราว
ผมไม่ใช่ทั้งฟรอนต์เอนด์ดีเวลอปเปอร์และไม่ใช่นักออกแบบ เลยอาจเผยให้เห็นช่องว่างความรู้ในเรื่องทฤษฎีสี การเข้าถึง และองค์ประกอบต่าง ๆ ที่คนอื่นอาจมองว่าเป็นเรื่องพื้นฐาน นั่นคงเป็นเหตุผลที่มันให้ความรู้สึก งานทำมือ อยู่บ้าง
ประเด็นที่พูดถึงจะไปศึกษาเพิ่มต่อแน่นอน ส่วนการร่วมงานกับนักออกแบบมืออาชีพนั้นเปิดรับในแง่การขอคำแนะนำ แต่เพราะเป็นไซด์โปรเจกต์จึงไม่ได้มีแผนจ้างใคร ตอนนี้ก็มองว่ากลุ่มเป้าหมายหลักยังไม่ใช่มืออาชีพ และน่าจะดึงดูดผู้ใช้สายงานอดิเรกมากกว่า
ยิ่งดูนานก็ยิ่งรู้สึกว่าภาพรวมดูดีขึ้น แต่ในเวลาเดียวกัน ความแปลกนิด ๆ ก็ยิ่งเด่นขึ้นด้วย แปลกดีเหมือนกัน
แก้ไข: น่าจะเป็นเพราะสีของถ้วยชาดูแปลกไปนิด ผมชอบโลโก้โดยรวม แต่คิดว่าน่าจะลองเปลี่ยนสีถ้วยชาให้ใกล้กับสีพื้นหลังด้านบนมากขึ้น
ตัวอักษรสีดำบนพื้นหลังเข้มไม่ค่อยเข้ากันทั้งในเชิงความสวยงามและการเข้าถึง ถ้าค่าเริ่มต้นถูกขัดเกลาอีกหน่อยจะดีมาก
แต่ถ้าเป็นนักออกแบบที่พยายามปรับให้เข้ากับลุคของแบรนด์องค์กร ก็คงใช้เวลาหลายชั่วโมงกับเรื่องอย่างระยะห่าง และเครื่องมือนี้ก็ดูไม่ใช่สำหรับคนกลุ่มนั้น
ชอบไลบรารีเล็ก ๆ แบบนี้ ตอนนี้ผมใช้ pico.css อยู่ และตั้งใจว่าจะลองดูอันนี้ด้วย ผมคิดว่าองค์ประกอบ DOM มาตรฐานของเบราว์เซอร์ควรมีหน้าตาแบบนี้แต่แรก
แต่ในความเป็นจริงมันไม่เป็นแบบนั้น เลยมีไลบรารีพวกนี้เกิดขึ้น พอเห็นคอมเมนต์ของผู้ใช้อีกคนก็เลยไปหาว่า “classless” ในไลบรารีนี้หมายถึงอะไร แล้วก็เจอลิสต์ไลบรารีคล้าย ๆ กัน
https://github.com/dbohdan/classless-css
ผมคิดมานานแล้วว่าน่าจะมีวิธีสลับระหว่าง chrome style กับ content style ได้ เช่น แถบนำทางหรือองค์ประกอบแบบฝังที่เป็นภาพข้อมูล/อินเทอร์แอ็กชัน ก็ให้อยู่ในโหมด chrome ที่รับสไตล์พื้นฐานน้อยที่สุด ส่วนเนื้อหาบทความค่อยรับสไตล์ตามที่ผู้ใช้ชอบ
ชุด Flask + HTMX + AlpineJS + PicoCSS คือ “All Python and HTML SPA” ของผมในตอนนี้
ดูน่าสนใจ แต่การเอาเส้นใต้ลิงก์ออกแล้วให้พึ่งแค่สีเมื่อยังไม่ได้ hover นั้นแย่มากในแง่ การเข้าถึง
ส่วนผู้พิการทางสายตาก็ใช้ screen reader หรือจอ Braille เลยไม่จำเป็นต้องมีเส้นใต้ แล้วตกลงใครกันที่ต้องการเส้นใต้?
ดูมีอนาคตนะ ผมใช้ Simple.css มาตลอด: https://simplecss.org/
ดูคร่าว ๆ แล้ว matcha.css น่าจะพัฒนาไปอีกขั้นนิดหน่อย เลยคิดว่าจะลองใช้ดู
ตัวอย่างเช่น https://andybrewer.github.io/mvp/, https://oxal.org/projects/sakura/, https://yegor256.github.io/tacit/, https://chimera-demo.vercel.app/, https://watercss.kognise.dev/, https://missing.style/ เป็นต้น
น่าเสียดายที่ matcha ยังดูไม่ค่อยมีอนาคตเท่าไร ไม่มีหน้าเดโมที่ให้ดูองค์ประกอบที่ใส่สไตล์แล้วได้อย่างรวดเร็ว พาเลตสีก็ดูแรงเกินไป และ hover ปุ่มค่าเริ่มต้นก็เป็นตัวหนังสือสีเข้มบนพื้นหลังสีเข้มจนอ่านยาก ยังต้องเกลาอีกมาก
อคติแบบนี้ผมได้เรียนรู้มาจากนักพัฒนาคนอื่น ๆ และก็พยายามปรับตามเพื่อไม่ให้ซอฟต์แวร์ที่ผมทำสร้างความประทับใจแรกที่ไม่ดี
อาจจะถึงเวลาต้องมีเครื่องมือสำหรับสร้าง เฟรมเวิร์ก CSS แบบไม่มีคลาส พวกนี้แล้ว เพื่อให้แต่ละคนจูนพาเลตสี padding ขนาดฟอนต์ ฯลฯ ได้อย่างละเอียด
ตลอด 30 ปีที่ผ่านมา เราใช้ สกรอลล์บาร์แบบสัดส่วน เป็นคอนโทรลมาตรฐานกันมาโดยตลอด เรารู้ได้ว่าหน้าต่างปัจจุบันแสดงเอกสารไปมากน้อยแค่ไหน และสามารถคลิกสกรอลล์บาร์เพื่อกระโดดไปยังตำแหน่งที่สัมพันธ์กับขนาดเอกสารได้ง่าย
เรายังใช้ปุ่มลูกศรบนล่างของสกรอลล์บาร์ได้ และย้ายโฟกัสด้วย Tab แล้วควบคุมด้วยคีย์บอร์ดก็ได้ ถ้ามีข้อจำกัดด้านการมองเห็นหรือการเคลื่อนไหว ก็ยังปรับให้คอนทราสต์สูงขึ้นหรือขนาดใหญ่ขึ้นได้จากการตั้งค่าระบบปฏิบัติการ
แต่บนเว็บในปี 2024 ผู้คนกลับทำสกรอลล์บาร์พังกันเป็นเรื่องปกติ จนกลายเป็น ฝันร้ายด้านประสบการณ์ผู้ใช้ เป็นเรื่องน่าอายที่ CSS เปิดทางให้คอนโทรลมาตรฐานจากระบบปฏิบัติการที่เดิมทำงานได้ดีถูกทำลายจน UI/UX ของเบราว์เซอร์ด้อยลง
ได้โปรดอย่าใช้สิ่งนี้เลย
คอนโทรลมาตรฐานที่ระบบปฏิบัติการให้มาก็แย่ลงตามกาลเวลาเหมือนกัน ตัวอย่างเช่นสกรอลล์บาร์ที่หายไปของ Apple และเช็กบ็อกซ์ทรงกลม
ของพวกนั้นเปลี่ยนได้ยาก แต่ถ้าใช้ CSS อย่างน้อยเรายังพอปรับปรุงคอนโทรลมาตรฐานเหล่านั้นได้
ผมชอบ ฟีเจอร์พรีวิว ที่ทำให้ดูได้ว่ามันจะหน้าตาเป็นอย่างไรบนเว็บไซต์อื่น ๆ เหมาะกับหน้า CSS มากและเข้าใจง่ายจริง ๆ
จะไม่พูดถึงคลัง Spark Joy ของ Swyx ก็คงไม่ได้:
https://github.com/swyxio/spark-joy?tab=readme-ov-file#drop-...
และอีกลิสต์หนึ่งที่มีภาพหน้าจอ ซึ่งถูกพูดถึงในบทสนทนานั้น: https://github.com/dbohdan/classless-css
ตัวเลือกมีเยอะมาก ข้อมูลที่มีค่าที่สุดตอนนี้คือ ใช้งานจริงแล้วเป็นอย่างไร
ทำไมถึงยังมี เฟรมเวิร์ก CSS ใหม่ ๆ ออกมาเรื่อย ๆ? ทำไมเรื่องแบบนี้ยังไม่กลายเป็นปัญหาที่ถูกแก้ไปแล้ว?
ตราบใดที่ศิลปินยังอยากแสดงออกผ่านสื่ออย่างเว็บ สไตล์ชีตและ “เฟรมเวิร์ก” ใหม่ ๆ ก็จะยังคงถูกสร้างขึ้นต่อไป