5 ข้อมูลโค้ด CSS ที่นักพัฒนาซอฟต์แวร์ฟรอนท์เอนด์ทุกคนควรทราบในปี 2024

CSS ที่ทรงพลัง เสถียร และคุ้มค่าที่พร้อมให้คุณใช้งานได้แล้ววันนี้

Adam Argyle

ผมเชื่อว่านักพัฒนาซอฟต์แวร์ส่วนหน้าทุกคนควรทราบว่า :has() ไม่ได้เป็นเพียง "ตัวเลือกหลัก" แต่ยังรวมถึงวิธีการและเหตุผลในการใช้ subgrid วิธีการซ้อนด้วยไวยากรณ์ CSS ในตัว วิธีการทำให้ เบราว์เซอร์ปรับสมดุลการตัดข้อความบรรทัดแรก และวิธีการใช้หน่วยการค้นหาคอนเทนเนอร์

โพสต์นี้เป็นส่วนต่อจากข้อมูลโค้ด CSS 6 รายการที่นักพัฒนาซอฟต์แวร์ส่วนหน้าทุกคนควรรู้ในปี 2023 ของปีที่แล้ว

CSS:has(.potential-beyond-being-a-parent-selector)

:has()

Browser Support

Source

:has() ได้เปิดตัวในเบราว์เซอร์หลักทั้งหมดเมื่อสิ้นปี 2023 ตัวเลือกใหม่นี้ดูเหมือนจะ เล็กและไม่มีอะไร แต่คุณจะประหลาดใจกับ Use Case ทั้งหมดที่ปลดล็อกได้ ไม่ว่าจะเป็นเกม การโต้ตอบ เลย์เอาต์ที่รับรู้เนื้อหา คอมโพเนนต์อัจฉริยะ และ อีกมากมายที่ Jhey ได้อธิบายไว้ในบทความนี้

แสดง 4 แผง โดยแต่ละแผงมีรูปภาพและคำบรรยาย
รูปภาพแต่ละรูปแสดงให้เห็นว่าสมองกำลังกระตุ้นพลังสมองมากขึ้นเรื่อยๆ แผงแรกคือ
says :has() แผงที่ 2 คือ figure:has(caption) เป็นตัวเลือกหลัก
แผงที่ 3 ระบุ .layout:has(> :nth-child(5)) เป็นตัวเลือกจำนวน
แผงที่ 4 ระบุ html:has(#checked) .new-subject เป็นตัวเลือกการเปลี่ยนหัวเรื่องแบบมีเงื่อนไข

ตัวอย่างการใช้ :has() เป็นตัวเลือกหลักมีดังนี้ ซึ่งได้ชื่อนี้เนื่องจากโดยปกติแล้ว ออบเจ็กต์ของตัวเลือกจะอยู่ท้าย เช่น ul li โดยที่ li คือออบเจ็กต์ และรับสไตล์ เมื่อใช้ :has() องค์ประกอบที่จุดเริ่มต้นของตัวเลือกจะกลายเป็น เรื่อง ในตัวอย่างต่อไปนี้ ปุ่มจะมีช่องว่างหากมีองค์ประกอบอยู่ภายใน ที่มีคลาส .icon การ์ดจะเปลี่ยนการวางแนวหากมีรูปภาพอยู่ภายใน

button:has(.icon) {
  gap: 1ch;
}

.card:has(img) {
  grid-auto-flow: row;
}

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

main:has(> :nth-child(5)) {…}

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

html:has(#dark-mode:checked) {…}

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

ตัวอย่างนี้แสดงองค์ประกอบข้อผิดพลาดของแบบฟอร์มหากอินพุตใดอินพุตหนึ่งไม่ถูกต้อง

form:has(:user-invalid) .error {
  display: block;
}

ส่วนนี้จะเลื่อนพื้นที่เนื้อหาหลักออกเมื่อแถบด้านข้างมีคลาส .--is-open

html:has(#sidenav.--is-open) main {
  translate: -320px;
}

ต่อไปนี้คือการสาธิตที่สนุกซึ่งใช้ :has() เป็นตัวเลือกหลัก :has() ที่มีการค้นหาปริมาณ และการค้นหาคอนเทนเนอร์เพื่อสร้างเลย์เอาต์ตารางกริดที่แสดงองค์ประกอบ 1-12 รายการได้อย่างสวยงาม ในแนวนอนหรือแนวตั้ง

ลองใช้ใน Codepen

สร้างตารางย่อย

subgrid

Browser Support

Source

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับตารางย่อยที่นี่ หากต้องการภาพรวม

body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));

  > article {
    display: grid;
    grid-row: span 4; 
    grid-template-rows: subgrid;
  }
}

ซ้อนในแบบ CSS

nesting

Browser Support

Source

การซ้อน CSS ในตัวพร้อมให้บริการในเบราว์เซอร์หลักทั้งหมดในปี 2023 ฉันยังอัปเดตเว็บไซต์เพื่อนำกระบวนการบิลด์ที่คอมไพล์การซ้อนออกไป และตอนนี้ฉันก็ส่งสไตล์ชีตที่เล็กลงแล้ว ใช่แล้ว สไตล์ชีตที่มีการซ้อนจะมีขนาดเล็กลง และเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์ทั้งหมดก็พร้อมที่จะแสดงสไตล์ชีตดังกล่าว

ดูภาพรวมของไวยากรณ์การซ้อน CSS ได้ที่นี่ เพื่อดูรายละเอียดทั้งหมด ตัวอย่างโค้ดต่อไปนี้แสดงตัวอย่างไวยากรณ์

.you {
  .can-totally-ship-this {
    &.if-you-wanted {
      /* it's VERY MUCH like SCSS */
      
      &:is(:hover, :focus-visible) {
        /* put a bird on it */
      }
    }
  }
}

.for-theming {
  @media (prefers-color-scheme: dark) {
    /* you can nest media queries */
  }
}

/* or for theming with [data-theme="dark"] */
.button {
  background: black;
  color: white;

  /* nest and do more than just append, flip it and reverse it */
  [data-theme="dark"] & {
    background: white;
    color: black;
  }
}

ให้เบราว์เซอร์ปรับสมดุลบรรทัดแรก

balance

Browser Support

Source

pretty

Browser Support

Source

หากไม่มี text-wrap: balance นักพัฒนาซอฟต์แวร์และผู้เขียนข้อความโฆษณาจะต้องใช้คำแนะนำในการขึ้นบรรทัดใหม่ เช่น องค์ประกอบ <wbr> หรือ  ซึ่งส่วนใหญ่แล้วมักจะไม่ประสบความสำเร็จ เนื่องจากทันทีที่เนื้อหาได้รับการแปล ซูม หรือแก้ไขในลักษณะใดก็ตาม เราไม่สามารถรับประกันได้ว่าคำแนะนำในการตัดคำเหล่านั้นจะอยู่ในตำแหน่งที่ถูกต้องสำหรับการนำเสนอเนื้อหาใหม่

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

ใช้หน่วยการค้นหาคอนเทนเนอร์

cqw

Browser Support

Source

โพสต์เมื่อปีที่แล้วแนะนำว่านักพัฒนาซอฟต์แวร์ส่วนหน้าทุกคนควรรู้วิธีเขียนการค้นหาคอนเทนเนอร์ หากยังไม่เคยเรียนรู้ ให้ปี 2024 เป็นปีที่คุณจะเริ่มเรียนรู้ และดูหน่วยการค้นหาคอนเทนเนอร์ด้วย ภาพรวม Ahmad Shadeed เขียนบทความที่ยอดเยี่ยมเกี่ยวกับหน่วยการค้นหาคอนเทนเนอร์ในปี 2021

มีหน่วยคอนเทนเนอร์คิวรีใหม่ 6 รายการ ดังนี้

ตัวแปรในบรรทัด cqi
ตัวแปรความกว้าง cqw
บล็อกตัวแปร cqb
ตัวแปรความสูง cqh
ตัวแปรสำหรับความยาวที่สั้นกว่า cqmin
ตัวแปรสำหรับความยาวที่ยาวกว่า cqmax

พิจารณาสถานการณ์สำหรับภาพเคลื่อนไหวแบบสัมพัทธ์และแบบดั้งเดิมในคอนเทนเนอร์ องค์ประกอบย่อยที่เลื่อนออกจากคอนเทนเนอร์ทั้งหมดโดยใช้ 100cqi ซึ่งเท่ากับขนาดในบรรทัดของคอนเทนเนอร์ 100%

@keyframes slide-out-of-container {
  to {
    translate: -100cqi;
  }
}

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

.card {
  :is(h2,h3) {
    font-size: clamp(1.5rem, 5cqi, 4rem);
  }

  img {
    inline-size: 100cqi;

    @container (orientation: landscape) {
      inline-size: 50cqi;
    }
  }
}

หากคุณเพิ่งเคยเห็นหน่วยเหล่านี้ เราขอแนะนำให้ตรวจสอบหน่วยทั้งหมดที่คุณมีสิทธิ์เข้าถึงในปี 2024