CSS @container layout All In One

CSS @container layout All In One

image

article {
  contain: content;
}

article {
  contain: layout;
}

article {
  contain: paint;
}

article {
  contain: size;
}

article {
  contain: style;
}

article {
  contain: strict;
}


image

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, 禁止轉載 🈲️,侵權必究⚠️!


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章