10 (เพิ่มเติม) เคล็ดลับ CSS ที่คุณอาจมองข้าม

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

ในโพสต์ของวันนี้ฉันขอแนะนำให้คุณ คุณลักษณะและลูกเล่น CSS 10 รายการที่คุณอาจไม่รู้.

1. เขียนในแนวตั้ง

มีแอตทริบิวต์ CSS ชื่อ เขียนโหมด ที่ยอมรับหนึ่งในสามค่าเหล่านี้ แนวนอน-TB, แนวตั้ง RL และ แนวตั้ง LR.

แนวนอน-TB เป็นค่าเริ่มต้นและเป็นสาเหตุให้การไหลของข้อความแนวนอนจากซ้ายไปขวาตามปกติในองค์ประกอบ.

vertical- * อย่างไรก็ตามค่าสำหรับการไหลของบล็อกแนวตั้งทำให้ข้อความถูกเขียนจากบนลงล่างโดยเบราว์เซอร์ ใน แนวตั้ง RL, บรรทัดใหม่จะถูกเพิ่มทางด้านซ้ายของบรรทัดก่อนหน้าและในทางกลับกัน แนวตั้ง LR.

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

บันทึก: หากคุณต้องการควบคุมทิศทางของตัวอักษรแต่ละตัวคุณสามารถใช้การวางแนวข้อความโดยหันด้านตรงหรือด้านข้างตามต้องการ.

 -โหมดการเขียนเว็บ: vertical-rl; -ms-writing-mode: tb-rl; โหมดการเขียน: vertical-rl; 

2. ใช้ค่าสีซ้ำ

คำสำคัญ currentColor ดำเนินการมูลค่าของ สี คุณลักษณะและสามารถใช้ในคุณสมบัติอื่น ๆ ที่ยอมรับค่าสีเช่น พื้นหลัง.

div background: linear-gradient (90deg, currentColor 50%, black 50%); … color: # FFD700; / * currentColor คือ # FFD700 * / 

3. ผสมผสานพื้นหลัง

องค์ประกอบสามารถมีพื้นหลังได้มากกว่าหนึ่งรายการ (สีพื้นหลังและภาพพื้นหลังหลายภาพ) พื้นหลังผสมผสานโหมด ผสมทั้งหมดเข้าด้วยกันตามโหมดการผสมที่กำหนด ปัจจุบันมีโหมดการผสมผสานทั้งหมด 16 โหมดในขณะนี้.

พื้นหลังผสมผสานโหมด: ความแตกต่าง; 

4. ผสมผสานองค์ประกอบ

โหมดผสมผสมผสานเนื้อหาและพื้นหลังขององค์ประกอบที่ทับซ้อนกัน Chrome ดูเหมือนจะไม่สนับสนุนโหมดทั้งหมดแม้ว่า Firefox จะทำ.

โหมดผสมสี: สี; 

ฉันใช้องค์ประกอบสองอย่างคือ img แสดงภาพดอกกุหลาบและ ระยะ ด้วยพื้นหลังกราฟิกซ้อนกันและนำมาใช้ผสมโหมดผสมผสาน.

5. ละเว้นเหตุการณ์ตัวชี้

คุณสามารถสร้างองค์ประกอบที่ลบล้างเหตุการณ์ตัวชี้ใด ๆ โดยใช้แอตทริบิวต์เดียวที่เรียกว่า ชี้เหตุการณ์. โดยการให้ ชี้เหตุการณ์ คุณค่าของ ไม่มี ในองค์ประกอบสิ่งนี้จะป้องกันไม่ให้มันเป็นเป้าหมายเหตุการณ์ชี้ รองรับ IE11 +.

ในการสาธิตต่อไปนี้จะมีช่องทำเครื่องหมายใต้ภาพสองภาพซ้อนกันเหนือภาพ ภาพทั้งสองพกพา ตัวชี้เหตุการณ์: ไม่มี, ทำให้เราสามารถคลิกที่ช่องทำเครื่องหมายที่อยู่ข้างใต้ ขึ้นอยู่กับสถานะการตรวจสอบของช่องทำเครื่องหมายภาพที่ต้องการจะปรากฏขึ้นในขณะที่อื่น ๆ ที่ซ่อนอยู่.

6. ตกแต่งกล่องแยก

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

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

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

7. ยุบองค์ประกอบของตาราง

ทัศนวิสัย: ยุบ เป็นคุณลักษณะที่สร้างขึ้นเฉพาะสำหรับองค์ประกอบตารางเช่นแถวและคอลัมน์ หากใช้กับสิ่งอื่นมันจะทำงานเหมือน ทัศนวิสัย: ซ่อนอยู่. แม้ว่า Chrome จะถือว่าเป็นเช่นนั้น ซ่อนเร้น แม้สำหรับองค์ประกอบตาราง.

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

แต่ไม่เหมือน display: none ซึ่งปรับเปลี่ยนเค้าโครงตารางหลังจากลบพื้นที่ออกเค้าโครงยังคงเหมือนเดิม การแสดงผล: การล่มสลาย. คุณสามารถดูรายละเอียดเพิ่มเติมได้จากที่นี่.

8. สร้างคอลัมน์

คุณสามารถสร้างเค้าโครงคอลัมน์สำหรับเนื้อหาของคุณโดยใช้ คอลัมน์ คุณลักษณะ มันช่วยให้คุณระบุจำนวนคอลัมน์ (คอลัมน์นับ) และความกว้างของแต่ละคอลัมน์ (คอลัมน์กว้าง) จะถูกแสดงผลในองค์ประกอบ.

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

-webkit-column-count: 2; -moz-column-count: 2; จำนวนคอลัมน์: 2; 

9. ทำให้องค์ประกอบปรับขนาดได้

องค์ประกอบสามารถปรับขนาดได้ (แนวตั้งแนวนอนหรือทั้งสองอย่าง) ด้วยแอตทริบิวต์ CSS3 ปรับขนาด . การปรับขนาดใน textarea สามารถปิดการใช้งานโดยใช้เหมือนกัน.

ปรับขนาด: แนวตั้ง; ปรับขนาด: แนวนอน; ปรับขนาด: ทั้งสอง; ปรับขนาด: ไม่มี; 

10. สร้างรูปแบบ

สามารถมีการไล่ระดับสี CSS3 หลายรายการ (ทั้งเชิงเส้นและแนวรัศมี) สำหรับองค์ประกอบเดียวและสามารถซ้อนกันเพื่อสร้างรูปแบบ สิ่งนี้ช่วยให้เรา สร้างพื้นหลังที่ดีสำหรับองค์ประกอบโดยไม่ต้องใช้ภาพภายนอก. การทำให้มันใช้งานได้อาจต้องมีการฝึกฝนบ้าง.