Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

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

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

Adam Argyle

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

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

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

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

.card {
  padding: 1rem;
}

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

@container

Browser Support

Source

container

Browser Support

Source

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

Browser Support

Source

scroll-snap-align

Browser Support

Source

scroll-snap-stop

Browser Support

Source

overscroll-behavior

Browser Support

Source

3. กองกริด

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

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

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

grid

Browser Support

Source

4. วงกลมด่วน

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

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

aspect-ratio

Browser Support

Source

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

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

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

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

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

@layer

Browser Support

Source

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

Browser Support

Source

margin-block

Browser Support

Source

inset-inline

Browser Support

Source