Artwork

เนื้อหาจัดทำโดย Wes Bos and Scott Tolinski - Full Stack JavaScript Web Developers เนื้อหาพอดแคสต์ทั้งหมด รวมถึงตอน กราฟิก และคำอธิบายพอดแคสต์ได้รับการอัปโหลดและจัดเตรียมโดย Wes Bos and Scott Tolinski - Full Stack JavaScript Web Developers หรือพันธมิตรแพลตฟอร์มพอดแคสต์โดยตรง หากคุณเชื่อว่ามีบุคคลอื่นใช้งานที่มีลิขสิทธิ์ของคุณโดยไม่ได้รับอนุญาต คุณสามารถปฏิบัติตามขั้นตอนที่อธิบายไว้ที่นี่ https://th.player.fm/legal
Player FM - แอป Podcast
ออฟไลน์ด้วยแอป Player FM !

Hasty Treat - Container Queries Are Here

24:21
 
แบ่งปัน
 

Manage episode 290324677 series 1469447
เนื้อหาจัดทำโดย Wes Bos and Scott Tolinski - Full Stack JavaScript Web Developers เนื้อหาพอดแคสต์ทั้งหมด รวมถึงตอน กราฟิก และคำอธิบายพอดแคสต์ได้รับการอัปโหลดและจัดเตรียมโดย Wes Bos and Scott Tolinski - Full Stack JavaScript Web Developers หรือพันธมิตรแพลตฟอร์มพอดแคสต์โดยตรง หากคุณเชื่อว่ามีบุคคลอื่นใช้งานที่มีลิขสิทธิ์ของคุณโดยไม่ได้รับอนุญาต คุณสามารถปฏิบัติตามขั้นตอนที่อธิบายไว้ที่นี่ https://th.player.fm/legal

In this Hasty Treat, Scott and Wes talk about CSS container queries, what they are and how to use them.

Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

Show Notes

07:22 - Why?

  • Container queries are media queries for components (e.g. they are based on the element’s size, not the browser).
  • This is in line with how we write components.
  • It will change the way we write CSS.

08:49 - The Syntax

  • Containers need to be defined as containers via containment context
.container { contain: size layout; }

New contain value:

.inline-container { contain: inline-size; }

This is the same as the logical properties. Assuming you read LTR, or RTL:

  • size - width and height
  • inline-size = width
  • block-size = height
/* @container { } */ @container (inline-size > 45em) { .media-object { grid-template: "img content" auto / auto 1fr; } }

18:49 - How to try them today

  1. Download and/or update Chrome Canary
  2. Go to chrome://flags
  3. Search and enable “CSS Container Queries”
  4. Restart the browser

19:27 - Demos

Links Tweet us your tasty treats!
  continue reading

750 ตอน

Artwork
iconแบ่งปัน
 
Manage episode 290324677 series 1469447
เนื้อหาจัดทำโดย Wes Bos and Scott Tolinski - Full Stack JavaScript Web Developers เนื้อหาพอดแคสต์ทั้งหมด รวมถึงตอน กราฟิก และคำอธิบายพอดแคสต์ได้รับการอัปโหลดและจัดเตรียมโดย Wes Bos and Scott Tolinski - Full Stack JavaScript Web Developers หรือพันธมิตรแพลตฟอร์มพอดแคสต์โดยตรง หากคุณเชื่อว่ามีบุคคลอื่นใช้งานที่มีลิขสิทธิ์ของคุณโดยไม่ได้รับอนุญาต คุณสามารถปฏิบัติตามขั้นตอนที่อธิบายไว้ที่นี่ https://th.player.fm/legal

In this Hasty Treat, Scott and Wes talk about CSS container queries, what they are and how to use them.

Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

Show Notes

07:22 - Why?

  • Container queries are media queries for components (e.g. they are based on the element’s size, not the browser).
  • This is in line with how we write components.
  • It will change the way we write CSS.

08:49 - The Syntax

  • Containers need to be defined as containers via containment context
.container { contain: size layout; }

New contain value:

.inline-container { contain: inline-size; }

This is the same as the logical properties. Assuming you read LTR, or RTL:

  • size - width and height
  • inline-size = width
  • block-size = height
/* @container { } */ @container (inline-size > 45em) { .media-object { grid-template: "img content" auto / auto 1fr; } }

18:49 - How to try them today

  1. Download and/or update Chrome Canary
  2. Go to chrome://flags
  3. Search and enable “CSS Container Queries”
  4. Restart the browser

19:27 - Demos

Links Tweet us your tasty treats!
  continue reading

750 ตอน

모든 에피소드

×
 
Loading …

ขอต้อนรับสู่ Player FM!

Player FM กำลังหาเว็บ

 

คู่มืออ้างอิงด่วน