CSS @container layout All In One
article {
contain: content;
}
article {
contain: layout;
}
article {
contain: paint;
}
article {
contain: size;
}
article {
contain: style;
}
article {
contain: strict;
}
https://caniuse.com/css-container-queries
@container
@container <container-condition> {
<stylesheet>
}
https://developer.mozilla.org/en-US/docs/Web/CSS/@container
https://developer.mozilla.org/en-US/docs/Web/CSS/contain
https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries#naming_containment_contexts
CSS Containment
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Containment
CSS Container Queries
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries
demos
.container {
container-type: inline-size;
container-name: sidebar;
}
@container sidebar (min-width: 700px) {
.card {
display: grid;
grid-template-columns: 2fr 1fr;
}
}
(🐞 反爬蟲測試!打擊盜版⚠️)如果你看到這個信息, 說明這是一篇剽竊的文章,請訪問 https://www.cnblogs.com/xgqfrms/ 查看原創文章!
refs
https://css-tricks.com/next-gen-css-container/
https://css-tricks.com/wp-content/uploads/2021/04/Kapture-2021-03-24-at-12.04.23.mp4
https://codepen.io/xgqfrms/pen/rNKqVRZ
https://codepen.io/xgqfrms/pen/yLERNwK
https://www.smashingmagazine.com/2021/05/complete-guide-css-container-queries/
https://codepen.io/xgqfrms/pen/dyKgoEb
https://ishadeed.com/article/container-query-units/
©xgqfrms 2012-2021
www.cnblogs.com/xgqfrms 發佈文章使用:只允許註冊用戶纔可以訪問!
原創文章,版權所有©️xgqfrms, 禁止轉載 🈲️,侵權必究⚠️!