การจัดรูปแบบด้วย CSS
| English | ไทย |
|---|---|
| padding/ˈpædɪŋ/ | padding |
| border/ˈbɔːdə/ | border |
| CSS/ˌsiː es ˈes/ | CSS |
| selector/sɪˈlektə/ | selector |
| declaration/ˌdekləˈreɪʃn/ | การประกาศตัวแปร (declaration) |
| the box model/ðə bɒks ˈmɒdl/ | โมเดลกล่อง |
| margin/ˈmɑːdʒɪn/ | margin |
| responsive design/rɪˈspɒnsɪv dɪˈzaɪn/ | การออกแบบที่ยืดหยุ่น |
| media query/ˈmiːdiːə ˈkwɪərɪ/ | media query |
การ์ดขนาด 320-พิกเซล ก็ยังล้นจากหน้าจอขนาด 320-พิกเซล
- ความกว้างที่กำหนดของการ์ดไม่จำเป็นต้องเป็นความกว้างรวมเสมอ Padding และ border อาจเพิ่มพื้นที่นอกเหนือจากความกว้างเนื้อหา
- CSS ควบคุมกฎการนำเสนอ Selector เลือกองค์ประกอบ; Declaration กำหนด property และค่า เช่น
color: navy
ให้เหตุผลทางปฏิบัติหนึ่งประการในการรักษากฎการนำเสนอที่นำไปใช้ซ้ำได้ในไฟล์สไตล์ชีท
ตัวอย่าง: “การใช้ไฟล์สไตล์ชีทร่วมกันช่วยให้เราอัปเดตการ์ดที่มีรูปแบบตรงกันได้อย่างสม่ำเสมอโดยไม่ต้องแก้ไข HTML element ทุกตัว”
พิจารณาทุกส่วนของกล่อง
- Box model มี content, padding, border และ margin Padding และ border อยู่ภายในกล่องที่วาด; margin แยกออกจากเพื่อนบ้าน
- ด้วย
content-box, ความกว้าง 320 px, padding 16 px ทั้งสองด้าน และ border 2 px ทั้งสองด้าน จะให้ 356 px ก่อน margin ด้วยborder-box, ค่าที่ระบุไว้ 320 px จะรวม padding และ border เข้าไปด้วย
เรียงลำดับพื้นที่ของกล่องโมเดลจากเนื้อหาออกไปด้านนอก
Padding และ border ล้อมรอบเนื้อหา; margin แยกกล่องออกจากเพื่อนบ้าน
เมื่อใช้ content-box ความกว้างของเนื้อหาคือ 320 px, padding ซ้าย/ขวาคือ 16 px ต่อด้าน และ border ซ้าย/ขวาคือ 2 px ต่อด้าน ความกว้างก่อนรวม margin คือกี่像素?
320 + 16 + 16 + 2 + 2 = 356 px.
ทำให้ความยืดหยุ่นได้
- Responsive design ปรับเนื้อหาและเลย์เอาต์ตามพื้นที่ที่มีอยู่ การ์ดนี้จะขยายเต็มคอนเทนเนอร์ถึง 400 px โดยรวม padding และ border ไว้ด้วย
- ใช้กฎกับองค์ประกอบที่มี
class="card"เนื้อหาที่ไม่แตกบรรทัดยาวๆ margin ของ parent และกฎอื่นๆ ยังต้องตรวจสอบเพิ่ม; การกำหนดค่าเพียงหนึ่งค่าไม่สามารถรับประกันได้ว่าทั้งหน้าเว็บจะพอดี
.card {
box-sizing: border-box;
width: 100%;
max-width: 400px;
padding: 16px;
border: 2px solid currentColor;
overflow-wrap: anywhere;
}
ภายในคอนเทนเนอร์ขนาด 280 px, การ์ดนี้มีความกว้าง 280 px รวมถึง padding และ border ภายในคอนเทนเนอร์ขนาด 700 px, มันจะหยุดอยู่ที่ 400 px Margin ข้างนอกยังคงเป็นพื้นที่เพิ่มเติม
การ์ดที่มี padding ควรเติมเต็มคอนเทนเนอร์ถึง 400 px รวมถึงขอบของมัน Which rule set fits best?
border-box รวม padding และ borders ไว้ในความกว้างที่กำหนด Parent layout และ content ยังต้องการการทดสอบ
เปลี่ยนเลย์เอาต์ก็ต่อเมื่อจำเป็นต้องเปลี่ยนเท่านั้น
- Media query ใช้กฎภายใต้เงื่อนไข เช่น เปลี่ยนจากสองคอลัมน์เหลือหนึ่งคอลัมน์เมื่อแคบเกินไปจนอ่านไม่ออก
- เลือก breakpoint จากเนื้อหา แล้วทดสอบหลายความกว้างและข้อความขนาดใหญ่ อย่าสันนิษฐานว่าโทรศัพท์หรือแล็ปท็อปทุกเครื่องมีความกว้างที่ใช้ได้เท่ากัน
ตรวจสอบกฎที่ชนะจริง
- Cascade พิจารณาปัจจัยต่างๆ เช่น origin, importance และ layers ก่อน specificity ของ selector สำหรับกฎที่เทียบกันได้ ID มีความเฉพาะเจาะจงมากกว่า class; class มีความเฉพาะเจาะจงมากกว่า element selector
- เมื่อกฎที่เทียบกันได้มีความเฉพาะเจาะจงเท่ากัน ลำดับแหล่งที่มาทีหลังอาจตัดสินได้ ใช้เครื่องมือพัฒนาบนเบราว์เซอร์เพื่อตรวจสอบกฎที่จับคู่ stylesheet ที่โหลด และค่าที่คำนวณแล้ว
!important มีส่วนร่วมใน cascade; ไม่ได้ทำให้ CSS ล้มเหลว หลีกเลี่ยงการใช้มันเป็นการแก้ไขที่ไม่มีการอธิบาย ตรวจสอบสาเหตุก่อน: stylesheet ที่หายไป, declaration ที่ไม่ถูกต้อง หรือกฎที่ทับซ้อนอาจอธิบายผลลัพธ์ที่ไม่คาดคิดได้
กฎปกติสองข้อที่มี origin และ layer เดียวกันใช้ selector .card เหมือนกันและกำหนดสีที่ขัดแย้งกัน ไม่มีปัจจัยตัดสินอื่นใดแตกต่างกัน สีใดจะชนะ?
ความเฉพาะเจาะจงเท่ากันไม่ทำให้ลำดับ不重要 สำหรับกฎที่เทียบเท่ากัน ลำดับแหล่งที่มาทีหลังจะ决定性
!important เป็นส่วนหนึ่งของกฎการสลายตัวของ CSS แต่ไม่ควรใช้เป็นวิธีแก้ไขที่ไม่มีการอธิบายประกอบ
ความสำคัญมีผลต่อการลำดับความสำคัญ ตรวจสอบความขัดแย้งและใช้โดยมีเจตนา แทนที่จะอ้างว่าทำให้ CSS บกพร่อง
จับคู่ข้อสังเกตกับการตรวจสอบที่เป็นประโยชน์ต่อไป
ตรวจสอบสาเหตุจริงแทนการสันนิษฐานว่าความล้มเหลวทั้งหมดมาจาก specificity
ทดสอบกล่องและการอ่าน
- ลองใช้คอนเทนเนอร์แคบและกว้าง การโฟกัสด้วยคีย์บอร์ด และข้อความขยายตัว ตรวจสอบว่าข้อความอ่านได้ในทั้งสองธีมสีและเนื้อหาสามารถ wrapping ได้
- อธิบายการแก้ไข overflow หนึ่งกรณีด้วยการคำนวณกล่อง และความขัดแย้งของสไตล์หนึ่งกรณีโดยใช้กฎที่จับคู่จริง
คำนวณกล่องทั้งหมด ให้ความยืดหยุ่นก่อน แล้วตรวจสอบ cascade Specificity สำคัญ แต่ไม่ใช่ปัจจัยเดียวในการตัดสินใจ
แหล่งที่มา: W3C CSS cascade.
การ์ดพอดีกับขนาดข้อความปกติแต่ล้นออกเมื่อขยายข้อความ คุณควรทำอะไร?
พฤติกรรมแบบตอบสนองรวมถึงการปรับข้อความและข้อจำกัดเนื้อหา ไม่ใช่แค่ภาพหน้าจอ viewport เดียว