Color Mode

PostCSS and Modern CSS Features

In this assignment, you will set up a PostCSS build process for your portfolio and implement responsive components using container queries and feature detection with @supports. This assignment brings together the build tooling concepts and modern CSS features you have learned, applying them to create a maintainable, production-ready CSS architecture.

You will work with provided starter files that include the basic structure, HTML scaffold, and configuration files. Your task is to complete the CSS implementation by adding container queries and @supports feature detection, then integrate the build process into your portfolio workflow.

Assignment Overview

You are provided with a complete project structure including HTML, PostCSS configuration, and organized CSS files following CUBE CSS principles. The CSS files are partially complete with TODO comments indicating where you need to add container queries and @supports checks. Your task is to complete the implementation and ensure the PostCSS build process works correctly.

Learning Objectives

Setup Instructions

1. Download Starter Files

Download the starter files and extract the contents. You will find:

2. Add to Your Portfolio

Copy the starter files into your portfolio repository: 


        portfolio/
        └── unit-2/
            └── postcss-practice/
                ├── css/
                │   ├── base/
                │   ├── components/
                │   ├── layout/
                │   ├── utilities/
                │   └── main.css
                ├── index.html
                ├── package.json
                ├── postcss.config.js
                └── .browserslistrc

3. Install Dependencies

Navigate to the postcss-practice directory in your terminal and install the required packages: 


        cd portfolio/unit-2/postcss-practice
        npm install

This command reads the package.json file and installs all the PostCSS plugins and dependencies needed for the build process. The installation may take a minute or two depending on your internet connection.

4. Review the File Structure

Before starting implementation, familiarize yourself with how the CSS is organized:

Open css/components/card.css and read through the TODO comments. This is where you will implement the container queries and @supports checks.

Requirements

Your implementation must meet all of the following requirements. Each requirement demonstrates your understanding of PostCSS, container queries, and progressive enhancement.

1. PostCSS Build Process

2. Container Query Implementation

3. Progressive Enhancement with @supports

4. CSS Organization

5. Testing and Verification

Implementation Steps

1. Set Up the Card Container

Open css/components/card.css and find the first TODO comment. Add the container properties to .card-container: 


        .card-container {
            container-type: inline-size;
            container-name: card;
        }

This establishes the container that child elements can query. The inline-size value means the container tracks its width, and naming it card allows us to be explicit about which container we are querying.

2. Add Container Query for Wide Cards

Add a container query that changes the card layout when the container is at least 400px wide: 


        @container card (min-width: 400px) {
            .card {
                flex-direction: row;
                align-items: flex-start;
            }

            .card-image {
                width: 200px;
                flex-shrink: 0;
            }
        }

This changes the card from a vertical stack to a horizontal layout with the image on the left side. The flex-shrink: 0 prevents the image from getting smaller than 200px.

3. Wrap Container Query in @supports

Now wrap your container setup and query in an @supports check to ensure browsers without container query support use the base styles: 


        @supports (container-type: inline-size) {
            .card-container {
                container-type: inline-size;
                container-name: card;
            }

            @container card (min-width: 400px) {
                .card {
                    flex-direction: row;
                    align-items: flex-start;
                }

                .card-image {
                    width: 200px;
                    flex-shrink: 0;
                }
            }
        }

This ensures that browsers without container query support simply use the base card styles (vertical layout) without errors. The cards will still work, just without the container-based responsive behavior.

4. Add Another Modern CSS Feature

Choose one of the following options and implement it with an @supports fallback. This demonstrates your understanding of progressive enhancement for different CSS features.

Option 1: CSS Nesting for Hover States

Use native CSS nesting to organize hover states inside the .card selector: 


            /* Fallback: separate hover rule */
            .card:hover {
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                transform: translateY(-2px);
            }

            /* Enhanced: nested hover rule */
            @supports (selector(&)) {
                .card {
                    &:hover {
                        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                        transform: translateY(-2px);
                    }
                }
            }
Option 2: color-mix() for Dynamic Colors

Use color-mix() to create a dynamic hover background color: 


            /* Fallback: static background color */
            .card:hover {
                background-color: #f0f0f0;
            }

            /* Enhanced: dynamic color mixing */
            @supports (background: color-mix(in oklch, red, blue)) {
                .card:hover {
                    background-color: color-mix(in oklch, var(--bg-clr) 95%, var(--link-clr) 5%);
                }
            }
Option 3: Subgrid for Card Alignment

If you modify the layout to use a grid of cards, use subgrid to align content across cards: 


            /* Base grid layout */
            .grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                gap: var(--spacing-med);
            }

            .card {
                display: grid;
                grid-template-rows: auto 1fr auto;
                gap: var(--spacing-sm);
            }

            /* Enhanced: subgrid alignment */
            @supports (grid-template-rows: subgrid) {
                .card {
                    grid-template-rows: subgrid;
                    grid-row: span 3;
                }
            }

5. Build and Test

Run the PostCSS build process: 


        npm run build

Open index.html in your browser. The page should now show three cards that respond to their container size. Resize the browser window to verify the container queries work correctly.

During development, you can use the watch command to automatically rebuild when you save changes: 


        npm run watch

Press Ctrl+C in the terminal to stop the watch process when you are done.

6. Verify the Build Output

Open css/main.min.css and verify that:

Understanding the Conditional CSS Loading

The HTML file includes JavaScript that conditionally loads either main.min.css (processed) or main.css (source) depending on which file exists. This is a convenience for this assignment to make testing easier. 


        (async () => {
            const link = document.createElement('link');
            link.rel = 'stylesheet';
            try {
                const res = await fetch('/css/main.min.css', { method: 'HEAD' });
                link.href = res.ok ? '/css/main.min.css' : '/css/main.css';
            } catch {
                link.href = '/css/main.css';
            }
            document.head.appendChild(link);
        })();

This is non-standard practice. In production, you would typically only deploy the processed files and use a standard <link> tag in your HTML. We are using this approach for convenience in this assignment so you can easily test both the source and processed CSS files without manually changing the HTML.

Testing Checklist

Before submitting, verify that your implementation meets these criteria:

Submission

Once you have completed your implementation and tested thoroughly, document your work and submit it for evaluation. Complete the form below with your implementation details, then download the PDF and submit it to Canvas.

PostCSS and Modern CSS Features Documentation
Implementation

Portfolio Link:

Modern CSS Features

Which feature(s) did you implement with @supports?

Container Queries vs Media Queries
How does using container queries change how you think about building reusable components compared to media queries?
Build Tools in Practice
Based on this experience, what factors would make you decide to add a build process to a project versus writing plain CSS?

Evaluation Criteria

Your implementation will be evaluated on how effectively it demonstrates PostCSS configuration, container queries, and progressive enhancement:

Tips for Success