ไวยากรณ์ CSS Media Query Range ใหม่

เราพึ่งได้ ข้อความค้นหาสื่อ CSS สำหรับการเลือกและจัดรูปแบบองค์ประกอบตามเงื่อนไขเป้าหมาย เงื่อนไขดังกล่าวสามารถเป็นได้ทุกประเภท แต่โดยทั่วไปแล้วจะแบ่งออกเป็นสองกลุ่ม: (1) ประเภทของสื่อที่กำลังใช้งาน และ (2) คุณลักษณะเฉพาะของเบราว์เซอร์ อุปกรณ์ หรือแม้แต่สภาพแวดล้อมของผู้ใช้

สมมติว่าเราต้องการใช้การจัดรูปแบบ CSS บางอย่างกับเอกสารที่พิมพ์:

@media print {
  .element {
    /* Style away! */
  }
}

การที่เราสามารถปรับใช้สไตล์ที่ความกว้างของวิวพอร์ตได้ทำให้ CSS Media Queries เป็นส่วนประกอบหลักของการออกแบบเว็บที่ตอบสนองตามอุปกรณ์ตั้งแต่ Ethan Marcotte คำประกาศเกียรติคุณ. หากความกว้างวิวพอร์ตของเบราว์เซอร์มีขนาดที่แน่นอน ให้ใช้ชุดกฎของสไตล์ ซึ่งช่วยให้เราออกแบบองค์ประกอบที่ตอบสนองต่อขนาดของเบราว์เซอร์ได้

/* When the viewport width is at least 30em... */
@media screen and (min-width: 30em) {
  .element {
    /* Style away! */
  }
}

สังเกตเห็น and ในนั้น? นั่นคือโอเปอเรเตอร์ที่ช่วยให้เราสามารถรวมคำสั่งได้ ในตัวอย่างนี้ เรารวมเงื่อนไขว่าชนิดสื่อเป็น a screen และนั่นก็คือ min-width คุณสมบัติถูกตั้งค่าเป็น 30em (หรือสูงกว่า). เราสามารถทำสิ่งเดียวกันเพื่อกำหนดเป้าหมายขนาดวิวพอร์ตต่างๆ ได้:

/* When the viewport width is between 30em - 80em */
@media screen and (min-width: 30em) and (max-width: 80em) {
  .element {
    /* Style away! */
  }
}

ตอนนี้สไตล์เหล่านั้นใช้กับช่วงความกว้างของวิวพอร์ตที่ชัดเจนมากกว่าความกว้างเดียว!

แต่ข้อกำหนด Media Queries ระดับ 4 ได้แนะนำรูปแบบใหม่สำหรับการกำหนดเป้าหมายช่วงความกว้างของวิวพอร์ตโดยใช้ตัวดำเนินการเปรียบเทียบทางคณิตศาสตร์ทั่วไป เช่น <, >และ = — ที่สมเหตุสมผลมากขึ้นในเชิงวากยสัมพันธ์ในขณะที่เขียนโค้ดน้อยลง

มาดูกันว่ามันทำงานอย่างไร

ตัวดำเนินการเปรียบเทียบใหม่

ตัวอย่างสุดท้ายนั้นเป็นภาพประกอบที่ดีว่าเราได้จัดเรียงช่วง "ของปลอม" อย่างไรโดยการรวมเงื่อนไขโดยใช้ and โอเปอเรเตอร์ การเปลี่ยนแปลงครั้งใหญ่ในข้อกำหนด Media Queries ระดับ 4 คือเรามีตัวดำเนินการใหม่ที่เปรียบเทียบค่าต่างๆ แทนที่จะรวมเข้าด้วยกัน:

• < ประเมินว่าค่าเป็น น้อยกว่า ค่าอื่น
• > ประเมินว่าค่าเป็น มากกว่า ค่าอื่น
• = ประเมินว่าค่าเป็น เท่ากัน สู่อีกค่าหนึ่ง
• <= ประเมินว่าค่าเป็น น้อยกว่าหรือเท่ากับ to คุณค่าอื่น
• >= ประเมินว่าค่าเป็น มากกว่าหรือเท่ากับ to คุณค่าอื่น

ต่อไปนี้คือวิธีที่เราอาจเขียนคิวรี่สื่อที่ใช้สไตล์หากเบราว์เซอร์เป็น 600px กว้างหรือมากกว่า:

@media (min-width: 600px) {
  .element {
    /* Style away! */
  }
}

นี่คือลักษณะการเขียนสิ่งเดียวกันโดยใช้ตัวดำเนินการเปรียบเทียบ:

@media (width >= 600px) {
  .element {
    /* Style away! */
  }
}

การกำหนดเป้าหมายช่วงความกว้างวิวพอร์ต

บ่อยครั้งเมื่อเราเขียน CSS Media Queries เรากำลังสร้างสิ่งที่เรียกว่าa เบรกพอยต์ — เงื่อนไขที่การออกแบบ “พัง” และชุดของสไตล์ถูกนำไปใช้เพื่อแก้ไข การออกแบบสามารถมีจุดพักได้มากมาย! และมักจะยึดตามวิวพอร์ตที่อยู่ระหว่างความกว้างสองช่วง: จุดที่เบรกพอยต์เริ่มต้นและจุดที่เบรกพอยต์สิ้นสุด

นี่คือวิธีที่เราทำโดยใช้ the and โอเปอเรเตอร์เพื่อรวมค่าเบรกพอยต์สองค่า:

/* When the browser is between 400px - 1000px */
@media (min-width: 400px) and (max-width: 1000px) {
  /* etc. */
}

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

@media (400px <= width <= 1000px) {
  /* etc. */
}

ง่ายกว่ามากใช่ไหม? และชัดเจนว่าคำค้นหาสื่อนี้กำลังทำอะไรอยู่

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

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

มาดูตัวอย่างกัน

นี่คือเลย์เอาต์ที่เหมาะสำหรับหน้าจอขนาดใหญ่ เช่น เดสก์ท็อป:

เลย์เอาต์นี้มีสไตล์พื้นฐานที่เหมือนกันกับเบรกพอยต์ทั้งหมด แต่เมื่อหน้าจอแคบลง เราเริ่มใช้สไตล์ที่ใช้ตามเงื่อนไขที่เบรกพอยต์ขนาดเล็กต่างๆ กัน ซึ่งเหมาะอย่างยิ่งสำหรับแท็บเล็ตจนถึงโทรศัพท์มือถือ:

หากต้องการดูว่าเกิดอะไรขึ้น ต่อไปนี้คือวิธีที่เลย์เอาต์ตอบสนองระหว่างเบรกพอยต์ที่เล็กกว่าสองจุด รายการนำทางที่ซ่อนอยู่กำลังแสดงเช่นกัน title ใน main เพิ่มขึ้นใน font-size.

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

/* Base styles (any screen size) */
header {
  display: flex;
  justify-content: center;
}

header ul {
  display: none;
}

.title p {
  font-size: 3.75rem;
}

/* When the media type is a screen with a width greater or equal to 768px */
@media screen and (width >= 768px) {
  header {
    justify-content: space-between;
  }

  header ul {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
  }

  .title p {
    font-size: 5.75rem;
  }
}

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

โอเค ดีมากสำหรับอุปกรณ์มือถือด้านล่าง 768px และสำหรับอุปกรณ์อื่นๆ ที่เท่ากับหรือมากกว่า 768px. แต่แล้วเลย์เอาต์เดสก์ท็อปนั้นล่ะ… เราจะไปถึงที่นั่นได้อย่างไร

เท่าที่เค้าโครงดำเนินไป:

• พื้นที่ main องค์ประกอบกลายเป็นตาราง 12 คอลัมน์
• ปุ่มจะปรากฏบนภาพ
• ขนาดของ .title แบบอักษรขององค์ประกอบเพิ่มขึ้นและทับซ้อนรูปภาพ

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

/* When the media type is a screen with a width greater or equal to 1000px  */
@media screen and (width >= 1000px) {
  /* Becomes a 12-column grid */
  main {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto 250px;
  }

  /* Places the .title on the grid */
  .title {
    grid-row: 1;
  }

  /* Bumps up the font-size */
  .title p {
    font-size: 7.75rem;
  }

  /* Places .images on the grid */
  .images {
    grid-row: 1 / span 2;
    align-self: end;
    position: relative;
  }

  /* Displays the button */
  .images .button {
    display: block;
    position: absolute;
    inset-block-end: 5rem;
    inset-inline-end: -1rem;
  }
}

เล่นกับมัน:

ทำไมไวยากรณ์ใหม่จึงเข้าใจง่ายขึ้น

บรรทัดล่าง: ง่ายกว่าในการแยกแยะตัวดำเนินการเปรียบเทียบ (เช่น width >= 320px) กว่าจะบอกความแตกต่างระหว่าง min-width และ max-width โดยใช้โปรแกรม and โอเปอเรเตอร์ โดยเอาความแตกต่างระหว่าง min- และ max-, เรามีซิงเกิ้ลเดียว width พารามิเตอร์ที่จะทำงานด้วยและตัวดำเนินการบอกเราส่วนที่เหลือ

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

• max-width เทียบเท่ากับ <= โอเปอเรเตอร์ (เช่น (max-width: 320px) เป็นเช่นเดียวกับ (width <= 320px)).
• min-width เทียบเท่ากับ >= โอเปอเรเตอร์ (เช่น (min-width: 320px) เป็นเช่นเดียวกับ (width >= 320px)).

สังเกตว่าไม่เทียบเท่ากับ > or < ผู้ประกอบการ

ลองดึงตัวอย่างตรงจากข้อกำหนด Media Queries ระดับ 4 ที่เรากำหนดรูปแบบที่แตกต่างกันตามเบรกพอยต์ที่ 320px ในความกว้างของวิวพอร์ตโดยใช้ min-width และ max-width:

@media (max-width: 320px) { /* styles for viewports = 320px */ }

แบบสอบถามสื่อทั้งสองตรงกับเงื่อนไขเมื่อความกว้างวิวพอร์ตเท่ากับ 320px. นั่นไม่ใช่สิ่งที่เราต้องการ พวกเราต้องการ ทั้ง หนึ่งในเงื่อนไขเหล่านั้นมากกว่าทั้งสองอย่างในเวลาเดียวกัน เพื่อหลีกเลี่ยงการเปลี่ยนแปลงโดยนัยนั้น เราอาจเพิ่มพิกเซลในการสืบค้นโดยอิงตาม min-width:

@media (max-width: 320px){ /* styles for viewports = 321px */ }

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

ทางออกหนึ่งคือการเพิ่มค่ามาตราส่วนเปรียบเทียบที่สอง (ตัวเลขหลังจุดทศนิยม) เป็น 320.01px:

@media (max-width: 320px) { /* styles for viewports = 320.01px */ }

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

@media (width <= 320px) { /* styles for viewports  320px) { /* styles for viewports > 320px */ }

ตัดขึ้น

วุ้ย เราครอบคลุมพื้นที่มากมายเกี่ยวกับไวยากรณ์ใหม่สำหรับการกำหนดเป้าหมายช่วงความกว้างของวิวพอร์ตใน CSS Media Queries เมื่อข้อกำหนด Media Queries ระดับ 4 ได้แนะนำรูปแบบไวยากรณ์และได้นำมาใช้ในเบราว์เซอร์ Firefox และ Chromium เราใกล้จะสามารถใช้ตัวดำเนินการเปรียบเทียบใหม่และรวมเข้ากับคุณสมบัติสื่ออื่นๆ นอกเหนือจาก width, ชอบ height และ aspect-ratio

และนั่นเป็นเพียงหนึ่งในคุณสมบัติใหม่กว่าที่สเปคระดับ 4 นำเสนอควบคู่ไปกับ a แบบสอบถามที่เราสามารถทำได้ตามความชอบของผู้ใช้. มันไม่จบแค่นั้น! ตรวจสอบ คู่มือฉบับสมบูรณ์สำหรับ CSS Media Queries สำหรับการแอบมองของ สิ่งที่อาจรวมอยู่ใน Media Queries ระดับ 5.