ใช้ CSS ปรับหน้าเว็บจูมล่า ด้วยตัวอย่างโค้ดง่ายๆนี้

บทนำ

ผมชอบที่เทคโนโลยีต่างๆมันตระหนักถึงสิ่งที่เกิดขึ้นรอบตัวพวกมัน แล้วก็พัฒนาเพื่อทําให้เทคโนโลยีของตัวเองดีขึ้นโดยดูว่าพวกเขาสามารถทําแบบเดียวกับเทคโนโลยีใหม่ๆรอบตัวพวกเขาได้หรือไม่
JavaScript เคยถูกใช้ทำงานหลายๆอย่างด้วยศักยภาพของมัน จากนั้นวานิลลาจาวาสคริปต์ก็สรุปแนวคิดเหล่านี้ต่อๆไป เมื่อครั้งหนึ่ง jQuery เป็นสิ่งจําเป็นเพื่อเร่งการพัฒนาตอนนี้ก็ตามที่เว็บไซต์บอก https://youmightnotneedjquery.com/ (ไม่จำเป็นแล้ว)
โลกของ CSS นั้นก็คล้ายกัน เทคโนโลยีอย่าง LESS, Sass, SCSS และ Stylus เติบโตขึ้นเพื่อขยายความสามารถของ CSS: แต่ CSS ไม่ใช่ทรัพยากรแบบคงที่และได้นําการปรับปรุงหลายอย่างที่พวกเขาเสนอมาใช้เป็นแกนหลัก
มาลองดูการเปลี่ยนแปลง CSS ล่าสุดบางส่วนและดูว่าเราสามารถขยายความสามารถของเราเองด้วยตัวเลือกใหม่เหล่านี้ได้หรือไม่

ตัวเลือก :has()

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

/* Styles the <li> only if it contains a link with the class .active */

li:has(a.active) {

  background-color: lightblue;

}

ตัวอย่างนี้แสดงให้เห็นว่าสามารถใช้ :has() เพื่อปรับแต่งตามเงื่อนไขตามการมีอยู่ขององค์ประกอบนั้นๆภายในองค์ประกอบอื่นได้อย่างไร ซึ่งช่วยเพิ่มความคล่องแคล่วและความจําเพาะของตัวเลือก CSS
นี่เป็นอีกตัวอย่างง่ายๆ

/* Selects an <h1> heading with a <p> element that immediately follows the <h1> and applies the style to <h1> */

h1:has(+ p) {

  margin-bottom: 0;

}

The :has() pseudo-class takes on the specificity of the most specific selector in its arguments, similar to :is() and :not().

ข้อจำกัดของตัวเลือก :has()

• หาก :has() ไม่ได้รับการสนับสนุนในเบราว์เซอร์ บล็อกตัวเลือกทั้งหมดจะล้มเหลว เว้นแต่จะอยู่ในรายการตัวเลือกที่ให้อภัย เช่น :is() หรือ :where()
• :has() ไม่สามารถซ้อนกันภายใน :has() อื่นได้เนื่องจากการสืบค้นแบบวนซ้ําที่อาจเกิดขึ้น
• องค์ประกอบหลอกไม่ใช่ตัวเลือกที่ถูกต้องภายใน :has() และองค์ประกอบหลอกไม่สามารถเป็นจุดยึดสําหรับ :has()

พิจารณาข้อมูลโค้ด HTML ต่อไปนี้:

<section>

  <article>

    <h1>Morning Times</h1>

    <p>Lorem ipsum dolor sit amet...</p>

  </article>

  <article>

    <h1>Morning Times</h1>

    <h2>Delivering you news every morning</h2>

    <p>Lorem ipsum dolor sit amet...</p>

  </article>

</section>

กฎ CSS ต่อไปนี้จะเลือก<h1>องค์ประกอบทันทีตามด้วย<h2>องค์ประกอบ (ระบุโดยตัวรวมพี่น้องถัดไป +):

h1:has(+ h2) {

  margin: 0 0 0.25rem 0;

}

หากไม่มี :has() คุณจะไม่สามารถใช้ตัวเลือก CSS เพื่อเลือกพี่น้องก่อนหน้าของประเภทอื่นหรือองค์ประกอบหลักได้
คุณสามารถขยายไปยังหลายๆองค์ประกอบได้:

h1:has(+ h2, + p) {

  /* Styles for h1 followed by h2 or p */

}

สําหรับตัวอย่างเพิ่มเติมและรายละเอียดความเข้ากันได้ ให้เลือก https://caniuse.com/css-has

CSS Nesting - ทําให้เป็นระเบียบเรียบร้อย

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

article {

  color: black;

  background-color: white;

  

  h2 {

    font-size: 1.5em;

  }

  p {

    font-size: 1em;

    &.lead {

      font-weight: bold;

    }

  }

  @media (max-width: 600px) {

    background-color: #eee;

    

    h2, p {

      text-align: center;

    }

  }

}​

ประวัติเบื้องหลังการทํา CSS Nesting

การพัฒนา CSS nesting เป็นความร่วมมือที่นําโดย CSS Working Group ซึ่งเป็นส่วนหนึ่งของ W3C (World Wide Web Consortium) ซึ่งดูแลมาตรฐานเว็บ แนวคิดนี้ยืมมาจากตัวประมวลผลล่วงหน้า CSS เช่น SASS และ LESS ซึ่งรองรับการซ้อนมานานหลายปี

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

ข้อดี

การใช้การซ้อน CSS มีข้อดีหลายประการ รวมถึงความสามารถในการอ่านและการจัดระเบียบที่ดีขึ้นโดยอนุญาตให้จัดกลุ่มสไตล์ต่างๆที่เกี่ยวข้องเข้าด้วยกัน ช่วยลดความจําเป็นในการเลือกซ้ำ ทําให้สไตล์ชีตสามารถบํารุงรักษาและรัดกุมมากขึ้น โครงสร้างนี้สะท้อนโครงสร้าง HTML ทําให้ง่ายต่อการเข้าใจความสัมพันธ์ระหว่างสไตล์และองค์ประกอบของเอกสาร นอกจากนี้ การซ้อนกันสามารถนําไปสู่การจัดแต่งขั้นตอนการประมวลผลที่มีประสิทธิภาพมากขึ้น โดยเฉพาะอย่างยิ่งเมื่อทํางานกับเลย์เอาต์ที่ซับซ้อนหรือการออกแบบตามส่วนประกอบ
สําหรับรายละเอียดการสนับสนุนและการใช้งานล่าสุดดูได้ที่ https://caniuse.com/css-nesting

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

การตัดข้อความ CSS: ความสมดุล - ทําให้ข้อความอ่านง่ายขึ้น

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

p {

  text-wrap: balance;

}

การตัดข้อความ CSS: ควรใช้คุณสมบัติสมดุลอย่างรอบคอบ
หลีกเลี่ยงในกรณีที่จําเป็นต้องควบคุมเค้าโครงข้อความอย่างแม่นยํา เนื่องจากมีจุดมุ่งหมายเพื่อความสมดุลที่อาจไม่เหมาะกับทุกความต้องการในการออกแบบ
คุณสมบัตินี้ไม่เหมาะสําหรับบล็อกข้อความที่มีความยาวซึ่งการตัดแบบดั้งเดิมอาจจะดีกว่าโดยไม่ส่งผลกระทบต่อความสามารถในการอ่าน
นอกจากนี้ต้องพิจารณาผลกระทบด้านประสิทธิภาพในเลย์เอาต์ที่ซับซ้อนหรือเมื่อใช้กับข้อความจํานวนมากโดยไม่เลือกปฏิบัติด้วย เนื่องจากการปรับสมดุลอาจส่งผลต่อความเร็วในการแสดงผล
สําหรับรายละเอียดการสนับสนุนและการใช้งานล่าสุดดูได้ที่นี่ https://caniuse.com/css-text-wrap-balance

  คำสั่งตัวเก็บข้อมูล

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

.card {

  container-type: inline-size;

}

.card:container(width >= 500px) {

  background: lightblue;

}

.card:container(width < 500px) {

  background: lavender;

}

ข้อมูลโค้ด CSS นี้ทําให้องค์ประกอบ .card มีสีพื้นหลังที่แตกต่างกันขึ้นอยู่กับความกว้างของตัวมันเอง ไม่ใช่ความกว้างของหน้าจอ

การใช้งานพื้นฐาน

ขั้นแรก ให้กําหนดตัวเก็บข้อมูลโดยระบุประเภทตัวเก็บข้อมูล สิ่งนี้ทําให้องค์ประกอบสามารถเป็นตัวเก็บข้อมูลของแบบสอบการตัวเก็บข้อมูลได้

.container {

 container-type: inline-size;

}

จากนั้นใช้@container เพื่อปรับใช้สไตล์ตามขนาดของตัวเก็บข้อมูล:

@container (min-width: 500px) {

 .box {

 background: lightblue;

 padding: 2rem;

 }

}

@container (max-width: 499px) {

 .box {

 background: lavender;

 padding: 1rem;

 }

}

ตัวอย่างขั้นสูง: ส่วนประกอบการ์ด

ลองนึกภาพส่วนประกอบการ์ดที่เปลี่ยนเค้าโครงตามขนาดของมัน:

.card {

 container-type: inline-size;

}

.card:container(width >= 600px) {

 display: flex;

 gap: 20px;

}

.card img {

 max-width: 100%;

 height: auto;

}

@container (min-width: 600px) {

 .card-content {

 flex: 1;

 }

}

การตั้งค่านี้ช่วยให้ส่วนประกอบของ .card เปลี่ยนจากเค้าโครงแนวตั้งเป็นแนวนอนได้เมื่อมีความกว้างอย่างน้อย 600px ทําให้การออกแบบมีความยืดหยุ่นและตอบสนองได้ดียิ่งขึ้น

 การรองรับ กริด เข้ากับ คำสั่งตัวเก็บข้อมูล

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

.grid {

 container-type: inline-size;

 display: grid;

}

@container (min-width: 500px) {

 .grid {

 grid-template-columns: repeat(2, 1fr);

 gap: 20px;

 }

}

@container (min-width: 800px) {

 .grid {

 grid-template-columns: repeat(3, 1fr);

 }

}

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

คำสั่งตัวเก็บข้อมูลและอัตราส่วนภาพ

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

.aspect-ratio-box {

 container-type: inline-size;

 aspect-ratio: 16 / 9;

 background: lightcoral;

}

@container (min-width: 400px) {

 .aspect-ratio-box {

 aspect-ratio: 4 / 3;

 }

}

ข้อมูลโค้ดนี้จะปรับอัตราส่วนกว้างยาวของ .aspect-ratio-box ตามความกว้างของตัวเก็บข้อมูล ซึ่งแสดงความยืดหยุ่นของ คำสั่งตัวเก็บข้อมูล ในการจัดการอัตราส่วนกว้างยาวที่ตอบสนอง
หากต้องการตรวจสอบการสนับสนุนเบราว์เซอร์ปัจจุบันสําหรับ คำสั่งตัวเก็บข้อมูล ดูได้ที่นี่https://caniuse.com/css-container-queries

ในอนาคตการพัฒนาที่เกี่ยวข้องกับ คำสั่งตัวเก็บข้อมูล อาจรวมถึงการควบคุมบริบทตัวเก็บข้อมูลที่เหมาะสมยิ่งขึ้นหรือการรวมเข้ากับโมเดลเค้าโครงอื่น ๆ เช่น Grid หรือ Flexbox ซึ่งช่วยปรับปรุงชุดเครื่องมือสําหรับการออกแบบที่ตอบสนอง

@Layer - การจัดการสไตล์ของคุณ

กฎ CSS @layer เป็นการพัฒนาล่าสุดในโลกของการออกแบบเว็บ โดยมุ่งเป้าไปที่การปรับปรุงวิธีการจัดการ จัดระเบียบ และนําไปใช้สไตล์ชีต
คุณลักษณะใหม่นี้ทำให้วิธีการกําหนดเลเยอร์ของสไตล์อย่างชัดเจนทําให้สามารถเรียงซ้อนกฎ CSS ได้อย่างตรงไปตรงมาและปราศจากข้อขัดแย้ง

ทําความเข้าใจกับกฎของ@layer

กฎ @layer ช่วยให้นักพัฒนาสามารถจัดกลุ่มกฎ CSS เป็นเลเยอร์ที่แตกต่างกันได้ เลเยอร์เหล่านี้จะเป็นไป ตามลําดับเฉพาะ ซึ่งเบราว์เซอร์ใช้เพื่อพิจารณาว่าสไตล์ใดมีการมีลำดับเหนือกว่าเมื่อเกิดข้อขัดแย้ง วิธีการนี้ช่วยลดความยุ่งยากในการจัดการสไตล์ชีตที่ซับซ้อน โดยเฉพาะอย่างยิ่งในโครงการขนาดใหญ่หรือเมื่อรวมสไตล์ของบุคคลที่สาม

การใช้กฎ@layer

คุณใช้คำสั่งเลเยอร์แล้วเพิ่มสไตล์ได้ดังนี้:

@layer base {

 body {

 font-family: sans-serif;

 line-height: 1.6;

 }

}

@layer themes {

 .dark-mode {

 background-color: #333;

 color: #fff;

 }

}

@layer components {

 .button {

 padding: 10px 15px;

 border-radius: 5px;

 }

}

ในตัวอย่างนี้ สไตล์จะถูกจัดระเบียบเป็นสามชั้น: ฐาน ธีม และส่วนประกอบ เบราว์เซอร์ใช้เลเยอร์เหล่านี้ตามลําดับที่ตั้งไว้ เว้นแต่จะระบุไว้เป็นอย่างอื่น

เลเยอร์ที่แทนที่

คุณสามารถใช้กฎ @import เพื่อนําเข้าสไตล์ชีตภายนอกไปยังเลเยอร์ที่ระบุได้:

@layer base;

@import url("base-styles.css") layer(base);

@import url("theme.css") layer(themes);

โค้ดนี้จะนําสไตล์ภายนอกเข้าไปยังเลเยอร์พื้นฐานและธีม เพื่อให้มั่นใจว่าน้ำตกเการเรียงซ้อนนั้นเป็นไปตามลําดับที่ตั้งไว้

การตั้งเลเยอร์

ควบคุมลําดับของเลเยอร์อย่างชัดเจนโดยใช้กฎ @layer ที่มีหลายชั้น:

@layer reset, base, themes, components;

ชุดคำสั่งนี้กําหนดลําดับการเรียงซ้อนสําหรับเลเยอร์ โดยไม่คํานึงว่าจะถูกกําหนดไว้ที่ใดใน CSS

การรองรับเบราว์เซอร์

หากต้องการตรวจสอบการการองรับเบราว์เซอร์ปัจจุบันสําหรับคำสั่งตัวเก็บข้อมูลได้ที่นี่ https://caniuse.com/css-cascade-layers

ทิศทางในอนาคต

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

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

หากคุณสนใจเกี่ยวกับ CSS เพิ่มเติมสามารถศึกษาเพิ่มเติมได้ที่นี่ หรือหากว่าคุณสนใจเกี่ยวกับจูมล่าเพิ่มเติม สามารถดูได้{--mlinkarticle=9703--}ที่นี่ หรือสามารถแวะชมส่วนเสริมต่างๆ ของจูมล่าได้ที่ Mindphp.com

• ดาวน์โหลดจูมล่า