ฟีเจอร์สื่อ

สรุปวิธีต่างๆ ที่ฟีเจอร์สื่อช่วยให้คุณตอบสนองต่ออุปกรณ์และค่ากำหนดได้

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

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

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

@media all
@media screen
@media print
@media speech

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

มิติข้อมูลวิวพอร์ต

การค้นหาสื่อที่ได้รับความนิยมสูงสุดบนเว็บจนถึงปัจจุบันคือคำค้นหาที่เกี่ยวข้องกับความกว้างของวิวพอร์ต แต่แม้แต่ที่นี่ คุณก็มีทางเลือกที่หลากหลาย คุณสามารถใช้ฟีเจอร์สื่อ max-width เพื่อใช้รูปแบบที่มีความกว้างเกินกำหนด หรือจะใช้ฟีเจอร์สื่อ min-width เพื่อนำรูปแบบที่มีความกว้างสูงกว่าที่กำหนดไว้มาใช้ก็ได้

main {
  display: grid;
  grid-template-columns: 2fr 1fr;
}
@media (max-width: 45em) {
  main {
    display: block;
  }
}

@media (min-width: 45em) {
  main {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

โดยส่วนตัวแล้วฉันชอบใช้ min-width ฉันใช้รูปแบบการออกแบบเพิ่มเติม ฉันเริ่มใช้กฎเลย์เอาต์ใหม่ที่แต่ละเบรกพอยท์แทนการเลิกทำกฎก่อนหน้า

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

@media (min-height: 30em) {
  header {
    position: fixed;
  }
}

แต่คุณจะใช้ฟีเจอร์สื่อของ max-height ได้หากต้องการ ส่วนหัวนี้จะตรึงไว้โดยค่าเริ่มต้น แต่ระบบจะนำความสามารถในการดึงดูดออกหากมีพื้นที่แนวตั้งไม่เพียงพอ

header {
  position: fixed;
}
@media (max-height: 30em) {
  header {
    position: static;
  }
}

การเลือกคำนำหน้าระหว่าง min- ถึง max- ไม่เพียงมีผลกับ width และ height ฟีเจอร์สื่อของ aspect-ratio มีตัวเลือกเดียวกัน นอกจากนี้ยังมีเวอร์ชันที่ไม่มีคำนำหน้าหากต้องการใช้สไตล์ในอัตราส่วนระหว่างความกว้างต่อความสูงที่เหมือนกัน

@media (min-aspect-ratio: 16/9) {
  // The ratio of width to height is at least 16 by 9.
}
@media (max-aspect-ratio: 16/9) {
  // The ratio of width to height is less than 16 by 9.
}
@media (aspect-ratio: 16/9) {
  // The ratio of width to height is exactly 16 by 9.
}

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

@media (orientation: portrait) {
  // The width is less than the height.
}
@media (orientation: landscape) {
  // The width is greater than the height.
}

แม้ว่าจะมีการใช้คำว่า "แนวตั้ง" และ "แนวนอน" บ่อยที่สุดเพื่ออ้างอิงถึงการวางแนวของอุปกรณ์เคลื่อนที่ แต่ฟีเจอร์สื่อของ orientation ไม่ได้มีไว้สำหรับอุปกรณ์โดยเฉพาะ หน้าต่างเบราว์เซอร์แบบเต็มหน้าจอในแล็ปท็อปทั่วไปจะมีค่า orientation เป็น landscape

จอแสดงผล

จอแสดงผลที่ต่างกันมีความหนาแน่นของพิกเซลต่างกัน วัดเป็น dpi จุดต่อนิ้ว คุณสามารถปรับรูปแบบตามความหนาแน่นของพิกเซลต่างๆ ได้โดยใช้ฟีเจอร์สื่อของ resolution resolution มีรูปแบบ 3 แบบ ได้แก่ ต่ำสุด สูงสุด และแบบตรงทั้งหมด เช่นเดียวกับ aspect-ratio

@media (min-resolution: 300dpi) {
  // The display has a pixel density of at least 300 dots per inch.
}
@media (max-resolution: 300dpi) {
  // The display has a pixel density less than 300 dots per inch.
}
@media (resolution: 300dpi) {
  // The display has a pixel density of exactly 300 dots per inch.
}

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

ในทางกลับกัน CSS เป็นที่ที่คุณกำหนดภาพเคลื่อนไหวและการเปลี่ยน คุณสามารถปรับภาพเคลื่อนไหวและการเปลี่ยนภาพเหล่านั้นเพื่อตอบสนองต่ออัตราการรีเฟรชต่างๆ ได้โดยใช้ฟีเจอร์สื่อของ update ฟีเจอร์สื่อนี้จะรายงานค่า 1 ใน 3 ค่า ได้แก่ none, slow และ fast

ค่า update เป็น none หมายความว่าไม่มีอัตราการรีเฟรช เช่น หน้าที่พิมพ์จะอัปเดตไม่ได้

ค่า update ที่เป็น slow หมายความว่าจอแสดงผลไม่สามารถรีเฟรชได้รวดเร็ว จอแสดงผลอีอิงค์เป็นตัวอย่างหนึ่งของหน้าจอที่มีอัตราการรีเฟรชช้า

ค่า update เป็น fast หมายความว่าจอแสดงผลรีเฟรชเร็วพอที่จะรองรับภาพเคลื่อนไหวและการเปลี่ยน

@media (update: fast) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
  a:hover {
    transform: scale(150%);
  }
}

การแสดงผลบางด้านไม่ได้เกี่ยวข้องกับความสามารถของฮาร์ดแวร์ ในโมดูลเกี่ยวกับการกำหนดธีม คุณได้ดูวิธีกำหนดพร็อพเพอร์ตี้ในไฟล์ไฟล์ Manifest ของเว็บแอปแล้ว หนึ่งในพร็อพเพอร์ตี้เหล่านั้นเรียกว่า display และคุณสามารถระบุค่าเป็น fullscreen, standalone, minimum-ui หรือ browser ฟีเจอร์สื่อของ display-mode ที่เกี่ยวข้องช่วยให้คุณปรับแต่งรูปแบบให้เหมาะกับตัวเลือกต่างๆ เหล่านี้ได้

สมมติว่าคุณระบุค่า display เป็น standalone ในไฟล์ Manifest ของเว็บแอป หากมีคนเพิ่มเว็บไซต์ของคุณลงในหน้าจอหลัก เว็บไซต์จะเปิดขึ้นโดยไม่มีอินเทอร์เฟซเบราว์เซอร์ คุณอาจเลือกที่จะแสดงปุ่มย้อนกลับแก่ผู้ใช้เหล่านั้น

button.back {
  display: none;
}
@media (display-mode: standalone) {
  button.back {
     display: inline;
  }
}

สี

การค้นหาฟังก์ชันสีของอุปกรณ์มีฟีเจอร์สื่อมากมาย หากต้องการปรับรูปแบบสําหรับจอแสดงผลที่แสดงเพียงเฉดสีเทา คุณใช้ฟีเจอร์สื่อของ monochrome ได้โดยไม่ต้องใช้ค่าใดๆ

@media (monochrome) {
  body {
    color: black;
    background-color: white;
  }
}

มีฟีเจอร์สื่อของ color ที่เกี่ยวข้อง

@media (color) {
  body {
    color: maroon;
    background-color: linen;
  }
}

สําหรับหน้าจอสี คุณสามารถเขียนคําค้นหาด้วยฟีเจอร์สื่อ color-gamut, color-index หรือ dynamic-range ทุกตัวรายงานรายละเอียดเฉพาะเกี่ยวกับความสามารถด้านสีของหน้าจอ

ในตัวอย่างนี้ ค่าสีจะอัปเดตตามฟีเจอร์สื่อ dynamic-range ซึ่งจะรายงานชุดค่าผสมของความสว่างสูงสุด ความลึกของสี และอัตราส่วนคอนทราสต์ของจอแสดงผล ค่าที่เป็นไปได้คือ standard หรือ high หน้าจอความละเอียดสูงที่รายงานค่า dynamic-range เป็น high จะได้รับพื้นที่สีที่ต่างออกไปโดยใช้ฟังก์ชัน color() ของ CSS ใหม่

.neon-red {
  color: hsl(355 100% 95%);
}
@media (dynamic-range: high) {
  .neon-red {
    color: color(display-p3 1 0 0);
  }
}

การโต้ตอบ

ฟีเจอร์สื่อยังสามารถรายงานประเภทกลไกการป้อนข้อมูลที่ใช้โต้ตอบกับเว็บไซต์ของคุณ ได้แก่ hover, any-hover, pointer และ any-pointer ดูรายละเอียดเพิ่มเติมในโมดูลเกี่ยวกับการโต้ตอบ

การตั้งค่า

มีคำค้นหาสื่อหลากหลายที่ให้คุณตอบกลับค่ากำหนดของผู้ใช้ได้ ได้แก่ prefers-color-scheme, prefers-contrast และ prefers-reduced-motion ดูรายละเอียดเพิ่มเติมได้จากโมดูลเกี่ยวกับธีมและการช่วยเหลือพิเศษ

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

@media (update: fast) and (prefers-reduced-motion: no-preference) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
  a:hover {
    transform: scale(150%);
  }
}

ฟีเจอร์สื่อเพิ่มเติม

เราจะเพิ่มฟีเจอร์สื่อให้คุณในเร็วๆ นี้

ฟีเจอร์สื่อ forced-colors และ inverted-colors จะรายงานว่าอุปกรณ์ใช้ชุดสีแบบจำกัดหรือสลับสี

ฟีเจอร์สื่อของ scripting จะช่วยให้คุณปรับ CSS ตามความพร้อมใช้งานของ JavaScript ได้

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

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

ทดสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับฟีเจอร์สื่อ