เคล็ดลับ CSS แปดประการสำหรับเลย์เอาต์และเอฟเฟกต์ขั้นสูง

ขอบเขตของการพัฒนาส่วนหน้าของเว็บมีความคืบหน้าอย่างมากในช่วงไม่กี่ปีที่ผ่านมา อย่างไรก็ตาม ส่วนหน้าของเว็บตามที่ผู้ใช้เห็น ยังคงเหมือนเดิม: มาร์กอัป HTML ที่จัดรูปแบบด้วย CSS

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

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

1. การเพิ่ม CSS Sibling Selectors ให้สูงสุด

ปัญหา: คุณกำลังสูญเสียโอกาสในการปรับให้เหมาะสมโดยไม่ได้ใช้ตัวเลือกพี่น้อง

วิธีแก้ปัญหา: ใช้ตัวเลือกพี่น้องเมื่อใดก็ตามที่เหมาะสม เมื่อใดก็ตามที่คุณทำงานกับรายการไอเท็ม และคุณต้องปฏิบัติต่อรายการแรกหรือรายการสุดท้ายแตกต่างออกไป สัญชาตญาณแรกของคุณอาจเป็นการใช้ตัวเลือก CSS หลอก :first-child และ :last-child

ตัวอย่างเช่น เมื่อสร้างไอคอนเมนูแฮมเบอร์เกอร์แบบ CSS เท่านั้น:

ดู Pen Maximizing CSS Sibling Selectors 1 โดย Rico Mossesgeld (@ricotheque) บน CodePen

เรื่องนี้สมเหตุสมผล: แต่ละแถบมีระยะขอบด้านล่าง ยกเว้นแถบสุดท้าย

เอฟเฟกต์เดียวกันนี้สามารถทำได้ผ่านตัวเลือกพี่น้องที่อยู่ติดกัน (+):

ดู Pen Maximizing CSS Sibling Selectors 2 โดย Rico Mossesgeld (@ricotheque) บน CodePen

สิ่งนี้ก็สมเหตุสมผลเช่นกัน: ทุกอย่างหลังจากแถบแรกมีระยะขอบบน เคล็ดลับ CSS นี้ไม่เพียงแต่ช่วยประหยัดไบต์พิเศษไม่กี่ (ซึ่งสามารถรวมกันได้อย่างง่ายดายสำหรับโครงการขนาดกลาง) แต่ยังเปิดโลกแห่งความเป็นไปได้อีกด้วย

พิจารณารายชื่อการ์ดนี้:

ดู Pen Maximizing CSS Sibling Selectors 3 โดย Rico Mossesgeld (@ricotheque) บน CodePen

แต่ละรายการมีชื่อและข้อความ ซึ่งส่วนหลังจะถูกซ่อนไว้ตามค่าเริ่มต้น หากคุณต้องการสร้างเฉพาะข้อความของการ์ดที่ใช้งานอยู่ (ที่มีคลาส .active ) และข้อความที่ตามมา คุณสามารถทำได้อย่างรวดเร็วโดยใช้เพียง CSS:

ดู Pen Maximizing CSS Sibling Selectors 4 โดย Rico Mossesgeld (@ricotheque) บน CodePen

ด้วย JavaScript เพียงเล็กน้อย สิ่งนี้สามารถโต้ตอบได้เช่นกัน

อย่างไรก็ตาม การใช้ JavaScript เพียงอย่างเดียวสำหรับทั้งหมดนั้นจะส่งผลให้สคริปต์เช่นนี้:

ดู Pen Maximizing CSS Sibling Selectors 5 โดย Rico Mossesgeld (@ricotheque) บน CodePen

โดยที่การรวม jQuery เป็นการพึ่งพาช่วยให้คุณมีโค้ดสั้น ๆ

2. การปรับขนาดองค์ประกอบ HTML ที่สอดคล้องกัน

ปัญหา: องค์ประกอบ HTML มีขนาดไม่สอดคล้องกันในเบราว์เซอร์ต่างๆ

วิธีแก้ปัญหา: ตั้งค่า box-sizing สำหรับองค์ประกอบทั้งหมดเป็น border-box Internet Explorer ทำสิ่งที่ผิดมาเป็นเวลานานสำหรับนักพัฒนาเว็บ นั่นคือ ปรับขนาดกล่องอย่างเหมาะสม

เบราว์เซอร์อื่นๆ จะดูเฉพาะเนื้อหาเมื่อคำนวณความกว้างขององค์ประกอบ HTML โดยที่ทุกอย่างถือเป็นส่วนเกิน width: 200px พร้อมช่องว่างภายใน 20px และเส้นขอบ 2px แสดงผลกว้าง 242 พิกเซล

Internet Explorer พิจารณาช่องว่างภายในและเส้นขอบเป็นส่วนหนึ่งของความกว้าง ที่นี่ div จากด้านบนจะมีความกว้าง 200 พิกเซล

ดู Pen CSS Box Model Demo 1 โดย Rico Mossesgeld (@ricotheque) บน CodePen

เมื่อคุณเข้าใจแล้ว คุณจะพบว่าแนวทางหลังนั้นสมเหตุสมผลกว่า แม้ว่าจะไม่เป็นไปตามมาตรฐานก็ตาม

ถ้าฉันบอกว่าความกว้างคือ 200px บ้าจริง มันจะเป็นกล่องกว้าง 200px แม้ว่าฉันจะมีช่องว่างภายใน 20px ก็ตาม

ไม่ว่าในกรณีใด CSS ต่อไปนี้จะรักษาขนาดองค์ประกอบ (และด้วยเหตุนี้การจัดวาง) ให้สอดคล้องกันในทุกเบราว์เซอร์:

ดู Pen CSS Box Model Demo 2 โดย Rico Mossesgeld (@ricotheque) บน CodePen

ตัวเลือก CSS ชุดที่สองปกป้ององค์ประกอบ HTML ที่จัดรูปแบบโดยไม่ต้องคำนึงถึงกรอบชายแดนจากการหยุดชะงักของเค้าโครง

box-sizing: border-box มีประโยชน์มากจนเป็นส่วนหนึ่งของเฟรมเวิร์ก CSS ที่ค่อนข้างเป็นที่นิยมที่เรียกว่า sanitize.css

3. องค์ประกอบความสูงแบบไดนามิก

ปัญหา: การรักษาความสูงขององค์ประกอบ HTML เป็นสัดส่วนกับความกว้าง

วิธีแก้ปัญหา: ใช้แผ่นรองแนวตั้งแทนความสูง

สมมติว่าคุณต้องการให้ความสูงขององค์ประกอบ HTML ตรงกับความกว้างของ CSS เสมอ height: 100% ไม่เปลี่ยนพฤติกรรมเริ่มต้นขององค์ประกอบที่ตรงกับความสูงของเนื้อหา

ดู Pen Dynamic Height Elements 1 โดย Rico Mossesgeld (@ricotheque) บน CodePen

คำตอบคือตั้งค่าความสูงเป็น 0 และใช้ padding-top หรือ padding-bottom เพื่อกำหนดความสูงที่แท้จริงของ . .container แทน คุณสมบัติอย่างใดอย่างหนึ่งสามารถเป็นเปอร์เซ็นต์ของความกว้างขององค์ประกอบ:

ดู Pen Dynamic Height Elements 2 โดย Rico Mossesgeld (@ricotheque) บน CodePen

ตอนนี้ .container จะยังคงเป็นสี่เหลี่ยมจัตุรัสไม่ว่าจะกว้างแค่ไหน overflow: hidden ช่วยให้เนื้อหายาวไม่ทำลายอัตราส่วนนี้

เทคนิคนี้ด้วยการดัดแปลงบางส่วน เหมาะอย่างยิ่งสำหรับการสร้างการฝังวิดีโอที่รักษาอัตราส่วนภาพไว้ที่ขนาดใดก็ได้ เพียงจัดตำแหน่งการฝังด้วย .container ด้านบนและซ้ายผ่าน position: absolute ตั้งค่าทั้งสองมิติของการฝังเป็น 100% เพื่อให้ "เติมเต็ม" .container และเปลี่ยน padding-bottom ของ . .container เพื่อให้ตรงกับมุมมองของวิดีโอ อัตราส่วน

ดู Pen Dynamic Height Elements 3 โดย Rico Mossesgeld (@ricotheque) บน CodePen

position: relative สำหรับ .container ช่วยให้มั่นใจว่าการวางตำแหน่งที่แน่นอนของ iframe ทำงานอย่างถูกต้อง padding-bottom ภายในแบบใหม่เป็นเพียงความสูงของอัตราส่วนกว้างยาวหารด้วยความกว้าง คูณด้วย 100 ตัวอย่างเช่น หากอัตราส่วนกว้างยาวของการฝังวิดีโอคือ 16:9 เปอร์เซ็นต์ของช่องว่างภายใน-ด้านล่างควรเป็น 9 หารด้วย 16 (.5625) และคูณด้วย 100 (56.25)

4. องค์ประกอบความกว้างแบบไดนามิก

ปัญหา: การรักษาความกว้างขององค์ประกอบ HTML เป็นสัดส่วนกับความสูง

วิธีแก้ไข: ใช้ขนาดตัวอักษรเป็นพื้นฐานสำหรับขนาดขององค์ประกอบ

ทีนี้ ในทางกลับกัน หรือคอนเทนเนอร์ที่เปลี่ยนความกว้างตามความสูงล่ะ? คราวนี้เป็น font-size เพื่อช่วยเหลือ โปรดจำไว้ว่า width และ height สามารถเป็น em s ได้ ซึ่งหมายความว่าสามารถเป็นอัตราส่วนของ font-size ขององค์ประกอบได้

องค์ประกอบที่มี font-size 40px กว้าง 2em และสูง 1em จะกว้าง 80 พิกเซล (40 x 2) และสูง 40 พิกเซล (40 x 1)

ดู Pen Dynamic Width Elements โดย Rico Mossesgeld (@ricotheque) บน CodePen

ต้องการเปลี่ยนความสูงของ . .container หรือไม่ เปลี่ยนขนาดตัวอักษร.

ข้อแม้เพียงอย่างเดียวคือเป็นไปไม่ได้ที่จะทำให้ขนาดฟอนต์ขององค์ประกอบตรงกับความสูงของพาเรนต์โดยอัตโนมัติผ่าน CSS เท่านั้น ทว่าเทคนิคนี้ช่วยให้สคริปต์ปรับขนาด Javascript ถูกตัดออกจาก:

 var container = document.querySelector( '.container' ); container.style.height = yourDesiredHeight + 'px'; container.style.width = yourDesiredHeight * yourDesiredRatio + 'px';

ถึง:

 document.querySelector( '.container' ).style.fontSize = yourDesiredHeight + 'px';

5. การจัดกึ่งกลางแนวตั้งของเนื้อหาแบบไดนามิก

ปัญหา: การรักษาองค์ประกอบ HTML (โดยไม่ทราบความสูง) ไว้ตรงกลางแนวตั้งภายในองค์ประกอบอื่น

วิธีแก้ไข: ตั้งค่าองค์ประกอบภายนอกเพื่อ display: table จากนั้นแปลงองค์ประกอบภายในเป็น CSS table-cell หรือเพียงแค่ใช้ CSS Flexbox

เป็นไปได้ที่จะจัดกึ่งกลางข้อความหนึ่งบรรทัดในแนวตั้งด้วย line-height :

ดู Pen Vertical Centering of Dynamic Content 1 โดย Rico Mossesgeld (@ricotheque) บน CodePen

สำหรับข้อความหลายบรรทัดหรือเนื้อหาที่ไม่ใช่ข้อความ ตาราง CSS คือคำตอบ ตั้งค่า .container เป็น table จากนั้นใช้ display: table-cell และ vertical-align: middle สำหรับ .text :

ดู Pen Vertical Centering of Dynamic Content 2 โดย Rico Mossesgeld (@ricotheque) บน CodePen

คิดว่าเคล็ดลับ CSS นี้เทียบเท่ากับแนวตั้งของ margin: 0 auto Flexbox ของ CSS3 เป็นทางเลือกที่ดีสำหรับเทคนิคนี้ หากรองรับการรองรับบั๊กกี้ของ Internet Explorer:

ดู Pen Vertical Centering of Dynamic Content 3 โดย Rico Mossesgeld (@ricotheque) บน CodePen

6. คอลัมน์ความสูงเท่ากัน

ปัญหา: ทำให้คอลัมน์มีความสูงเท่ากัน

วิธีแก้ปัญหา: สำหรับแต่ละคอลัมน์ ให้ใช้ค่า margin-bottom ติดลบขนาดใหญ่ และยกเลิกค่านั้นด้วย padding-bottom ที่มีขนาดใหญ่เท่ากัน ตาราง CSS และ Flexbox ก็ใช้งานได้เช่นกัน

การใช้ float หรือ display: inline-block เป็นไปได้ที่จะสร้างคอลัมน์แบบเคียงข้างกันผ่าน CSS

ดูคอลัมน์ Pen Same-Height Columns 1 โดย Rico Mossesgeld (@ricotheque) บน CodePen

สังเกตการใช้ box-sizing: border-box เพื่อปรับขนาด . .cols อย่างเหมาะสม ดูการปรับขนาดองค์ประกอบ HTML ที่สอดคล้องกันด้านบน

เส้นขอบของคอลัมน์แรกและคอลัมน์สุดท้ายไม่ลดลงจนสุด ไม่ตรงกับความสูงของคอลัมน์ที่สองที่สูงกว่า ในการแก้ไขปัญหานี้ เพียงเพิ่ม overflow: hidden to .row จากนั้นตั้งค่า margin-bottom ของ .col เป็น .col และ padding-bottom เป็น 100009px (99999px + การเติม 10px กับด้านอื่นๆ ของ . .col )

ดูคอลัมน์ Pen Same-Height Columns 2 โดย Rico Mossesgeld (@ricotheque) บน CodePen

ทางเลือกที่ตรงไปตรงมากว่าคือ Flexbox อีกครั้ง ใช้สิ่งนี้เฉพาะเมื่อไม่จำเป็นต้องรองรับ Internet Explorer

ดูคอลัมน์ Pen Same-Height Columns 3 โดย Rico Mossesgeld (@ricotheque) บน CodePen

อีกทางเลือกหนึ่งที่รองรับเบราว์เซอร์ที่ดีกว่า: ตาราง CSS (ไม่มี vertical-align: middle )

ดูคอลัมน์ Pen Same-Height Columns 4 โดย Rico Mossesgeld (@ricotheque) บน CodePen

7. ก้าวข้ามกรอบ

ปัญหา: กล่องและเส้นตรงมีความซ้ำซากจำเจ

วิธีแก้ไข: ใช้ transform: rotate(x) หรือ border-radius

ใช้ชุดบานหน้าต่างทั่วไปจากเว็บไซต์การตลาดหรือโบรชัวร์: สไลด์แนวตั้งที่มีจุดเอกพจน์ มาร์กอัปและ CSS อาจมีลักษณะดังนี้:

ดู Pen Going Beyond the Box 1 โดย Rico Mossesgeld (@ricotheque) บน CodePen

ด้วยค่าใช้จ่ายในการทำให้มาร์กอัปซับซ้อนขึ้นมาก บานหน้าต่างแบบกล่องเหล่านี้สามารถเปลี่ยนเป็นสแต็คของสี่เหลี่ยมด้านขนานได้

ดู Pen Going Beyond the Box 2 โดย Rico Mossesgeld (@ricotheque) บน CodePen

มีอะไรเกิดขึ้นมากมายที่นี่:

ความสูงของบานหน้าต่างแต่ละบานควบคุมโดย .pane-container ขอบด้านล่างติดลบช่วยให้แน่ใจว่าบานหน้าต่างวางซ้อนกันได้พอดี

• .pane-background , .image .mask-box ลูกของมัน และ .image หลานของมัน ถูกตั้งค่าเป็น position: absolute แต่ละองค์ประกอบมีค่า top , left , bottom , and right ที่แตกต่างกัน การดำเนินการนี้จะขจัดระยะห่างใดๆ ที่สร้างขึ้นโดยการหมุนตามรายละเอียดด้านล่าง
• .mask-box หมุน 2 องศา (ทวนเข็มนาฬิกา)
• .image ถูกหมุน -2 องศาเพื่อต่อต้านการหมุนของ . .mask-box
• .mask-box ถูกซ่อนไว้เพื่อให้ด้านบนและด้านล่างที่หมุนแล้วตัดองค์ประกอบ . .image

ในบันทึกที่เกี่ยวข้อง การเปลี่ยนรูปภาพให้เป็นวงกลมหรือวงรีนั้นง่ายมาก เพียงใช้ border-radius: 100% กับองค์ประกอบ img

ดู Pen Going Beyond the Box 3 โดย Rico Mossesgeld (@ricotheque) บน CodePen

การปรับเปลี่ยน CSS แบบเรียลไทม์ เช่น ช่วยลดความจำเป็นในการเตรียมเนื้อหาก่อนที่จะเผยแพร่บนเว็บไซต์ แทนที่จะใช้มาสก์วงกลมกับรูปภาพใน Photoshop นักพัฒนาเว็บสามารถใช้เอฟเฟกต์เดียวกันผ่าน CSS ได้โดยไม่ต้องเปลี่ยนรูปภาพต้นฉบับ

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

8. โหมดกลางคืน

ปัญหา: การใช้โหมดกลางคืนโดยไม่สร้างสไตล์ชีตใหม่

วิธีแก้ไข: ใช้ตัวกรอง CSS

แอพบางตัวมีโหมดกลางคืน โดยที่อินเทอร์เฟซจะมืดลงเพื่อให้อ่านง่ายขึ้นในที่แสงน้อย ในเบราว์เซอร์ที่ใหม่กว่า ตัวกรอง CSS สามารถสร้างเอฟเฟกต์เดียวกันได้โดยใช้เอฟเฟกต์เหมือน Photoshop

ตัวกรอง CSS ที่มีประโยชน์คือ invert ซึ่ง (ไม่แปลกใจ) กลับสีของทุกอย่างภายในองค์ประกอบ ซึ่งทำให้การสร้างและนำชุดสไตล์ใหม่ไปใช้โดยไม่จำเป็น

ดู Pen Night Mode 1 โดย Rico Mossesgeld (@ricotheque) บน CodePen

การใช้ตัวกรองนี้กับข้อความสีดำและพื้นหลังสีขาวเพื่อจำลองโหมดกลางคืน !important ช่วยให้แน่ใจว่าสีใหม่เหล่านี้จะแทนที่สไตล์ที่มีอยู่

ดู Pen Night Mode 2 โดย Rico Mossesgeld (@ricotheque) บน CodePen

น่าเสียดายที่ภาพดูแปลกเพราะสีของมันกลับด้านกับอย่างอื่น ข่าวดีก็คือสามารถใช้ตัวกรองหลายตัวพร้อมกันได้ การเพิ่มฟิลเตอร์ Hue-rotate จะเปลี่ยนรูปภาพและเนื้อหาภาพอื่นๆ กลับสู่ปกติ:

ดู Pen Night Mode 3 โดย Rico Mossesgeld (@ricotheque) บน CodePen

ทำไมสิ่งนี้ถึงใช้งานได้? hue-rotate(180deg) เพิ่งสร้างเอฟเฟกต์เช่นเดียวกับ invert(1) ต่อไปนี้คือตัวอย่างวิธีการทำงานของ CSS ในโหมดกลางคืนเมื่อสลับผ่านปุ่มที่ขับเคลื่อนด้วย JavaScript

ใช้ประโยชน์สูงสุดจาก CSS

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

เคล็ดลับ CSS ทั้งหมดเหล่านี้มีบางสิ่งที่เหมือนกัน: พวกเขาใช้ CSS เป็นภาษาสำหรับการจัดสไตล์ให้เกิดประโยชน์สูงสุด ปล่อยให้เบราว์เซอร์ทำงานอย่างหนัก และเมื่อทำถูกต้องแล้ว ก็จะให้ผลลัพธ์ที่ดีขึ้น ประสิทธิภาพที่ดีขึ้น และประสบการณ์ผู้ใช้ที่ดีขึ้นเสมอ

แจ้งให้เราทราบหากคุณมีเคล็ดลับ CSS ที่คุณสนใจและมีประโยชน์ในส่วนความคิดเห็นด้านล่าง