CSS @container layout All In One
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
WD === Working Draft
CSS Containment Module Level 3
W3C Working Draft, 18 August 2022
https://www.w3.org/TR/css-contain-3/
@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;
}
}
codepen
https://codepen.io/xgqfrms/pen/rNKqVRZ
https://codepen.io/xgqfrms/pen/yLERNwK
https://codepen.io/xgqfrms/pen/dyKgoEb
youtube
(🐞 反爬虫测试!打击盗版⚠️)如果你看到这个信息, 说明这是一篇剽窃的文章,请访问 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://www.smashingmagazine.com/2021/05/complete-guide-css-container-queries/
https://ishadeed.com/article/container-query-units/
©xgqfrms 2012-2021
www.cnblogs.com/xgqfrms 发布文章使用:只允许注册用户才可以访问!
原创文章,版权所有©️xgqfrms, 禁止转载 🈲️,侵权必究⚠️!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/16942423.html
未经授权禁止转载,违者必究!