container queries

Revision:


Content



example without any container queries

top
nice image

Lorem ipsum dolor sit amet consectetur adipisicing elit. Et voluptate itaque neque totam quod vitae mollitia beatae blanditiis saepe quaerat porro, laborum quasi accusamus voluptates consectetur ipsam tempora, possimus modi.

code:
            <div class='card-container'>
                <div class="card">
                    <div class="card-header">
                        <img
                        src="../images/1.jpg" alt="nice image"/>
                    </div>
                    <div class="card-body">
                        <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Et voluptate
                        itaque neque totam quod vitae mollitia beatae blanditiis saepe quaerat
                        porro, laborum quasi accusamus voluptates consectetur ipsam tempora,
                        possimus modi.
                        </p>
                    <button>Details</button>
                    <button>Contact me</button>
                    </div>
                </div>
             </div>
             <style>
                .card {display: flex; flex-direction: row; gap: 1rem; border: 1px solid #ccc; padding: 1rem;}
                .card-header {max-width: 400px;}
                img {width: 100%; height: 100%; object-fit: cover;}
             </style>
         

example with container queries

top
nice image

Lorem ipsum dolor sit amet consectetur adipisicing elit. Et voluptate itaque neque totam quod vitae mollitia beatae blanditiis saepe quaerat porro, laborum quasi accusamus voluptates consectetur ipsam tempora, possimus modi.

code:
            <div class='card-container1'>
                <div class="card1">
                    <div class="card-header1">
                        <img id="image1" src="../images/1.jpg" alt="nice image"/>
                    </div>
                    <div class="card-body">
                        <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Et voluptate
                        itaque neque totam quod vitae mollitia beatae blanditiis saepe quaerat
                        porro, laborum quasi accusamus voluptates consectetur ipsam tempora,
                        possimus modi.
                        </p>
                    <button>Details</button>
                    <button>Contact me</button>
                    </div>
                </div>
             </div>
             <style>
                .card-container1 {container-type: inline-size;}
                .card1 {display: flex; flex-direction: row; gap: 1rem; border: 1px solid #ccc; padding: 1rem;}
                .card-header1 {max-width: 400px;}
                #image1 {width: 100%; height: 100%; object-fit: cover; }
                @container (max-width: 500px) {
                    .card1 {flex-direction: column;}
                }
            </style>
         

components with independent styles

top

Hero Section

Section 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio quos repellendus iure atque accusantium. Tempora perferendis ipsa quia, ut magnam adipisci repudiandae porro ad eos. Officiis sit nam ad temporibus!

Section 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio quos repellendus iure atque accusantium. Tempora perferendis ipsa quia, ut magnam adipisci repudiandae porro ad eos. Officiis sit nam ad temporibus!

code:
            <div>
                <header>
                    <div>
                        <nav>
                            <ul>
                            <li>One</li>
                            <li>Two</li>
                            <li>Three</li>
                            <li>Four</li>
                            <li>Five</li>
                            </ul>
                        </nav>
                        <section>
                            <h1>Hero Section</h1>
                        </section>
                    </div>
                </header>
                <main>
                    <div>
                        <section class="section-one">
                            <h2>Section 1</h2>
                            <p>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio quos
                            repellendus iure atque accusantium. Tempora perferendis ipsa quia,
                            ut magnam adipisci repudiandae porro ad eos. Officiis sit nam ad
                            temporibus!
                            </p>
                        </section>
                        <section class="section-two">
                            <h3>Section 2</h3>
                            <p>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio quos
                            repellendus iure atque accusantium. Tempora perferendis ipsa quia,
                            ut magnam adipisci repudiandae porro ad eos. Officiis sit nam ad
                            temporibus!
                            </p>
                        </section>
                    </div>
                </main>
            </div>
            <style>
                header { container-name: headerContainer; container-type: inline-size;}
                @container headerContainer (max-width: 700px) {
                    /* This style will not be applied because it is outside of headerContainer element  */
                    .section-one{ border: 2px solid black;}
                    /* This style will  be applied because it is inside of headerContainer element  */
                    nav {border: 2px solid black;}
                }
    
                main {container-name: mainContainer; container-type: inline-size;}
                @container mainContainer (width < 800px) {
                    /* This style will  be applied because it is inside of mainContainer element  */
                    .section-one {background-color: #89cff0;}
                    /* This style will not be applied because it is outside of mainContainer element  */
                    nav {background-color: green;}
                }
            </style>
        

when to use CSS container queries

Lorem ipsum dolor sit amet consectetur adipisicing elit. Et voluptate itaque neque totam quod vitae mollitia beatae blanditiis saepe quaerat porro, laborum quasi accusamus voluptates consectetur ipsam tempora, possimus modi.


Lorem ipsum dolor sit amet consectetur adipisicing elit. Et voluptate itaque neque totam quod vitae mollitia beatae blanditiis saepe quaerat porro, laborum quasi accusamus voluptates consectetur ipsam tempora, possimus modi.

code:
            <main class="frame">
                <div class="card2 card-shadow">
                    <div class="card-header2">
                        <img class="image2" src="../images/2.jpg" alt="" />
                    </div>
                    <div class="card-body">
                        <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Et
                        voluptate itaque neque totam quod vitae mollitia beatae blanditiis
                        saepe quaerat porro, laborum quasi accusamus voluptates consectetur
                        ipsam tempora, possimus modi.
                        </p>
                        <button class="btn">Details</button>
                        <button class="btn btn-outline">Contact seller</button>
                    </div>
                </div>
                <br />
                <div class="card2 card-shadow">
                    <div class="card-header2">
                        <img class="image2" src="../images/3.jpg" alt=""/>
                    </div>
                    <div class="card-body">
                        <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Et
                        voluptate itaque neque totam quod vitae mollitia beatae blanditiis
                        saepe quaerat porro, laborum quasi accusamus voluptates consectetur
                        ipsam tempora, possimus modi.
                        </p>
                        <button class="btn">Details</button>
                        <button class="btn btn-outline">Contact seller</button>
                    </div>
                </div>
            </main>
            <aside class="sidebar">
                <h3>Sidebar</h3>
                <div class="card2 card-shadow">
                    <div class="card-header2">
                        <img class="image2" src="../images/4.jpg" alt=""/>
                    </div>
                    <div class="card-body">
                        <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Et
                        voluptate itaque neque totam quod vitae mollitia beatae blanditiis
                        saepe quaerat porro, laborum quasi accusamus voluptates consectetur
                        ipsam tempora, possimus modi.
                        </p>
                        <button class="btn">Details</button>
                        <button class="btn btn-outline">Contact seller</button>
                    </div>
                </div>
            </aside>
            <style>
                aside {border-left: 3px solid black; padding: 0.5rem; flex: 1;}
                .frame {padding: 0.5rem; flex: 1;}
                .card2 {display: flex; flex-direction: row;}
                .card-header2 {max-width: 500px;}
                .image2 { width: 100%; height: 100%; object-fit: cover;}
                .btn.btn-outline:hover, .btn.btn-outline:focus { background-color: hsl(200, 50%, 90%);}
                .btn + .btn {margin-left: 0.25rem;}
                .frame, .sidebar {container-type: inline-size; container-name: sidebar;}
                @container sidebar (max-width: 500px) {
                    .card2 {flex-direction: column;}
                    .card-header2 {width: 100%; }
                }
            </style>
        

container query Valentine

top

Happy Container Query Day

code:
        <div class="frame1">
          <div class="card-container_A">
              <div class="card_A">
                <div class="size-area">
                  <div class="size-line"></div>
                  <div class="size-indicator">
                    <div class="size-val"></div>
                  </div>
                  <div class="size-line"></div>
                </div>
                <div class="layout">
                  <div class="heart">
                    <h3>
                      <span class="line-1">Happy</span>
                      <span class="line-2">Container</span>
                      <span class="line-3">Query</span>
                      <span class="line-4">Day</span>
                    </h3>
                  </div>
                </div>
                <div class="bonus-thing"></div>
              </div>
          </div>
          <button id="btn-1" data-trigger="cycle-width">Cycle width</button>
        </div>
      <style>
      
        :root {--mouse-x: 50%; --mouse-y: 25%;}
        .card-container_A {container: card_A / inline-size; overflow: hidden; resize: horizontal; width: 600px; min-width: 300px; max-width: 900px;  height: 500px; filter: drop-shadow(0 15px 50px #600b); }
        .card_A {--size-heart-color: mediumvioletred; --bg: lightpink; padding: 1rem; width: 100%; height: 100%; background: var(--bg);}
        .heart {container: heart / inline-size;}
        .heart span { display: block;  text-align: center;}
        .size-area { display: grid;  gap: 1rem; grid-template-columns: 1fr auto 1fr; align-items: center;}
        .size-line {height: 2px; background-color: var(--size-heart-color);}
        .size-indicator {position: relative; margin: 0 auto;display: grid; place-items: center; width: 60px; height: 45px;}
        .size-indicator:before, .size-indicator:after {position: absolute;  content: ""; left: 30px; top: 0; width: 30px; height: 50px;      background: var(--size-heart-color); border-radius: 30px 30px 0 0; transform: rotate(-45deg); transform-origin: 0 100%;}
        .size-indicator:after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; }
        @container card_A (max-width: 399px) { 
          /*  Color fonts  */
          .heart span {font-family: Mistral, sans-serif; font-palette: --myPalette; font-size: 3.6rem; line-height: 1;}
          @font-palette-values --myPalette {  
           font-family: Mistral; base-palette: 6;
          }
          .card_A {display: grid;  align-items: center; grid-template-rows: 1fr auto; margin-bottom: 2em; background: linear-gradient(#ffb8ef, #ebcdff);}
          .size-area {margin-bottom: 1em;}
          .size-indicator {transition: all 0.2s ease-in-out; scale: 2; transform-origin: 50% 100%;}
          .layout {grid-row: 1/2; }
        }
        @container card_A (min-width: 400px) and (max-width: 499px) {
          .card_A { --size-heart-color: #fff; --bg: #333; --color-1: rgb(205 255 155 / 1);  --color-2: rgb(0 0 0 / 0); --size: 7.5rem;      display: flex; flex-direction: column-reverse; gap: 1em; }
          .card_A .size-val {/* @TODO: Put in Custom Prop instead of doing the Specificity thing */ color: #333;}
          .layout {flex: 1; display: grid; place-content: center; background: radial-gradient( var(--size) var(--size) at var(--mouse-x) var(--mouse-y), var(--color-1) 0%, var(--color-2) 99%); -webkit-background-clip: text; background-clip: text; }
          .heart {pointer-events: none; container-type: normal;}
          h3 {font-size: 4rem;font-family: "Exo", sans-serif; text-transform: uppercase; color: transparent; user-select: none;}
        }
        @container card_A (min-width: 500px) and (max-width: 599px) {
          /* argyle! */
          .card_A {--size-heart-color: white; --bg: white; background: linear-gradient(45deg, green, blue, red); text-shadow: 0 1px 4px hsl(0 0% 0% / 20%); -webkit-mask: var(--mask-corner-cut-circles-2); mask: var(--mask-corner-cut-circles-2);}
          h3{color: skyblue; }
          .heart {font-size: 5cqi;}
          .size-val {color: red;}
          @media (prefers-reduced-motion: no-preference) {
            .size-indicator {animation: var(--animation-float);}
          }
        }

        @keyframes rotate {
          to {--angle: 360deg; }
        }
        @property --angle {
          syntax: "<angle>";
          initial-value: 0deg;
          inherits: true;
        }
        @property --scaler {
          syntax: "<number>";
          initial-value: 0.1;
          inherits: true;
        }

        @keyframes fade-in {
          from {opacity: 0;}
          to {opacity: 1;}
        }
        @keyframes drop-in {
          from {translate: 0% -100%;}
          to {translate: 0% calc(var(--i) * 25%);}
        }
        @container card_A (min-width: 600px) and (max-width: 699px) {
          .card-container_A {
          }         

          .card_A {--size-heart-color: darkmagenta; --bg: hotpink; --bg: repeating-conic-gradient( deeppink, deeppink 10deg, hotpink 10deg,
          hotpink 20deg );}
          .heart {container-type: normal; }
          .line-1 {--i: 1;}
          .line-2 {--i: 2;}
          .line-3 {--i: 3;}
          .line-4 {--i: 4;}

          h3 {font-weight: 700; color: white; text-shadow: 2px 2px rgb(0 0 0 / 0.4); user-select: none;}
          h3 span { --scaler: 0.1; animation: fade-in 0s ease-in-out, drop-in 0s ease-in-out both;  animation-delay: calc(var(--i) * -0.2s); font-size: 3rem;  rotate: calc(var(--i) * -10deg); scale: calc(1 + (var(--i) * var(--scaler))); opacity: 1;}
          @media (prefers-reduced-motion: no-preference) {
            .card_A { animation: 30s rotate linear infinite;}
            h3 span {animation-duration: 1s, 1s;transition: scale 2s ease-in-out, opacity 2s ease-in-out; transition-delay: calc((var(--i) - 1) * 0.1s), 0;}
            h3:hover span {--scaler: 10; opacity: 0; }
          }
        }
        @font-palette-values --nabla {
          font-family: "Nabla";
          base-palette: 1;
          override-colors: 0 hsl(328deg 100% 50%);
        }

        @container card_A (min-width: 700px) and (max-width: 799px) {
          /* argyle! */
          .card_A {--size-heart-color: deeppink; --bg: magenta; color: white;  background: #111; -webkit-mask: var(--mask-edge-scalloped); mask: var(--mask-edge-scalloped);}
          .bonus-thing {display: none;}
          .heart > h3 { font-size: 11cqi; font-family: "Segoe Script"; font-palette: --nabla; line-height: 1.1;  margin-top: 1.5rem; }
          @media (dynamic-range: high) {
            @supports (background: color(display-p3 1 0 1)) {
              .card_A {--size-heart-color: color(display-p3 1 0 1);}
            }
          }
        }
        @container card_A (min-width: 800px) {
          .card_A { --size-heart-color: palevioletred;--bg: #ffe4e5;}
          .bonus-thing { display: block; background: url("../images/flowers.jpg"); background-size: contain; background-repeat: no-repeat;       position: absolute; bottom: -60%; right: 5%; width: 40cqi; height: 70cqi; animation: pop-in 0.25s ease-in forwards;}
          .heart span { text-align: left; font-size: min(11cqi, 5.5rem); padding-left: 3rem; color: #cf6387; line-height: 1.1;          text-shadow: 4px 2px #ff9f9f, 8px 4px #ffe5a9, 12px 8px white;}
          @keyframes pop-in {
            0% {opacity: 0; transform: scale(0.8) rotate(-8deg);}
            100% { opacity: 1; transform: scale(1) rotate(8deg);}
          }
        }
        @layer base {
          .frame1 * {box-sizing: border-box;}
          .frame1 {font-family: system-ui; display: grid; place-items: center; height: 80vh; background: url(../images/25.jpg) center no-repeat; background-size: cover;} 
          .card-container_A:after { content: "Resize me"; display: block; position: absolute; bottom: 0.35rem; right: 0.35rem; background: white;
          text-transform: uppercase; padding: 0.25rem; letter-spacing: 0.5px; font-size: 80%; font-weight: 600;}
          h3 {font-family: "Petit Formal Script";}
          .bonus-thing {position: absolute; display: none;}
          .size-val {z-index: 1; color: white;}
          #btn-1 {padding: 0.5rem; background: white; border: 1px solid black; text-transform: uppercase; letter-spacing: 0.5px; z-index: 1;}
        }
      </style>
      <script>
        const cardContainer = document.querySelector(".card-container_A");
        let containerWidth = 600; // = default width

      // Observe container and keep track of its width.
      const cardObserver = new ResizeObserver((entries) => {
        entries.forEach((entry) => {
          containerWidth = entry.contentRect.width;
          document.querySelector(".size-val").innerText = containerWidth;
        });
      });
      cardObserver.observe(cardContainer);

      const widths = [300, 400, 500, 600, 700, 900];
      document
        .querySelector('[data-trigger="cycle-width"]')
        .addEventListener("click", () => {
          // Find next listed width greater than current containerWidth
          let widthIndex = widths.findIndex(function (potentialWidth) {
            return potentialWidth > containerWidth;
          });

          // No match found? Wing back to first eligible width
          widthIndex = widthIndex == -1 ? 0 : widthIndex;

          // Update container width
          cardContainer.style.width = `${widths[widthIndex]}px`;

          // Reset mouse position
          document.documentElement.style.setProperty("--mouse-x", `50%`);
          document.documentElement.style.setProperty("--mouse-y", `50%`);
        });

      // Track mouse position over .layout
      document.querySelector(".layout").addEventListener("pointermove", (evt) => {
        let x = evt.offsetX;
        let y = evt.offsetY;

        document.documentElement.style.setProperty("--mouse-x", `${x}px`);
        document.documentElement.style.setProperty("--mouse-y", `${y}px`);
      });
    
    </script>