📄 Adding Initial DOM Rendering Transitions with @starting-style

#css #startingStyle

When a DOM element gets rendered from an HTML document or JavaScript code snippet, it gets rendered without any initial transition animation. In the past, we typically implemented these initial animations with dynamically switched CSS classes via JavaScript. Nowadays, we can use CSS animations for these situations, but the initial animation concept undoubtedly belongs to the CSS transitions feature. The `starting-style` at-rule lets you set initial styles for a CSS selector, so you can build up a transition animation for the initial rendering step:

button {
  padding: 12px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  background-color: #bbb;
  opacity: 1;
  transform: scale(1);
  transition: all 1s linear;
  
  @starting-style {
    opacity: 0;
    transform: scale(0.5);
  }
}

The above code snippet plays a transition animation when a button element gets rendered on the viewport. This transition works even though you dynamically create a new element with JavaScript.

📄Defining Scoped CSS with @scope

#css #scope

By default, the traditional CSS implementation styles web pages with a global scoping concept. Moreover, in the past, no CSS scoping feature was present with the style tag, every style tag was feasible for styling any HTML node, including the root regardless of the style tag position in the DOM tree. The HTML standard tried to support scoping with the scoped attribute, but it was deprecated before becoming a web standard. Now, the modern CSS specification introduced the `scope` at-rule for defining scoped CSS.

For example, you can create a scoped style tag for styling an HTML segment as follows:

<div>
  <style>
  @scope {
    :scope {
      background-color: #ddd;
      padding: 12px;
    }
    h3 {
      padding: 0 0 6px 0;
      margin: 0;
      border-bottom: solid 2px #eb7e3b;
    }
  }
  </style>
  <h3>Lorem ipsum dolor sit amet</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

The above style tag defines a scoped CSS content for the parent div element with @scope. Here, we targeted the scoped element using the :scope pseudo-class.

📄Modern Component-Oriented Responsive Design with @container

#css #container

The modern CSS specification offers container queries via the @container at-rule for this requirement.

Look at the following sample:

<div class="alert">
  <h3>Lorem ipsum dolor sit amet</h3>
  <button>Lorem ipsum</button>
  <button>Lorem ipsum</button>
</div>

.alert {
  background-color: #ddd;
  padding: 12px;
  resize: horizontal;
  overflow: hidden;
  container-type: inline-size;
}

.alert h3 {
  padding: 0 0 6px 0;
  margin: 0 0 12px 0;
  border-bottom: solid 2px #eb7e3b;
}

.alert button {
  padding: 12px;
  border: none;
  margin-right: 6px;
}

@container (width < 400px) {
  .alert button {
    width: 100%;
    box-sizing: border-box;
  }
  
  .alert button:not(:last-child) {
    margin-bottom: 10px;
  }
}