Advanced CSS — @rules, Container Queries, Scroll Snap & More

You’ve mastered layout, responsive design, and visual effects. Now it’s time to explore advanced CSS — features that solve specific problems like loading custom fonts, auto-numbering sections, snapping scroll positions, and adapting layouts to different writing directions.

What You’ll Learn

By the end, you’ll load custom fonts with @font-face, use @supports for progressive enhancement, build container queries with @container, create multi-column layouts, auto-number headings with CSS counters, build scroll-snap carousels, and use logical properties for international layouts.

Where This Fits

    flowchart LR
    A["CSS Responsive & Effects"] --> B["**Advanced CSS**"]
    B --> C["CSS Components & Optimization"]
    C --> D["Frontend-Ready Developer"]
    style B fill:#f97316,stroke:#c2410c,color:#fff
    style A fill:#e5e7eb,stroke:#9ca3af,color:#374151
    style D fill:#22c55e,stroke:#16a34a,color:#fff
  

CSS At-Rules (@) — Instructions to the Browser

At-rules are CSS statements that start with @. They tell the browser to do something special — load a font, check a feature, define a style for a specific condition.

@font-face — Custom Fonts

Load fonts that aren’t installed on the user’s computer:

@font-face {
  font-family: 'CustomFont';
  src: url('fonts/custom.woff2') format('woff2'),
       url('fonts/custom.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;  /* Show fallback text immediately */
}

body { font-family: 'CustomFont', system-ui, sans-serif; }

Why font-display: swap matters: Without it, some browsers hide text until the font loads (Flash of Invisible Text — FOIT). swap shows the fallback font first, then swaps — users can read immediately.

@import — Import Other CSS Files

@import url('reset.css');
@import url('theme.css') screen and (min-width: 768px);

Note: Most projects now use <link> tags in HTML instead — they load in parallel, while @import loads sequentially.

@supports — Feature Detection

Apply styles only when the browser supports a feature:

@supports (display: grid) {
  .grid { display: grid; grid-template-columns: 1fr 1fr; }
}

@supports not (display: grid) {
  .grid { display: flex; flex-wrap: wrap; }
}

@supports (selector(:has(*))) {
  .card:has(img) { padding: 0; }
}

Use case: Graceful degradation. Use cutting-edge features with a @supports fallback for older browsers.

@container — Container Queries

The most exciting modern CSS feature. Container queries let you style an element based on its parent container’s size, not the viewport:

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

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

@container card (max-width: 399px) {
  .card { display: flex; flex-direction: column; }
}

Why container queries are revolutionary: Before container queries, a component’s layout depended on the viewport width. A card in a narrow sidebar would need different breakpoints than the same card in a wide main area. Container queries make components truly reusable — they adapt to wherever you place them.

@property — CSS Houdini Custom Properties

Register custom properties with types for animation:

@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.box {
  background: linear-gradient(var(--gradient-angle), #667eea, #764ba2);
  transition: --gradient-angle 0.5s;
}

.box:hover { --gradient-angle: 180deg; }

Why this matters: Normally you can’t animate custom properties because the browser doesn’t know their type. @property tells the browser “this is an angle,” so it knows how to interpolate between 0deg and 180deg.

@page — Print Styles

@page { size: A4; margin: 2cm; }
@page :first { margin-top: 4cm; }

Controls how pages look when printed.

@counter-style — Custom List Markers

@counter-style emoji {
  system: cyclic;
  symbols: "⭐" "🌟" "✨" "💫";
  suffix: " ";
}

ul { list-style: emoji; }

Multi-Column Layout — Newspaper Columns

Flow content into multiple columns:

.multi-column {
  column-count: 3;          /* Always 3 columns */
  column-gap: 2rem;         /* Space between columns */
  column-rule: 1px solid #e2e8f0;  /* Divider line */
}

/* Or use column-width for automatic responsive columns */
.multi-column {
  column-width: 250px;      /* Creates as many 250px columns as fit */
}

/* Span all columns (like a headline) */
.multi-column h2 { column-span: all; }

/* Prevent breaking inside an element */
.multi-column p { break-inside: avoid; }

Analogy: Think of multi-column like a newspaper — text flows from the top of column 1 to the bottom, then continues at the top of column 2. Readers scan down, not across.

CSS Counters — Auto-Numbering Without JavaScript

body { counter-reset: section; }

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
  color: #3498db;
}

How Counters Work

Nested Counters (Outline Numbering)

ol { counter-reset: item; list-style: none; }
ol li { counter-increment: item; }
ol li::before {
  content: counters(item, ".") ". ";  /* 1.1, 1.2, 1.2.1, etc. */
  font-weight: bold;
  color: #3498db;
}

Use case: Auto-numbering headings in long documentation, table of contents generation, outline-style lists.

Scroll Snap — Precision Scrolling

Scroll snap makes scroll containers “snap” to specific positions.

Horizontal Scroll Snap (Carousel)

.scroll-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1rem;
}

.scroll-container section {
  min-width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

Vertical Scroll Snap (Full-Page Slides)

.vertical-snap {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.vertical-snap section {
  height: 100vh;
  scroll-snap-align: start;
}

mandatory vs proximity: mandatory always snaps (even to tiny scrolls — can be annoying). proximity only snaps when the user stops near a snap point (more natural).

Logical Properties — Write Once, Work Every Direction

Physical properties (left, right, top, bottom) don’t work for right-to-left or vertical writing systems. Logical properties adapt automatically:

/* Physical (fixed direction) */
.element { margin-left: 16px; padding-top: 8px; width: 300px; }

/* Logical (adapts to writing direction) */
.element {
  margin-inline-start: 16px;  /* margin-left in LTR, margin-right in RTL */
  padding-block-start: 8px;   /* padding-top */
  inline-size: 300px;         /* width */
  block-size: 200px;          /* height */
}

When to use: If your site supports multiple languages (Arabic, Hebrew, Japanese vertical writing), logical properties are essential.

Other Useful Advanced Properties

/* Aspect Ratio — force an element's proportions */
.card { aspect-ratio: 16 / 9; }   /* Widescreen video container */
.avatar { aspect-ratio: 1; }      /* Perfect square */

/* Color Functions — modern syntax (no commas needed) */
.element {
  background: rgb(52 152 219 / 0.8);
  color: hsl(210 50% 60%);
  border-color: color-mix(in srgb, blue, red);
}

/* Accent Color — style checkboxes, radio, range in one line */
input[type="checkbox"],
input[type="radio"],
input[type="range"] {
  accent-color: #3498db;
}

/* Overscroll Behavior — prevent scroll chaining */
.sidebar { overscroll-behavior: contain; }

Common Advanced CSS Mistakes

1. Using @import Instead of <link> for Performance

/* ❌ Blocks rendering */
@import url('styles.css');

/* ✅ Loads in parallel */
/* <link rel="stylesheet" href="styles.css"> in HTML */

2. Not Providing Font Fallbacks with @font-face

/* ❌ If font fails, browser uses default (Times) — ugly */
body { font-family: 'FancyFont'; }

/* ✅ Always provide fallback stack */
body { font-family: 'FancyFont', system-ui, sans-serif; }

3. Forgetting container-type for Container Queries

/* ❌ Container query won't work */
.card-container { container-name: card; }
@container card (min-width: 400px) { ... }

/* ✅ Must set container-type */
.card-container { container-type: inline-size; container-name: card; }

4. Using Physical Properties for International Sites

/* ❌ Breaks in RTL */
.sidebar { margin-left: 16px; }

/* ✅ Adapts to any direction */
.sidebar { margin-inline-start: 16px; }

5. Overusing Scroll Snap mandatory

/* ❌ User can't scroll a tiny bit */
.scroll-container { scroll-snap-type: x mandatory; }

/* ✅ More natural: only snaps when near a point */
.scroll-container { scroll-snap-type: x proximity; }

Security Angle — Font Loading and Privacy

Custom fonts can be a privacy vector — font files can track users if loaded from third-party servers. Self-host fonts (using @font-face with local files) avoids this. Tools like Doda Browser block third-party font tracking in privacy mode.

Try It Yourself

Experiment with multi-column, counters, scroll snap, and glassmorphism:

Common Mistakes Beginners Make

1. Skipping the Fundamentals

Many beginners jump straight to advanced topics without mastering the basics. Take time to understand the core concepts before moving on.

2. Not Practicing Enough

Reading tutorials without writing code leads to shallow understanding. Code along with every example and experiment on your own.

3. Ignoring Error Messages

Error messages tell you exactly what went wrong. Read them carefully — they usually point to the line and type of issue.

4. Copy-Pasting Without Understanding

It’s tempting to copy code from tutorials, but typing it yourself and understanding each line builds real skill.

5. Giving Up Too Early

Every developer hits frustrating bugs. Take breaks, ask for help, and remember that struggling is part of learning.

Practice Questions

Q1: What does @supports (display: grid) do?

Q2: How is a container query different from a media query?

Q3: What problem does font-display: swap solve?

Q4: What’s the difference between column-count and column-width?

Q5: When would you use margin-inline-start instead of margin-left?

Challenge

Build a multi-section documentation page:

• A sidebar with overscroll-behavior: contain
• Headings auto-numbered with CSS counters (1, 2, 3…)
• A code example in a horizontally scroll-snapping container
• A “glassmorphism” note box using backdrop-filter
• Respects prefers-reduced-motion

FAQ

What is CSS Houdini?

CSS Houdini is a set of APIs that let developers extend CSS. @property is part of it — it registers custom properties for animation.

Can container queries replace media queries?

Not entirely. Use container queries for component-level responsiveness and media queries for page-level (header, footer, sidebar visibility).

Do logical properties work in all browsers?

Yes, modern browsers support them. For older browser support, include physical property fallbacks before the logical ones.

What does overscroll-behavior: contain do?

It prevents scroll chaining — when a user scrolls to the end of a sidebar, the main page doesn’t start scrolling. Essential for modals and sidebars.

Is scroll-snap accessible?

Yes, when used correctly. Content still scrolls (it just snaps), screen readers read all content, and keyboard navigation works. Avoid scroll-snap-stop: always on long lists.

FAQ

{< faq >}

What is Css Advanced?

Css Advanced refers to the core concepts and practices used to build and manage modern web applications. Understanding it is essential for web developers.

Do I need prior experience to learn Css Advanced?

Basic familiarity with web development concepts helps, but Css Advanced can be learned step by step even as a beginner.

How long does it take to learn Css Advanced?

With consistent practice, you can grasp the fundamentals in a few days to a week. Mastery takes ongoing practice and real-world projects.

Where can I use Css Advanced in real projects?

Css Advanced is used in a wide range of applications — from simple websites to complex enterprise systems, depending on the specific tools and technologies involved.

What are common tools used with Css Advanced?

The specific tools depend on the technology stack, but version control (Git), package managers, and testing frameworks are commonly used alongside most development topics.

{< /faq >}

FAQ

What’s Next?

Continue with practical component building and the CSS reference:

What’s Next

Congratulations on completing this Css Advanced tutorial! Here’s where to go from here:

• Practice daily — Consistency is more important than long study sessions
• Build a project — Apply what you learned by building something real
• Explore related topics — Check out other tutorials in the same category
• Join the community — Discuss with other learners and share your progress

Remember: every expert was once a beginner. Keep coding!