# Future CSS

## `@layer`

The `@layer` CSS at-rule declares a cascade layer. Rules within a cascade layer cascade together, giving more control over the cascade to web developers.

@layer utilities {
  .padding-sm {
    padding: .5rem;
  }

  .padding-lg {
    padding: .8rem;
  }
}

### Reference

- [@layer - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer)

## `subgrid`

.grid {
  display: grid;
  grid: auto-flow / auto 1fr;

  .subgrid {
    grid-column: span 2;
    display: grid;
    grid-template-columns: subgrid;

    &__item-1 {
      grid-column: 1;
    }

    &__item-2 {
      grid-column: 2;
    }
  }
}

### References

* [#FutureCSS - The CSS SUBGRID is Awesome!](https://www.youtube.com/watch?v=5Z_JX-EhRJA)
* [Can I use - CSS Subgrid](https://caniuse.com/#feat=css-subgrid)
* [CSS Grid Layout Module Level 2](https://www.w3.org/TR/css-grid-2/#subgrids)

## `aspect-ratio`

The aspect-ratio CSS property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions.

.el {
  aspect-ratio: 4 / 3;
  width: clamp(200px, 50%, 400px);
}

### Alternatives
* [RatioBuddy - Aspect ratio calculator](https://ratiobuddy.com/)
* [Aspect Ratio Boxes | CSS-Tricks](https://css-tricks.com/aspect-ratio-boxes/)

### References

* [A First Look at `aspect-ratio` | CSS-Tricks](https://css-tricks.com/a-first-look-at-aspect-ratio/)
* [aspect-ratio - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio)
* [Can I use - aspect-ratio](https://caniuse.com/#search=aspect-ratio)

## `content-visibility`

.my-class {
  content-visibility: auto;
}

### References

* [New in Chrome 85  |  Web  |  Google Developers](https://developers.google.com/web/updates/2020/08/nic85#content-visibility)
* [content-visibility: the new CSS property that boosts your rendering performance](https://web.dev/content-visibility/)

## `::marker`

ul li::marker {
  content: "😍";
  // color: red;
  // font-size: 1.5em;
}

### References

- [Custom bullets with CSS ::marker](https://web.dev/css-marker-pseudo-element/)
- [::marker - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/::marker)

## `@scroll-timeline`

You’ll need at least **Chromium 89** with the `#experimental-web-platform-features` flag enabled through `chrome://flags`.


### References

- [The Future of CSS: Scroll-Linked Animations with @scroll-timeline (Part 1) – Bram.us](https://www.bram.us/2021/02/23/the-future-of-css-scroll-linked-animations-part-1/)
- [Scroll Linked Animations With NO JAVASCRIPT!?](https://youtu.be/EkEyA4RtfNE)
- [10 New CSS Features You Might Not Know About (2021 Edition)](https://torquemag.io/2021/03/new-css-features/)

## `@container`

@container (min-width: 700px){
  .card {
    display: grid;
	  grid-template-columns: 2fr 1fr;
  }
}

### Experiment and share

Follow these steps to get started experimenting and making your own demos:

- Download [Chrome Canary](https://www.google.com/chrome/canary) or update to the latest version.
- Navigate to `chrome://flags`.
- Search for “CSS Container Queries” and select `Enabled`.
- Restart the browser.

### References

- [CSS Container Queries - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries)
- [Container Queries: a Quick Start Guide | OddBird](https://www.oddbird.net/2021/04/05/containerqueries/)
- [Component-level art direction with CSS Container Queries](https://www.sarasoueidan.com/blog/component-level-art-direction-with-container-queries-and-picture/)
- [Learn CSS](https://web.dev/learn/css/)

## accent-color

:root {
  accent-color: deeppink;
}

@media (prefers-color-scheme: dark) {
  :root {
    accent-color: hsl(328 100% 65%);
  }
}


[Demo](https://codepen.io/web-dot-dev/pen/PomBZdy)

### References

- [Interop 2022: browsers working together to improve the web for developers](https://web.dev/interop-2022/)
- [CSS accent-color](https://web.dev/accent-color/)
- [accent-color - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color)

###### tags: `CSS`