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

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

เราเชื่อว่านักพัฒนาซอฟต์แวร์ฝั่งหน้าเว็บทุกคนควรทราบวิธีใช้การค้นหาคอนเทนเนอร์ สร้างประสบการณ์การเลื่อนแบบ Snap หลีกเลี่ยงการใช้ position: absolute กับตารางกริด วาดวงกลมอย่างรวดเร็ว ใช้เลเยอร์แบบ Cascade และเข้าถึงผู้ใช้ได้มากขึ้นด้วยวิธีง่ายๆ ผ่านพร็อพเพอร์ตี้เชิงตรรกะ ภาพรวมคร่าวๆ ของสิ่งที่คาดหวังมีดังนี้

1. การค้นหาคอนเทนเนอร์

ฟีเจอร์ CSS ที่ผู้ใช้ขอมากที่สุดติดต่อกัน 10 ปีพร้อมใช้งานแล้วในเบราว์เซอร์ต่างๆ และพร้อมให้คุณใช้สำหรับคำค้นหาความกว้างในปี 2023

.panel {
  container: layers-panel / inline-size;
}

.card {
  padding: 1rem;
}

@container layers-panel (min-width: 20rem) {
  .card {
    padding: 2rem;
  }
}
@container

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

  • Chrome: 105
  • ขอบ: 105
  • Firefox: 110
  • Safari: 16

แหล่งที่มา

container

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

  • Chrome: 105
  • Edge: 105
  • Firefox: 110
  • Safari: 16

แหล่งที่มา

2. การสแนปการเลื่อน

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

.snaps {
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}

.snap-target {
  scroll-snap-align: center;
}

.snap-force-stop {
  scroll-snap-stop: always;
}

ดูข้อมูลเพิ่มเติมเกี่ยวกับศักยภาพของฟีเจอร์ CSS นี้ในคอลเล็กชัน Codepen ที่ใหญ่และน่าทึ่งซึ่งมีตัวอย่างประมาณ 25 รายการ

scroll-snap-type

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

  • Chrome: 69
  • Edge: 79
  • Firefox: 99
  • Safari: 11.

แหล่งที่มา

scroll-snap-align

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

  • Chrome: 69
  • Edge: 79
  • Firefox: 68
  • Safari: 11.

แหล่งที่มา

scroll-snap-stop

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

  • Chrome: 75
  • Edge: 79
  • Firefox: 103
  • Safari: 15.

แหล่งที่มา

overscroll-behavior

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

  • Chrome: 63
  • Edge: 18.
  • Firefox: 59
  • Safari: 16.

แหล่งที่มา

3. กองตารางกริด

หลีกเลี่ยงการใช้ตำแหน่งแบบสัมบูรณ์กับตาราง CSS เซลล์เดียว เมื่อวางซ้อนกันแล้ว ให้ใช้พร็อพเพอร์ตี้จัดตำแหน่งและจัดแนวเพื่อจัดตำแหน่ง

.pile {
  display: grid;
  place-content: center;
}

.pile > * {
  grid-area: 1/1;
}
grid

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

  • Chrome: 57
  • Edge: 16.
  • Firefox: 52
  • Safari: 10.1

แหล่งที่มา

4. วงกลมด่วน

การสร้างวงกลมใน CSS มีหลายวิธี แต่วิธีนี้ดูเรียบง่ายที่สุด

.circle {
  inline-size: 25ch;
  aspect-ratio: 1;
  border-radius: 50%;
}
aspect-ratio

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

  • Chrome: 88
  • Edge: 88
  • Firefox: 89
  • Safari: 15.

แหล่งที่มา

5. ควบคุมตัวแปรด้วย @layer

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

/* file buttons.css */
@layer components.buttons {
  .btn.primary {
    …
  }
}

จากนั้นในไฟล์อื่นที่โหลดในเวลาอื่นแบบสุ่ม ให้เพิ่มตัวแปรใหม่ลงในเลเยอร์ปุ่มราวกับว่าตัวแปรนั้นอยู่ร่วมกับตัวแปรอื่นๆ ตลอด

/* file video-player.css */
@layer components.buttons {
  .btn.player-icon {
    …
  }
}
@layer

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

  • Chrome: 99.
  • Edge: 99.
  • Firefox: 97
  • Safari: 15.4

แหล่งที่มา

6. จดจำน้อยลงและเข้าถึงได้มากขึ้นโดยใช้สมบัติเชิงตรรกะ

จำรูปแบบกล่องใหม่รูปแบบเดียวนี้ไว้ แล้วไม่ต้องกังวลอีกต่อไปว่าจะต้องทำการเปลี่ยนแปลงระยะขอบหรือระยะห่างจากขอบซ้ายและขวาสำหรับโหมดการเขียนและทิศทางของเอกสารในภาษาต่างประเทศ ปรับสไตล์จากพร็อพเพอร์ตี้เชิงกายภาพเป็นพร็อพเพอร์ตี้เชิงตรรกะ เช่น padding-inline, margin-inline, inset-inline แล้วเบราว์เซอร์จะทำการปรับเปลี่ยน

button {
  padding-inline: 2ch;
  padding-block: 1ch;
}

article > p {
  text-align: start;
  margin-block: 2ch;
}

.something::before {
  inset-inline: auto 0;
}
padding-inline

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

  • Chrome: 87.
  • Edge: 87
  • Firefox: 66
  • Safari: 14.1

แหล่งที่มา

margin-block

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

  • Chrome: 87
  • Edge: 87
  • Firefox: 66
  • Safari: 14.1

แหล่งที่มา

inset-inline

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

  • Chrome: 87
  • Edge: 87
  • Firefox: 63
  • Safari: 14.1

แหล่งที่มา