5 replies

Is it possible to use container queries on container itself?

Hey guys, recently been trying to get back to container queries research, and found that styles don't apply on container itself. I think I saw Kevin do that in one of his videos, and now it doesn't work. Or maybe I'm trippin.
Anyway example below didn't work. Google suggests using wrapper, but it doesn't go well when there is a list of such containers. I assume that I can use

display: contents

display: contents

on wrapper, but overall wrapping doesn't seem like a good solution. Maybe someone figured out how to do this properly, or knows if its planned in specs. Any answer is appreciated!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Container Query Example</title>
    <style>
        /* Define the container */
        .card {
            container: card / inline-size;
            width: 100%; /* This ensures the card takes up available space */
            /* Other default styles for .card */
            background-color: lightgrey;
            padding: 10px;
            border: 1px solid grey;
        }

        /* Container query for .card when its width is more than 300px */
        @container card (min-width: 300px) {
            .card {
                /* Styles for .card when its width is more than 300px */
                background-color: lightblue;
                padding: 20px;
                border: 2px solid blue;
            }
        }
    </style>
</head>
<body>
    <div class="card">
        <p>This is a card component.</p>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Container Query Example</title>
    <style>
        /* Define the container */
        .card {
            container: card / inline-size;
            width: 100%; /* This ensures the card takes up available space */
            /* Other default styles for .card */
            background-color: lightgrey;
            padding: 10px;
            border: 1px solid grey;
        }

        /* Container query for .card when its width is more than 300px */
        @container card (min-width: 300px) {
            .card {
                /* Styles for .card when its width is more than 300px */
                background-color: lightblue;
                padding: 20px;
                border: 2px solid blue;
            }
        }
    </style>
</head>
<body>
    <div class="card">
        <p>This is a card component.</p>
    </div>
</body>
</html>

Is it possible to use container queries on container itself?

display: contents

display: contents

on wrapper, but overall wrapping doesn't seem like a good solution. Maybe someone figured out how to do this properly, or knows if its planned in specs. Any answer is appreciated!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Container Query Example</title>
    <style>
        /* Define the container */
        .card {
            container: card / inline-size;
            width: 100%; /* This ensures the card takes up available space */
            /* Other default styles for .card */
            background-color: lightgrey;
            padding: 10px;
            border: 1px solid grey;
        }

        /* Container query for .card when its width is more than 300px */
        @container card (min-width: 300px) {
            .card {
                /* Styles for .card when its width is more than 300px */
                background-color: lightblue;
                padding: 20px;
                border: 2px solid blue;
            }
        }
    </style>
</head>
<body>
    <div class="card">
        <p>This is a card component.</p>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Container Query Example</title>
    <style>
        /* Define the container */
        .card {
            container: card / inline-size;
            width: 100%; /* This ensures the card takes up available space */
            /* Other default styles for .card */
            background-color: lightgrey;
            padding: 10px;
            border: 1px solid grey;
        }

        /* Container query for .card when its width is more than 300px */
        @container card (min-width: 300px) {
            .card {
                /* Styles for .card when its width is more than 300px */
                background-color: lightblue;
                padding: 20px;
                border: 2px solid blue;
            }
        }
    </style>
</head>
<body>
    <div class="card">
        <p>This is a card component.</p>
    </div>
</body>
</html>

Is it possible to use container queries on container itself?

Is it possible to use container queries on container itself?

Continue the conversation

Kevin Powell - Community

Similar Threads

Continue the conversation

Kevin Powell - Community

Similar Threads