41 lines
1.5 KiB
Markdown
41 lines
1.5 KiB
Markdown
---
|
||
title: Upcoming CSS features in 2023
|
||
published: false
|
||
description: "A short explanation of the upcoming CSS features I'm the most
|
||
excited about in early 2023, and why I can't wait for them to be official."
|
||
tags: css,scope,components,vanilla
|
||
date: 2023-02-27
|
||
---
|
||
|
||
## CSS Scoping
|
||
|
||
> The `@scope` block at-rule allows authors to scope style rules in CSS, with
|
||
> the application of weak scoping proximity between the scoping root and the
|
||
> subject of each style rule.
|
||
>
|
||
> <cite>CSS Cascading and Inheritance Level 6 (W3C First Public Working Draft, 21 December 2021)</cite>
|
||
|
||
## Relative Colors
|
||
|
||
> Within a relative color syntax `color()` function using <custom-params>, the
|
||
> number and name of the allowed channel keywords are:
|
||
>
|
||
> <cite>CSS Color Module Level 5 (W3C Working Draft, 28 June 2022)</cite>
|
||
|
||
## Contrast-Color
|
||
|
||
> The `contrast-color()` functional notation identifies a sufficiently
|
||
> contrasting color against a specified background or foreground color without
|
||
> requiring manual computation.
|
||
>
|
||
> <cite>CSS Color Module Level 6 (Editor’s Draft, 15 February 2023)</cite>
|
||
|
||
## CSS Nesting
|
||
|
||
> Style rules can be nested inside of other styles rules. These nested style
|
||
> rules act exactly like ordinary style rules—associating properties with
|
||
> elements via selectors—but they "inherit" their parent rule’s selector
|
||
> context, allowing them to further build on the parent’s selector without
|
||
> having to repeat it, possibly multiple times.
|
||
>
|
||
> <cite>CSS Nesting Module (W3C Working Draft, 14 February 2023)</cite>
|