วิธีใช้ Native CSS Nesting ในเว็บแอปพลิเคชันของคุณ
ในอดีต CSS เป็นภาษาที่ยากต่อการทำงาน ตัวประมวลผลล่วงหน้า CSS ช่วยให้ทำงานกับ CSS ได้ง่ายขึ้น และยังมีคุณสมบัติเพิ่มเติม เช่น ลูป มิกซ์อิน และอื่นๆ ในช่วงหลายปีที่ผ่านมา CSS มีความสามารถมากขึ้นและนำคุณสมบัติบางอย่างที่เปิดตัวโดยตัวประมวลผลล่วงหน้าของ CSS มาใช้ คุณลักษณะหนึ่งดังกล่าวคือ"สไตล์ที่ซ้อนกัน"
การซ้อนกฎ CSS ช่วยอำนวยความสะดวกในการแสดงภาพความสัมพันธ์ระหว่างองค์ประกอบ HTML และสไตล์ที่เกี่ยวข้อง โดยทำให้นักพัฒนาสามารถฝังกฎ CSS ภายในกันและกันได้ ผลลัพธ์ที่ได้คือโครงสร้างองค์กรที่ได้รับการปรับปรุงและความสามารถในการอ่านโค้ด พร้อมคำอธิบายที่ชัดเจนเกี่ยวกับวิธีการใช้สไตล์ตามลำดับชั้นตามลำดับชั้นของ HTML
การจัดสไตล์แบบซ้อนกัน: แบบเก่า
สไตล์แบบซ้อนเป็นฟังก์ชันที่สามารถพบได้ในตัวประมวลผลล่วงหน้า CSS หลายตัว เช่น Sass, Stylus และ Less CSS แม้ว่าไวยากรณ์อาจแตกต่างกันไป แต่ก็มีพื้นฐานร่วมกัน ตัวอย่างเช่น หากต้องการใช้สไตล์กับองค์ประกอบทั้งหมดภายในองค์ประกอบที่มีชื่อคลาสว่า"คอนเทนเนอร์"โค้ด CSS มาตรฐานจะมีลักษณะดังนี้:
.container {
background-color: #f2f2f2;
}
.container h1 {
font-size: 44px;
}
16px; } ในโค้ดตัวประมวลผลล่วงหน้า ซึ่งช่วยให้จัดรูปแบบได้อย่างมีประสิทธิภาพและปรับเปลี่ยนให้เข้ากับองค์ประกอบต่างๆ บนหน้าเว็บได้อย่างง่ายดาย
.container{
background-color: #f2f2f2;
h1 {
font-size:44px;
}
}
ส่วนย่อยของโค้ดดังกล่าวแสดงผลคล้ายกับ CSS ทั่วไป ในขณะที่ส่งเสริมความเข้าใจและความชัดเจนในหมู่นักพัฒนาที่อ่านซอร์สโค้ด แนวคิดของ’โครงสร้างลำดับชั้น’นี้ถือเป็นข้อได้เปรียบที่สำคัญที่เกี่ยวข้องกับตัวประมวลผลล่วงหน้า CSS
แม้ว่าจะไม่มีข้อจำกัดเกี่ยวกับความลึกของการซ้อนกันในโครงสร้างต้นไม้ แต่สิ่งสำคัญคือต้องใช้ความระมัดระวังเมื่อสร้างองค์ประกอบที่ซ้อนกันลึก เนื่องจากความซับซ้อนของโค้ดและการใช้คำฟุ่มเฟื่อยที่อาจเพิ่มขึ้นที่อาจเกิดขึ้นจากการปฏิบัติดังกล่าว
เนทีฟซ้อนสไตล์ใน CSS
เบราว์เซอร์บางตัวไม่รองรับสไตล์เนทีฟที่ซ้อนกัน เว็บไซต์ Can I use… สามารถช่วยคุณตรวจสอบว่าเบราว์เซอร์เป้าหมายของคุณรองรับคุณสมบัตินี้หรือไม่
สไตล์ที่ซ้อนกันภายในฟังก์ชัน CSS ดั้งเดิมเทียบได้กับที่พบในตัวประมวลผลล่วงหน้า CSS ทำให้สามารถห่อหุ้มตัวเลือกใดๆ ภายในอีกตัวเลือกหนึ่งได้ อย่างไรก็ตาม สิ่งสำคัญคือต้องตระหนักถึงความแตกต่างที่สำคัญระหว่างสองแนวทาง พิจารณาตัวอย่างต่อไปนี้:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Nested Styling in CSS</title>
</head>
<body>
<div class="container">
<h1>Hello from the children of planet Earth!</h1>
</div>
<style>
.container {
background-color: red;
h1 {
color: yellow;
}
}
</style>
</body>
</html>
ในข้อมูลโค้ดที่ให้มา องค์ประกอบ div ที่มีแอตทริบิวต์ class เป็น"container"มีพื้นหลังเป็นสีแดงเข้ม ลักษณะการออกแบบขององค์ประกอบส่วนหัวนั้นรวมอยู่ในขอบเขตของเอนทิตี div ที่กล่าวถึงข้างต้น โดยเฉพาะอย่างยิ่ง ส่วนประกอบของส่วนหัวแสดงการสร้างเม็ดสีที่เป็นสีมะนาว อย่างไรก็ตาม เมื่อดำเนินการผ่านอินเทอร์เน็ตเบราว์เซอร์ เราอาจสังเกตเห็นว่ามีความไม่สอดคล้องกันในการแสดงภาพขององค์ประกอบต่างๆ แม้ว่าข้อเท็จจริงที่ว่าเบราว์เซอร์จะกำหนดฉากหลังสีแดงให้กับ div ดังกล่าวอย่างถูกต้อง แต่ปรากฏว่าส่วนหัวขาดการตกแต่งภาพที่จำเป็น
ใน CSS การซ้อนสไตล์จะทำงานแตกต่างจากตัวประมวลผลล่วงหน้าของ CSS เช่น Less ไม่สามารถอ้างอิงองค์ประกอบ HTML โดยตรงภายในลำดับชั้นที่ซ้อนกันได้ อย่างไรก็ตาม เราสามารถใช้สัญลักษณ์เครื่องหมายและ (&) เพื่อแก้ไขปัญหานี้ได้ ดังที่แสดงในตัวอย่างที่ให้ไว้
.container {
background-color: red;
& h1 {
color: yellow;
}
}
การรวมสัญลักษณ์แอมเพอร์แซนด์ ("&") ก่อนการกำหนด"h1"ทำหน้าที่เป็นตัวบ่งชี้ของตัวเลือกพาเรนต์ ดังนั้นจึงเป็นการระบุการกำหนดเป้าหมายขององค์ประกอบ"h1"ลำดับถัดมาทั้งหมดที่อยู่ในองค์ประกอบ"div"ที่ครอบคลุม การดำเนินการโค้ดนี้ภายในเว็บเบราว์เซอร์จะทำให้การแสดงส่วนหัว"h1"หลายรายการจัดเรียงในแนวตั้งต่อเนื่องกัน ตามด้วยย่อหน้าของข้อความที่สอดคล้องกัน
เมื่อพิจารณาว่าเครื่องหมายและ & ทำหน้าที่เป็นสัญกรณ์สำหรับการระบุองค์ประกอบหลัก จึงเป็นไปได้ที่จะเลือกระบุคลาสหลอกและองค์ประกอบหลอกขององค์ประกอบในลักษณะที่อธิบายไว้ด้านล่าง:
.parent1{
&:hover{
background-color: red;
}
&::before{
content:"Here is a pseudo element.";
}
}
การสืบค้นสื่อซ้อน
ก่อนที่จะมีการซ้อน CSS เพื่อใช้รูปแบบที่มีเงื่อนไขตามความกว้างของเบราว์เซอร์ เราจำเป็นต้องใช้เทคนิคเช่นที่กล่าวมาข้างต้น:
p {
color:black;
}
@media (min-width:750px) {
p {
color:gray;
}
}
เมื่อเว็บเบราว์เซอร์ประมวลผลหน้าและคำนวณขนาด เว็บจะสร้างสีขององค์ประกอบย่อหน้าตามขนาดของหน้าต่างเบราว์เซอร์ ในกรณีที่ความกว้างของเบราว์เซอร์เกิน 750 พิกเซล เฉดสีเทาจะถูกใช้เป็นสีพื้นหลังสำหรับแท็ก ในทางกลับกัน หากความกว้างน้อยกว่าเกณฑ์นี้ จะใช้สีดำที่กำหนดไว้ล่วงหน้า
แม้ว่าวิธีการนี้อาจใช้งานได้อย่างมีประสิทธิภาพ แต่ก็สามารถนำไปสู่การเพิ่มจำนวนของโค้ดที่ยุ่งยากมากขึ้นโดยเฉพาะอย่างยิ่งเมื่อพยายามใช้ความแตกต่างทางโวหารต่างๆ ภายใต้เกณฑ์เฉพาะ โชคดีที่การถือกำเนิดขึ้นของความสามารถในการสรุป #### Media Queries โดยตรงภายในแอตทริบิวต์สไตล์ของแต่ละองค์ประกอบ เราสามารถปรับปรุงและรวมตรรกะการนำเสนอในลักษณะที่กระชับและเชื่อมโยงกันมากขึ้น
p {
color:black;
@media (min-width:750px) {
color:gray;
}
}
การใช้งานปัจจุบันนำเสนอวิธีการที่ตรงไปตรงมามากขึ้นเมื่อเทียบกับรุ่นก่อน โดยโดดเด่นด้วยความสามารถในการอ่านที่เพิ่มขึ้นซึ่งช่วยให้ผู้ใช้สามารถแยกแยะลักษณะการใช้งานของเบราว์เซอร์ตามคิวรีสื่อและโครงสร้างขององค์ประกอบหลักที่อยู่โดยรอบ
ออกแบบเว็บไซต์ด้วย CSS Nested Styles
มีความจำเป็นอย่างยิ่งที่จะต้องใช้ความรู้ที่ได้รับมาจนถึงตอนนี้โดยการสร้างเว็บไซต์พื้นฐานและใช้ฟังก์ชันการจัดรูปแบบลำดับชั้นภายใน CSS ในการเริ่มต้นกระบวนการนี้ ให้สร้างไดเร็กทอรีและกำหนดชื่อเรื่องที่คุณเลือก ภายในไดเร็กทอรีนี้ ให้สร้างไฟล์สองไฟล์-“index.html” และ “style.css”
ในไฟล์ HTML หลัก จำเป็นต้องมีตัวยึดตำแหน่งหรือโค้ดโครงร่างที่มีโครงสร้างพื้นฐานและฟังก์ชันการทำงานสำหรับหน้าเว็บ เทมเพลตนี้มักเรียกว่าโค้ด"สำเร็จรูป"ตั้งค่ารากฐานสำหรับองค์ประกอบที่เหลือในหน้าที่จะสร้างขึ้น ประกอบด้วยส่วนประกอบมาตรฐาน เช่น ส่วนหัว เมตาแท็ก สไตล์ชีต และสคริปต์ที่จำเป็นสำหรับการแสดงผลและการโต้ตอบที่เหมาะสม ด้วยการรวมโค้ดพื้นฐานนี้ไว้ในไฟล์ index.htm นักพัฒนาสามารถรับประกันความสอดคล้องกันในทุกหน้า และเพิ่มความคล่องตัวให้กับเวิร์กโฟลว์โดยหลีกเลี่ยงงานที่ซ้ำซาก
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Simple Website</title>
</head>
<body>
<div class="container">
<div class="article">
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h1>
<div class="meta-data">
<span class="author">David Uzondu</span>
<span class="time">3 hours ago</span>
</div>
<div>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo ut
quasi hic sint dolorum sapiente magni ratione? Suscipit commodi ad,
asperiores nostrum natus aperiam et alias, officiis dolorum ipsa vero
minima consequatur recusandae quasi aliquid quibusdam ducimus eaque!
Excepturi voluptas eveniet nemo, earum doloribus, soluta architecto
iste repellat autem aspernatur beatae ut quis odio est voluptates sunt
qui rerum blanditiis minus! Rerum labore nobis, odit quod amet dolorum
quae laudantium.
</div>
</div>
<div class="sidebar">
<h2>Trending Articles</h2>
<h4>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit, iusto ipsum!</h4>
</div>
</div>
</body>
</html>
บล็อกรหัสที่อยู่ก่อนหน้าบล็อกนี้แสดงการจัดรูปแบบสำหรับเว็บไซต์อินเทอร์เน็ตที่เผยแพร่ข่าวเลียนแบบ ดังนั้น เข้าถึงเอกสาร style.css และเพิ่มคำสั่งที่ตามมา:
.container {
display: flex;
gap: 25px;
@media(max-width:750px) {
flex-direction: column;
}
.article{
width:90%;
}
& div:nth-child(3) {
text-align: justify;
}
& span {
color: rgb(67, 66, 66);
&:nth-child(1)::before {
font-style: italic;
content: "Written by ";
}
&:nth-child(2) {
font-style: italic;
&::before {
content: " ~ ";
}
}
}
.meta-data {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: solid 1px;
}
}
บล็อกโค้ดดังกล่าวใช้เทคนิค CSS ขั้นสูงสำหรับการปรับแต่งภาพที่ครอบคลุมของเนื้อหาเว็บ ตัวเลือกที่ใช้ซึ่งแสดงโดย".container"ทำหน้าที่เป็นรากฐานสำหรับองค์ประกอบการออกแบบอื่นๆ ทั้งหมด การเลือกเฉพาะนี้อาจเข้าถึงและจัดการได้ง่ายผ่านการใช้สัญลักษณ์เครื่องหมายและ (&) เมื่อดำเนินการภายในเว็บเบราว์เซอร์ เราควรสังเกตเลย์เอาต์ที่สวยงามซึ่งประกอบด้วยองค์ประกอบต่างๆ ที่จัดเรียงอย่างพิถีพิถันตามข้อกำหนดที่กำหนดไว้ล่วงหน้า
คุณยังต้องการตัวประมวลผลล่วงหน้า CSS หรือไม่
ในขณะที่การถือกำเนิดของรูปแบบที่ซ้อนกันภายใน CSS แบบเนทีฟอาจแนะนำยูทิลิตี้ที่ลดลงสำหรับตัวประมวลผลล่วงหน้าของ CSS สิ่งสำคัญคือต้องจำไว้ว่าตัวประมวลผลล่วงหน้าเหล่านี้มีมากกว่าความสามารถในการซ้อนกัน สิ่งที่รวมอยู่ในบทบัญญัติของพวกเขาคือการสร้างเช่นลูป มิกซ์อิน และฟังก์ชัน ทำให้ทรัพยากรเหล่านี้ขาดไม่ได้นอกเหนือจากการจัดโวหารเพียงอย่างเดียว ทางเลือกระหว่างการใช้ตัวประมวลผลล่วงหน้า CSS หรือการละทิ้งตัวประมวลผลหนึ่งขึ้นอยู่กับความต้องการและความชอบเฉพาะของแต่ละสถานการณ์และการตั้งค่าของนักพัฒนา