Skip to main content

The latest version of CSS, as of 2024

  1. CSS Container Queries: These allow components to adapt their layout based on the available space of their parent container, enhancing responsive design. This is particularly useful for creating dynamic, reusable components that adjust their layout according to their container size rather than the viewport.

  2. CSS Nesting: This feature allows developers to write cleaner, more maintainable code by embedding selectors within one another, similar to pre-processors like SASS. This eliminates the need to repeatedly specify the parent selector, streamlining the process of writing CSS.

  3. CSS Layers: Introduced to manage and organize the priority of styles, CSS Layers (@layer) allow developers to define layers within which styles are applied in a specific order, making it easier to handle complex stylesheets and avoid specificity conflicts.

  4. New Pseudo-Classes and Properties: The :has() pseudo-class enables styling of elements based on their descendants, enhancing interactivity and dynamic styling. Additionally, the :focus-visible pseudo-class improves accessibility by applying styles only when elements are focused via keyboard navigation.

  5. Enhanced Text Layouts: The text-wrap: balance property ensures more aesthetically pleasing text layouts by balancing the number of characters per line, preventing awkward breaks and creating a more professional look.

  6. Advanced Media Queries: Media queries have been extended to support more complex conditions using logical operators like and, or, and not. This allows for more nuanced and flexible responsive designs.

These updates reflect the ongoing evolution of CSS, making it more powerful and adaptable to modern web development needs.

For more detailed information, you can visit the CSS Snapshot 2024 and other sources like Academind and Builder.io.

Core CSS Concepts and Properties

  1. Selectors and Specificity

    • Understand how to select elements using various selectors (element, .class, #id, attribute selectors, pseudo-classes, and pseudo-elements).
    • Learn about specificity rules to manage conflicting styles.

  2. Box Model

    • Properties: width, height, padding, margin, border, box-sizing.
    • Concept: How elements are sized and spaced within their containers.

  3. Typography

    • Properties: font-family, font-size, font-weight, line-height, letter-spacing, text-align, text-transform, text-decoration.

  4. Color and Backgrounds

    • Properties: color, background-color, background-image, background-size, background-repeat, background-position, opacity.

  5. Layout

    • Flexbox: display: flex, flex-direction, justify-content, align-items, flex-wrap, flex-grow, flex-shrink.
    • Grid: display: grid, grid-template-columns, grid-template-rows, grid-gap, grid-area, justify-items, align-items.

  6. Positioning

    • Properties: position (static, relative, absolute, fixed, sticky), top, right, bottom, left, z-index.

  7. Responsive Design

    • Media Queries: @media (max-width: 600px) { ... }
    • Container Queries: @container (min-width: 400px) { ... } (Experimental)

  8. Animations and Transitions

    • Properties: transition, transition-property, transition-duration, animation, @keyframes.

  9. Transforms

    • Properties: transform, transform-origin.
    • Functions: translate(), rotate(), scale(), skew().

  10. Flexibility and Responsiveness

    • CSS Variables (Custom Properties): --main-color: #333;, color: var(--main-color);
    • CSS Units: %, em, rem, vh, vw, px.

Latest CSS Features​

  1. CSS Grid Layout: Advanced grid-based layouts.

    • Properties: grid-template-areas, grid-template-columns, grid-template-rows, grid-auto-flow.

  2. CSS Custom Properties: Variables for reusable values.

    • Syntax: --variable-name: value;, var(--variable-name).

  3. CSS Logical Properties: Logical direction-based properties.

    • Properties: margin-inline-start, padding-block-end, inset-block-start.

  4. CSS Subgrid: Advanced grid alignment (Experimental).

    • Properties: subgrid for nested grids.

  5. CSS Shapes and Exclusions: Content wrapping around shapes.

    • Properties: shape-outside, shape-margin, clip-path.

  6. CSS Scroll Snap: Snapping elements during scroll.

    • Properties: scroll-snap-type, scroll-snap-align, scroll-snap-stop.

  7. CSS :has() Pseudo-Class: Parent selector (Experimental).

    • Syntax: :has(selector)

  8. CSS :focus-visible: Enhanced focus indication.

    • Usage: :focus-visible { ... }

Essential Resources for Learning CSS​

Latest CSS properties that are frequently used

  1. container-type: Defines the type of container for the container query.

    .wrapper {
      container-type: inline-size;
    }

  2. container-name: Assigns a name to a container for use in container queries.

    .wrapper {
      container-name: main-container;
    }

  3. @container: Container query rule for applying styles based on container size.

    @container (max-width: 500px) {
      .child {
        flex-direction: column;
      }
    }

  4. @layer: Defines style layers to manage style priorities.

    @layer base, theme, components;

    @layer base {
      body {
        margin: 0;
        font-family: sans-serif;
      }
    }

  5. accent-color: Specifies the color of form controls like checkboxes and radio buttons.

    input[type="checkbox"] {
      accent-color: #007bff;
    }

  6. scroll-padding: Adjusts the scroll position to provide padding around the target element.

    .section {
      scroll-padding: 50px;
    }

  7. scroll-snap-type: Controls the snapping behavior when scrolling.

    .container {
      scroll-snap-type: y mandatory;
    }

  8. aspect-ratio: Defines the aspect ratio of an element.

    .video {
      aspect-ratio: 16 / 9;
    }

  9. backdrop-filter: Applies graphical effects like blur or color shift to the area behind an element.

    .overlay {
      backdrop-filter: blur(10px);
    }

  10. place-items: Shorthand for align-items and justify-items.

    .grid-container {
      place-items: center;
    }

  11. scroll-behavior: Specifies the scrolling behavior for a scrolling box.

html {
  scroll-behavior: smooth;
}
  1. gap: Defines the gap between grid or flexbox items.
.grid-container {
  display: grid;
  gap: 20px;
}
  1. grid-template-areas: Specifies areas within a grid layout.
.grid-container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}
  1. min(): Function to return the smallest value among arguments.
.element {
  width: min(50vw, 300px);
}
  1. max(): Function to return the largest value among arguments.
.element {
  width: max(10vw, 200px);
}
  1. clamp(): Function to set a value within a range defined by a minimum and maximum value.
.element {
  font-size: clamp(1rem, 2.5vw, 2rem);
}
  1. subgrid: Enables nested grid items to inherit the grid definitions from the parent grid container.
.subgrid-container {
  display: grid;
  grid-template-columns: subgrid;
}
  1. font-variant: Controls the use of alternate glyphs in certain fonts.
.text {
  font-variant: small-caps;
}
  1. backdrop-filter: Applies graphical effects to the area behind an element.
.modal {
  backdrop-filter: grayscale(50%);
}

  1. overscroll-behavior: Controls the behavior when reaching the boundary of a scrolling area.

    .scroll-container {
      overscroll-behavior: contain;
    }

  2. object-fit: Specifies how the content of a replaced element should be resized to fit its container.

.image {
  object-fit: cover;
}
  1. object-position: Specifies the alignment of the content within a replaced element.
.image {
  object-position: center top;
}
  1. isolation: Creates a new stacking context, allowing for better control over z-index and blending modes.
.element {
  isolation: isolate;
}
  1. mix-blend-mode: Specifies how an element’s content should blend with its background.
.element {
  mix-blend-mode: multiply;
}
  1. inset: A shorthand property for top, right, bottom, and left.
.box {
  position: absolute;
  inset: 10px 20px 30px 40px;
}
  1. aspect-ratio: Specifies the preferred aspect ratio of an element.
.video {
  aspect-ratio: 16 / 9;
}
  1. text-decoration-thickness: Sets the thickness of text decoration lines.
.underline {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
  1. text-underline-offset: Sets the distance between the text underline and its text.
.underline {
  text-underline-offset: 4px;
}
  1. line-clamp: Limits the content to a specified number of lines, adding an ellipsis if the content exceeds this limit.
.clamped-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

  1. backface-visibility: Defines whether the back face of an element is visible when facing the user.

    .card {
      backface-visibility: hidden;
    }

  2. clip-path: Creates a clipping region that determines which parts of an element are visible.

.clip {
  clip-path: circle(50%);
}
  1. filter: Applies graphical effects like blurring or color shifting to an element.
.image {
  filter: grayscale(100%);
}

  1. grid-template-columns: Defines the column structure for a grid container.

    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
    }

  2. grid-template-rows: Defines the row structure for a grid container.

.grid {
  display: grid;
  grid-template-rows: 100px auto 100px;
}
  1. align-self: Allows the alignment of an individual flex or grid item along the cross axis.
.item {
  align-self: center;
}

  1. justify-self: Aligns an individual grid item along the inline axis.

    .grid-item {
      justify-self: end;
    }

  2. place-content: A shorthand for align-content and justify-content.

.grid {
  display: grid;
  place-content: center space-between;
}
  1. overscroll-behavior: Controls the behavior when the boundary of a scrollable area is reached.
.container {
  overscroll-behavior: none;
}
  1. will-change: Hints to the browser about which properties of an element are expected to change, improving performance.
.animated {
  will-change: transform, opacity;
}
  1. font-variation-settings: Controls variable font properties, allowing for fine-tuned typography. 
    .text {
      font-variation-settings: "wght" 700, "wdth" 125;
    }

These properties enhance the ability to create flexible, performant, and visually appealing designs. For further reading and more detailed examples, refer to resources like the MDN Web Docs and the CSS Tricks.

What is Stacking Context in CSS

A stacking context is a concept in CSS that controls the layering order (z-order) of elements. It determines the stacking order of elements and their descendants when they overlap, which is crucial for visual rendering in the browser. The stacking context helps determine which elements appear in front of or behind others.

When does a Stacking Context get created?​

A stacking context is automatically created in the following situations:

  1. The root element (<html>) forms the initial stacking context.
  2. Any positioned element (with position: relative, absolute, fixed, or sticky) that has a z-index other than auto.
  3. Elements with opacity less than 1 (e.g., opacity: 0.5) create a stacking context.
  4. transform property (e.g., transform: translate(), rotate(), etc.) also creates a stacking context.
  5. CSS filters like filter: blur() or grayscale() create a stacking context.
  6. will-change property: When applied to certain properties like transform, opacity, etc., it can create a stacking context.
  7. mix-blend-mode (other than normal) also creates a stacking context.

In these cases, the elements within the stacking context are arranged based on their z-index values, and the stacking context itself will be treated as a separate "layer" when the browser renders elements on the page.

How does the Stacking Context Work?​

Each stacking context is self-contained. Elements within a stacking context can only be layered relative to other elements within the same stacking context. They can't interact with elements outside their context unless the outer context is higher in the stacking order.

Example:​

If we have a page with multiple div elements, and one of them creates a stacking context, it will stack its child elements independently of the other div elements.

<div style="position: relative; z-index: 1;">
  <p>This is a stacking context!</p>
</div>
<div style="z-index: 2;">This will be stacked above the first div</div>
  • In this case, the second div will be stacked above the first one because it has a higher z-index and is in the same stacking context.
  • However, the child elements within the first div are stacked independently of elements outside of this context.

Stacking Order:​

  1. Elements in the same stacking context are ordered based on the z-index values of their child elements.
  2. Stacking contexts themselves are layered according to their position in the DOM tree and their z-index values.
  3. Elements without z-index and position: static are stacked in the order they appear in the DOM.

Visual Example:​

<div style="position: relative; z-index: 1; background-color: red;">
  <div style="position: absolute; top: 20px; z-index: 10; background-color: yellow;">
    Inside inner stacking context
  </div>
</div>

In this case:

  • The inner div has its own stacking context due to the position: absolute and z-index properties, so it will stack based on its own z-index.
  • The outer div has its own stacking context as well, and it will be stacked according to the z-index values relative to other contexts.

Key Points to Remember:​

  1. Positioned elements with z-index create stacking contexts.
  2. Stacking contexts are treated as isolated layers in the rendering process.
  3. z-index values work only within their respective stacking context.

A stacking context is a crucial concept in CSS that governs the z-order (stacking order) of elements when they overlap. Each stacking context is like a separate "layer" of elements, and elements inside one context will be layered according to their z-index relative to other elements within the same context. Here's when a stacking context is created:

1. Root Element (<html>)​

  • The root element (<html>) automatically forms the initial stacking context for the entire document.

  • It does not need any special styles to create a stacking context.

    Example: The root <html> element is always a stacking context unless overridden by other conditions.

2. Positioned Elements with z-index​

  • Elements with position set to relative, absolute, fixed, or sticky will create a stacking context when they also have a z-index value other than auto.

    Example:

    <div style="position: relative; z-index: 10;">Stacking Context</div>

    This <div> creates a stacking context because it has a position (relative) and a specific z-index.

3. Opacity Less Than 1​

  • Elements with opacity less than 1 create a new stacking context. This includes semi-transparent elements (like those with opacity: 0.5).

    Example:

    <div style="opacity: 0.5;">This will create a stacking context</div>

4. transform Property​

  • Elements with the transform property (e.g., transform: translate(), rotate(), scale(), etc.) automatically create a stacking context, even if they don't have a position or z-index.

    Example:

    <div style="transform: translateX(50px);">This creates a stacking context</div>

5. will-change Property​

  • Elements with the will-change property create a stacking context when certain properties are likely to change in the future (such as opacity, transform, etc.). This property is a hint to the browser for performance optimization.

    Example:

    <div style="will-change: transform;">This will create a stacking context</div>

6. CSS Filters​

  • Elements with CSS filters (e.g., filter: blur(), grayscale(), brightness(), etc.) will create a new stacking context.

    Example:

    <div style="filter: blur(5px);">This creates a stacking context</div>

7. mix-blend-mode​

  • Elements using mix-blend-mode other than normal will create a stacking context. The mix-blend-mode property controls how an element blends with the background or other elements.

    Example:

    <div style="mix-blend-mode: multiply;">This creates a stacking context</div>

8. contain Property​

  • The contain property (e.g., contain: layout;) can create a stacking context by isolating the layout of the element. This prevents the child elements from affecting the outside environment and vice versa.

    Example:

    <div style="contain: layout;">This creates a stacking context</div>

9. clip-path​

  • Elements with clip-path (e.g., clip-path: circle()) will create a stacking context. This property defines the visible area of an element by clipping parts of it.

    Example:

    <div style="clip-path: circle(50%);">This creates a stacking context</div>

10. perspective​

  • Elements with the perspective property also form a stacking context. The perspective property is typically used for 3D transformations and helps in creating a 3D effect on child elements.

    Example:

    <div style="perspective: 500px;">This creates a stacking context</div>

When does a Stacking Context NOT get created?​

  • Position: static: The default value of position is static, which does not create a stacking context.
  • z-index: auto: When an element has position but no specific z-index or has z-index: auto, it doesn't create a stacking context.

Summary of Key Cases:​

  • Positioned elements (position: relative, absolute, fixed, sticky) with a z-index other than auto.
  • Elements with opacity less than 1.
  • transform, will-change, filter, mix-blend-mode, clip-path, and perspective.
  • Root element (<html>) automatically creates the initial stacking context.

Why is this Important?​

Stacking contexts are vital when managing how elements overlap. Understanding when stacking contexts are created allows developers to control the layer positioning of elements without unintended behavior. Each stacking context operates independently, which ensures more predictable and reliable layout control, especially in complex UIs with overlapping elements.

Sources:​

Inner Context, Outer Context, and Hierarchy of Stacking Contexts in CSS

A stacking context is a concept in CSS that controls how elements overlap and are layered in relation to each other. When discussing inner and outer contexts, we are referring to the nesting and hierarchy of these contexts within a page. Here's how the hierarchy and relationship between inner and outer contexts work:

What is the Hierarchy of Stacking Contexts?​

  1. Root Context:

    • The root element (<html>) forms the initial stacking context for the entire webpage. It serves as the foundation of all other stacking contexts on the page.

  2. Outer Context:

    • The outer stacking context is any stacking context that exists outside another stacking context. It is typically a parent element that has a specific position (with z-index) or other properties that create a stacking context.
    • The outer context is responsible for the stacking order of any nested stacking contexts (i.e., inner contexts) that exist within it.

  3. Inner Context:

    • The inner stacking context is a stacking context that exists within an outer stacking context. It is created when an element inside the outer context has properties like position: relative, absolute, fixed, or sticky along with a specific z-index or other properties like opacity or transform that create new stacking contexts.
    • The inner context is stacked independently of its outer context but within the limits of its parent stacking context.

How the Hierarchy Works​

In a document, stacking contexts are created whenever certain CSS properties are applied. These stacking contexts are like separate layers in the page's layout, and they have a parent-child relationship:

  • Outer Context: A parent stacking context can contain one or more child stacking contexts (inner contexts).
  • Inner Context: These are nested stacking contexts, which may have their own stacking order independent of their parent context. However, they cannot interact with elements outside their context unless the parent stacking context is at a higher z-index.

Visualizing the Hierarchy of Stacking Contexts:​

Consider the following HTML structure:

<div style="position: relative; z-index: 1;">
  <div style="position: absolute; z-index: 2;">
    Inner Context (Stacked in Front of Parent)
  </div>
  <div style="position: absolute; z-index: 1;">
    Another Child in Outer Context
  </div>
</div>

<div style="position: relative; z-index: 3;">
  Outer Context (Higher than Parent Context Above)
</div>
  • Outer Context: The second <div> with position: relative and z-index: 3 forms an outer stacking context, which will be stacked above the first outer context (with z-index: 1) and any elements inside it.
  • Inner Context: The first <div> with position: relative and z-index: 1 creates a stacking context, and the two child elements inside it form inner stacking contexts. The child with z-index: 2 will be stacked in front of the child with z-index: 1 within this inner context.

Layering Based on z-index and Positioning:​

  • Parent Stacking Context: The stacking order for elements in an outer context depends on their z-index. If the outer context has a higher z-index than another stacking context, it will appear in front of that context.
  • Child Elements within Inner Context: Inside each stacking context, the order of elements is controlled by their z-index values relative to each other.

Order of Stacking Contexts (DOM Order):​

  • The outer stacking context will be stacked above any inner contexts unless the z-index of the inner context is higher.
  • The child stacking contexts are ordered based on their DOM hierarchy as well. If two stacking contexts are siblings in the DOM and have the same z-index, the one that comes later in the DOM will appear in front.

Example Breakdown:​

Consider this structure:

<div style="position: relative; z-index: 1;">
  Outer Context 1
  <div style="position: absolute; z-index: 1;">
    Inner Context 1
  </div>
</div>

<div style="position: relative; z-index: 2;">
  Outer Context 2
  <div style="position: absolute; z-index: 1;">
    Inner Context 2
  </div>
</div>
  • Outer Context 1: The first div with position: relative and z-index: 1 creates a stacking context. The inner elements in it will be stacked relative to each other, but they won’t interact with elements outside the context unless their z-index is higher.
  • Inner Context 1: The second div with position: absolute and z-index: 1 creates a new stacking context within Outer Context 1.
  • Outer Context 2: The second div with z-index: 2 creates a higher-level stacking context than Outer Context 1. This means that Outer Context 2 and its children will be layered above Outer Context 1 and its inner context.

Key Takeaways:​

  1. Outer contexts are created by parent elements with positioning and specific z-index values.
  2. Inner contexts are created by child elements within the outer context that have properties such as position with z-index or other properties like transform, opacity, etc.
  3. The stacking order of elements inside a stacking context is independent of other contexts.
  4. Higher z-index values will appear in front of lower values within the same context.
  5. The order of stacking contexts themselves is determined by their z-index relative to other contexts and their position in the DOM tree.

Sources:​

descendants

When descendants of a stacking context overlap, their stacking order is determined by their position in the stacking context, governed by their z-index and how their stacking context is defined. Here's how it works:

How Descendants Overlap in a Stacking Context

  1. Positioning and z-index:

    • Inside a stacking context, elements can overlap based on their z-index values. The z-index property controls the stacking order of positioned elements (those with position set to relative, absolute, fixed, or sticky).
    • Higher z-index values appear in front of lower z-index values.
    • If elements don't have a z-index set, they will stack in the order they appear in the DOM (document order), with later elements appearing in front of earlier ones.

  2. Nested Stacking Contexts:

    • When an element creates a stacking context (e.g., a parent with position: relative and a z-index), its child elements are stacked relative to each other inside that context.
    • These child elements do not affect the stacking order of elements outside this stacking context. Each stacking context behaves independently.

    Example:

    <div style="position: relative; z-index: 2;">
      <div style="position: absolute; z-index: 1;">This is in front of its sibling within the stacking context</div>
      <div style="position: absolute; z-index: 2;">This is behind the first child within the stacking context</div>
    </div>

  3. Overlapping between Different Stacking Contexts:

    • When stacking contexts are nested, the outer stacking context will appear above the inner stacking context if it has a higher z-index.
    • If two stacking contexts are not nested, they are ordered according to their position in the DOM tree, with later stacking contexts appearing on top.

Example of Overlapping Descendants:​

Consider the following HTML with multiple stacking contexts:

<div style="position: relative; z-index: 1;">
  <div style="position: absolute; z-index: 1;">Inner Context 1</div>
  <div style="position: absolute; z-index: 2;">Inner Context 2</div>
</div>

<div style="position: relative; z-index: 3;">
  <div style="position: absolute; z-index: 1;">Outer Context</div>
</div>
  • Inner Context 2 (with z-index: 2) will be stacked in front of Inner Context 1 (with z-index: 1) because z-index within the same stacking context determines the layering.
  • Outer Context will be stacked above the whole first <div> (with z-index: 1) because it has a higher z-index.

Key Points about Descendants in Stacking Contexts:​

  1. Descendants within the same stacking context:

    • Are stacked based on their z-index values (higher values are in front).
    • Without a z-index, they follow the document order.

  2. Stacking contexts themselves:

    • Are layered based on the z-index of the parent stacking context or the order they appear in the DOM.
    • The stacking context created by a parent will not affect stacking contexts created by other parent elements unless those contexts overlap.

  3. Independence of stacking contexts:

    • The stacking order of child elements is contained within their own stacking context. They do not interact with sibling elements outside their context unless the contexts themselves overlap in the document.

Sources:​