DEV Community: Deepika

Mastering CSS Container Queries: A New Era of Responsive Design

Deepika — Wed, 30 Jul 2025 04:43:44 +0000

Responsive design has always meant designing for different screen sizes — but what if your component needs to adapt to its own container, not the whole viewport?

That’s where CSS Container Queries come in — a powerful addition to CSS that lets you style elements based on the size of their container rather than the size of the browser window.

What Are Container Queries?

Container Queries allow components to adjust their styles based on their parent container’s size. This is a game-changer for modern, component-driven design systems — especially when building reusable UI components in frameworks or systems like:

Atomic Design
React/Vue components
Drupal SDC (Single Directory Components)

Why Use Container Queries?

Component-level responsiveness
Components respond to the size of their container, not the viewport, making them more flexible and context-aware.
No dependency on global breakpoints
Eliminates the need for fixed, site-wide media queries — styles are scoped to each component.
Enhanced reusability and modularity
The same component can behave differently in different layouts without rewriting its CSS.
Ideal for modern UI architecture
Perfect for use with Atomic Design, Web Components, React, Vue, or Drupal SDC — where encapsulation and scalability are key.

Basic Syntax

/* Step 1: Define a container */
.container {
  container-type: inline-size; /* or use 'size' for both width and height */
}

/* Step 2: Add styles based on container size */
@container (min-width: 600px) {
  .card {
    flex-direction: row;
  }
}

Tip: Always define container-type (either inline-size or size) on the parent container.

Example

<div class="container">
  <div class="card">
    <img src="avatar.jpg" alt="User Avatar" />
    <div class="card-content">
      <h2>Jane Doe</h2>
      <p>Frontend Developer</p>
    </div>
  </div>
</div>

.container {
  container-type: inline-size;
  width: 100%;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@container (min-width: 600px) {
  .card {
    flex-direction: row;
  }
}

📱 On smaller screens (or smaller containers), the card stacks vertically.
💻 When the container grows beyond 600px, the layout switches to a row.

Container Query Units
Container Queries also introduce new CSS units like cqw, cqh, cqi, and more.

.card {
  padding: 5cqi; /* 5% of container’s inline size */
}

These units are relative to the container’s size — perfect for fully fluid components.

Not Supported Browsers
Internet Explorer: Not supported and never will be — IE is officially deprecated.
Older browser versions: Anything before the versions listed above.

To ensure safe usage, you can wrap your container query styles inside a @supports rule to check if the feature is available in the user's browser:

@supports (container-type: inline-size) {
  /* Place your container query styles here */
}

Container Queries are redefining responsive design. They make components context-aware and adaptable — truly independent of the global viewport.

If you’re building modern interfaces and care about reusability and flexibility, now’s the time to embrace Container Queries.

Seamless Headless Drupal Integration with Next.js 15 (App Router)

Deepika — Mon, 24 Mar 2025 11:56:13 +0000

Drupal is a powerful content management system (CMS) that provides a robust backend, while Next.js is a fast, modern React framework for building front-end applications. With Next.js 15, the App Router introduces advanced features like caching and improved async handling. This guide will focus on integrating Drupal with Next.js 15 using these new capabilities. 🎯

🔥 Why Integrate Drupal with Next.js?

🌍 Decoupled Architecture: Separates the back-end (Drupal) and front-end (Next.js) for increased flexibility.
⚡ Improved Performance: Next.js 15 introduces automatic caching and async rendering for faster load times.
🎨 Better User Experience: Provides a modern React-powered front-end for improved interactivity.
📈 Scalability: Using Drupal as a headless CMS makes it easier to scale and manage content across platforms.

🏗 Setting Up Next.js 15 with App Router

🔧 Create a Next.js Application

Before starting, ensure you have Node.js installed. Then, run the following command to create a new Next.js 15 project:

npx create-next-app@latest my-nextjs-app --ts --experimental-app
cd my-nextjs-app
npm install

To start the development server:

npm run dev

Your Next.js app should now be running at http://localhost:3000.

📂 Basic Project Structure

my-nextjs-app/
├── app/               # App Router structure
│   ├── layout.tsx     # Root layout
│   ├── page.tsx       # Home page
│   ├── api/           # API routes
│   └── dashboard/     # Example protected page
├── components/        # Reusable UI components
├── styles/           # CSS modules and global styles
├── public/           # Static assets
├── package.json      # Project dependencies
└── next.config.js    # Next.js configuration

🌐 Setting Up Drupal as a Headless CMS

🚀 Install Drupal (New Setup)

Refer to this guide to set up Drupal locally using DDEV.

📡 Install and Configure Drupal JSON:API

To enable API-based communication between Next.js and Drupal, install the JSON:API module:

ddev composer require drupal/jsonapi
ddev drush en jsonapi -y

🔓 Enable CORS for API Requests

To allow Next.js to access Drupal’s API, update services.yml:

cors.config:
  enabled: true
  allowedOrigins: ['*']
  allowedHeaders: ['Content-Type', 'Authorization']
  allowedMethods: ['GET', 'POST', 'OPTIONS', 'PATCH', 'DELETE']

Clear the cache:

ddev drush cr

🚀 Fetching Drupal Data in Next.js 15 (Using Async and Cache)

Next.js 15 introduces improved async handling and caching. To fetch content from Drupal, install the required packages:

npm install next-drupal drupal-jsonapi-params

🌍 Set Environment Variables

Create a .env.local file and add:

NEXT_PUBLIC_DRUPAL_BASE_URL=https://my-site.ddev.site/
NEXT_IMAGE_DOMAIN=my-site.ddev.site
NEXT_PUBLIC_BASE_URL=http://localhost:3000

⚙️ Update `next.config.ts`

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  images: {
    domains: ["my-site.ddev.site"], // Allow images from this domain
    remotePatterns: [
      {
        protocol: "https",
        hostname: "my-site.ddev.site",
        pathname: "/sites/default/files/**",
      },
    ],
  },
};

export default nextConfig;

📰 Fetch Articles from Drupal

Create a client to fetch data using the new fetch API with caching:

import { NextDrupal } from "next-drupal";
import { DrupalJsonApiParams } from "drupal-jsonapi-params";

const drupal = new NextDrupal(process.env.NEXT_PUBLIC_DRUPAL_BASE_URL);

process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0"; // To fix the development fetch error

export async function fetchArticles() {
  const params = new DrupalJsonApiParams()
    .addFields("node--article", ["title", "id", "body", "field_image", "field_tags"])
    .addInclude(["field_image", "field_tags"])
    .addSort("created", "DESC");

  const response = await drupal.getResourceCollection("node--article", {
    params: params.getQueryObject(),
    cache: "force-cache" // Ensures fast loading
  });
  return response;
}

🎨 Rendering Fetched Content in Next.js 15

import { fetchArticles } from "../lib/drupal";
import Image from "next/image";

export default async function Page() {
  const data = await fetchArticles();
  console.log(data);
  return (
    <div>
      {data.map((article) => (
        <div key={article.id || article.title}> {/* ✅ Add key to top-level item */}
          <h2 className="article-title">{article.title}</h2>

          {article.field_image?.uri?.url && (
            <Image
              src={`${process.env.NEXT_PUBLIC_DRUPAL_BASE_URL}${article.field_image.uri.url}`}
              alt={article.title}
              width={400}
              height={250}
              className="image"
            />
          )}

          {article.body?.value ? <p>{article.body.value}</p> : <p></p>}

          {article.field_tags?.length > 0 && (
            <ul>
              {article.field_tags.map((tag, index) => (
                <li key={tag.id || `${tag.name}-${index}`}>{tag.name}</li>
              ))}
            </ul>
          )}
        </div>
      ))}
    </div>
  );
}

🎯 Conclusion

By integrating Drupal’s headless capabilities with Next.js 15 and its App Router, you get a powerful, modern, and scalable architecture. 🚀 Next.js 15’s improved caching and async capabilities enhance performance, ensuring faster content delivery. With Drupal serving as a robust backend, this setup provides flexibility for managing content while leveraging the interactivity and efficiency of React on the front end. 🎨✨

Core Web Vitals: What They Are & How to Improve Your Site’s Performance

Deepika — Tue, 18 Feb 2025 12:51:05 +0000

Core Web Vitals are a set of key performance metrics defined by Google to measure a website's speed, interactivity, and visual stability. These metrics play a crucial role in providing a good user experience and are essential for SEO rankings.

Tools to Measure Website Performance
Several tools are available to analyze and improve website performance:

Google PageSpeed Insights
Lighthouse (Chrome DevTools)
Web Vitals Chrome Extension
Google Search Console
Core Web Vitals Metrics

1. Largest Contentful Paint (LCP) — Measures Loading Performance

LCP measures the time taken to load and render the largest visible content element (e.g., an image, video, or text block) within the viewport. It is a key indicator of how quickly users perceive a page to load.

Ideal LCP: Less than 2.5 seconds.

How to Optimize LCP

1. Optimize Images

Use next-generation image formats such as WebP and AVIF instead of JPEG/PNG.
Lazy-load non-critical images using the loading="lazy" attribute.

<img src="image.webp" alt="Lazy Loaded Image" loading="lazy" width="600" height="400">

Do not lazy-load above-the-fold images to ensure faster rendering.
Use responsive images (srcset) to serve different sizes for different screen resolutions.

<img 
  src="image.jpg" 
  srcset="image-480w.jpg 480w, image-800w.jpg 800w, image-1200w.jpg 1200w"
  sizes="(max-width: 600px) 480px, (max-width: 1200px) 800px, 1200px"
  alt="Responsive image">

Enable efficient caching by setting a long cache expiration for static images.

2. Reduce Render-Blocking Resources

Minimize CSS and JavaScript blocking by:
Deferring non-critical JavaScript (defer or async).
Use defer for scripts that modify the DOM (main.js, app.js).
Use async for scripts that are independent (analytics.js, ads.js).
Removing unused CSS using tools like PurgeCSS.
Using Critical CSS for above-the-fold content.

3. Optimize Fonts

Preload important fonts for faster rendering.

 <link rel="preload" href="fonts/my-font.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Use font-display: swap; to avoid render delays.

@font-face {
  font-family: 'MyCustomFont';
  src: url('/fonts/MyCustomFont.woff2') format('woff2'),
       url('/fonts/MyCustomFont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

Self-host fonts instead of relying on external services to reduce dependency on third-party networks.

4. Optimize JavaScript Execution

Minimize long-running scripts by breaking them into smaller tasks.
Avoid excessive DOM manipulations.
Defer third-party scripts such as analytics, ads, and social media embeds.

5. Prioritize Above-the-Fold Content

Ensure that the LCP element loads first without being delayed by other resources.
Avoid dependency on slow third-party scripts for LCP elements.

2. Interaction to Next Paint (INP) — Measures Interactivity

INP (previously FID - First Input Delay) measures the time between a user's first interaction (e.g., clicking a button or link) and the browser's response. It assesses a website's interactivity and responsiveness.

Ideal INP: Less than 200ms.

How to Optimize INP

1. Reduce JavaScript Execution Time

Minimize long tasks by breaking them into smaller chunks.
Defer non-essential JavaScript (defer or async).
Use Web Workers for background tasks to prevent main-thread blocking.

2. Optimize Third-Party Scripts

Limit the use of third-party scripts such as ads, social media widgets, and analytics.
Load third-party scripts asynchronously.

<script async src="https://www.example.com/"></script>

3. Reduce Main Thread Work

Minimize reflows and repaints by optimizing CSS and layout.
Use requestIdleCallback() to schedule non-critical tasks.
Use efficient JavaScript frameworks, such as React with Concurrent Mode.
Use Web Workers for Heavy Computation **Js file**

const worker = new Worker('worker.js');
worker.postMessage({ data: "Heavy Task" });

worker.onmessage = function (event) {
  console.log("Processed result:", event.data);
};

**worker.js**

self.onmessage = function (event) {
  const result = heavyComputation(event.data);
  self.postMessage(result);
};

function heavyComputation(data) {
  // Simulate heavy calculations
  return data + " processed";
}

4. Optimize Event Listeners

Avoid heavy computations in input event handlers (keydown, click, etc.). Use passive event listeners for scroll and touch events:

document.addEventListener('scroll', handler, { passive: true });

Use debounce to optimize the event listeners

function debounce(func, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  };
}

// Example usage: Optimizing an input field event
const searchInput = document.getElementById("search");
searchInput.addEventListener(
  "input",
  debounce((event) => {
    console.log("Search:", event.target.value);
  }, 300)
);

5. Improve Web Performance Techniques

Utilize a Content Delivery Network (CDN) for faster content delivery.
Enable Gzip/Brotli compression to reduce page size.
Reduce DOM size to prevent excessive processing.
Minimize the css and js file using gulp/webpack

3. Cumulative Layout Shift (CLS) — Measures Visual Stability

CLS measures unexpected shifts in visible content while a page is loading. It impacts the user experience by ensuring that elements remain visually stable.

Ideal CLS: Less than 0.1.

How to Optimize CLS

1. Set Explicit Width & Height for Images & Videos

Always define width and height attributes in <img> and <video> tags to prevent layout shifts.
Use aspect-ratio in CSS to reserve space before images load.

img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

2. Reserve Space for Ads, Embeds, and Iframes

Use min-height in CSS to allocate space for ads and iframes.
Avoid dynamically inserting ads that push content down.

.ad-slot {
  min-height: 250px; /* Reserve space */
  background: #f0f0f0;
}

3. Avoid Dynamically Injected Content Above Existing Content

Avoid banners or pop-ups that push content down.
Use position: fixed or position: absolute for pop-ups to prevent layout shifts.

4. Optimize Fonts to Prevent FOUT/FOIT

Use font-display: swap; in CSS to prevent text shifts.
Preload fonts for faster rendering.

<link rel="preload" href="fonts/my-font.woff2" as="font" type="font/woff2" crossorigin="anonymous">

5. Use Stable Animations & Transitions

Avoid animations that cause layout shifts.
Use transform: translate() instead of modifying layout properties (width, height, margin).

.animated-element {
  transform: translateY(10px);
  transition: transform 0.3s ease-in-out;
}

Conclusion
Optimizing Core Web Vitals is essential for providing a seamless and engaging user experience. By following these best practices, you can improve your site's performance, enhance user satisfaction, and boost your search engine rankings.