เชี่ยวชาญกฎ @when ใน CSS: การประยุกต์ใช้สไตล์แบบมีเงื่อนไขเพื่อการออกแบบเว็บแบบไดนามิก

กฎ @when ของ CSS ซึ่งเป็นส่วนหนึ่งของข้อกำหนด CSS Conditional Rules Module Level 5 นำเสนอวิธีอันทรงพลังในการใช้สไตล์ตามเงื่อนไขต่างๆ โดยก้าวข้าม media queries แบบดั้งเดิม ทำให้สามารถควบคุมการจัดสไตล์ได้อย่างละเอียดมากขึ้นโดยอิงตามขนาดของคอนเทนเนอร์, custom properties หรือแม้กระทั่งสถานะขององค์ประกอบต่างๆ สิ่งนี้สามารถเพิ่มความสามารถในการตอบสนอง (responsiveness) และการปรับตัว (adaptability) ของการออกแบบเว็บของคุณได้อย่างมาก ซึ่งนำไปสู่ประสบการณ์ผู้ใช้ที่ดีขึ้นในอุปกรณ์และบริบทที่แตกต่างกัน

ทำความเข้าใจพื้นฐานของกฎ @when

โดยแก่นแท้แล้ว กฎ @when เป็นกลไกในการดำเนินการบล็อกของสไตล์ CSS ก็ต่อเมื่อตรงตามเงื่อนไขที่กำหนด ซึ่งคล้ายกับคำสั่ง if ในภาษาโปรแกรม เรามาดูไวยากรณ์กัน:

@when condition {
  /* กฎ CSS ที่จะใช้เมื่อเงื่อนไขเป็นจริง */
}

condition สามารถอิงตามปัจจัยต่างๆ ได้แก่:

• Container Queries: การจัดสไตล์องค์ประกอบตามขนาดขององค์ประกอบที่ครอบอยู่แทนที่จะเป็น viewport
• Custom States: การตอบสนองต่อการกระทำของผู้ใช้หรือสถานะของแอปพลิเคชัน
• CSS Variables: การใช้สไตล์ตามค่าของ CSS custom properties
• Range Queries: การตรวจสอบว่าค่าอยู่ในช่วงที่กำหนดหรือไม่

พลังของ @when อยู่ที่ความสามารถในการสร้างการจัดสไตล์แบบ component-based อย่างแท้จริง คุณสามารถสรุปรวมตรรกะการจัดสไตล์ไว้ในคอมโพเนนต์และให้แน่ใจว่ามันจะถูกนำไปใช้ก็ต่อเมื่อคอมโพเนนต์นั้นตรงตามเกณฑ์ที่กำหนด โดยไม่คำนึงถึงเลย์เอาต์ของหน้าเว็บโดยรอบ

การใช้ Container Queries ร่วมกับ @when

Container queries เป็นตัวเปลี่ยนเกมสำหรับการออกแบบที่ตอบสนอง (responsive design) มันช่วยให้องค์ประกอบต่างๆ สามารถปรับเปลี่ยนสไตล์ของตนเองได้ตามขนาดของคอนเทนเนอร์แม่ ไม่ใช่แค่ความกว้างของ viewport ซึ่งช่วยให้สามารถสร้างคอมโพเนนต์ที่ยืดหยุ่นและนำกลับมาใช้ใหม่ได้มากขึ้น ลองจินตนาการถึงคอมโพเนนต์การ์ดที่แสดงผลแตกต่างกันไป ขึ้นอยู่กับว่าจะวางไว้ในแถบด้านข้างที่แคบหรือในพื้นที่เนื้อหาหลักที่กว้าง กฎ @when ทำให้สิ่งนี้ง่ายอย่างไม่น่าเชื่อ

ตัวอย่าง Container Query พื้นฐาน

ขั้นแรก คุณต้องประกาศคอนเทนเนอร์ คุณสามารถทำได้โดยใช้คุณสมบัติ container-type:

.container {
  container-type: inline-size;
}

inline-size ทำให้คอนเทนเนอร์สามารถถูก query ได้ตามขนาดในแนวแกน inline (ความกว้างในโหมดการเขียนแนวนอน ความสูงในโหมดการเขียนแนวตั้ง) คุณยังสามารถใช้ size เพื่อ query ทั้งสองมิติ หรือ normal เพื่อไม่สร้าง query container

ตอนนี้ คุณสามารถใช้ @container (ซึ่งมักใช้ร่วมกับ @when) เพื่อใช้สไตล์ตามขนาดของคอนเทนเนอร์:

@container (min-width: 300px) {
  .card {
    flex-direction: row;
    align-items: center;
  }
  .card__image {
    width: 100px;
    height: 100px;
  }
}

@container (max-width: 299px) {
  .card {
    flex-direction: column;
    align-items: flex-start;
  }
  .card__image {
    width: 100%;
    height: auto;
  }
}

ในตัวอย่างนี้ เลย์เอาต์ของ .card จะเปลี่ยนไปตามความกว้างของคอนเทนเนอร์ เมื่อคอนเทนเนอร์มีความกว้างอย่างน้อย 300px การ์ดจะแสดงรูปภาพและข้อความเคียงข้างกัน แต่เมื่อแคบกว่านั้น ทั้งสองจะเรียงซ้อนกันในแนวตั้ง

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

@container card-container (min-width: 300px) {
  @when container(card-container) {
    .card {
      flex-direction: row;
      align-items: center;
    }
    .card__image {
      width: 100px;
      height: 100px;
    }
  }
}

@container card-container (max-width: 299px) {
  @when container(card-container) {
    .card {
      flex-direction: column;
      align-items: flex-start;
    }
    .card__image {
      width: 100%;
      height: auto;
    }
  }
}

ในกรณีนี้ `card-container` เป็นชื่อคอนเทนเนอร์ที่กำหนดด้วย `@container` และ `container(card-container)` ใน `@when` จะตรวจสอบว่าบริบทของคอนเทนเนอร์ที่ระบุนั้นทำงานอยู่หรือไม่ หมายเหตุ: การรองรับฟังก์ชัน `container()` และไวยากรณ์ที่แน่นอนอาจแตกต่างกันไปในแต่ละเบราว์เซอร์และเวอร์ชัน ควรตรวจสอบตารางความเข้ากันได้ของเบราว์เซอร์ก่อนนำไปใช้งาน

ตัวอย่างการใช้งานจริงในระดับนานาชาติ

• รายการสินค้า E-commerce: แสดงรายการสินค้าแตกต่างกันไปตามพื้นที่ว่างในตารางหน้าหมวดหมู่ คอนเทนเนอร์ขนาดเล็กอาจแสดงเฉพาะรูปภาพและราคาสินค้า ในขณะที่คอนเทนเนอร์ขนาดใหญ่อาจรวมคำอธิบายสั้นๆ และคะแนนรีวิว ซึ่งเป็นประโยชน์ในภูมิภาคต่างๆ ที่มีความเร็วอินเทอร์เน็ตและประเภทอุปกรณ์ที่หลากหลาย ทำให้สามารถปรับประสบการณ์ให้เหมาะสมที่สุดทั้งบนเดสก์ท็อประดับไฮเอนด์และการเชื่อมต่อมือถือแบนด์วิธต่ำในประเทศกำลังพัฒนา
• สรุปบทความข่าว: ปรับความยาวของสรุปบทความที่แสดงบนหน้าแรกของเว็บไซต์ข่าวตามความกว้างของคอนเทนเนอร์ ในแถบด้านข้างที่แคบ ให้แสดงเพียงหัวข้อและคำไม่กี่คำ ในพื้นที่เนื้อหาหลัก ให้แสดงสรุปที่มีรายละเอียดมากขึ้น ควรพิจารณาความแตกต่างทางภาษา ซึ่งบางภาษา (เช่น ภาษาเยอรมัน) มักจะมีคำและวลีที่ยาวกว่า ซึ่งส่งผลต่อพื้นที่ที่ต้องใช้สำหรับบทสรุป
• วิดเจ็ตบนแดชบอร์ด: ปรับเปลี่ยนเลย์เอาต์ของวิดเจ็ตบนแดชบอร์ดตามขนาดคอนเทนเนอร์ วิดเจ็ตขนาดเล็กอาจแสดงแผนภูมิอย่างง่าย ในขณะที่วิดเจ็ตขนาดใหญ่อาจรวมสถิติโดยละเอียดและส่วนควบคุม ปรับแต่งประสบการณ์แดชบอร์ดให้เหมาะกับอุปกรณ์และขนาดหน้าจอของผู้ใช้โดยเฉพาะ โดยคำนึงถึงความชอบทางวัฒนธรรมในการแสดงข้อมูลด้วยภาพ ตัวอย่างเช่น บางวัฒนธรรมอาจชอบแผนภูมิแท่งมากกว่าแผนภูมิวงกลม

การใช้ @when กับสถานะที่กำหนดเอง (Custom States)

Custom states ช่วยให้คุณสามารถกำหนดสถานะขององค์ประกอบได้เองและกระตุ้นการเปลี่ยนแปลงสไตล์ตามสถานะนั้นๆ ซึ่งมีประโยชน์อย่างยิ่งในเว็บแอปพลิเคชันที่ซับซ้อนซึ่ง pseudo-classes แบบดั้งเดิมของ CSS เช่น :hover และ :active นั้นไม่เพียงพอ แม้ว่า custom states ยังคงอยู่ระหว่างการพัฒนาในการใช้งานบนเบราว์เซอร์ แต่กฎ @when ก็เป็นช่องทางที่มีแนวโน้มที่ดีสำหรับการควบคุมสไตล์ตามสถานะเหล่านี้เมื่อการรองรับสมบูรณ์ขึ้น

ตัวอย่างเชิงแนวคิด (ใช้ตัวแปร CSS เพื่อจำลองสถานะ)

เนื่องจากการรองรับ custom states แบบเนทีฟยังไม่แพร่หลาย เราสามารถจำลองมันได้โดยใช้ตัวแปร CSS และ JavaScript

/* CSS */
.my-element {
  --is-active: 0;
  background-color: #eee;
}

@when var(--is-active) = 1 {
  .my-element {
    background-color: #aaf;
  }
}

/* JavaScript */
const element = document.querySelector('.my-element');
element.addEventListener('click', () => {
  element.style.setProperty('--is-active', element.style.getPropertyValue('--is-active') === '0' ? '1' : '0');
});

ในตัวอย่างนี้ เราใช้ตัวแปร CSS --is-active เพื่อติดตามสถานะขององค์ประกอบ โค้ด JavaScript จะสลับค่าของตัวแปรนี้เมื่อองค์ประกอบถูกคลิก จากนั้นกฎ @when จะใช้สีพื้นหลังที่แตกต่างกันเมื่อ --is-active เท่ากับ 1 แม้ว่านี่จะเป็นวิธีแก้ปัญหาเฉพาะหน้า แต่มันก็แสดงให้เห็นแนวคิดของการจัดสไตล์ตามเงื่อนไขโดยอิงจากสถานะ

กรณีการใช้งานในอนาคตที่เป็นไปได้ด้วย Custom States จริง

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

.my-element {
  /* สไตล์เริ่มต้น */
}

@when :state(my-custom-state) {
  .my-element {
    /* สไตล์เมื่อ custom state ทำงาน */
  }
}

จากนั้นคุณจะใช้ JavaScript เพื่อตั้งค่าและยกเลิก custom state:

element.states.add('my-custom-state'); // เปิดใช้งานสถานะ
element.states.remove('my-custom-state'); // ปิดใช้งานสถานะ

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

ข้อควรพิจารณาด้าน Internationalization และ Localization

• ภาษาที่เขียนจากขวาไปซ้าย (RTL): สามารถใช้ Custom states เพื่อปรับเลย์เอาต์และการจัดสไตล์ของคอมโพเนนต์สำหรับภาษา RTL เช่น ภาษาอาหรับและฮีบรู ตัวอย่างเช่น การสะท้อนเลย์เอาต์ของเมนูนำทางเมื่อสถานะ RTL ที่กำหนดทำงานอยู่
• การเข้าถึง (Accessibility): ใช้ custom states เพื่อเพิ่มคุณสมบัติการเข้าถึง เช่น การไฮไลต์องค์ประกอบที่ถูกโฟกัส หรือการให้คำอธิบายข้อความทางเลือกเมื่อสถานะการโต้ตอบของผู้ใช้ถูกกระตุ้น ตรวจสอบให้แน่ใจว่าการเปลี่ยนแปลงสถานะเหล่านี้สื่อสารไปยังเทคโนโลยีสิ่งอำนวยความสะดวกอย่างมีประสิทธิภาพ
• ความชอบด้านการออกแบบทางวัฒนธรรม: ปรับรูปลักษณ์ของคอมโพเนนต์ตามความชอบด้านการออกแบบทางวัฒนธรรม ตัวอย่างเช่น การใช้ชุดสีหรือชุดไอคอนที่แตกต่างกันตามสถานที่หรือภาษาของผู้ใช้

การทำงานกับตัวแปร CSS และ Range Queries

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

ตัวอย่าง: การสลับธีม

:root {
  --theme-color: #fff;
  --text-color: #000;
}

body {
  background-color: var(--theme-color);
  color: var(--text-color);
}

@when var(--theme-color) = #000 {
  body {
    --text-color: #fff;
  }
}

ในตัวอย่างนี้ ตัวแปร --theme-color ควบคุมสีพื้นหลังของ body เมื่อตั้งค่าเป็น #000 กฎ @when จะเปลี่ยน --text-color เป็น #fff เพื่อสร้างธีมมืด ผู้ใช้สามารถเปลี่ยนค่าของ --theme-color โดยใช้ JavaScript หรือโดยการตั้งค่าตัวแปร CSS ที่แตกต่างกันในสไตล์ชีตของผู้ใช้

Range Queries

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

@when (400px <= width <= 800px) {
  .element {
    /* สไตล์ที่ใช้เมื่อความกว้างอยู่ระหว่าง 400px ถึง 800px */
  }
}

อย่างไรก็ตาม ไวยากรณ์ที่แน่นอนและการรองรับ range queries ภายใน @when อาจแตกต่างกันไป ขอแนะนำให้ปรึกษาข้อกำหนดล่าสุดและตารางความเข้ากันได้ของเบราว์เซอร์ โดยทั่วไปแล้ว Container queries เป็นทางเลือกที่แข็งแกร่งและได้รับการสนับสนุนที่ดีกว่าสำหรับเงื่อนไขที่อิงตามขนาด

การเข้าถึงสำหรับทุกคน (Accessibility) และความพึงพอใจของผู้ใช้ทั่วโลก

• ธีมคอนทราสต์สูง: ใช้ตัวแปร CSS และกฎ @when เพื่อสร้างธีมคอนทราสต์สูงที่ตอบสนองผู้ใช้ที่มีความบกพร่องทางการมองเห็น อนุญาตให้ผู้ใช้ปรับแต่งชุดสีและขนาดตัวอักษรให้ตรงกับความต้องการเฉพาะของตน
• ลดการเคลื่อนไหว: เคารพความต้องการของผู้ใช้ในการลดการเคลื่อนไหวโดยใช้ตัวแปร CSS เพื่อปิดใช้งานแอนิเมชันและการเปลี่ยนภาพเมื่อผู้ใช้เปิดใช้งานการตั้งค่า "ลดการเคลื่อนไหว" ในระบบปฏิบัติการของตน สามารถใช้ media query prefers-reduced-motion ร่วมกับ @when เพื่อการควบคุมที่แม่นยำยิ่งขึ้น
• การปรับขนาดตัวอักษร: อนุญาตให้ผู้ใช้ปรับขนาดตัวอักษรของเว็บไซต์โดยใช้ตัวแปร CSS ใช้กฎ @when เพื่อปรับเลย์เอาต์และระยะห่างขององค์ประกอบให้เข้ากับขนาดตัวอักษรที่แตกต่างกัน เพื่อให้แน่ใจว่าทุกคนสามารถอ่านและใช้งานได้

แนวทางปฏิบัติที่ดีที่สุดและข้อควรพิจารณา

• ความเข้ากันได้ของเบราว์เซอร์: กฎ @when ยังค่อนข้างใหม่ และการรองรับของเบราว์เซอร์ยังไม่แพร่หลาย ควรตรวจสอบตารางความเข้ากันได้ของเบราว์เซอร์ทุกครั้งก่อนใช้งานในโปรดักชัน พิจารณาใช้ polyfills หรือวิธีแก้ปัญหาสำรองสำหรับเบราว์เซอร์รุ่นเก่า ณ ปลายปี 2024 การรองรับของเบราว์เซอร์ยังคงมีจำกัด และการพึ่งพา @container และการใช้ตัวแปร CSS อย่างรอบคอบร่วมกับ JavaScript fallback มักเป็นแนวทางที่ปฏิบัติได้จริงมากกว่า
• ความเฉพาะเจาะจง (Specificity): ระมัดระวังเรื่องความเฉพาะเจาะจงของ CSS เมื่อใช้กฎ @when ตรวจสอบให้แน่ใจว่าสไตล์ตามเงื่อนไขของคุณมีความเฉพาะเจาะจงเพียงพอที่จะลบล้างสไตล์อื่นที่ขัดแย้งกัน
• การบำรุงรักษา: ใช้ตัวแปร CSS และความคิดเห็น (comments) เพื่อทำให้โค้ดของคุณอ่านง่ายและบำรุงรักษาได้ง่ายขึ้น หลีกเลี่ยงการสร้างกฎตามเงื่อนไขที่ซับซ้อนเกินไปซึ่งเข้าใจและแก้ไขข้อบกพร่องได้ยาก
• ประสิทธิภาพ: แม้ว่ากฎ @when จะสามารถปรับปรุงประสิทธิภาพได้โดยการลดจำนวน CSS ที่ต้องแยกวิเคราะห์ แต่ก็ควรใช้อย่างรอบคอบ การใช้กฎตามเงื่อนไขมากเกินไปอาจส่งผลเสียต่อประสิทธิภาพ โดยเฉพาะในอุปกรณ์รุ่นเก่า
• Progressive Enhancement: ใช้ progressive enhancement เพื่อให้แน่ใจว่าเว็บไซต์ของคุณทำงานได้ดีแม้ว่าเบราว์เซอร์จะไม่รองรับกฎ @when ก็ตาม มอบประสบการณ์พื้นฐานที่ใช้งานได้สำหรับผู้ใช้ทุกคน แล้วจึงค่อยๆ เพิ่มประสิทธิภาพสำหรับเบราว์เซอร์ที่รองรับฟีเจอร์นี้

อนาคตของการกำหนดสไตล์แบบมีเงื่อนไข

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

ความก้าวหน้าเพิ่มเติมใน CSS Houdini และการกำหนดมาตรฐานของ custom states จะช่วยเพิ่มขีดความสามารถของ @when ให้มากขึ้น ทำให้สามารถควบคุมการจัดสไตล์ได้ละเอียดขึ้นและการผสานรวมกับ JavaScript เป็นไปอย่างราบรื่นยิ่งขึ้น

สรุป

กฎ @when ของ CSS นำเสนอวิธีที่ทรงพลังและยืดหยุ่นในการใช้สไตล์ตามเงื่อนไขโดยอิงจาก container queries, custom states, ตัวแปร CSS และเกณฑ์อื่นๆ แม้ว่าการรองรับของเบราว์เซอร์ยังอยู่ระหว่างการพัฒนา แต่มันก็เป็นเครื่องมือที่มีค่าในคลังอาวุธของคุณสำหรับการสร้างการออกแบบเว็บที่ไดนามิกและตอบสนองซึ่งปรับให้เข้ากับบริบทและความชอบของผู้ใช้ที่แตกต่างกันได้ ด้วยความเข้าใจในพื้นฐานของกฎ @when และการปฏิบัติตามแนวทางที่ดีที่สุด คุณจะสามารถปลดล็อกศักยภาพสูงสุดของมันและสร้างประสบการณ์ผู้ใช้ที่ยอดเยี่ยมได้อย่างแท้จริง อย่าลืมทดสอบอย่างละเอียดในเบราว์เซอร์และอุปกรณ์ต่างๆ เพื่อให้แน่ใจว่าเข้ากันได้และมีประสิทธิภาพสูงสุด

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