Container Queries vs Media Queries

Both Container Queries and Media Queries are CSS techniques used to apply styles based on certain conditions. However, they differ in what they target and how they are used.

---

1. Media Queries

Media Queries apply styles based on the viewport size or other global properties of the device.

Key Features:

• Targets the entire viewport (e.g., screen width, height, resolution, orientation).
• Useful for responsive design based on device size.
• Does not consider the size of individual elements or containers.

Syntax:

@media (min-width: 768px) {
  .example {
    font-size: 18px;
  }
}

Use Case:

• Adjusting layouts for different screen sizes (e.g., mobile, tablet, desktop).
• Example: Changing the font size or layout when the viewport width exceeds 768px.

---

2. Container Queries

Container Queries apply styles based on the size of a specific container rather than the viewport. By default, a container query targets the nearest parent element that has a container-type declared. This is achieved using the @container rule, which works in conjunction with the container-type and container-name properties.

Key Features:

• Targets the size of an element's container (e.g., width, height).
• Useful for component-based design where styles depend on the container's size.
• Allows more granular control, especially in nested layouts or micro frontends.

Syntax:

.container {
  container: size; /* Establishes a container context */
}

@container (min-width: 400px) {
  .example {
    font-size: 18px;
  }
}

3. Enabling Container Queries

To use container queries, you need to define a container context for the parent element using the container property.

Example:

.container {
  container: size; /* Establishes a container context */
  width: 100%;
  max-width: 600px;
  border: 1px solid #ccc;
}

@container (min-width: 400px) {
  .child {
    background-color: lightblue;
    font-size: 1.5rem;
  }
}

@container (max-width: 399px) {
  .child {
    background-color: lightcoral;
    font-size: 1rem;
  }
}

---

4. Key Properties

1. container-type:

   • Defines the type of container query.
   • Values:
     • size: Enables size-based queries (width and height).
     • inline-size: Enables queries based only on the inline size (width in horizontal writing modes).

   Example:

   .container {
     container-type: size; /* Enables size-based container queries */
   }

2. container-name:

   • Assigns a name to the container, allowing you to target it in container queries.
   • Values:
     • Any custom name (e.g., my-container).

   Example:

   .container {
     container-type: size;
     container-name: my-container;
   }

3. container:

   • A shorthand for container-type and container-name.
   • Syntax: container: <container-type> <container-name>;

   Example:

   .container {
     container: size my-container;
   }

---

5. Practical Use Case

HTML:

<div class="container">
  <div class="child">Resize the container to see changes</div>
</div>

CSS:

.container {
  container: size; /* Establishes a container context */
  width: 100%;
  max-width: 600px;
  border: 1px solid #ccc;
  resize: both;
  overflow: auto;
}

@container (min-width: 400px) {
  .child {
    background-color: lightblue;
    font-size: 1.5rem;
  }
}

@container (max-width: 399px) {
  .child {
    background-color: lightcoral;
    font-size: 1rem;
  }
}

Behavior:

• When the container's width is 400px or more, the child element has a light blue background and larger font size.
• When the container's width is less than 400px, the child element has a light coral background and smaller font size.

---

6. Key Differences

Aspect	Media Queries	Container Queries
Target	Entire viewport (global)	Specific container (local)
Use Case	Responsive design for different devices	Component-based design for nested layouts
Granularity	Coarse (applies globally)	Fine-grained (applies to individual elements)
Dependency	Depends on viewport size	Depends on container size
Syntax	@media	@container
Browser Support	Widely supported	Supported in modern browsers (check support)
Example	Adjusting layout for mobile vs desktop	Adjusting styles for a card in a grid layout

---

7. When to Use Media Queries

• When designing layouts that depend on the device size.
• For global responsiveness, such as switching between mobile, tablet, and desktop layouts.

Example:

@media (max-width: 600px) {
  .navbar {
    display: none;
  }
}

---

8. When to Use Container Queries

• When designing modular components that adapt to their container size.
• For nested layouts or micro frontends, where components need to be styled independently of the viewport.

Example:

.card-container {
  container: size;
}

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

---

9. Combining Media Queries and Container Queries

You can use both together for maximum flexibility.

Example:

/* Global responsiveness using media queries */
@media (min-width: 768px) {
  .page {
    display: flex;
  }
}

/* Component-specific responsiveness using container queries */
.component {
  container: size;
}

@container (min-width: 400px) {
  .component {
    background-color: lightblue;
  }
}

---

10. Summary

Feature	Media Queries	Container Queries
Best For	Global responsiveness	Component-based responsiveness
Target	Viewport size	Container size
Granularity	Coarse	Fine-grained
Use Case	Device-specific layouts	Component-specific styles

Use Media Queries for global responsiveness and Container Queries for modular, component-based designs. Combining both can help you build highly flexible and responsive Angular applications.

• container-type: Defines the type of container query (size or inline-size).
• container-name: Assigns a name to the container for targeting.
• container: Shorthand for container-type and container-name.
• @container: Applies styles based on the container's size.

Container queries are ideal for component-based designs where styles depend on the size of the container rather than the viewport.