— ภาษาที่ควบคุมรูปลักษณ์และความรู้สึกของเว็บไซต์ — ได้เสมอมีประสิทธิภาพ แต่เล็กน้อยซับซ้อน โปรแกรมเมอร์มีท้าทายมานานหลายปีกับความซ้ําซ้อนทั้งหมดความปรารถนาที่จะทําให้การออกแบบสามารถปรับแต่งได้และหลีกเลี่ยงความขัดแย้งสไตล์ทั้งหมด สามคุณสมบัติใหม่ในขณะนี้เปลี่ยน CSS เป็นเครื่องมือที่สะอาดบางและทันสมัยมากขึ้น: Nesting, Container Queries และ Scoped Styles CSS นี่ไม่ใช่การเปลี่ยนแปลงเล็กน้อย พวกเขาปฏิวัติวิธีที่เราออกแบบและ CSS จะกลายเป็น intuitive, modular, และคาดการณ์ได้มากขึ้น ลองเดินผ่านสิ่งที่แต่ละคนทําและทําไมพวกเขาสําคัญ ในอดีต CSS ทําให้นักพัฒนาซ้ําตัวเองเมื่อจัดรูปแบบองค์ประกอบ Nesting แก้ไขสิ่งนี้โดยอนุญาตให้สไตล์ปฏิบัติตามโครงสร้างเนื้อหาตามธรรมชาติ แทนที่จะใช้กฎแต่ละองค์ประกอบโดยแยกต่างหาก Nesting ช่วยให้พวกเขาสามารถเก็บรวบรวมตามความตรรกะ นี้ทําให้รูปแบบง่ายต่อการอ่านและปฏิบัติตามด้วยเนื่องจาก CSS ดูเหมือนโครงสร้าง HTML ที่มันกําลังสร้าง สําหรับกลุ่มมันหมายความว่าข้อผิดพลาดน้อยลงและมีความสัมพันธ์ที่ชัดเจนมากขึ้นระหว่างการออกแบบและรหัสที่สนับสนุน Container Queries คอนเทนเนอร์ต้องการ ผู้พัฒนาเว็บได้ใช้คําถามสื่อมานานหลายปีที่ปรับการออกแบบขึ้นอยู่กับขนาดหน้าต่างเบราว์เซอร์ ซึ่งเป็นเรื่องที่น่าตื่นตาตื่นใจในบางกรณี แต่ไม่ได้เมื่อองค์ประกอบ - ตัวอย่างเช่นการ์ดปุ่มหรือแถบด้านข้าง - ใช้ในหลายสถานที่บนหน้าเว็บ คําถามคอนเทนเนอร์แก้ปัญหานี้โดยการทําให้องค์ประกอบเปลี่ยนขนาดของตัวเองขึ้นอยู่กับขนาดของพื้นที่ที่อยู่ในไม่ใช่หน้าจอทั้งหมด พิจารณาการ์ดที่ปรากฏเล็กน้อยในแถบด้านข้าง แต่สามารถเติบโตได้อย่างสมบูรณ์แบบในพื้นที่เนื้อหาหลักโดยไม่ต้องใช้เทคนิคเพิ่มเติมหรือการทํางานที่ซับซ้อน ความสามารถนี้ทําให้องค์ประกอบสามารถนํากลับมาใช้ซ้ําได้และสามารถปรับตัวได้โดยไม่คํานึงถึงตําแหน่งขององค์ประกอบ สไตล์ Scoped หนึ่งในความเจ็บปวดหัวที่ร้ายแรงที่สุดของ CSS คือรูปแบบสามารถ "รั่วไหล" ผ่านหน้ารูปแบบที่ออกแบบมาสําหรับองค์ประกอบหนึ่งอาจเปลี่ยนองค์ประกอบอื่นโดยไม่ตั้งใจทําให้เกิดข้อผิดพลาดที่น่าประทับใจ รูปแบบที่กําหนดเป้าหมายจะหยุดสิ่งนี้โดยการรักษารูปแบบที่เชื่อมโยงกับส่วนหรือองค์ประกอบเดียว การแยกนี้ทําให้ CSS สามารถคาดการณ์ได้และปลอดภัย มันเป็นสิ่งสําคัญโดยเฉพาะอย่างยิ่งในการพัฒนาที่ทันสมัยซึ่งเว็บไซต์ถูกสร้างขึ้นจากชิ้นส่วนที่สามารถนํามาใช้ซ้ําได้มากมาย สไตล์ที่กําหนดเป้าหมายให้แน่ใจว่าแต่ละชิ้นดูเหมือนว่าจะไม่มีการแทรกแซงจากชิ้นส่วนอื่น ๆ Why Do These Features Matter? ทําไมคุณสมบัติเหล่านี้มีความสําคัญ ทั้งสามคุณสมบัติเหล่านี้รวมถึงการเปลี่ยนแปลงพื้นฐานใน CSS: 
 
 
 
 Nesting เก็บรหัสสะอาดและง่ายต่อการอ่าน คําถามคอนเทนเนอร์ช่วยให้การออกแบบมีความยืดหยุ่นในทุกสถานการณ์ สไตล์ที่กําหนดเป้าหมายป้องกันไม่ให้ส่วนประกอบถูกแทรกแซง ทั้งสามคนทํางานร่วมกันเพื่อให้ CSS สอดคล้องกับธรรมชาติของการสร้างเว็บไซต์ในวันนี้: โมดูล, สามารถใช้ซ้ําและเป็นศูนย์กลางผู้ใช้ The Road Ahead ถนนไปข้างหน้า การสนับสนุนสําหรับคุณสมบัติเหล่านี้ยังไม่ได้อยู่ในเบราว์เซอร์ทั้งหมด แต่มีการเพิ่มขึ้นอย่างรวดเร็ว ผู้พัฒนาที่ลองใช้พวกเขาในขณะนี้จะอยู่ด้านหน้าของเส้นโค้งเมื่ออนาคตของ CSS มาถึงและพวกเขาจะได้รับประโยชน์ในขณะที่การสนับสนุนที่มีอยู่ Conclusion ข้อสรุป CSS มีการเปลี่ยนแปลงเพื่อตอบสนองความต้องการของการพัฒนาเว็บสมัยใหม่ Nesting, สอบถามคอนเทนเนอร์, และรูปแบบที่ครอบคลุมทําให้การออกแบบง่ายขึ้นทําให้มันสมาร์ทมากขึ้นและเชื่อถือได้มากขึ้น สําหรับนักออกแบบและนักพัฒนาคุณสมบัติเหล่านี้เป็นตัวแทนของอนาคตที่ CSS จะร่วมมือกับวิธีที่เราสร้างเว็บไซต์ในขณะนี้ 
 
 เรื่องนี้ถูกกระจายโดย Sanya Kapoor ภายใต้ HackerNoon's Business Blogging Program เรื่องนี้ถูกกระจายโดย Sanya Kapoor ภายใต้ HackerNoon's Business Blogging Program

The is an opinion piece based on the author’s POV and does not necessarily reflect the views of HackerNoon.

Read My Stories

เสียงนี้ผลิตในภาษาต้นฉบับของเรื่องราว!

The Future of Web Styling: CSS Nesting, Container Queries และ Scoped Styles

About Author

ความคิดเห็น

แขวนแท็ก

บทความนี้ถูกนำเสนอใน

Related Stories

Meet mParticle: HackerNoon Company of the Week

Meet Endorsely: HackerNoon Company of the Week

การสร้างเนื้อหาที่แท้จริงในยุคของ AI: ทําไม startups ต้องการเนื้อหาที่มีคุณภาพ

Meet Augment Code: HackerNoon Company of the Week

Meet mParticle: HackerNoon Company of the Week

Meet Endorsely: HackerNoon Company of the Week

การสร้างเนื้อหาที่แท้จริงในยุคของ AI: ทําไม startups ต้องการเนื้อหาที่มีคุณภาพ

Meet Augment Code: HackerNoon Company of the Week

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps