ฟีเจอร์สื่อ

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

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

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

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

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

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

Media Query ที่ได้รับความนิยมมากที่สุดบนเว็บคือ Media Query ที่จัดการกับความกว้างของวิวพอร์ต แต่แม้ในกรณีนี้ คุณก็ยังมีตัวเลือก คุณใช้ฟีเจอร์สื่อ 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 เช่นเดียวกับ aspect-ratio resolution มี 3 รูปแบบ ได้แก่ ต่ำสุด สูงสุด และตรงกัน

@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 หมายความว่าจอแสดงผลรีเฟรชได้อย่างรวดเร็ว จอแสดงผล E Ink เป็นตัวอย่างหนึ่งของหน้าจอที่มีอัตราการรีเฟรชต่ำ

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

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

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

คำค้นหาค่ากำหนดของผู้ใช้

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

โหมดมืดและโหมดสว่าง

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

การตั้งค่ารูปแบบสีสำหรับองค์ประกอบ UI

เบราว์เซอร์มีสีเริ่มต้นสำหรับสิ่งต่างๆ เช่น แถบเลื่อนและองค์ประกอบของแบบฟอร์ม คุณระบุได้ว่าจะใช้ธีมสว่างสำหรับผู้ที่ใช้ color-scheme: light หรือธีมมืดสำหรับผู้ที่ใช้ color-scheme: dark นอกจากนี้ คุณยังระบุได้ว่าหน้าเว็บรองรับทั้ง 2 รูปแบบด้วย color-scheme: light dark คุณตั้งค่านี้ในองค์ประกอบ :root หรือ html เพื่อตั้งค่าสคีมาสำหรับทั้งหน้า หรือจะลบล้างสำหรับองค์ประกอบที่เฉพาะเจาะจงก็ได้

นอกจากนี้ คุณยังตั้งค่าแท็ก meta สำหรับ color-scheme เพื่อตั้งค่าสคีมาของหน้าเว็บก่อนที่สไตล์จะโหลดได้ด้วย หากคุณตั้งค่า color-scheme: normal ในองค์ประกอบของหน้า ระบบจะใช้ค่า color-scheme ที่คุณตั้งไว้ในเมตาแท็กนี้

<meta name="color-scheme" content="dark light">

ฟีเจอร์สื่อ prefers-color-scheme รายการ

นอกจากนี้ คุณยังกำหนดสไตล์ที่กำหนดเองเพื่อตอบสนองต่อธีมสีที่ผู้ใช้ต้องการได้ด้วยการค้นหาสื่อสำหรับ prefers-color-scheme

light-dark

หากให้ผู้ใช้เลือกระหว่างธีมสว่างและธีมมืด คุณอาจพบว่าการตั้งค่าแต่ละสีภายใน Media Query นั้นยืดยาว light-dark() ช่วยให้คุณระบุทั้ง 2 อย่างได้ในพร็อพเพอร์ตี้เดียว

หากต้องการเปิดใช้ คุณต้องตั้งค่า color-scheme: light dark ในองค์ประกอบหรือองค์ประกอบใดองค์ประกอบหนึ่งของบรรพบุรุษ โดยคุณจะตั้งค่าสีที่จะใช้ในโหมดสว่างก่อน แล้วจึงตั้งค่าสีที่จะใช้ในโหมดมืด

h1{
  color: light-dark( var(--text-light), var(--text-dark));
}

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

ค่ากำหนดคอนทราสต์

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

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

สีที่บังคับ

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

ในบางครั้ง คุณอาจต้องปรับรูปแบบ เช่น หากใช้องค์ประกอบในลักษณะที่ไม่เป็นไปตามมาตรฐาน คุณใช้@media (forced-colors: active) Media Query เพื่อใช้สไตล์เมื่อผู้ใช้เปิดใช้สีที่บังคับได้

ในบางกรณี สไตล์ของเว็บไซต์เป็นส่วนสำคัญในการทำความเข้าใจเนื้อหา เช่น เครื่องมือเลือกสีหรือกราฟที่มีคีย์สี คุณตั้งค่า forced-color-adjust: none; ในองค์ประกอบเพื่อเลือกไม่ใช้โหมดสีที่บังคับได้ โปรดเลือกไม่ใช้เฉพาะในองค์ประกอบที่ต้องการ และตรวจสอบว่าเนื้อหายังคงเข้าถึงได้ในโหมดสีที่บังคับ

คอนทราสต์สูง

ผู้ใช้บางรายอาจตั้งค่าระบบให้ขอเพิ่มความคมชัดด้วย คุณปรับรูปแบบในการตอบสนองได้ด้วยprefers-contrast: more Media Query

การเคลื่อนไหวลดลง

คุณตอบสนองต่อค่ากำหนดของผู้ใช้ในการลดการเคลื่อนไหวได้ด้วย Media Query prefers-reduced-motion ซึ่งมักใช้เพื่อแสดงภาพเคลื่อนไหวสำรองที่หลีกเลี่ยงการเคลื่อนไหวขนาดใหญ่ซึ่งอาจเป็นทริกเกอร์สำหรับผู้ที่เป็นโรคลมชัก โรคการเคลื่อนไหวของระบบเวสทิบูลาร์ หรือมีความไวต่อไมเกรน อ่านเพิ่มเติมได้ในข้อควรพิจารณาเมื่อทำงานกับภาพเคลื่อนไหว

การเขียนสคริปต์

ผู้ใช้อาจเข้าชมเว็บไซต์ของคุณโดยปิดใช้ JavaScript และคุณสามารถปรับ CSS เพื่อให้ผู้ใช้ยังคงเข้าถึงเนื้อหาได้โดยใช้scriptingคำค้นหาสื่อ

@media (scripting: none) {
  /* Styles when JavaScript is disabled*/
 }

@media (scripting: initial-only) {
  /* Styles when JavaScript is available only for an initial render, for example with a printed page or server side rendering */
}

@media (scripting: enabled) {
   /* Styles when Javascript is enabled */
}

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

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