หน้านี้ได้รับการแปลโดย Cloud Translation API

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

CSS ที่มีประสิทธิภาพ ใช้งานได้จริง และเสถียรซึ่งคุณใช้ได้เลยในวันนี้

Adam Argyle

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

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

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

:has()

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

แหล่งที่มา

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

แสดงแผง 4 แผง โดยแต่ละแผงมีรูปภาพและคําบรรยาย
แต่ละภาพแสดงสมองที่กระตุ้นพลังสมองมากขึ้นเรื่อยๆ แผงแรกจะบอกว่า :has() แผงที่สองจะบอกว่า figure:has(caption) เป็นตัวเลือกหลัก
แผงที่สามระบุว่า .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) {…}

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

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

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

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

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

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

ลองใช้บน Codepen

สร้างตารางกริดย่อย

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

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

แหล่งที่มา

การฝัง 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

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

แหล่งที่มา

pretty

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

แหล่งที่มา

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

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

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

cqw

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

แหล่งที่มา

โพสต์ของปีที่แล้วแนะนําว่านักพัฒนาซอฟต์แวร์ฝั่งหน้าเว็บทุกคนควรทราบวิธีเขียนการค้นหาคอนเทนเนอร์ หากยังไม่เคยลองใช้ ให้ลองในปี 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