ฟีเจอร์สื่อ

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

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

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

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

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

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

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

• 1 ครั้ง
• 12 ปี
• 1 ครั้ง
• 3 ครั้ง

แหล่งที่มา

ขนาดของวิวพอร์ต

โดยที่ผ่านมา คำค้นหาสื่อบนเว็บที่ได้รับความนิยมมากที่สุดคือคำค้นหาที่เกี่ยวข้องกับความกว้างของวิวพอร์ต แต่ถึงอย่างไร คุณยังมีตัวเลือกอยู่ คุณสามารถใช้ฟีเจอร์สื่อของ 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 ฟีเจอร์สื่อนี้จะรายงานค่าใดค่าหนึ่งจาก 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 จะอนุญาตให้ผู้ใช้ระบุได้ว่ากำลังใช้การเชื่อมต่อแบบจำกัดปริมาณอินเทอร์เน็ต เพื่อให้คุณส่งเนื้อหาที่เล็กลงหรือน้อยลงได้

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

ตรวจสอบความเข้าใจ

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

คำค้นหาสื่อสามารถตรวจสอบอุปกรณ์ที่ความกว้างเฉพาะอย่าง @media (width: 1024px) ได้ใช่ไหม

จริง

ความกว้างที่เจาะจงจะทำได้ด้วยการตรวจสอบความกว้างที่สูงกว่า 1023px และต่ำกว่า 1025px พร้อมกันเท่านั้น

เท็จ

ตัวเลือก min-width และ max-width คือ

คำค้นหาสื่อสามารถตรวจสอบอุปกรณ์ใน aspect-ratio ที่เจาะจง เช่น @media (aspect-ratio: 4/3) ได้ไหม

จริง

สัดส่วนภาพจะไม่ซ้ำกัน แต่จะสามารถจับคู่อัตราส่วนเดียวได้

เท็จ

ตัวเลือกนี้มีให้สำหรับ aspect-ratio

คำค้นหาสื่อสีที่ถูกต้องคืออะไร

@media (color)

ตรงกับอุปกรณ์สีใดก็ได้

@media (monochrome)

จับคู่อุปกรณ์ใดก็ตามที่ไม่สามารถแสดงสี

@media (color-gamut: srgb)

จับคู่อุปกรณ์ที่รองรับสี sRGB

@media (min-color-index: 15000)

จับคู่อุปกรณ์ที่มีสีอย่างน้อย 15,000 สี

@media (dynamic-range: high)

จับคู่อุปกรณ์ที่มีช่วงสีแบบ HD

คิวรี่สื่อตามค่ากำหนดของผู้ใช้ข้อใดต่อไปนี้ถูกต้อง

@media (prefers-color-scheme: dark)

จับคู่เวลาที่ผู้ใช้ตั้งค่าระบบปฏิบัติการเป็นโหมดมืด

@media (prefers-colors: high-definition)

ไม่ใช่เรื่องจริง

@media (prefers-reduced-motion: reduce)

จับคู่เมื่อผู้ใช้ตั้งค่าระบบปฏิบัติการเพื่อลดการเคลื่อนไหว

@media (prefers-contrast: more)

จับคู่เมื่อผู้ใช้ตั้งค่าระบบปฏิบัติการเป็นคอนทราสต์ที่สูงขึ้น

@media (prefers-site-speed: fast)

ไม่ใช่เรื่องจริง