คำถามและคำตอบสัมภาษณ์ CSS 60+ อันดับแรก (2026)
เอ็มม่าเดวิส
เตรียมตัวสัมภาษณ์งาน CSS หรือยัง? ถึงเวลาเพิ่มพูนความรู้พื้นฐานและความรู้อื่นๆ ของคุณแล้ว ทำความเข้าใจ สัมภาษณ์ CSS คำถามสามารถเปิดเผยได้ว่าผู้สมัครเข้าใจโครงสร้างการออกแบบและตรรกะของการจัดรูปแบบอย่างลึกซึ้งเพียงใด
อาชีพนักพัฒนา CSS เปิดประตูสู่โอกาสที่หลากหลาย ตั้งแต่การออกแบบส่วนหน้า (front-end design) ไปจนถึงเว็บแอปพลิเคชันแบบ Responsive ด้วยประสบการณ์ทางเทคนิค ความเชี่ยวชาญเฉพาะด้าน และทักษะการวิเคราะห์ที่แข็งแกร่ง ผู้เชี่ยวชาญสามารถแสดงทักษะขั้นสูงที่หัวหน้าทีมและผู้จัดการให้ความสำคัญ คำถามและคำตอบเหล่านี้ช่วยให้นักพัฒนามือใหม่ ระดับกลาง และระดับอาวุโส ผ่านการสัมภาษณ์งานได้อย่างมั่นใจและมีประสิทธิภาพ
คู่มือนี้รวบรวมแนวปฏิบัติการสัมภาษณ์ที่เชื่อถือได้จากหลากหลายอุตสาหกรรม โดยนำข้อมูลเชิงลึกที่แบ่งปันโดยผู้เชี่ยวชาญกว่า 85 ราย รวมถึงผู้นำทางเทคนิค ผู้จัดการ และผู้เชี่ยวชาญด้านการจ้างงาน มาปรับใช้ เพื่อให้มั่นใจถึงความแม่นยำ ความเกี่ยวข้อง และความน่าเชื่อถือสำหรับทุกระดับประสบการณ์
คำถามและคำตอบสัมภาษณ์ CSS ยอดนิยม
1) อธิบาย CSS cascade สมัยใหม่ รวมถึง @layer, ความเฉพาะเจาะจง และลำดับแหล่งที่มา
ลำดับชั้นจะตัดสินว่ากฎใด "ชนะ" เมื่อกฎหลายข้อกำหนดเป้าหมายองค์ประกอบเดียวกัน การตัดสินใจดำเนินไปตามความสำคัญ ( !important ), ต้นกำเนิด (ตัวแทนผู้ใช้, ผู้ใช้, ผู้เขียน) จากนั้น ลำดับชั้น จาก @layerตามด้วยความจำเพาะ และลำดับแหล่งที่มาสุดท้าย โดยใช้ @layer ช่วยให้คุณสามารถกำหนดระดับชั้นที่คาดการณ์ได้ เช่น รีเซ็ต ฐาน ส่วนประกอบ และยูทิลิตี้ เพื่อให้กฎทั้งหมดสามารถแทนที่กฎอื่นๆ ได้โดยไม่เพิ่มความจำเพาะของตัวเลือก ประโยชน์หลักคือความสามารถในการบำรุงรักษา ข้อเสียหลักคือการเรียงลำดับชั้นที่ไม่ถูกต้องอาจซ่อนข้อบกพร่องได้ ควรใช้ตัวเลือกคลาสที่มีความจำเพาะต่ำ สำรอง !important เพื่อนโยบายที่จงใจและทำให้สถาปัตยกรรมสามารถอ่านได้
ตอบพร้อมตัวอย่าง
@layer reset, base, components, utilities;
@layer reset { *,*::before,*::after{ box-sizing:border-box } }
@layer base { body{ font:16px/1.5 system-ui } }
@layer components { .btn{ background:var(--brand,#4b6fff); color:#fff } }
@layer utilities { .text-sm{ font-size:.875rem } }
👉 ดาวน์โหลด PDF ฟรี: คำถามสัมภาษณ์ CSS
2) คอนเทนเนอร์คิวรีแตกต่างจากมีเดียคิวรีอย่างไร และคุณจะใช้แต่ละคิวรีที่ไหน
แบบสอบถามคอนเทนเนอร์ตอบสนองต่อขนาดหรือรูปแบบของ มีธาตุอยู่ทำให้ส่วนประกอบต่างๆ รับรู้ตัวเองและนำกลับมาใช้ซ้ำได้ในบริบทที่แตกต่างกัน สื่อสอบถามข้อมูลตอบสนองต่อ วิวพอร์ต หรือคุณลักษณะของอุปกรณ์และความโดดเด่นสำหรับการเปลี่ยนแปลงเค้าโครงโดยรวม คอนเทนเนอร์คิวรีช่วยให้การ์ด วิดเจ็ต และโมดูลแบบซ้อนสามารถปรับให้เข้ากับระบบได้ ส่วนมีเดียคิวรียังคงเหมาะอย่างยิ่งสำหรับการนำทางทั่วทั้งเว็บไซต์หรือการเปลี่ยนแปลงเชลล์ ข้อดีของคอนเทนเนอร์คิวรี ได้แก่ ความละเอียดที่ละเอียดกว่าและจุดพักส่วนกลางที่น้อยกว่า ข้อเสีย ได้แก่ การตั้งค่าผ่าน container-type และการเลือกขอบเขตอย่างระมัดระวัง
ความแตกต่างระหว่าง (ตารางเปรียบเทียบ)
| ปัจจัย | แบบสอบถามสื่อ | แบบสอบถามคอนเทนเนอร์ |
|---|---|---|
| ทริกเกอร์ | คุณสมบัติช่องมองภาพ | ขนาดหรือรูปแบบของภาชนะ |
| ขอบเขต | ทั่วทั้งหน้า | ส่วนประกอบท้องถิ่น |
| การติดตั้ง | ไม่มีอะไรเกินกว่าการสอบถาม | ต้องใช้ container-type / ชื่อตัวเลือก |
| เหมาะสำหรับ | จุดพักทั่วโลก | รูปแบบการ์ดหรือวิดเจ็ต |
ตอบพร้อมตัวอย่าง
/* Declare a query container */
.card-grid { container-type: inline-size; }
/* Component-level breakpoint */
@container (min-width: 32rem) {
.card { display:grid; grid-template-columns: 2fr 3fr; gap:1rem; }
}
3) ลักษณะเด่นและประโยชน์ของ :has()และมันเปรียบเทียบกับอะไร :is() และ :where() ?
คลาสเทียมเชิงสัมพันธ์ :has() เลือกองค์ประกอบตามลูกหลานหรือรูปแบบที่ตามมา ซึ่งทำให้สามารถกำหนดรูปแบบสถานะหลักได้โดยไม่ต้อง Javaสคริปต์ มีประสิทธิภาพสำหรับกลุ่มการตรวจสอบความถูกต้องของฟอร์ม สถานะการนำทาง หรือสวิตช์ความหนาแน่น ในทางกลับกัน :is() และ :where() ลดความซับซ้อนของรายการตัวเลือกที่ยาว :where() ไม่ก่อให้เกิดความจำเพาะเจาะจง ในขณะที่ :is() มีส่วนสนับสนุนความเฉพาะเจาะจงของข้อโต้แย้งที่เฉพาะเจาะจงที่สุด ประโยชน์ของ :has() รวมถึงการจัดรูปแบบตามบริบทและมาร์กอัปที่สะอาดขึ้น ข้อเสียคืออาจเกิดปัญหาประสิทธิภาพหากใช้กับตัวเลือกแบบไม่จำกัดขอบเขต ควรจำกัดขอบเขตให้แคบลง และใช้ร่วมกับคลาสหรือแอตทริบิวต์เพื่อให้สามารถคาดการณ์ได้
ตอบพร้อมตัวอย่าง
/* Emphasize label when any input inside is invalid */
.form-group:has(input:invalid) label { color:#b00020; }
/* Compact nav if there are many items */
.nav:has(> li:nth-child(n+8)) { font-size:.9rem }
/* Specificity control helpers */
:is(h1,h2,h3){ margin-block:.75em }
where(.prose h1,.prose h2){ line-height:1.2 }
4) คุณจะนำคุณสมบัติ CSS ที่กำหนดเองไปใช้กับการสร้างธีมที่ไหน และข้อดีและข้อเสียของคุณสมบัติเหล่านั้นคืออะไร
คุณสมบัติ CSS แบบกำหนดเองจะส่งต่อค่าผ่านลำดับชั้น สืบทอดค่าตามธรรมชาติ และแก้ไขค่าได้ขณะรันไทม์ ซึ่งทำให้คุณสมบัติเหล่านี้เหมาะอย่างยิ่งสำหรับธีม โหมดความหนาแน่น และโทเค็นการออกแบบ คุณสมบัติเหล่านี้ช่วยให้สามารถสลับโหมดมืดหรือสลับระบบสีได้โดยไม่ต้องสร้างทรัพยากรใหม่ ข้อดีประกอบด้วยการอัปเดตแบบไดนามิก การอยู่ร่วมกับส่วนประกอบต่างๆ และความเข้ากันได้กับ @layerข้อเสีย ได้แก่ การวิเคราะห์แบบอ้อมสำหรับตัววิเคราะห์แบบคงที่ และความจำเป็นในการออกแบบระบบสำรอง ใช้โทเค็นขอบเขตรากสำหรับความหมายทั่วไป และโทเค็นขอบเขตส่วนประกอบสำหรับตัวแปร และรักษาชื่อให้คงที่เพื่อให้สามารถบำรุงรักษาได้ในระยะยาว
ตอบพร้อมตัวอย่าง
:root { --bg: #fff; --fg: #111; --radius: .5rem; }
@media (prefers-color-scheme: dark){
:root { --bg:#0b0d10; --fg:#e7edf3; }
}
.card { background:var(--bg); color:var(--fg); border-radius:var(--radius); }
5) ระบบเค้าโครงใดที่เหมาะกับปัญหาใด: Flexbox, Grid หรือ Subgrid?
Flexbox เหมาะที่สุดสำหรับ หนึ่งมิติ การจัดตำแหน่งและการกระจายตามแกนเดียว กริดมีความโดดเด่นในด้าน สองมิติ การจัดวางและการควบคุมแทร็กที่ชัดเจน และ Subgrid ช่วยให้องค์ประกอบย่อยสืบทอดแทร็กกริดหลักเพื่อการจัดตำแหน่งที่สอดคล้องกันระหว่างส่วนประกอบที่ซ้อนกัน การเลือกระบบที่เหมาะสมช่วยลดการแทนที่และปรับปรุงการอ่าน รูปแบบทั่วไปคือ Grid สำหรับเฟรมเพจและแดชบอร์ด Flexbox สำหรับแถบเครื่องมือและรายการชิป และ Subgrid สำหรับการจัดตำแหน่งองค์ประกอบภายใน เช่น เมตาดาต้าของการ์ดกับคอลัมน์ภายนอก
ประเภทและความแตกต่างระหว่าง (ตารางเปรียบเทียบ)
| ใช้กรณี | flexbox | ตะแกรง | ซับกริด |
|---|---|---|---|
| Dimension | 1-D | 2-D | 2 มิติผ่านแทร็กที่สืบทอดมา |
| ความแข็งแรง | การกระจาย, การจัดตำแหน่ง | พื้นที่ชัดเจน, แทร็กที่ทำซ้ำได้ | การจัดตำแหน่งข้ามส่วนประกอบ |
| การติดตั้ง | ต่ำสุด | กำหนดแถว/คอลัมน์ | จำเป็นต้องมีกริดหลัก |
| ตัวอย่าง | แถบนำทาง, ยาเม็ด | แกลเลอรี่, แดชบอร์ด | ส่วนท้ายของการ์ดจัดชิดกับตารางหน้า |
ตอบพร้อมตัวอย่าง
.layout { display:grid; grid-template-columns: 1fr 3fr; gap:1rem; }
.card-meta { display:grid; grid-template-columns: subgrid; grid-column: 1 / -1; }
6) คุณสมบัติเชิงตรรกะช่วยปรับปรุงการแปลเป็นภาษาสากลหรือไม่? อธิบายประโยชน์และข้อแลกเปลี่ยน
คุณสมบัติเชิงตรรกะจะแทนที่ทิศทางทางกายภาพเช่นซ้ายและขวาด้วยเงื่อนไขที่สัมพันธ์กับการไหล เช่น จุดเริ่มต้นหรือจุดสิ้นสุดแบบอินไลน์และแบบบล็อก ซึ่งทำให้สไตล์ชีตเดียวสามารถปรับให้เข้ากับภาษาที่อ่านจากขวาไปซ้ายและโหมดการเขียนแนวตั้งโดยไม่มีกฎการแยกสาขา ประโยชน์ที่ได้รับคือ การทำให้เป็นสากลที่ดีขึ้น ลดการซ้ำซ้อนของกฎ และส่วนประกอบที่มีความยืดหยุ่นมากขึ้น ข้อเสียเปรียบ ได้แก่ การเปลี่ยนแปลงทางความคิดระหว่างการนำไปใช้ และช่องว่างเป็นครั้งคราวในคุณสมบัติแบบหางยาว โปรดปราน margin-inline, padding-blockและ inset-inline-start เพื่อการจัดระยะห่างและตำแหน่งเพื่อให้ได้รูปแบบที่สม่ำเสมอกันในแต่ละสถานที่
ตอบพร้อมตัวอย่าง
.alert { padding-inline:1rem; border-inline-start:4px solid currentColor; }
[dir="rtl"] .breadcrumb { float:inline-end; }
7) คุณจะใช้เมื่อไร clamp() และหน่วยช่องมองภาพที่ทันสมัย ( svh, lvh, dvh ) สำหรับชนิดและระยะห่างของของไหล?
ใช้ clamp(min, preferred, max) เมื่อคุณต้องการค่าที่ปรับขนาดได้อย่างราบรื่นตามการเติบโตของช่องมองภาพ แต่ไม่เกินขีดจำกัดที่เหมาะสม เหมาะอย่างยิ่งสำหรับการพิมพ์ การเติมพื้นที่ และส่วนสำคัญ หน่วยช่องมองภาพสมัยใหม่รองรับ UI ของเบราว์เซอร์มือถือ Chrome โดยให้ความสูงที่คงที่สำหรับส่วนเต็มหน้าจอ ประโยชน์ที่ได้รับ ได้แก่ การสอบถามสื่อที่น้อยลง จังหวะที่สม่ำเสมอ และการเข้าถึงที่ดีขึ้นเมื่อใช้ร่วมกับ remข้อเสียคือต้องทดสอบข้ามอุปกรณ์เพื่อยืนยันเจตนาทางภาพและเป้าหมายการแตะที่ปลอดภัย
ตอบพร้อมตัวอย่าง
:root { --step-0: clamp(1rem, 1.2vw + .9rem, 1.25rem); }
h1 { font-size: clamp(1.75rem, 4vw + 1rem, 2.5rem); }
.hero { min-height: 100dvh; padding-block: clamp(1rem, 3vw, 3rem); }
8) บริบทการซ้อนคืออะไร และปัจจัย z-index และตำแหน่งสร้างหรือแยกบริบทดังกล่าวได้อย่างไร
บริบทการซ้อนคือขอบเขตการวาดภาพแบบแยกเดี่ยว ซึ่งการเปรียบเทียบดัชนี z จะทำเฉพาะระหว่างองค์ประกอบย่อยภายในบริบทเดียวกันเท่านั้น บริบทใหม่เกิดขึ้นจากองค์ประกอบราก องค์ประกอบที่จัดตำแหน่งด้วย z-index นอกเหนือจาก autoและคุณสมบัติบางประการ เช่น transform, opacity < 1, filterและ position: fixedการทำความเข้าใจเกี่ยวกับสิ่งเหล่านี้จะช่วยอธิบายปัญหาทั่วไปที่มักพบใน "ดัชนี z ไม่ทำงาน" ซึ่งเนื้อหาย่อยไม่สามารถแซงหน้าเนื้อหาที่อยู่นอกบริบทได้ ประโยชน์คือการห่อหุ้มเนื้อหา ส่วนอันตรายคือการแยกเนื้อหาโดยไม่ได้ตั้งใจ ซึ่งขัดขวางการซ้อนทับที่ตั้งใจไว้
ตอบพร้อมตัวอย่าง
.header { position:relative; z-index:10; }
.modal { position:fixed; inset:0; z-index:1000; }
.card { transform: translateZ(0); /* new stacking context */ }
9) การซ้อน CSS ดั้งเดิมพร้อมสำหรับการใช้งานจริงหรือไม่ และคุณจะไมเกรชันจากพรีโปรเซสเซอร์ได้อย่างไร
การซ้อนแบบเนทีฟได้รับการรองรับอย่างกว้างขวางและช่วยลดการทำซ้ำโดยการวางความสัมพันธ์ของกฎร่วมกันในขณะที่ยังคงรักษาตัวเลือกให้สั้น การโยกย้ายควรให้ความสำคัญกับส่วนประกอบก่อน โดยแทนที่เชนลูกหลานที่ลึกด้วยการซ้อนหนึ่งหรือสองระดับ และลบโครงสร้างแบบพรีโพรเซสเซอร์อย่างเดียว เช่น มิกซ์อิน ข้อดีคือบันเดิลที่เล็กลงและการแมป DevTools ที่ได้รับการปรับปรุง ข้อเสียคือมีแนวโน้มที่จะซ้อนซ้ำ ซึ่งเพิ่มความจำเพาะและขัดขวางการนำกลับมาใช้ใหม่ กำหนดรั้วกั้น: จำกัดความลึก รักษา hooks ที่อิงตามคลาส และรวมเข้ากับ @layer เพื่อควบคุมลำดับการแทนที่
ตอบพร้อมตัวอย่าง
.card {
display:grid; gap:.75rem;
& h3 { margin-block:.5rem; }
& .actions { display:flex; gap:.5rem; }
& .actions > button:hover { text-decoration:underline; }
}
10) คุณสามารถใช้แบบสอบถามสไตล์คอนเทนเนอร์ได้หรือไม่ และมีประโยชน์ในทางปฏิบัติอย่างไรบ้าง
การสืบค้นสไตล์ช่วยให้ส่วนประกอบต่างๆ สามารถปรับให้เข้ากับสไตล์ที่คำนวณได้ของคอนเทนเนอร์ เช่น โทเค็นความหนาแน่นหรือรูปแบบธีม โดยไม่ต้องส่งชื่อคลาสเพิ่มเติมผ่าน DOM วิธีนี้ช่วยให้ระบบการออกแบบสามารถสลับระหว่างโหมดที่กะทัดรัดและสะดวกสบาย หรือโหมดเน้นสีอ่อนและสีเข้มในแต่ละคอนเทนเนอร์ได้ ข้อดีคือส่วนประกอบที่แยกออกจากกันและขอบเขตที่ชัดเจนขึ้น ข้อเสียคือความจำเป็นในการตั้งชื่อโทเค็นอย่างระมัดระวัง การสำรองข้อมูลแบบบันทึก และการตั้งค่าคอนเทนเนอร์อย่างตั้งใจ ควรใช้วิธีนี้เพื่อแสดงสถานะเป็นข้อมูล แทนที่จะใช้เป็นตัวเลือกโครงสร้างที่เปราะบาง
ตอบพร้อมตัวอย่าง
/* Container emits a style signal */
.panel { --density: compact; container-type:inline-size; }
/* Child adapts when the container declares compact density */
@container style(--density: compact) {
.item { padding:.5rem; gap:.5rem; }
}
11) ปัจจัยด้านประสิทธิภาพใดบ้างที่มีความสำคัญต่อ CSS และคุณจะหลีกเลี่ยงการทำลายเค้าโครงได้อย่างไร
ประสิทธิภาพของ CSS ขึ้นอยู่กับความถี่ที่เบราว์เซอร์ต้องคำนวณใหม่ สไตล์, คำนวณ แบบและทาสีใหม่หรือ ประกอบด้วย เลเยอร์ ปัญหา Layout thrashing เกิดขึ้นเมื่อการอ่านและเขียนแบบสลับกันไปยังคุณสมบัติที่ส่งผลต่อ Layout บังคับให้เกิดการ reflow ซ้ำๆ แนวทางที่เป็นระบบคือการลดความซับซ้อนของ selector ให้น้อยที่สุด รักษาความจำเพาะให้ต่ำ และสร้างภาพเคลื่อนไหวเฉพาะคุณสมบัติที่ compositor ใช้งานได้ Batch DOM จะอ่านก่อนเขียน และใช้ประโยชน์จากการกักเก็บเพื่อจำกัดรัศมีการระเบิด
ตอบพร้อมตัวอย่าง
- ชอบ
transformและopacityสำหรับแอนิเมชัน หลีกเลี่ยงการแอนิเมชันwidth/height/top/left. - สมัครสมาชิก
content-visibility: autoไปยังส่วนนอกจอและจัดให้มีcontain-intrinsic-size. - ใช้
will-changeประหยัดเพื่อส่งเสริมเลเยอร์เฉพาะสำหรับแอนิเมชั่นที่ทำงานยาวนานเท่านั้น - แทนที่ตัวเลือกลูกหลานที่ลึกด้วยตัวเชื่อมคลาสเดียวเพื่อลดการคำนวณสไตล์ซ้ำ
.article-preview { content-visibility: auto; contain-intrinsic-size: 600px 400px; }
.fab { transition: transform .25s, opacity .25s; will-change: transform; }
12) ฟีเจอร์ CSS ใดบ้างที่รองรับการเข้าถึงได้ทันที พร้อมระบุข้อดีและตัวอย่าง
CSS ไม่สามารถแทนที่ HTML หรือ ARIA แบบความหมายได้ แต่ช่วยปรับปรุง การมองเห็นโฟกัส ความปลอดภัยในการเคลื่อนไหวและ กลยุทธ์การเปรียบเทียบส่วน :focus-visible คลาสเทียมจะเปิดเผยโฟกัสเมื่อตรวจพบโหมดแป้นพิมพ์ ช่วยป้องกันสัญญาณรบกวนทางสายตาสำหรับผู้ใช้เมาส์ และยังคงรักษาสัญญาณสำหรับผู้ใช้แป้นพิมพ์ไว้ คุณสมบัติสื่อต่างๆ เช่น prefers-reduced-motion อนุญาตให้มีรูปแบบสำรองที่เคารพ ในขณะที่การออกแบบโทเค็นสีที่พิถีพิถันรองรับคอนทราสต์ที่เพียงพอ ข้อดีคือสามารถตั้งค่าเริ่มต้นที่ครอบคลุมการตั้งค่าของผู้ใช้ที่หลากหลาย ข้อจำกัดคือต้องระบุความหมายและการนำทางด้วยแป้นพิมพ์ผ่านมาร์กอัปและสคริปต์
ตอบพร้อมตัวอย่าง
:focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
.parallax, .video-bg { animation: none; transition: none; }
}
13) วิธีการต่างๆในการรวม CSS และข้อดีข้อเสียของแต่ละวิธี
มีกลยุทธ์การรวมหลายแบบ ซึ่งแต่ละแบบมีลักษณะเฉพาะที่ส่งผลต่อการแคช เส้นทางวิกฤต และความสามารถในการบำรุงรักษา สไตล์ชีตภายนอกจะแยกข้อกังวลออกจากกันและใช้ประโยชน์จากการแคชของเบราว์เซอร์แบบอินไลน์ <style> เหมาะสำหรับกฎที่สำคัญที่ต้องโหลดด้วย HTML แบบอินไลน์ style="" แอตทริบิวต์มีความสำคัญสูงสุด แต่อาจเป็นอันตรายต่อการนำกลับมาใช้ซ้ำและเพิ่มความจำเพาะ การเลือกประเภทที่ถูกต้องจะช่วยลดความซ้ำซ้อนของเพย์โหลด ในขณะเดียวกันก็ยังคงรักษาหลักสรีรศาสตร์ของนักพัฒนาไว้
ข้อดีข้อเสีย (ตารางเปรียบเทียบ)
| วิธี | ข้อดี | ข้อเสีย | การใช้งานทั่วไป |
|---|---|---|---|
| สไตล์ชีทภายนอก | การแคชเบราว์เซอร์ แชร์ระหว่างหน้าต่างๆ | คำขอ HTTP เพิ่มเติม | ระบบการออกแบบระดับโลก |
อินไลน์ <style> |
ขจัดการร้องขอ เหมาะสำหรับ CSS ที่สำคัญ | ยากต่อการจัดการในระดับขนาดใหญ่ | สไตล์แบบพับเหนือ |
อินไลน์ style="" |
ทันทีและมีความเฉพาะเจาะจงสูงสุด | ห้ามใช้ซ้ำ; HTML ที่มีสัญญาณรบกวน | การแทนที่แบบครั้งเดียว |
ตอบพร้อมตัวอย่าง
<link rel="stylesheet" href="/th/assets/app.css" /> <style>/* minimal critical rules for LCP elements */</style> <div class="btn" style="--danger: #b00020">Delete</div>
14) อะไรคือความแตกต่างระหว่าง relative, absolute, fixedและ sticky การวางตำแหน่ง? ให้คำแนะนำกรณีการใช้งาน
การวางตำแหน่งจะกำหนดว่าองค์ประกอบต่างๆ จะถูกวางไว้ในกระแสอย่างไร และจะโต้ตอบกับการเลื่อนและบรรพบุรุษอย่างไร relative รักษาการไหลตามธรรมชาติแต่ชดเชยกล่องภาพ มักใช้เพื่อสร้างบริบทการยึดเหนี่ยว absolute ลบองค์ประกอบออกจากการไหล โดยจัดตำแหน่งให้สัมพันธ์กับองค์ประกอบบรรพบุรุษที่อยู่ใกล้ที่สุด ซึ่งจะให้ความแม่นยำโดยแลกกับการตอบสนองที่รวดเร็ว fixed ปักหมุดองค์ประกอบไว้ที่ช่องมองภาพ ซึ่งเหมาะสำหรับแถบถาวร แต่ต้องคำนึงถึงแป้นพิมพ์บนหน้าจอและพื้นที่ปลอดภัยด้วย sticky สลับระหว่างแบบคงที่และแบบคงที่ขึ้นอยู่กับเกณฑ์การเลื่อน พร้อมทั้งมีส่วนหัวของส่วนและดัชนีในหน้า
ตอบพร้อมตัวอย่าง
.badge-anchor { position: relative; }
.badge { position: absolute; inset: -6px -6px auto auto; }
.header { position: sticky; top: 0; background: var(--bg); }
.toast { position: fixed; inset: auto 1rem 1rem auto; }
15) ปัจจัยใดบ้างที่กำหนดสถาปัตยกรรม CSS ที่สามารถบำรุงรักษาได้ (BEM, ITCSS, ยูทิลิตี้, เลเยอร์) และวงจรชีวิตของรูปแบบส่วนประกอบเป็นอย่างไร
สถาปัตยกรรมที่สามารถบำรุงรักษาได้สมดุล วินัยเฉพาะด้าน, คาดเดาได้ การแบ่งชั้นและมั่นคง การตั้งชื่อBEM จัดให้มีการเชื่อมโยงที่ชัดเจน ITCSS สั่งกฎตั้งแต่การรีเซ็ตระดับต่ำไปจนถึงยูทิลิตี้ระดับสูง แนวทางที่เน้นยูทิลิตี้เป็นหลักช่วยเพิ่มความเร็วในการวนซ้ำด้วยไพรมิทีฟที่มีข้อจำกัด และ @layer กำหนดลำดับการแทนที่อย่างเป็นทางการทั่วทั้งโค้ดเบส วงจรชีวิตของส่วนประกอบโดยทั่วไปจะเริ่มต้นด้วยการกำหนดโทเค็น ดำเนินไปตามกฎพื้นฐานและส่วนประกอบ เพิ่มตัวแปรและสถานะ และสิ้นสุดด้วยนโยบายการเลิกใช้งานที่หลีกเลี่ยงการเปลี่ยนแปลงที่ทำให้เกิดการหยุดชะงัก ข้อดีคือพฤติกรรมที่สอดคล้องกันระหว่างทีม ข้อเสียคือการวางแผนและการกำกับดูแลล่วงหน้า
ตอบพร้อมตัวอย่าง
- โทเค็นใน
:root(ระยะห่าง, สี, รัศมี) - ส่วนประกอบที่วางอยู่ใน
@layer componentsโดยมีตัวเลือกคลาสเดียว - การเปลี่ยนแปลงผ่านแอตทริบิวต์ข้อมูลหรือแบบสอบถามสไตล์คอนเทนเนอร์เพื่อความชัดเจน
@layer reset, base, components, utilities;
@layer components { .card { border-radius: var(--radius-2); } }
16) Shadow DOM ส่งผลต่อการกำหนดขอบเขต CSS อย่างไร และมีวิธีใดบ้างในการกำหนดสไตล์ส่วนต่างๆ
Shadow DOM ห่อหุ้มมาร์กอัปและการจัดรูปแบบ ช่วยป้องกันการรั่วไหลโดยไม่ได้ตั้งใจและรับประกันความเสถียรของส่วนประกอบ ผู้เขียนสามารถเปิดเผยพื้นผิวโดยเจตนาได้: ::part() กำหนดเป้าหมายชิ้นส่วนที่มีชื่อที่ส่งออกโดยส่วนประกอบในขณะที่ ::slotted() สไตล์ที่กำหนดโหนด light-DOM ในช่อง ข้อดีประกอบด้วยการห่อหุ้มที่แข็งแกร่งและพื้นผิวธีมที่คาดเดาได้ ข้อเสีย ได้แก่ การเข้าถึงข้อมูลภายในที่จำกัด เว้นแต่ผู้ออกแบบส่วนประกอบจะเป็นผู้จัดหาชิ้นส่วนให้ และความจำเป็นในการจัดทำเอกสารชิ้นส่วนเหล่านั้นให้กับผู้บริโภค
ตอบพร้อมตัวอย่าง
/* Theme an exposed component part */
custom-rating::part(star) { color: gold; }
file-card::slotted(img) { border-radius: .5rem; }
17) ลักษณะของโมเดลกล่อง CSS มีอะไรบ้าง และทำไม box-sizing: border-box เรื่อง?
แบบจำลองกล่องอธิบายว่าขนาดรวมขององค์ประกอบมาจากอะไร เนื้อหา การเติม ขอบและ ขอบ. ด้วยค่าเริ่มต้น content-box, ประกาศ width ไม่รวมการเติมและขอบ ซึ่งอาจทำให้เกิดการล้นเกินและการคำนวณที่ซับซ้อน การนำไปใช้ border-box รวมแพดดิ้งและขอบภายในความกว้างและความสูงที่ประกาศไว้ ทำให้การคำนวณทางคณิตศาสตร์ของกริดและการกำหนดขนาดส่วนประกอบคาดเดาได้ง่ายขึ้น ข้อดีคือมีโมเดลทางจิตใจที่ง่ายขึ้นและมีบั๊กเลย์เอาต์น้อยลง ข้อเสียคือการผสมผสานโมเดลภายในระบบอาจทำให้ผู้ร่วมสร้างสับสนได้ กำหนดให้เป็นมาตรฐานที่รากและบันทึกข้อยกเว้นอย่างเปิดเผย
ตอบพร้อมตัวอย่าง
*, *::before, *::after { box-sizing: border-box; }
.card { width: 22rem; padding: 1rem; border: 1px solid #ddd; }
18) คุณจะใช้ที่ไหน @supports เพื่อการพัฒนาอย่างก้าวหน้า และมีประโยชน์อะไรบ้าง?
@supports ช่วยให้สามารถตรวจจับฟีเจอร์ใน CSS ได้ ทำให้ระบบพื้นฐานสามารถทำงานได้ทุกที่ พร้อมการปรับปรุงเงื่อนไขหากมี รูปแบบนี้ช่วยลดความเสี่ยงเมื่อนำฟีเจอร์สมัยใหม่มาใช้ เช่น คอนเทนเนอร์คิวรี :has()หรือซับกริด ประโยชน์หลักคือการลดระดับลงอย่างราบรื่นและเส้นทางการโยกย้ายที่ชัดเจนขึ้น ข้อเสียคือการรักษาเส้นทางโค้ดคู่ไว้ชั่วระยะเวลาหนึ่ง ควรจัดโครงสร้างพฤติกรรมพื้นฐานก่อน จากนั้นจึงรวมพฤติกรรมขั้นสูงไว้ในโครงสร้างเป้าหมาย @supports บล็อคเพื่อให้สภาพแวดล้อมดั้งเดิมไม่ถดถอยกลับ
ตอบพร้อมตัวอย่าง
.card { display: block; }
@supports (display: grid) {
.card { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; }
}
19) คุณควรเลือกหน่วย CSS ตัวใด และมีความแตกต่างกันอย่างไร?
การเลือกหน่วยส่งผลต่อการปรับขนาด ความสามารถในการอ่าน และการเข้าถึง rem ปรับขนาดตามขนาดฟอนต์ราก ทำให้เหมาะสำหรับประเภททั่วไปและระยะห่าง em ปรับขนาดตามองค์ประกอบปัจจุบันซึ่งมีประโยชน์ภายในส่วนประกอบแต่สามารถรวมกันโดยไม่คาดคิดได้ ch สะท้อนความกว้างของสัญลักษณ์ "0" และเหมาะอย่างยิ่งสำหรับการวัด (ความยาวเส้น) px คือพิกเซลของอุปกรณ์ที่ได้รับการจัดเรียงและปลอดภัยสำหรับเส้นผม แต่จะไม่ตอบสนองต่อการตั้งค่าของผู้ใช้ หน่วยความสูงของเส้น เช่น lh และ rlh ช่วยรักษาจังหวะแนวตั้งโดยผูกระยะห่างกับตารางตัวอักษร
ตอบพร้อมตัวอย่าง
- ใช้
max-width: 65chสำหรับย่อหน้าที่สามารถอ่านได้ - ตั้งค่าระยะห่างทั่วโลกเป็นทวีคูณของ
remเพื่อเคารพความต้องการของผู้ใช้ - ใช้
emสำหรับส่วนประกอบภายใน เช่น ปุ่มไอคอนที่ปรับขนาดตามขนาดตัวอักษร
.prose { max-width: 65ch; margin-inline: auto; }
.btn { padding-inline: 1em; }
20) ตัวนับ CSS ช่วยเรื่องเนื้อหาที่มีโครงสร้างหรือไม่ และมีข้อดีและข้อเสียอย่างไร?
ตัวนับ CSS ให้การกำหนดหมายเลขอัตโนมัติโดยไม่ต้องแก้ไข HTML เชิงความหมาย ซึ่งมีประโยชน์สำหรับหัวข้อ รูปภาพ และเอกสารทางกฎหมาย ข้อดีของตัวนับประกอบด้วยมาร์กอัปที่ชัดเจนและความยืดหยุ่นในการนำเสนอข้ามโลแคลหรือส่วนต่างๆ ข้อเสียคือช่องว่างด้านการเข้าถึงที่อาจเกิดขึ้นหากการกำหนดหมายเลขสื่อความหมายสำคัญที่ไม่ได้สะท้อนอยู่ในโครงสร้าง DOM หรือประกาศโดยเทคโนโลยีช่วยเหลือ ควรใช้ตัวนับสำหรับการกำหนดหมายเลขเพื่อการนำเสนอ โดยต้องแน่ใจว่าลำดับชั้นพื้นฐานนั้นถูกต้องและใช้งานได้
ตอบพร้อมตัวอย่าง
article { counter-reset: h2; }
h2::before { counter-increment: h2; content: "Section " counter(h2) ". "; }
figure { counter-increment: fig; }
figcaption::before { content: "Figure " counter(fig) ": "; }
21) คุณควรสร้างแอนิเมชันด้วย CSS เมื่อใด และคุณสมบัติใดที่ปลอดภัยที่สุดสำหรับประสิทธิภาพ?
แอนิเมชันจะมีความยืดหยุ่นสูงสุดเมื่อทำงานบนคุณสมบัติที่เป็นมิตรกับคอมโพสิเตอร์ ซึ่งหลีกเลี่ยงการถ่ายทอดสัญญาณและการทาสีซ้ำ CSS โดดเด่นในการเปลี่ยนผ่านแบบประกาศที่ขับเคลื่อนด้วยสถานะ ซึ่งเบราว์เซอร์สามารถปรับการกำหนดเวลาเฟรมให้เหมาะสมที่สุด ตัวเลือกที่ปลอดภัยที่สุดคือ transform และ opacityซึ่งโดยทั่วไปจะทำงานบนเธรดคอมโพสิเตอร์และลดงานในเธรดหลัก ใช้ CSS สำหรับไมโครอินเทอร์แอคชั่น การเปลี่ยนสถานะแบบโฮเวอร์ และเอฟเฟกต์การเข้าแบบง่ายๆ หลีกเลี่ยงการสร้างแอนิเมชันให้กับคุณสมบัติที่ส่งผลต่อเค้าโครง เช่น width, height, topและ left เพราะมันกระตุ้นให้เกิดการคำนวณเค้าโครงใหม่ เมื่อจำเป็นต้องเปลี่ยนแปลงรูปทรงเรขาคณิต ให้พิจารณาภาพลวงตาที่อิงการแปลงรูป หรือจับคู่แบบอ่อนโยน max-height การเปลี่ยนแปลงด้วยการจัดการล้นและการเข้าถึงสำรองอย่างระมัดระวัง
ตอบพร้อมตัวอย่าง
.dialog { transform: translateY(8px); opacity: 0; }
.dialog[open] {
transform: translateY(0);
opacity: 1;
transition: transform .2s ease, opacity .2s ease;
}
@media (prefers-reduced-motion: reduce) {
.dialog { transition: none; }
}
22) CSS ช่วยให้รูปภาพตอบสนองได้หรือไม่ และมีวิธีการใดบ้างในการเข้าถึง CSS
HTML เป็นเจ้าของการเลือกภาพโดยธรรมชาติผ่าน srcset และ sizesแต่ CSS ยังคงมีความสำคัญสำหรับภาพตกแต่ง ทิศทางศิลปะของพื้นหลัง และการปรับวัตถุ ใช้ image-set() เพื่อจัดหาความละเอียดหลายระดับให้กับภาพพื้นหลังและต้องการ object-fit และ object-position เพื่อควบคุมองค์ประกอบที่ถูกแทนที่ภายในกล่อง ผสานสิ่งเหล่านี้เข้ากับคอนเทนเนอร์หรือคิวรีสื่อเพื่อปรับครอป ความหนาแน่น หรือจุดโฟกัส ประโยชน์คือการควบคุมภาพที่แม่นยำโดยไม่ต้องเพิ่มจำนวนมาร์กอัป ข้อเสียคือรูปภาพพื้นหลัง CSS ขาดการเจรจาต่อรองขนาดที่แท้จริงและไม่ได้แสดงโดยเทคโนโลยีช่วยเหลือ ดังนั้นรูปภาพเนื้อหาจึงควรอยู่ในรูปแบบ HTML
ข้อดีข้อเสีย (ตารางเปรียบเทียบ)
| เข้าใกล้ | ลักษณะ | ข้อดี | ข้อเสีย | การใช้งานทั่วไป |
|---|---|---|---|---|
HTML srcset/sizes |
การคัดเลือกภายใน | ความหมายที่ถูกต้อง; ประสิทธิภาพที่ดีที่สุด | ต้องมีการเปลี่ยนแปลงมาร์กอัป | เนื้อหาภาพ |
CSS image-set() |
ชุดความละเอียดพื้นหลัง | สลับง่ายต่อจุดพัก | ไม่มีการกำหนดขนาดที่แท้จริง | พื้นหลังตกแต่ง |
object-fit / position |
Box การควบคุมการกักเก็บ | การครอบตัดที่สม่ำเสมอ | ไม่เหมาะสำหรับภาพพื้นหลัง | รูปขนาดย่อ, อวาตาร์ |
ตอบพร้อมตัวอย่าง
.hero {
background-image: image-set(url(bg-1x.jpg) 1x, url(bg-2x.jpg) 2x);
background-size: cover;
}
.thumb { width: 240px; height: 160px; object-fit: cover; object-position: 50% 40%; }
23) เป็น Javaโหมดมืดแบบไร้สคริปต์เป็นไปได้ และมีปัจจัยอะไรบ้างที่ทำให้มันมีความทนทาน?
A Javaโหมดมืดแบบไม่มีสคริปต์สามารถทำได้โดยการรวมคุณสมบัติที่กำหนดเองเข้ากับ prefers-color-scheme ฟีเจอร์สื่อและแอตทริบิวต์ HTML ที่เป็นตัวเลือกสำหรับการแทนที่ผู้ใช้ กำหนดโทเค็นความหมายที่ราก ระบุตัวแปรมืดภายในการสอบถามสื่อ และอนุญาตให้ [data-theme] การแทนที่เพื่อให้สอดคล้องกับตัวเลือกที่ชัดเจนของผู้ใช้หรือการสร้างแบรนด์ขององค์กร วิธีนี้ช่วยลดความซับซ้อน ลดการกระพริบ และรักษาความน่าเชื่อถือของลำดับชั้น ข้อจำกัดคือการพึ่งพาการตั้งค่าระบบเมื่อไม่มีการแทนที่ที่ชัดเจน บันทึกโทเค็น ตรวจสอบให้แน่ใจว่ามีคอนทราสต์ที่เพียงพอ และทดสอบโครงร่างและสถานะโฟกัสในทั้งสองโหมด
ตอบพร้อมตัวอย่าง
:root { --bg: #ffffff; --fg: #0b0d10; --accent: #4b6fff; }
@media (prefers-color-scheme: dark) {
:root { --bg:#0b0d10; --fg:#e7edf3; --accent:#8aa4ff; }
}
[data-theme="light"] { --bg:#ffffff; --fg:#0b0d10; }
[data-theme="dark"] { --bg:#0b0d10; --fg:#e7edf3; }
body { background: var(--bg); color: var(--fg); }
a { color: var(--accent); }
24) การทำรังตัวเลือกเชิงลึกและความจำเพาะสูงมีข้อเสียหรือไม่ และมีประโยชน์อะไรจากแนวทางความจำเพาะต่ำ
การซ้อนแบบลึกและความจำเพาะสูงทำให้สไตล์เปราะบาง รีแฟกเตอร์ช้าลง และเพิ่มความเสี่ยงของการแทนที่โดยไม่ได้ตั้งใจ ตัวเลือกเหล่านี้เชื่อมโยง CSS กับโครงสร้างเอกสารอย่างแน่นหนา ซึ่งทำให้ต้นทุนการบำรุงรักษาเพิ่มสูงขึ้นเมื่อมาร์กอัปพัฒนาขึ้น แนวทางความจำเพาะต่ำจะสนับสนุน hooks แบบคลาสเดียว สถาปัตยกรรมแบบแบน และ @layer การจัดลำดับเพื่อจัดการการแทนที่ได้อย่างคาดการณ์ ประโยชน์ที่ได้รับ ได้แก่ การเป็นเจ้าของที่ชัดเจนขึ้น การเรนเดอร์ที่เร็วขึ้นเนื่องจากการจับคู่ที่ง่ายขึ้น และการจัดองค์ประกอบที่ง่ายขึ้นระหว่างทีม กำหนดขีดจำกัดความลึกของการซ้อน หลีกเลี่ยงการกำหนดคลาสที่มีคุณสมบัติพร้อมชื่อองค์ประกอบเมื่อไม่จำเป็น และจัดเตรียมยูทิลิตี้สำหรับช่องทางหลบหนี
ตอบพร้อมตัวอย่าง
/* Fragile: structure-dependent */
.main .sidebar .card > h3.title { ... }
/* Resilient: single-class hook, layer-controlled */
@layer components { .card-title { ... } }
25) วิธีการใด—BEM, ITCSS หรือ utility-first—ที่เหมาะกับทีมต่างๆ และมีข้อดีและข้อเสียอะไรบ้าง?
การเลือกวิธีการขึ้นอยู่กับขนาดของทีม วัฒนธรรมการตรวจสอบ และความผันผวนของผลิตภัณฑ์ ดี จัดหาจุดเชื่อมโยงที่ชัดเจนและอ่านง่ายซึ่งปรับขนาดได้สำหรับทีมงานขนาดใหญ่ ไอทีซีเอสเอส จัดระเบียบฐานรหัสจากการรีเซ็ตระดับต่ำผ่านวัตถุและส่วนประกอบไปจนถึงยูทิลิตี้ โดยจัดแนวตามคาสเคด ยูทิลิตี้มาก่อน เร่งการส่งมอบด้วยไพรมิทีฟแบบจำกัด และสนับสนุนการจัดองค์ประกอบมากกว่าตัวเลือกแบบกำหนดเอง ไฮบริดเป็นที่นิยมใช้กันทั่วไป ได้แก่ ITCSS สำหรับการเรียงลำดับ BEM สำหรับการตั้งชื่อเมื่อจำเป็น และยูทิลิตี้สำหรับการปรับเปลี่ยนแบบครั้งเดียว ข้อดีข้อเสียประกอบด้วยการใช้คำฟุ่มเฟือย (BEM) การวางแผนล่วงหน้า (ITCSS) และการขยายคลาสที่เป็นไปได้ (ยูทิลิตี้ก่อน)
ความแตกต่าง (ตารางเปรียบเทียบ)
| วิธี | ลักษณะ | ข้อดี | ข้อเสีย | ฟิตที่สุด |
|---|---|---|---|---|
| ดี | การตั้งชื่อ .block__elem–mod | ตะขอที่คาดเดาได้ | ตัวเลือกแบบละเอียด | ทีมงานขนาดใหญ่ ระบบการออกแบบ |
| ไอทีซีเอสเอส | สถาปัตยกรรมชั้น | คำสั่งยกเลิกที่ชัดเจน | ค่าใช้จ่ายในการวางแผน | โมโนรีโพหลายทีม |
| ยูทิลิตี้มาก่อน | Atomคลาสไอซี | ความเร็ว ความสม่ำเสมอ | ความเสี่ยงจากการเปลี่ยนแปลงคลาส | การสร้างต้นแบบอย่างรวดเร็ว แอปพลิเคชัน |
26) อธิบายวงจรชีวิตของระยะห่างและโทเค็นการพิมพ์จากการออกแบบจนถึงโค้ดพร้อมตัวอย่าง
วงจรชีวิตของโทเค็นเริ่มต้นจากการออกแบบด้วยตัวเลือกขนาด อัตราส่วน และเป้าหมายการเข้าถึง สิ่งเหล่านี้จะกลายเป็นคุณสมบัติแบบกำหนดเองที่มีชื่อและเวอร์ชัน ซึ่งแสดงถึงความหมาย ชนิด (ตัวอย่างเช่น, --space-2, --font-scale-1 ) แทนที่จะเป็นค่าดิบ โทเค็นจะไหลเข้าสู่รูปแบบพื้นฐาน จากนั้นเข้าสู่ส่วนประกอบและตัวแปร และในที่สุดก็จะถูกยกเลิกการใช้งานหรือเปลี่ยนเส้นทางผ่านนามแฝงเมื่อระบบมีการพัฒนา ข้อดี ได้แก่ จังหวะที่สม่ำเสมอ ความแตกต่างที่น้อยลง และความสมดุลข้ามแพลตฟอร์มที่ดีขึ้น ข้อเสีย ได้แก่ ค่าใช้จ่ายในการกำกับดูแลเบื้องต้นและความจำเป็นในการจัดทำเอกสารที่ชัดเจน ถือว่าโทเค็นเป็น API สาธารณะ: กำหนดช่วง จับคู่กับแนวทางการใช้งาน และให้บันทึกการโยกย้าย
ตอบพร้อมตัวอย่าง
:root{
--space-1:.25rem; --space-2:.5rem; --space-3:1rem;
--font-0:1rem; --font-1:1.125rem; --font-2:1.25rem;
}
.card{ padding: var(--space-3); }
.card h2{ font-size: var(--font-2); margin-block: var(--space-2); }
/* deprecation alias */
:root{ --space-small: var(--space-2); }
27) ทำอย่างไร :focus-visible, :focus-withinและ :target แตกต่างกันอย่างไร และแต่ละอย่างมีข้อดีอย่างไรบ้าง?
ตัวเลือกเหล่านี้จะระบุถึงลักษณะการโต้ตอบและการนำทางที่แตกต่างกัน :focus-visible จอภาพจะโฟกัสเฉพาะเมื่อโหมดอินพุตแนะนำการนำทางด้วยแป้นพิมพ์เท่านั้น ซึ่งจะช่วยลดการรบกวนจากผู้ใช้เมาส์ และยังรองรับการเข้าถึงได้อีกด้วย :focus-within ตรงกับคอนเทนเนอร์เมื่อลูกหลานมีโฟกัส ช่วยให้สามารถไฮไลต์แบบกลุ่มสำหรับคอมโพสิต เช่น ฟิลด์ฟอร์ม :target ตรงกับองค์ประกอบที่อ้างอิงโดยส่วน URL เสริมประสิทธิภาพการข้ามลิงก์และการนำทางภายในหน้าโดยไม่ต้องใช้สคริปต์ เมื่อนำมารวมกันอย่างรอบคอบแล้ว จะช่วยปรับปรุงการวางแนว ลดภาระทางปัญญา และรองรับเวิร์กโฟลว์แป้นพิมพ์ที่มีประสิทธิภาพ
ตอบพร้อมตัวอย่าง
:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
.field:focus-within { box-shadow: 0 0 0 3px color-mix(in oklab, currentColor 30%, transparent); }
:target { scroll-margin-top: 6rem; }
28) ข้อดีและข้อเสียของ content-visibility และการกักเก็บ CSS บนเอกสารขนาดใหญ่?
content-visibility: auto เลื่อนการเรนเดอร์องค์ประกอบที่อยู่นอกหน้าจอออกไปจนกว่าจะใกล้ช่องมองภาพ ซึ่งช่วยลดต้นทุนการเรนเดอร์เริ่มต้นบนฟีดยาวๆ ได้อย่างมาก การควบคุมเพิ่มเติม ( contain: layout paint style ) จำกัดผลกระทบของซับทรีต่อส่วนที่เหลือของเพจ ลดขอบเขตการรีโฟลว์และเร่งการอัปเดตซ้ำ ประโยชน์คือการตอบสนองที่ดีขึ้นและลดการใช้หน่วยความจำ ข้อเสียคืออาจเกิดเอฟเฟกต์ป๊อปอินหากไม่ทราบขนาดที่แท้จริง และความซับซ้อนเมื่อ Javaสคริปต์ต้องวัดขนาด บรรเทาโดยการจัดหา contain-intrinsic-size และวัดเฉพาะเมื่อจำเป็นเท่านั้น
ตอบพร้อมตัวอย่าง
.feed-item{
content-visibility: auto;
contain-intrinsic-size: 600px 400px; /* reserve space to prevent layout shift */
contain: layout paint style;
}
29) คุณจะสร้างกริดแบบตอบสนองด้วยจุดพักขั้นต่ำได้อย่างไรโดยใช้ minmax() และ auto-fit/auto-fill?
เค้าโครงที่ยืดหยุ่นสามารถทำได้โดยการกำหนดแทร็กที่ยืดหยุ่นซึ่งจะขยายออกไปจนถึงความกว้างสูงสุดแล้วจึงห่อโดยอัตโนมัติ repeat(auto-fit, minmax(min, 1fr)) สร้างคอลัมน์ได้มากเท่าที่จะพอดี โดยยุบแทร็กว่างเพื่อหลีกเลี่ยงช่องว่างที่อึดอัด วิธีนี้ช่วยลดการพึ่งพาจุดแบ่งที่ชัดเจน ในขณะเดียวกันก็รักษาความหนาแน่นที่กลมกลืนกันในทุกขนาดหน้าจอ วิธีนี้เหมาะอย่างยิ่งสำหรับแกลเลอรี การ์ด และรายการสินค้า กำหนดขั้นต่ำที่เหมาะสม (ตัวอย่างเช่น 16rem ) และอาศัยการเว้นระยะห่างเพื่อรักษาจังหวะ
ตอบพร้อมตัวอย่าง
.gallery{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: 1rem;
}
30) ปัจจัยใดบ้างที่กำหนดว่าควรเลือกเมื่อใด gap กับระยะขอบของระยะห่างระหว่างรายการ?
gap คือระยะห่างที่คำนึงถึงการไหลซึ่งทำงานร่วมกับ Flexbox และ Grid ได้โดยตรง โดยใช้การแยกแบบสมมาตรโดยไม่ทำให้ขอบยุบ เหมาะอย่างยิ่งสำหรับ ส่วนประกอบภายใน ระยะห่างเนื่องจากไม่ส่งผลต่อการจัดตำแหน่งลูกคนแรก/คนสุดท้าย หรือต้องใช้การแฮ็กแบบมีทิศทางในเค้าโครงจากขวาไปซ้าย ระยะขอบจะดีกว่าสำหรับ ภายนอก ระยะห่างที่เป็นส่วนหนึ่งของ API สาธารณะของส่วนประกอบ หรือเมื่อระยะห่างต้องโต้ตอบกับบริบทที่ไม่ใช่ Flex/Grid เลือกตามขอบเขต ความเป็นเจ้าของ และความหมายของเค้าโครง เพื่อหลีกเลี่ยงการทับซ้อนที่ไม่คาดคิด และเพื่อให้กฎการแทนที่มีน้อยที่สุด
ความแตกต่าง (ตารางเปรียบเทียบ)
| เกณฑ์ | gap |
ระยะขอบ |
|---|---|---|
| ขอบเขต | ภายในถึงเค้าโครงคอนเทนเนอร์ | ภายนอกระหว่างพี่น้องและเพื่อนบ้าน |
| ทิศทาง | ตรรกะและสมมาตร | อาจต้องปรับ RTL |
| พฤติกรรมการยุบตัว | ไม่สามารถใช้งาน | อาจมีการยุบตัวของระยะขอบ |
| การใช้งานที่ดีที่สุด | ระยะห่างระหว่างลูกแบบยืดหยุ่น/แบบกริด | สัญญาระยะห่างภายนอกและเค้าโครงของส่วนประกอบ |
ตอบพร้อมตัวอย่าง
.toolbar{ display:flex; gap:.5rem; } /* internal spacing */
.card{ margin-block: 1rem; } /* external spacing contract */
31) การพึ่งพาสิ่งใดมีข้อเสียอะไรบ้าง !importantและทางเลือกที่ปลอดภัยกว่าคืออะไร?
ใช้มากเกินไป !important หลีกเลี่ยงวงจรชีวิตตามธรรมชาติของลำดับชั้น ซึ่งบดบังเจตนา ปิดกั้นการแทนที่ที่ถูกต้อง และบังคับให้ผู้มีส่วนร่วมในอนาคตต้องยกระดับความเฉพาะเจาะจงให้มากขึ้นไปอีก นอกจากนี้ยังบั่นทอนความสามารถในการทดสอบ เนื่องจากกฎเกณฑ์จะไม่ถูกจัดลำดับอีกต่อไป @layer กลยุทธ์ ทางเลือกแบบมืออาชีพคือการออกแบบเส้นทางการแทนที่ที่คาดเดาได้: ลดความจำเพาะของตัวเลือก วางนโยบายในเลเยอร์ยูทิลิตี้เฉพาะ หรือเรียงลำดับแหล่งที่มาใหม่ด้วย @layer มากกว่าการประกาศใช้อาวุธ สำรอง !important สำหรับกรณีที่ผู้ใช้ตั้งใจขับเคลื่อน เช่น ยูทิลิตี้ที่มีความคมชัดสูงหรือการมองเห็นที่ถูกบังคับให้มองเห็น ซึ่งทำหน้าที่เป็นช่องทางหลบหนีที่ได้รับการบันทึกไว้
ตอบพร้อมตัวอย่าง
/* Deliberate, documented utility only */
@layer utilities {
.sr-only { position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; }
}
/* Prefer layer order instead of !important */
@layer base, components, utilities;
@layer utilities { .hidden { display:none; } }
32) ควรหลีกเลี่ยงตัวเลือกประเภทใดเพื่อประสิทธิภาพหรือการบำรุงรักษา และทำไม?
ตัวเลือกที่มีการเชื่อมโยงอย่างแน่นหนากับความลึกของเอกสารหรือแอตทริบิวต์ทั่วทั้ง DOM มีความเสี่ยง ห่วงโซ่ลูกหลานที่ยาวจะเพิ่มต้นทุนการจับคู่และสร้างการพึ่งพาที่เปราะบางบนมาร์กอัป ตัวเลือกแอตทริบิวต์แบบกว้าง เช่น [class*="btn"] or [data-*] หากไม่มีการกำหนดขอบเขต ก็สามารถสแกนซับทรีขนาดใหญ่ได้ ตัวเลือกที่มีคุณสมบัติเกิน เช่น ul.nav > li > a.link ลดความสามารถในการนำกลับมาใช้ซ้ำและทำให้การแทนที่มีความซับซ้อน แนวทางการบำรุงรักษาที่ดีควรเลือกใช้ hooks แบบคลาสเดียว แอตทริบิวต์สถานะพร้อมสัญญาที่ชัดเจน (ตัวอย่างเช่น [data-state="open"] ) และความสัมพันธ์ระยะสั้น ( > , + ) ภายในขอบเขตของส่วนประกอบ วิธีนี้ช่วยเพิ่มความสามารถในการอ่าน ลดความขัดแย้งแบบเรียงซ้อน และเร่งกระบวนการรีแฟกเตอร์
ตอบพร้อมตัวอย่าง
/* Fragile and slow */
.main .sidebar .list .item > a[href*="/products"] { ... }
/* Resilient */
.nav { display:flex; gap:.5rem; }
.nav__link { ... }
[data-state="open"] .nav__link--active { text-decoration: underline; }
33) คุณควรเลือกเมื่อใด @layer ยูทิลิตี้เทียบกับตัวแปรส่วนประกอบ และมีประโยชน์อะไรบ้าง?
ยูทิลิตี้เอ็กซ์เพรส การปรับเปลี่ยนครั้งเดียว เช่น ระยะห่าง การแสดงผล หรือการจัดตำแหน่งที่ควรแทนที่โดยไม่เพิ่มความจำเพาะ ตัวแปรของส่วนประกอบจะแสดง สถานะหรือโหมดที่ทำซ้ำได้ ที่เป็นของ API ของส่วนประกอบ ยูทิลิตี้จะมีประสิทธิภาพสูงสุดในระหว่างการเรียบเรียงโค้ดแอปพลิเคชัน เนื่องจากสามารถคาดการณ์ได้และไม่จำเป็นต้องแก้ไขสไตล์ชีตของส่วนประกอบ ตัวแปรจะมีประสิทธิภาพเหนือกว่าเมื่อสถานะเดิมเกิดขึ้นซ้ำ และต้องมีการบันทึกและทดสอบเป็นส่วนหนึ่งของระบบการออกแบบ สถาปัตยกรรมที่สมดุลจะวางยูทิลิตี้ไว้ท้ายลำดับเลเยอร์ และรักษาตัวแปรของส่วนประกอบให้มีความจำเพาะต่ำภายในเลเยอร์ส่วนประกอบ
ตอบพร้อมตัวอย่าง
@layer reset, base, components, utilities;
/* Variant: part of the API */
@layer components {
.btn[data-variant="primary"] { background: var(--brand-600); color: #fff; }
}
/* Utility: composition escape hatch */
@layer utilities {
.mt-4 { margin-block-start: 1rem; }
.inline { display:inline; }
}
34) Grid สามารถแทนที่การใช้งาน Flexbox ทั้งหมดได้หรือไม่ หรือมีเหตุผลที่แตกต่างกันในการคงไว้ทั้งสองอย่างหรือไม่
Grid และ Flexbox แก้ปัญหามุมฉากได้ Grid ให้การควบคุมแบบสองมิติพร้อมการกำหนดแทร็กที่ชัดเจน ทำให้เฟรมหน้าที่ซับซ้อน แดชบอร์ด และแกลเลอรีการ์ดดูเรียบง่าย Flexbox โดดเด่นในด้านการกระจายแกนเดี่ยว การปรับขนาดตามแกนหลัก และการจัดตำแหน่งภายในแถวหรือคอลัมน์ ซึ่งเหมาะอย่างยิ่งสำหรับแถบเครื่องมือ เมนู และชิป การพยายามบังคับให้ Grid ใช้งานในทุกที่นั้นทำให้เสียการจัดตำแหน่งตามหลักสรีรศาสตร์ ในขณะที่การบังคับให้ Flexbox ใช้งานการจัดวางแบบมาโครจะทำให้แรปเปอร์เปราะบาง ระบบที่พัฒนาแล้วจงใจรวมทั้งสองเข้าด้วยกัน บางครั้งภายในส่วนประกอบเดียวกัน โดยเลือกเอนจินที่มีคุณสมบัติตรงกับปัญหา
ความแตกต่าง (ตารางเปรียบเทียบ)
| เกณฑ์ | ตะแกรง | flexbox |
|---|---|---|
| Dimension | รางสองมิติ | การไหลแบบมิติเดียว |
| ความแข็งแรง | พื้นที่ที่ชัดเจน ช่องว่าง ซับกริด | การกระจาย การจัดวาง การเรียงลำดับใหม่ |
| การใช้งานที่ดีที่สุด | กรอบหน้าแดชบอร์ด | แถบเครื่องมือ ระบบนำทาง รายการชิป |
ตอบพร้อมตัวอย่าง
.frame { display:grid; grid-template-columns: 1fr 3fr; gap: 1rem; }
.toolbar { display:flex; align-items:center; gap:.5rem; }
35) ข้อดีและข้อเสียของการใช้มีอะไรบ้าง aspect-ratio เทียบกับการแฮ็กแบบแพดดิ้ง?
aspect-ratio นำเสนอวิธีการแบบประกาศและจัดทำเอกสารด้วยตนเองสำหรับการรักษารูปทรงสำหรับการ์ด สื่อ และภาพขนาดย่อ โดยไม่ต้องใช้องค์ประกอบ wrapper หรือแฮ็กองค์ประกอบเทียม ผสานรวมกับการปรับวัตถุได้อย่างลงตัวและทำงานได้ตามคาดในเลย์เอาต์ Grid และ Flex ข้อเสียหลักคือช่องว่างของเบราว์เซอร์แบบเก่าในสภาพแวดล้อมรุ่นเก่า และความจำเป็นในการพิจารณา CSS แบบแฮ็กที่ใช้การแฮ็กแบบเดิมอีกครั้ง การแฮ็กแบบ Padding-top ยังคงเป็นทางเลือกสำหรับเอนจินรุ่นเก่ามาก แต่จะเพิ่มความซับซ้อนของ DOM และลดความชัดเจน แนะนำให้ใช้ aspect-ratio เพื่อการบำรุงรักษาและเกตด้วย @supports เฉพาะในกรณีที่จำเป็นต้องมีการคุ้มครองตามสัญญาเท่านั้น
ตอบพร้อมตัวอย่าง
.thumb { aspect-ratio: 16 / 9; object-fit: cover; }
@supports not (aspect-ratio: 1) {
.thumb-wrap { position: relative; }
.thumb-wrap::before { content:""; display:block; padding-top:56.25%; }
.thumb { position:absolute; inset:0; }
}
36) คุณจะสร้างส่วนหัวแบบเหนียวที่ยืดหยุ่นและเคารพพื้นที่ปลอดภัยและช่องมองภาพบนมือถือได้อย่างไร
ส่วนหัวที่ยืดหยุ่นสร้างสมดุล position: sticky สำหรับจุดยึดระดับส่วนด้วย position: fixed เฉพาะเมื่อการออกแบบต้องการความคงอยู่ทั่วโลกเท่านั้น การแทรกพื้นที่ปลอดภัยจะช่วยป้องกันการซ้อนทับกับ UI ของระบบบนอุปกรณ์ที่มีรอยบาก และหน่วยช่องมองภาพสมัยใหม่ เช่น dvh หลีกเลี่ยงการยุบตัวเมื่อ Chrome ของเบราว์เซอร์แสดงหรือซ่อน กลยุทธ์นี้ประกอบด้วยการกำหนดบริบทการซ้อนที่ชัดเจน การสำรองพื้นที่เพื่อป้องกันการเปลี่ยนแปลงเค้าโครง และการตั้งค่าการเคลื่อนไหวสำหรับเอฟเฟกต์การเข้า การทดสอบบนแป้นพิมพ์ต่างๆ และในแนวนอนเป็นสิ่งสำคัญ เนื่องจากแป้นพิมพ์เสมือนอาจบดบังองค์ประกอบคงที่ได้หากไม่ได้รับการจัดการ
ตอบพร้อมตัวอย่าง
.header {
position: sticky;
top: 0;
padding-top: env(safe-area-inset-top);
background: var(--bg);
z-index: 100;
box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
main { min-height: 100dvh; scroll-padding-top: 4rem; }
ข้อควรพิจารณา (ตารางย่อ)
| ปัจจัย | แนะนำ |
|---|---|
| พื้นที่ปลอดภัย | ใช้ env(safe-area-inset-*) |
| วิวพอร์ต | ชอบ dvh สำหรับพื้นที่ที่มีความสูงเต็ม |
| ดัชนี Z | สร้างมาตราส่วนซ้อนทับหนึ่งอันและบันทึกไว้ |
37) ความแตกต่างระหว่างการปรับขนาดความหนาแน่นและการปรับขนาดในส่วนประกอบคืออะไร และควรใช้แต่ละอย่างเมื่อใด
การปรับขนาดความหนาแน่นจะปรับเปลี่ยน ระยะห่าง ช่องว่าง และความสูงของเส้น โดยยังคงรักษาขนาดตัวอักษรให้คงที่ จึงสร้างรูปแบบที่กะทัดรัด สะดวกสบาย หรือกว้างขวาง โดยไม่เปลี่ยนลำดับชั้นของตัวอักษร การปรับขนาดจะเปลี่ยนแปลง มาตราส่วนทางการพิมพ์เองการเปลี่ยนหัวเรื่อง ข้อความเนื้อหา และตัวควบคุมไปยังขั้นตอนที่ใหญ่ขึ้นหรือเล็กลง ใช้การปรับขนาดความหนาแน่นสำหรับ UI ขององค์กรที่ความหนาแน่นของข้อมูลแตกต่างกันไปตามงาน ใช้การปรับขนาดเพื่อตอบสนองต่อระยะห่างของอุปกรณ์ ความต้องการด้านการเข้าถึง หรือข้อกำหนดของแบรนด์ ปฏิบัติต่อทั้งสองอย่างเสมือนโทเค็นที่มีช่วงที่บันทึกไว้เพื่อให้มั่นใจว่ามีความสอดคล้องกันในทุกพื้นผิว
ตอบพร้อมตัวอย่าง
/* Density */
[data-density="compact"] .btn { padding-block: .25rem; gap: .25rem; }
/* Size (type) */
:root { --font-0: 1rem; --font-1: 1.125rem; }
[data-size="lg"] { --font-0: 1.125rem; --font-1: 1.25rem; }
38) ข้อเสียใดบ้างที่เกิดจากการรีเซ็ตทั่วโลกอย่างหนัก และทางเลือกที่ปลอดภัยกว่าคืออะไร
การรีเซ็ตแบบก้าวร้าวอาจลบค่าเริ่มต้นที่เป็นประโยชน์ออกไปโดยไม่ได้ตั้งใจ เช่น โครงร่างโฟกัส ความหมายของรายการ และความสามารถในการควบคุมแบบฟอร์ม สิ่งเหล่านี้ส่งผลเสียต่อการเข้าถึงและบังคับให้ต้องนำพฤติกรรมดั้งเดิมกลับมาใช้ซ้ำ ทางเลือกที่ปลอดภัยกว่า ได้แก่ การทำให้เป็นมาตรฐานสมัยใหม่ ที่ลดความไม่สอดคล้องกันในขณะที่ยังคงรักษาความหมายไว้และ การรีเซ็ตขอบเขต สมัครผ่านทาง @layer ไปยังส่วนประกอบที่ต้องการกระดานชนวนเปล่าอย่างแท้จริง บันทึกนโยบายการรีเซ็ต คืนค่าคุณสมบัติที่สำคัญอย่างชัดเจน เช่น :focus-visibleและหลีกเลี่ยงการทำให้องค์ประกอบเป็นศูนย์ซึ่งค่าเริ่มต้นสื่อความหมาย เช่น b, strongและ em.
ตอบพร้อมตัวอย่าง
@layer reset {
*,*::before,*::after { box-sizing: border-box; }
:where(:focus-visible) { outline: 2px solid Highlight; outline-offset: 2px; }
}
/* Do not remove list semantics unless intentionally restyled */
39) คุณจะแก้ไขปัญหาที่ซับซ้อนอย่างมีประสิทธิผลโดยใช้ DevTools และฟีเจอร์ CSS สมัยใหม่ได้อย่างไร
การดีบักที่มีประสิทธิภาพเริ่มต้นด้วยการแยกองค์ประกอบใน DevTools และตรวจสอบ คำนวณ บานหน้าต่างเพื่อดูค่าคุณสมบัติสุดท้ายและแหล่งที่มา จากนั้น ตรวจสอบ รูปแบบ ลำดับกฎของบานและความเฉพาะเจาะจงเพื่อทำความเข้าใจว่าเหตุใดกฎจึงชนะ โดยใส่ใจกับ @layer ลำดับและการซ้อนใหม่หรือบรรจุบริบทจะรบกวนหรือไม่ Togglกฎ e เพื่อตรวจสอบสมมติฐาน และใช้มุมมองเลเยอร์แบบเรียงซ้อน (ถ้ามี) เพื่อแสดงภาพลำดับความสำคัญของเลเยอร์ เพิ่มโครงร่างการดีบักชั่วคราว และพิจารณาแฟล็กฟีเจอร์ผ่าน @supports เพื่อแบ่งปัญหาออกเป็นสองส่วนโดยการปิดใช้งานเส้นทางขั้นสูงแบบเลือกได้
ตอบพร้อมตัวอย่าง
/* Debug helper */
*{ outline: 1px solid rgba(0,128,255,.15); outline-offset:-1px; }
/* Bisect: disable advanced path */
@supports (container-name: card) {
/* move experimental styles here; toggle block in DevTools */
}
40) สไตล์การพิมพ์และการสอบถามสื่อเหมาะสมกับขั้นตอน CSS ระดับมืออาชีพอย่างไร และมีข้อดีและข้อเสียอย่างไร
รูปแบบการพิมพ์ยังคงเป็นสิ่งจำเป็นสำหรับผลิตภัณฑ์ที่มีเอกสารจำนวนมาก ใบแจ้งหนี้ และเอกสารทางกฎหมาย กระบวนการพิมพ์แบบมืออาชีพประกอบด้วย @media print ส่วนที่ลบโครเมียมที่ไม่จำเป็น ตั้งค่าการวัดที่อ่านได้ และรับรองว่าการใช้สีสามารถอ่านได้บนอุปกรณ์สีเทา ข้อดี ได้แก่ คุณภาพการเก็บถาวรที่ดีขึ้นและความน่าเชื่อถือของผู้ใช้ ข้อเสีย ได้แก่ การบำรุงรักษาเพิ่มเติมและความจำเป็นในการตรวจสอบเนื้อหาที่ปกติแล้วเป็นแบบอินเทอร์แอคทีฟ รักษากฎการพิมพ์ให้เป็นไปตามโทเค็น หลีกเลี่ยงการกำหนดตำแหน่งแบบสัมบูรณ์ ยกเว้นส่วนหัวและส่วนท้าย และทดสอบเบราว์เซอร์ทั่วไปและโปรแกรมสร้าง PDF เพื่อป้องกันความผิดปกติของการแบ่งหน้า
ตอบพร้อมตัวอย่าง
@media print {
nav, .ads, .controls { display: none !important; }
article { max-width: 80ch; margin: 0 auto; font-size: 11pt; line-height: 1.4; }
a[href]::after { content: " (" attr(href) ")"; }
img { break-inside: avoid; }
}
41) กลยุทธ์ใดที่สร้างระบบโอเวอร์เลย์ที่คาดเดาได้ และคุณควรจัดการอย่างไร z-index มาตราส่วน?
ระบบโอเวอร์เลย์ที่คาดการณ์ได้จะถือว่าการจัดเลเยอร์เป็นสัญญาที่มีเอกสารกำกับไว้ แทนที่จะเป็นตัวเลขเฉพาะกิจ กำหนดสเกลขนาดเล็กที่มีชื่อเรียก (เช่น ฐาน, ยกขึ้น, โอเวอร์เลย์, โมดัล, โทสต์) และกำหนดส่วนประกอบให้กับระดับชั้นผ่านตัวแปรหรือคลาสยูทิลิตี้ ให้แต่ละโอเวอร์เลย์อยู่ในบริบทการซ้อนของตัวเองเฉพาะเมื่อจำเป็นต้องแยกออกจากกัน และหลีกเลี่ยงบริบทที่เกิดขึ้นโดยบังเอิญจาก transform or filter เว้นแต่จะจงใจ ข้อดีหลักคือวิศวกรสามารถหาเหตุผลเกี่ยวกับข้อขัดแย้งได้โดยไม่ต้องลองผิดลองถูก ข้อเสียคือมีอนุกรมวิธานเบื้องต้นที่ค่อนข้างเรียบง่าย จับคู่สเกลกับโทเค็นการออกแบบและลินต์สำหรับค่าที่อยู่นอกช่วงเพื่อป้องกันการดริฟต์
มาตราส่วนโอเวอร์เลย์ (ตารางเปรียบเทียบ)
| ชั้น | จุดมุ่งหมาย | ตามแบบฉบับ z-index |
หมายเหตุ : |
|---|---|---|---|
| ฐาน | เนื้อหาปกติ | 0 | หลีกเลี่ยงการสร้างบริบทใหม่ |
| ยก | ส่วนหัวเหนียว ลิ้นชัก | 10 100- | รักษาความสม่ำเสมอภายในเชลล์ |
| วางซ้อน | ฉากหลัง, ม่าน | 900 | โล่คลิกเต็มหน้า |
| เป็นกิริยาช่วย | บทสนทนา, ตัวเลือก | 1000 | ตำแหน่ง fixed; ดักโฟกัส |
| ดื่มอวยพร | การแจ้งเตือน | 1100 | ไม่บล็อก; การลบแบบกำหนดเวลา |
ตอบพร้อมตัวอย่าง
:root{
--z-base: 0; --z-raised: 20; --z-overlay: 900; --z-modal: 1000; --z-toast: 1100;
}
.header{ position: sticky; top: 0; z-index: var(--z-raised); }
.modal{ position: fixed; inset: 0; z-index: var(--z-modal); }
.scrim{ position: fixed; inset: 0; z-index: var(--z-overlay); }
42) การควบคุมฟอร์มดั้งเดิมควรได้รับการออกแบบอย่างมีความรับผิดชอบอย่างไร และเทคนิคทั่วไปมีข้อดีและข้อเสียอะไรบ้าง
การจัดรูปแบบแบบฟอร์มอย่างมีความรับผิดชอบจะคำนึงถึงความหมายควบคู่ไปกับการปรับปรุงการใช้งาน เริ่มต้นด้วยการรักษาพฤติกรรมของแป้นพิมพ์และโปรแกรมอ่านหน้าจอ จากนั้นจึงปรับปรุงเลเยอร์: ใช้ accent-color สำหรับอินพุตที่ตรวจสอบได้ให้สอดคล้องกับแบรนด์โดยไม่ต้องเปลี่ยนการควบคุม ใช้ appearance ประหยัดเพื่อทำให้ UI ที่ไม่สอดคล้องกันเป็นมาตรฐาน และควบคุมการอัปโหลดเป้าหมายผ่าน ::file-selector-buttonประโยชน์คือการเข้าถึงได้ การควบคุมที่สอดคล้องและน้อยที่สุด Javaสคริปต์; ข้อเสีย ได้แก่ ความแตกต่างเล็กน้อยระหว่างเบราว์เซอร์และความพยายามที่จะเปลี่ยนตัวควบคุมทั้งหมด บันทึกสถานะโฟกัส สถานะข้อผิดพลาด และสถานะที่ปิดใช้งานเป็นส่วนหนึ่งของ API ของคอมโพเนนต์ เพื่อหลีกเลี่ยงการแทนที่แบบเฉพาะกิจ
ตอบพร้อมตัวอย่าง
/* Brand the native checkbox/radio without replacing it */
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand, #4b6fff); }
/* Normalize look only when truly necessary */
select, input, textarea { appearance: none; }
/* File input affordance */
input[type="file"]::file-selector-button{
padding: .5rem .75rem; border-radius: .375rem; background: var(--brand);
color: #fff; border: 0; cursor: pointer;
}
43) มีกลยุทธ์ใดบ้างสำหรับ CSS ที่สำคัญและการแยกโค้ด และมีข้อดีและข้อเสียอะไรบ้าง
CSS เชิงวิพากษ์ (Critical CSS) ช่วยปรับปรุง Largest Contentful Paint ด้วยการใส่กฎที่จำเป็นสำหรับเนื้อหาที่อยู่ด้านบน (above-the-fold) ไว้ภายใน ในขณะที่เลื่อนเนื้อหาที่เหลือออกไป การแบ่งโค้ดจะแบ่งสไตล์ชีตตามเส้นทาง ฟีเจอร์ หรือส่วนประกอบ วิธีการที่วัดผลได้จะรวมส่วนย่อยที่สำคัญขนาดเล็กเข้ากับบันเดิลภายนอกแบบเลเยอร์เพื่อให้สามารถบำรุงรักษาได้ ข้อดีคือการรับรู้โหลดที่เร็วขึ้นและเพย์โหลดเริ่มต้นที่น้อยลง ข้อเสียคือความซับซ้อนของการสร้างและความเสี่ยงของการซ้ำซ้อนหากไม่ได้กำจัดส่วนที่ซ้ำซ้อนออกในระหว่างการคอมไพล์ ควรใช้การแบ่งเลเยอร์แบบกำหนดแน่นอน (deterministic layering) @layer ) และหลักเกณฑ์การตั้งชื่อเพื่อให้การแทนที่มีเสถียรภาพในแต่ละส่วน
กลยุทธ์การโหลด (ตารางเปรียบเทียบ)
| กลยุทธ์ | ประโยชน์ | ข้อเสีย | การใช้งานทั่วไป |
|---|---|---|---|
อินไลน์วิกฤต <style> |
LCP ที่เร็วขึ้น ไม่ต้องร้องขอ | ยากที่จะรักษาไว้ | เปลือกเหนือรอยพับ |
| CSS ภายนอกแบบอะซิงค์ | แคชได้; แบบโมดูลาร์ | ความเสี่ยงของเนื้อหาที่ไม่ได้รับการออกแบบอย่างแฟลช | เส้นทางแอป |
| บันเดิลสื่อแยก | การโหลดแบบมีเงื่อนไข | ความซับซ้อน ค่าใช้จ่ายในการทดสอบ | พิมพ์ dpi สูง โหมดมืด |
ตอบพร้อมตัวอย่าง
<link rel="preload" href="/th/css/app.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/th/css/app.css"></noscript>
<style>@layer base{ /* small critical rules */ }</style>
44) ตัวเลือกสี CSS สมัยใหม่มีอะไรบ้าง ( color-mix, รูปแบบสีสัมพันธ์, พื้นที่การรับรู้) และควรใช้เมื่อใด?
CSS สมัยใหม่รองรับการแต่งสีขณะรันไทม์ด้วย color-mix() และการปรับแต่งส่วนประกอบต่างๆ ผ่านไวยากรณ์สีสัมพัทธ์ ช่วยให้สามารถสร้างธีมแบบไดนามิกได้โดยไม่ต้องคอมไพล์ล่วงหน้า ปริภูมิสีแบบรับรู้ได้ เช่น OKLCH หรือ Lab ให้การปรับความสว่างและสีที่สม่ำเสมอกว่า sRGB ทำให้การปรับค่าความสว่างและสีมีความสม่ำเสมอมากขึ้น ข้อดีหลักคือความคมชัดและการเปลี่ยนเฉดสีที่คาดการณ์ได้ในแต่ละธีม ข้อเสีย ได้แก่ การรองรับบางส่วนในเอนจินรุ่นเก่า และความจำเป็นในการตรวจสอบความสอดคล้องของแบรนด์ ใช้การผสมแบบรันไทม์สำหรับสถานะโฮเวอร์หรือสถานะเน้น และจัดเก็บโทเค็นมาตรฐานในพื้นที่การรับรู้ได้หากเป็นไปได้ และกลับไปใช้ sRGB เมื่อจำเป็น
ตอบพร้อมตัวอย่าง
:root{
--brand: oklch(60% .15 260);
--brand-hover: color-mix(in oklch, var(--brand), black 12%);
--muted: color-mix(in oklch, var(--brand), white 70%);
}
a{ color: var(--brand); }
a:hover{ color: var(--brand-hover); }
.badge{ background: var(--muted); }
45) เทคนิคใดที่สร้างตัวอักษรที่ยืดหยุ่น ตอบสนองได้ดี และมีจังหวะแนวตั้ง?
การพิมพ์ที่ยืดหยุ่นจะสร้างสมดุลระหว่างความยาวบรรทัดที่อ่านง่าย ขนาดที่ปรับขนาดได้ และระยะห่างที่สม่ำเสมอ เริ่มต้นด้วยขนาดตัวอักษรพื้นฐานที่คำนึงถึงความต้องการของผู้ใช้ จากนั้นจึงใช้ clamp() เพื่อกำหนดขั้นตอนที่ลื่นไหลซึ่งถูกจำกัดด้วยขอบเขตที่สมเหตุสมผล กำหนดจังหวะแนวตั้งด้วย lh หรือความสูงของบรรทัดรากคงที่ และจำกัดย่อหน้าให้ chมาตรการตามฐาน text-wrap: balance สามารถปรับปรุงหัวข้อโดยการกระจายการแบ่งให้เท่าๆ กันมากขึ้น ในขณะที่ hyphens: auto และเมตาดาต้าภาษาช่วยลดขอบที่ขรุขระ ข้อดีคือความสามารถในการอ่านและการเข้าถึงได้ในทุกช่องมองภาพ ข้อเสียคือความจำเป็นในการทดสอบลิเกเจอร์และการสร้างสมดุลพฤติกรรมด้วยแบบอักษรของแบรนด์
ตอบพร้อมตัวอย่าง
:root{ --step-0: clamp(1rem, 1.2vw + .9rem, 1.125rem); line-height: 1.5; }
h1{ font-size: clamp(1.75rem, 4vw + 1rem, 2.5rem); text-wrap: balance; }
.prose{ max-width: 65ch; }
p{ margin-block: 1lh; hyphens: auto; }
46) การเลื่อนแบบ Snap และการเพิ่มระยะขอบ/การเลื่อนแบบ Padding ทำงานร่วมกันอย่างไรเพื่อปรับปรุงการนำทาง?
การเลื่อนแบบสแน็ปจะสร้างตำแหน่งพักที่แน่นอนสำหรับแถบหมุนและเลย์เอาต์แบบแบ่งส่วน ในขณะที่ scroll-padding และ scroll-margin ตรวจสอบให้แน่ใจว่าเป้าหมายจัดเรียงอย่างถูกต้องภายใต้ส่วนหัวที่ติดไว้ ใช้ scroll-snap-type บนภาชนะและ scroll-snap-align ในรายการเพื่อชี้นำพฤติกรรม ประโยชน์ที่ได้รับ ได้แก่ ความรู้สึกที่สม่ำเสมอและการนำทางด้วยแป้นพิมพ์ที่ดีขึ้นด้วย tabindex และจุดยึด ข้อเสียคืออาจเกิดความหงุดหงิดหากจุดยึดมีความรุนแรงเกินไปหรือไม่ได้ปรับให้เหมาะกับโมเมนตัมบนอุปกรณ์สัมผัส จัดเตรียมแพดดิ้งเชิงตรรกะสำหรับด้านบนของช่องมองภาพเพื่อหลีกเลี่ยงเนื้อหาที่ซ่อนอยู่ภายใต้ UI แบบติดหนึบ และตรวจสอบความถูกต้องด้วยการโต้ตอบระหว่างแป้นพิมพ์และตัวชี้
ตอบพร้อมตัวอย่าง
.carousel{ display:flex; overflow:auto; scroll-snap-type: x mandatory; scroll-padding-inline: 1rem; }
.slide{ flex: 0 0 80%; scroll-snap-align: start; margin-inline: .5rem; }
:target{ scroll-margin-top: 5rem; } /* sticky header offset */
47) รูปแบบ CSS ใดที่ทำให้ tooltip และ popovers มีความยืดหยุ่น และเมื่อใด Javaยังต้องใช้สคริปต์อีกไหม?
CSS สามารถจัดการคำแนะนำเครื่องมือแบบง่าย ๆ ได้โดยใช้ position, ออฟเซ็ตเชิงตรรกะ และ ::after ลูกศรที่ถูกกระตุ้นโดย :hover และ :focus-visible. ใช้ inset และแปลงเพื่อการวางตำแหน่งที่แม่นยำและ @layer ยูทิลิตี้สำหรับการเรียงลำดับ z สำหรับป๊อปโอเวอร์ที่ซับซ้อน เช่น การตรวจจับการชน การเปลี่ยนตำแหน่งลูกศร หรือการดักจับโฟกัสJavaสคริปต์ยังคงจำเป็น แต่ CSS ยังคงกำหนดโทเค็นการนำเสนอ ข้อดีของรูปแบบ CSS-first คือโอเวอร์เฮดต่ำและการลดทอนประสิทธิภาพอย่างมีชั้นเชิง ข้อเสียคือความสามารถในการปรับตัวให้เข้ากับขอบช่องมองภาพได้จำกัดโดยไม่มีตรรกะ โปรดตรวจสอบให้แน่ใจว่าสามารถเข้าถึง tooltip ได้ด้วยแป้นพิมพ์เสมอ และอย่าบดบังส่วนควบคุมที่สำคัญ
ตอบพร้อมตัวอย่าง
.tip{ position: relative; }
.tip:hover .tip__bubble, .tip:focus-within .tip__bubble { opacity:1; transform: translateY(-4px); }
.tip__bubble{
position:absolute; inset-block-end: 100%; inset-inline-start: 0;
opacity:0; transform: translateY(0); transition: transform .15s, opacity .15s;
z-index: var(--z-raised);
}
48) คุณจะออกแบบตารางข้อมูลที่ตอบสนองและอ่านได้โดยไม่ต้องใช้การเขียนใหม่ที่ซับซ้อนได้อย่างไร
ตารางแบบ Responsive จะรักษาความหมายไว้ พร้อมกับแสดงมุมมองที่ใช้งานได้บนหน้าจอแคบๆ เริ่มต้นด้วยการเลื่อนแนวนอนภายใน wrapper ที่ถูกจำกัด เพื่อหลีกเลี่ยงการซ้ำซ้อนของส่วนหัวและความสัมพันธ์ สำหรับข้อมูลคีย์-ค่า ให้เปลี่ยนไปใช้เลย์เอาต์แบบเรียงซ้อนโดยใช้ display: grid ด้วยพื้นที่ที่มีชื่อ หรือเพิ่มการควบคุมการมองเห็นคอลัมน์เพื่อการเปิดเผยข้อมูลแบบก้าวหน้า ข้อดีคือการเข้าถึงที่คงเดิมและการบำรุงรักษาที่ง่ายดาย ข้อเสียคือพื้นที่หน้าจอมีจำกัดและจำเป็นต้องจัดรูปแบบโอเวอร์โฟลว์อย่างระมัดระวัง บันทึกว่าคอลัมน์ใดจำเป็นในแต่ละจุดพัก และต้องการ text-overflow พร้อมคำแนะนำสำหรับค่ายาว
แนวทาง (ตารางเปรียบเทียบ)
| เทคนิค | ประโยชน์ | ข้อเสีย | ที่ดีที่สุดสำหรับ |
|---|---|---|---|
| ตัวห่อเลื่อนแนวนอน | รักษาความหมายไว้ | จำเป็นต้องมีการจัดรูปแบบแบบล้น | โต๊ะกว้างและหนาแน่น |
| เค้าโครงคีย์-ค่าแบบซ้อน | อ่านง่าย | สูญเสียคุณสมบัติตารางดั้งเดิม | สเปคมือถือ ใบแจ้งหนี้ |
| สลับคอลัมน์ | ความหนาแน่นที่เหมาะสม | ต้องใช้การเดินสาย JS | แดชบอร์ดผู้ดูแลระบบ |
ตอบพร้อมตัวอย่าง
.table-wrap{ overflow:auto; max-inline-size:100%; }
.table{ min-inline-size: 52rem; border-collapse: collapse; }
.table th, .table td{ padding:.5rem; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
49) โหมดผสม ฟิลเตอร์ และมาสก์มีคุณค่าในทางปฏิบัติเมื่อใด และมีการแลกเปลี่ยนอะไรบ้าง
โหมดผสม ( mix-blend-mode, background-blend-mode ), ตัวกรอง ( blur, grayscale, drop-shadow ), และหน้ากาก ( mask-image, mask-composite ) เปิดใช้งานเอฟเฟกต์ต่างๆ เช่น กลาสมอร์ฟิซึม ดูโอโทน และการเปิดเผยที่ไม่ใช่รูปสี่เหลี่ยมผืนผ้าโดยไม่ต้องแก้ไขภาพแบบแรสเตอร์ เอฟเฟกต์เหล่านี้โดดเด่นบนพื้นผิวการตลาดและภาพข้อมูล ซึ่งมีความสำคัญอย่างยิ่งต่อทิศทางศิลปะ ข้อดีคือการลดการแพร่กระจายของสินทรัพย์และการสร้างธีมแบบไดนามิก ข้อเสียคือต้นทุนด้านประสิทธิภาพบนอุปกรณ์ที่ใช้พลังงานต่ำ และปัญหาการเข้าถึงที่อาจเกิดขึ้นหากลดคอนทราสต์ สงวนเอฟเฟกต์หนักไว้สำหรับพื้นผิวที่ไม่สำคัญ ทดสอบผลกระทบของ GPU และให้การย้อนกลับที่ลดการตั้งค่าล่วงหน้า
ตอบพร้อมตัวอย่าง
.hero::before{
content:""; position:absolute; inset:0;
background: radial-gradient(circle at 30% 20%, #fff3, transparent 60%);
mix-blend-mode: screen; filter: blur(20px);
}
50) บทบาทหน้าที่อะไร color-scheme และการกำหนดธีม UI ของระบบมีบทบาทในการออกแบบที่สอดประสานกันบนทุกเบราว์เซอร์หรือไม่
การขอ color-scheme คุณสมบัตินี้จะประกาศจานสีสว่างและมืดที่ต้องการ เพื่อให้ส่วนประกอบของตัวแทนผู้ใช้ (ตัวควบคุมฟอร์ม แถบเลื่อนในบางเอนจิน) แสดงผลด้วยสีพื้นหลังและข้อความที่ตรงกัน วิธีนี้ช่วยลดความจำเป็นในการใช้สกินควบคุมแบบกำหนดเอง และป้องกันความไม่ตรงกันที่เห็นได้ชัดเมื่อเปิดใช้งานโหมดมืด ข้อดีคือความสอดคล้องกันของโค้ดที่น้อยที่สุด ข้อเสียคือความเท่าเทียมกันระหว่างเอนจินกำลังพัฒนา และการสร้างแบรนด์แบบกำหนดเองอาจยังคงต้องมีการแทนที่ รวม color-scheme ด้วยคุณสมบัติที่กำหนดเองสำหรับโทเค็นและอนุญาตให้ผู้ใช้กำหนดการตั้งค่าที่ชัดเจนเพื่อหลีกเลี่ยงการติดกับดักผู้ใช้ในค่ากำหนดของระบบที่พวกเขาไม่ได้เลือก
ตอบพร้อมตัวอย่าง
:root{ color-scheme: light dark; }
body{ background: var(--bg); color: var(--fg); }
/* Controls inherit appropriate UA styling under the declared schemes */
🔍 คำถามสัมภาษณ์ CSS ยอดนิยมพร้อมสถานการณ์จริงและคำตอบเชิงกลยุทธ์
1) อะไรคือความแตกต่างระหว่าง inline, inline-blockและ block องค์ประกอบใน CSS มีอะไรบ้าง?
สิ่งที่คาดหวังจากผู้สมัคร: ผู้สัมภาษณ์ต้องการทดสอบความเข้าใจของคุณเกี่ยวกับคุณสมบัติการแสดงองค์ประกอบและผลกระทบต่อเค้าโครงและโมเดลกล่อง
ตัวอย่างคำตอบ:
“ในบทบาทก่อนหน้าของฉัน ฉันมักจะต้องจัดการกับความไม่สอดคล้องของเค้าโครงที่เกิดจากความเข้าใจผิดเกี่ยวกับประเภทการแสดงผล block องค์ประกอบใช้ความกว้างเต็มที่มีอยู่และเริ่มต้นที่บรรทัดใหม่ inline องค์ประกอบใช้ความกว้างเท่ากับเนื้อหาเท่านั้น และไม่ได้เริ่มต้นที่บรรทัดใหม่ inline-block องค์ประกอบนี้ช่วยให้สามารถตั้งค่าความกว้างและความสูงได้เหมือนองค์ประกอบแบบบล็อก แต่สามารถแสดงผลแบบอินไลน์ได้เหมือนข้อความ การเข้าใจความแตกต่างเหล่านี้ช่วยให้ผมปรับแต่งดีไซน์ที่ตอบสนองได้ดียิ่งขึ้นและรักษาการจัดวางตำแหน่งให้สอดคล้องกัน
2) คุณเข้าหาการแก้ไขปัญหา CSS ในเค้าโครงที่ซับซ้อนอย่างไร
สิ่งที่คาดหวังจากผู้สมัคร: ผู้สัมภาษณ์ต้องการทราบแนวทางเชิงระบบของคุณในการระบุและแก้ไขจุดบกพร่องของเค้าโครง
ตัวอย่างคำตอบ:
ก่อนหน้านี้ ผมเคยใช้วิธีการดีบัก CSS แบบมีโครงสร้าง ผมใช้เครื่องมือสำหรับนักพัฒนาเบราว์เซอร์เพื่อตรวจสอบสไตล์และโมเดลกล่องที่คำนวณได้ แยกตัวเลือกที่ขัดแย้งกัน และปิดใช้งานกฎทีละขั้นตอน ผมยังใช้คำนำหน้าเฉพาะเบราว์เซอร์และทดสอบบนอุปกรณ์หลายเครื่อง กระบวนการดีบักอย่างเป็นระบบนี้ช่วยลดปัญหาเค้าโครงส่วนหน้าได้อย่างมาก
3) คุณสามารถอธิบายได้ไหมว่า CSS cascade และ specificity ทำงานอย่างไร
สิ่งที่คาดหวังจากผู้สมัคร: ผู้สัมภาษณ์ต้องการประเมินความรู้ของคุณว่าเบราว์เซอร์กำหนดว่ากฎ CSS ใดมีความสำคัญเหนือกว่าอย่างไร
ตัวอย่างคำตอบ:
CSS cascade คือกระบวนการที่กำหนดว่ากฎใดจะถูกนำไปใช้เมื่อตัวเลือกหลายตัวกำหนดเป้าหมายไปที่องค์ประกอบเดียวกัน ความเฉพาะเจาะจงเป็นตัวกำหนดลำดับความสำคัญ โดยสไตล์อินไลน์จะมีค่าสูงสุด ตามด้วย ID ตามด้วยคลาส ซูโดคลาส และสุดท้ายคือองค์ประกอบ ลำดับของซอร์สโค้ดก็มีความสำคัญเช่นกันหากความเฉพาะเจาะจงเท่ากัน การรู้สิ่งนี้ช่วยป้องกันการเขียนทับสไตล์โดยไม่ได้ตั้งใจและส่งเสริมให้โค้ดสะอาดขึ้น
4) อธิบายว่าคุณจัดการกับการออกแบบแบบตอบสนองอย่างไรโดยไม่ต้องพึ่งพาเฟรมเวิร์กมากนัก
สิ่งที่คาดหวังจากผู้สมัคร: ผู้สัมภาษณ์กำลังตรวจสอบความเข้าใจของคุณเกี่ยวกับความยืดหยุ่นของ CSS และการใช้งานแบบสอบถามสื่อ
ตัวอย่างคำตอบ:
“ในบทบาทล่าสุดของฉัน ฉันได้ออกแบบเค้าโครงแบบตอบสนองโดยใช้กริดแบบไหลลื่น หน่วยสัมพันธ์ เช่น em และ remและ Media Query เพื่อปรับเลย์เอาต์ให้เข้ากับความกว้างหน้าจอที่แตกต่างกัน ฉันยังใช้ CSS Grid และ Flexbox เพื่อเลย์เอาต์ที่ยืดหยุ่น วิธีนี้ช่วยให้หลีกเลี่ยงการพึ่งพาเฟรมเวิร์กที่ไม่จำเป็น ในขณะเดียวกันก็ยังคงการออกแบบให้ปรับขนาดและบำรุงรักษาได้
5) คุณจะเพิ่มประสิทธิภาพ CSS และความสามารถในการบำรุงรักษาได้อย่างไร
สิ่งที่คาดหวังจากผู้สมัคร: ผู้สัมภาษณ์กำลังประเมินความตระหนักของคุณเกี่ยวกับแนวทางปฏิบัติที่ดีที่สุดสำหรับการปรับขนาดและประสิทธิภาพการทำงาน
ตัวอย่างคำตอบ:
ในงานก่อนหน้านี้ ผมได้ปรับแต่ง CSS ให้เหมาะสมที่สุดโดยการลบสไตล์ที่ไม่ได้ใช้ รวมไฟล์เพื่อลดคำขอ HTTP และนำตัวแปร CSS มาใช้เพื่อให้ง่ายต่อการบำรุงรักษา นอกจากนี้ ผมยังนำหลักการตั้งชื่อ BEM มาใช้เพื่อให้โค้ดเป็นระเบียบและปรับขนาดได้ง่าย นอกจากนี้ ผมยังใช้เครื่องมือสมัยใหม่อย่าง PostCSS และการย่อขนาดเพื่อเพิ่มประสิทธิภาพอีกด้วย
6) เล่าให้ฉันฟังเกี่ยวกับช่วงเวลาที่คุณต้องทำงานร่วมกับนักพัฒนาหรือนักออกแบบเพื่อแก้ไขข้อขัดแย้งด้านรูปแบบ
สิ่งที่คาดหวังจากผู้สมัคร: ผู้สัมภาษณ์ต้องการเห็นการทำงานเป็นทีมและทักษะการสื่อสารในสภาพแวดล้อมที่มีการทำงานร่วมกันหลายฝ่าย
ตัวอย่างคำตอบ:
ในโครงการก่อนหน้านี้ มีข้อขัดแย้งเกิดขึ้นระหว่างความคาดหวังด้านการออกแบบและการนำรูปแบบไดนามิกไปใช้งานจริงของนักพัฒนา ผมได้นัดหมายให้มีการซิงค์ข้อมูลอย่างรวดเร็วกับทั้งสองฝ่าย นำเสนอปัญหาด้านภาพโดยใช้ภาพหน้าจอ และเสนอการปรับตัวแปร CSS เพื่อรักษาความสอดคล้องของการออกแบบ ความร่วมมือเชิงรุกนี้ช่วยให้มั่นใจได้ว่าผลลัพธ์ที่ได้จะสอดคล้องกันโดยไม่ส่งผลกระทบต่อประสิทธิภาพการทำงาน
7) คุณเผชิญกับความท้าทายใดบ้างเมื่อนำแอนิเมชันหรือการเปลี่ยนผ่าน CSS มาใช้ และคุณเอาชนะมันได้อย่างไร
สิ่งที่คาดหวังจากผู้สมัคร: ผู้สัมภาษณ์ต้องการประเมินความเข้าใจของคุณเกี่ยวกับการเพิ่มประสิทธิภาพการทำงานและการแสดงผลเบราว์เซอร์
ตัวอย่างคำตอบ:
“ในโปรเจ็กต์หนึ่ง แอนิเมชันทำให้เกิดปัญหาด้านความลื่นไหลเนื่องจากปัญหาการรีโฟลว์ ฉันพบว่าคุณสมบัติ CSS บางอย่าง เช่น top และ left กำลังกระตุ้นการคำนวณเค้าโครงใหม่ ฉันเปลี่ยนไปใช้ transform และ opacityซึ่งเร่งความเร็วด้วย GPU ทำให้การเปลี่ยนฉากราบรื่นขึ้น ฉันยังปรับแต่งระยะเวลาของแอนิเมชันให้เหมาะสมเพื่อให้ดูเป็นธรรมชาติอีกด้วย
8) คุณจะจัดโครงสร้าง CSS สำหรับแอปพลิเคชันขนาดใหญ่ได้อย่างไร
สิ่งที่คาดหวังจากผู้สมัคร: ผู้สัมภาษณ์ต้องการเข้าใจแนวทางของคุณในการจัดการ ความสามารถในการปรับขนาด และการบำรุงรักษา
ตัวอย่างคำตอบ:
“ผมจะใช้สถาปัตยกรรมแบบโมดูลาร์ เช่น BEM, SMACSS หรือ CSS Modules เพื่อจัดโครงสร้างสไตล์อย่างมีเหตุผล แต่ละส่วนประกอบจะมีสไตล์เฉพาะของตัวเองเพื่อหลีกเลี่ยงความขัดแย้ง นอกจากนี้ ผมยังจะบังคับใช้คู่มือสไตล์และแบบแผนการตั้งชื่อเพื่อรักษาความสอดคล้องกันระหว่างทีมต่างๆ และป้องกันไม่ให้ CSS มีขนาดใหญ่เกินไปเมื่อโครงการเติบโตขึ้น”
9) สมมติว่าไคลเอนต์บ่นว่าเค้าโครงหน้าเพจเสียหายใน Internet Explorer 11 คุณจะทำอย่างไรเพื่อแก้ไขปัญหานี้
สิ่งที่คาดหวังจากผู้สมัคร: ผู้สัมภาษณ์ต้องการทดสอบความสามารถในการปรับตัวของคุณต่อปัญหาเบราว์เซอร์รุ่นเก่า
ตัวอย่างคำตอบ:
“ก่อนอื่นผมจะลองทำซ้ำปัญหาโดยใช้เบราว์เซอร์เวอร์ชันเดิม จากนั้นผมจะระบุฟีเจอร์ CSS ที่ไม่ได้รับการสนับสนุนผ่านเครื่องมือพัฒนาเบราว์เซอร์ และตรวจสอบความเข้ากันได้โดยใช้ทรัพยากรอย่าง MDN หรือ Can I Use หลังจากนั้นผมจะติดตั้งระบบสำรองหรือ polyfill ตามความจำเป็น และจะบันทึกการแก้ไขไว้สำหรับการบำรุงรักษาในอนาคตด้วย”
10) คุณมั่นใจได้อย่างไรว่าโปรเจ็กต์ CSS ของคุณรองรับการใช้งานข้ามเบราว์เซอร์?
สิ่งที่คาดหวังจากผู้สมัคร: ผู้สัมภาษณ์ต้องการยืนยันความตระหนักของคุณเกี่ยวกับมาตรฐานการทดสอบและความเข้ากันได้
ตัวอย่างคำตอบ:
ผมมั่นใจว่าสามารถใช้งานข้ามเบราว์เซอร์ได้ โดยการทดสอบตั้งแต่เนิ่นๆ และบ่อยครั้งบนเบราว์เซอร์หลักๆ โดยใช้เครื่องมืออย่าง BrowserStack ผมปฏิบัติตามมาตรฐาน CSS และหลีกเลี่ยงคุณสมบัติที่ไม่ได้มาตรฐาน นอกจากนี้ ผมยังใช้ PostCSS ร่วมกับ Autoprefixer เพื่อจัดการคำนำหน้าของผู้ขายโดยอัตโนมัติ การตรวจสอบและทดสอบอย่างสม่ำเสมอระหว่างการพัฒนาช่วยป้องกันปัญหาสำคัญหลังการเปิดตัว
