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

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

ทำความเข้าใจความจำเป็นของการกำหนดสไตล์ตามเงื่อนไข

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

แนวทางแบบดั้งเดิม แม้จะใช้งานได้ แต่ก็มักจะนำไปสู่:

• Media Queries ที่ยืดยาว: Media queries ที่ซ้อนกันและซ้ำซ้อนอาจกลายเป็นเรื่องยากต่อการจัดการและอ่าน โดยเฉพาะสำหรับเลย์เอาต์ที่ซับซ้อน
• การพึ่งพา JavaScript มากเกินไป: การใช้ JavaScript เพื่อปรับเปลี่ยนสไตล์บางครั้งอาจส่งผลกระทบต่อประสิทธิภาพและเพิ่มความซับซ้อนอีกชั้นหนึ่งในการจัดการ
• การเลือกใช้ที่จำกัด: การใช้สไตล์ตามเงื่อนไขที่ซับซ้อนหรือคุณสมบัติเฉพาะของเบราว์เซอร์เป็นเรื่องท้าทายที่จะทำให้สำเร็จได้ด้วย CSS เพียงอย่างเดียว

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

แนะนำกฎ CSS @when

กฎ @when เป็น at-rule แบบกลุ่มตามเงื่อนไขที่มีประสิทธิภาพซึ่งช่วยให้คุณสามารถใช้บล็อกของสไตล์ได้ก็ต่อเมื่อเงื่อนไขที่ระบุมีค่าเป็นจริง มันถูกออกแบบมาเพื่อทำงานร่วมกับกฎ @nest (หรือโดยนัยภายใน CSS ที่ซ้อนกัน) ทำให้มีความหลากหลายอย่างไม่น่าเชื่อสำหรับการสร้างสไตล์ชีตที่ซับซ้อนและรับรู้บริบทได้ดี ลองนึกภาพว่ามันเป็นเวอร์ชันที่ซับซ้อนและผสานรวมได้ดีกว่าของ media queries แต่มีการใช้งานที่กว้างขวางกว่า

ไวยากรณ์และโครงสร้าง

ไวยากรณ์พื้นฐานของกฎ @when เป็นดังนี้:

            
@when <condition> {
  /* CSS declarations to apply when the condition is true */
}

            

              
                Copy
              
            
          

ส่วน <condition> สามารถเป็นนิพจน์ได้หลากหลายรูปแบบ ได้แก่:

• Media Queries: กรณีการใช้งานที่พบบ่อยที่สุด ใช้แทนที่หรือเสริมกฎ @media แบบดั้งเดิม
• Container Queries: การใช้สไตล์ตามขนาดของคอนเทนเนอร์หลักที่เฉพาะเจาะจงแทนที่จะเป็น viewport
• Feature Queries: การตรวจสอบการรองรับคุณสมบัติ CSS หรือความสามารถของเบราว์เซอร์ที่เฉพาะเจาะจง
• Custom State Queries: (มาตรฐานที่กำลังจะเกิดขึ้น) ช่วยให้สามารถใช้ตรรกะตามเงื่อนไขที่เป็นนามธรรมมากขึ้นโดยอิงจากสถานะที่กำหนดเอง

เมื่อใช้ภายใน CSS nesting กฎ @when จะมีผลกับ selectors ของบริบทหลักของมัน นี่คือจุดที่พลังที่แท้จริงของมันสำหรับการสร้าง CSS ที่เป็นโมดูลและบำรุงรักษาง่ายได้เปล่งประกายออกมา

@when vs. @media

แม้ว่า @when จะสามารถครอบคลุม media queries ได้อย่างแน่นอน แต่มันมีไวยากรณ์ที่ยืดหยุ่นและทรงพลังกว่า โดยเฉพาะเมื่อใช้ร่วมกับการซ้อน (nesting) ลองพิจารณาสิ่งนี้:

            
/* Traditional Media Query */
.card {
  padding: 1rem;
}

@media (min-width: 768px) {
  .card {
    padding: 2rem;
  }
}

/* Using @when with nesting */
.card {
  padding: 1rem;

  @when (min-width: 768px) {
    padding: 2rem;
  }
}

            

              
                Copy
              
            
          

เวอร์ชันที่ใช้ @when มักจะอ่านง่ายกว่าและเก็บสไตล์ที่เกี่ยวข้องกันไว้ด้วยกัน นอกจากนี้ @when ยังถูกออกแบบมาให้ขยายขีดความสามารถได้มากขึ้น ทำให้สามารถรวมเงื่อนไขและประเภทของ query ในอนาคตได้

กรณีการใช้งานหลักและการประยุกต์ใช้จริง

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

1. การปรับปรุง Responsive Design

นี่อาจเป็นการประยุกต์ใช้ @when ที่เห็นผลทันทีและมีผลกระทบมากที่สุด นอกเหนือจากการปรับความกว้างของ viewport อย่างง่ายแล้ว มันยังช่วยให้ควบคุมได้ละเอียดยิ่งขึ้น

เลย์เอาต์ที่ปรับเปลี่ยนได้สำหรับอุปกรณ์ที่หลากหลาย

ลองจินตนาการถึงคอมโพเนนต์แสดงสินค้าที่ต้องปรับเปลี่ยนเลย์เอาต์ตามขนาดหน้าจอ ด้วย @when และการซ้อนกัน สิ่งนี้จะกลายเป็นระเบียบอย่างยิ่ง:

            
.product-display {
  display: flex;
  flex-direction: column;
  gap: 1rem;

  @when (min-width: 600px) {
    /* On medium screens, arrange items horizontally */
    flex-direction: row;
    align-items: center;
  }

  @when (min-width: 1024px) {
    /* On large screens, introduce more spacing and a different alignment */
    gap: 2rem;
    align-items: flex-start;
  }
}

.product-image {
  /* Default styles */
  max-width: 100%;

  @when (min-width: 600px) {
    /* Adjust image size on wider screens */
    max-width: 40%;
  }
}

            

              
                Copy
              
            
          

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

การกำหนดสไตล์ตามการวางแนวของอุปกรณ์

สำหรับอุปกรณ์เช่นแท็บเล็ตและสมาร์ทโฟน การวางแนวมีความสำคัญ @when สามารถจัดการสิ่งนี้ได้:

            
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;

  @when (orientation: landscape) {
    /* Wider view in landscape */
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }
}

            

              
                Copy
              
            
          

2. ความชอบของผู้ใช้และการเข้าถึงได้

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

การเคารพการตั้งค่าลดการเคลื่อนไหว

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

            
.animated-element {
  animation: subtle-float 5s ease-in-out infinite;

  @when (prefers-reduced-motion: reduce) {
    animation: none;
    opacity: 1;
  }
}

@keyframes subtle-float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

            

              
                Copy
              
            
          

สิ่งนี้ช่วยให้แน่ใจว่าผู้ใช้ทั่วโลกที่เปิดใช้งานการตั้งค่าลดการเคลื่อนไหวจะไม่ประสบกับแอนิเมชันที่อาจทำให้รู้สึกไม่สบายหรือเสียสมาธิ

โหมดความคมชัดสูง

ในทำนองเดียวกัน ผู้ใช้อาจชอบธีมที่มีความคมชัดสูงเพื่อการอ่านที่ดีขึ้น

            
.ui-button {
  background-color: #007bff;
  color: white;
  border: 1px solid #007bff;

  @when (prefers-contrast: more) {
    background-color: black;
    color: yellow;
    border: 2px solid yellow;
  }
}

            

              
                Copy
              
            
          

สิ่งนี้ช่วยให้แน่ใจว่าองค์ประกอบ UI ที่สำคัญยังคงมองเห็นได้ชัดเจนและแยกแยะได้สำหรับผู้ใช้ในภูมิภาคต่างๆ ที่อาจต้องพึ่งพาการตั้งค่าความคมชัดสูงเนื่องจากความบกพร่องทางการมองเห็นหรือสภาพแวดล้อม

การปรับขนาดตัวอักษร

การเคารพขนาดตัวอักษรที่ผู้ใช้ต้องการเป็นแนวปฏิบัติพื้นฐานด้านการเข้าถึงได้

            
.article-content {
  font-size: 1rem;
  line-height: 1.6;

  @when (text-size-adjust: none) {
    /* Optionally override default browser adjustments if needed, */
    /* but generally respecting user settings is preferred. */
    /* This example shows where you might apply specific adjustments if necessary. */
  }

  /* While not a direct @when case for the declaration itself, */
  /* you can use @when to alter spacing or layout based on inferred size needs */
  @when (font-size: 1.2rem) {
    /* Example: slightly increase line spacing if user has opted for larger text */
    line-height: 1.7;
  }
}

            

              
                Copy
              
            
          

โดยการพิจารณา `text-size-adjust` และอาจปรับเปลี่ยนเลย์เอาต์ด้วย `@when` ตามขนาดตัวอักษรที่ต้องการ เราสามารถตอบสนองผู้ใช้ที่อาจมีความบกพร่องทางการมองเห็นหรือเพียงแค่ชอบข้อความขนาดใหญ่ ซึ่งเป็นความต้องการทั่วไปทั่วโลก

3. การผสานรวมกับ Container Queries

แม้ว่า @when จะสามารถใช้ media queries ได้ แต่การทำงานร่วมกันที่แท้จริงของมันคือกับ container queries สิ่งนี้ช่วยให้คอมโพเนนต์สามารถตอบสนองได้ด้วยตัวเอง โดยปรับตามขนาดของคอนเทนเนอร์หลักโดยตรง แทนที่จะเป็น viewport ทั้งหมด นี่เป็นการปฏิวัติสำหรับระบบการออกแบบและคอมโพเนนต์ที่ใช้ซ้ำได้ในบริบทที่หลากหลาย

ขั้นแรก คุณต้องสร้างบริบทของคอนเทนเนอร์:

            
.card-container {
  container-type: inline-size;
  container-name: card;
  width: 50%; /* Example width */
}

            

              
                Copy
              
            
          

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

            
.card-component {
  background-color: lightgrey;
  padding: 1rem;

  /* Styles relative to the container named 'card' */
  @when (inline-size < 300px) {
    /* Styles for narrow containers */
    .card-title {
      font-size: 1.1rem;
    }
    .card-content p {
      font-size: 0.9rem;
    }
  }

  @when (inline-size > 300px) {
    /* Styles for wider containers */
    .card-title {
      font-size: 1.5rem;
    }
    .card-content p {
      font-size: 1rem;
    }
  }
}

            

              
                Copy
              
            
          

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

4. การตรวจจับคุณสมบัติและการปรับปรุงแบบก้าวหน้า

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

การใช้ประโยชน์จากคุณสมบัติ CSS ใหม่ๆ

สมมติว่าคุณต้องการใช้คุณสมบัติ CSS ที่ล้ำสมัยเช่น aspect-ratio แต่ต้องการทางเลือกสำรองสำหรับเบราว์เซอร์รุ่นเก่า

            
.image-wrapper {
  /* Fallback for browsers that don't support aspect-ratio */
  padding-bottom: 66.66%; /* Simulates a 3:2 aspect ratio */
  position: relative;

  @when (aspect-ratio: 3 / 2) {
    /* Use the native aspect-ratio property if supported */
    aspect-ratio: 3 / 2;
    padding-bottom: 0;
  }
}

.image-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

            

              
                Copy
              
            
          

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

5. การปรับให้เหมาะสมกับสภาพเครือข่ายที่แตกต่างกัน (การใช้งานที่เป็นไปได้ในอนาคต)

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

เทคนิคขั้นสูงและแนวทางปฏิบัติที่ดีที่สุด

เพื่อควบคุมพลังของ @when ได้อย่างเต็มที่ ลองพิจารณาแนวทางปฏิบัติที่ดีที่สุดเหล่านี้:

การรวมเงื่อนไขด้วย and และ or

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

            
.special-section {
  background-color: #e0f7fa;
  padding: 1.5rem;

  /* Apply styles only on large screens AND when preferring a dark theme */
  @when (min-width: 1200px and prefers-color-scheme: dark) {
    background-color: #004d40;
    color: white;
  }

  /* Apply styles on medium screens OR when specifically requested */
  @when (min-width: 768px or user-select: all) {
    border: 2px dashed #ff9800;
  }
}

            

              
                Copy
              
            
          

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

ใช้ประโยชน์จาก CSS Nesting เพื่อการจัดระเบียบ

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

Progressive Enhancement คือหัวใจสำคัญ

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

พิจารณาถึงประสิทธิภาพ

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

ทดสอบบนอุปกรณ์และสภาพแวดล้อมที่หลากหลายทั่วโลก

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

การรองรับของเบราว์เซอร์และแนวโน้มในอนาคต

กฎ @when เป็นส่วนเสริมที่ค่อนข้างใหม่ในข้อกำหนดของ CSS การรองรับของเบราว์เซอร์กำลังเติบโตอย่างต่อเนื่อง โดยมีการนำไปใช้ในเบราว์เซอร์สมัยใหม่ จากการอัปเดตล่าสุด เบราว์เซอร์หลักๆ เช่น Chrome, Edge และ Firefox กำลังเริ่มให้การสนับสนุน ซึ่งมักจะอยู่เบื้องหลัง feature flags ในช่วงแรก

สิ่งสำคัญคือต้องติดตามข้อมูลล่าสุดเกี่ยวกับการรองรับของเบราว์เซอร์ผ่านแหล่งข้อมูลเช่น caniuse.com สำหรับโปรเจกต์ที่ต้องการความเข้ากันได้กับเบราว์เซอร์รุ่นเก่าในวงกว้าง ควรพิจารณาใช้ @when สำหรับการปรับปรุงและเตรียม fallback ที่แข็งแกร่งไว้

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

สรุป

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

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

เริ่มทดลองใช้ @when ในโปรเจกต์ของคุณวันนี้และปลดล็อกการควบคุมการออกแบบเว็บของคุณไปอีกระดับ!