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

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

Toolbelt คุ้มค่า มีประสิทธิภาพ และเสถียร 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() แผงที่ 2 ระบุว่า "รูป: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) {…}

นี่เป็น 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