Starting to write CSS in 2023 will be

different
w3cplus · Follow
57 min read · Jan 5, 2024

189 4

CSS is evolving faster than ever. After Flexbox and Grid , CSS seems to have
gone through a long period of stagnation, but in recent years, CSS has added
many new features available , and there will be more new features coming
soon. This development speed is exciting, but also overwhelming.

Although CSS has added many new features , many web developers believe
that these fancy things have not brought substantial changes to themselves.
In other words, have all these fancy things (CSS new features) actually
changed the way you write CSS? For most web developers, the new features
of CSS have indeed influenced the way CSS is written today, but perhaps not
as thoroughly as I expected.

Although I have seen many blog posts as well as introductions and examples
of these trendy things in my own booklet “ Modern CSS “, I have not yet seen
these practical applications used in production or daily life. This is not a
complaint about anyone or anything. Personally, I am very excited about the
evolution of CSS. Many of the latest features are what we have been longing
for for years. Indeed, some of these features are gradually being
incorporated into my CSS. Although not a complete change, it is enough to
make me enjoy writing CSS more than ever.

2023 is an important year for CSS!

From the 2023 Google I/O conference at the beginning of the year to the
WWDC23 conference at the end of the year, as well as @Bramus’ sharing at
the @Frontmania conference in Utrecht and the recent “ CSS Wrapped: 2023!
“ shared by Chrome team, they are all talking about the latest features of
CSS. I am no exception I spent half a year explaining modern features of CSS
in the form of a booklet Fortunately, the latest features of CSS introduced in
my booklet Basically (more than 95% of the features) have appeared in the
topics of these conferences.

Brochure address: https://juejin.cn/book/7223230325122400288

It can be said that there are always dozens of new CSS features supported by
mainstream web platforms. It can be said that 2023 is a very important year
for CSS. These developments have made features that developers once
thought were impossible to achieve on web platforms a reality. Nowadays,
mainstream modern web browsers support CSS container queries ( size
queries , style queries and status queries , etc.), subgrids ( subgrid ),
relational selectors : has () (also often referred to as parent selectors),
complex n- * selectors, and a series of new color spaces and functions ,
such as color () and color-mix () . Chrome browser also supports scroll-
driven animations implemented with CSS only, as well as view transition
effects that smoothly transition between web views (if you are interested in
web animations, you can read " Web Animation Journey "). Most importantly,
many new basic features have emerged, such as CSS layers ( @layer ) ,
nesting and scopes , etc., which can better improve the experience of web
developers writing CSS, and even change the way web developers write,
maintain and manage CSS.
It’s been a wonderful year! Seeing so many new features, are you a little
hesitant? There are so many new things in CSS? It may even confuse you, is
this still the CSS you know?

Ask yourself how much you know and how much you have used. What’s
more important is whether these new features have really brought changes
to you!
Give up your hesitation
Under normal circumstances, people’s behavior towards new things varies
due to Individual Differences. Some people may show curiosity, excitement,
and positivity, while others may show fear and resistance. Similarly, when
web developers face new features of CSS, they may also show various
reactions and behaviors, which depend on their technical level, project
requirements, personal preferences, and acceptance of new technologies.
For example, some colleagues may be curious and excited about new
features of CSS (like me). For these colleagues, they will immediately take
action to learn and practice these new features, and even actively participate
in community building to make these new features more perfect. Of course,
there are also some colleagues who will show resistance, conservatism, or
even rejection. Moreover, in the Chinese community, this group of people
accounts for the majority because I often hear my friends around me
hesitate about new features. Can these fancy things be used? Is compatibility
good? And so on!

Here, what I want to say is that new features will continue to evolve and
improve over time. Just like when promoting CSS3 features, the most
frequently asked question was “Are new features compatible with IE?”

Nowadays, I am also asked similar questions: “How compatible are these

new features?” At the same time, many colleagues ask me how and where to
obtain these new features. In fact, this is a good thing, which means that
more colleagues are giving up hesitation, fear, and rejection of new features.

This is already a change.

In fact, the current environment is friendly to web developers, and we can

obtain version release information for new features, compatibility data,
interoperability, and information provided by the web platform in different
ways.

Version release
We can get new features and bug fixes introduced by various Web platforms
in the release of mainstream browsers such as Chrome , Safari and Firefox .

Release notes
Web platforms ( Chrome , Safari , and Firefox ) provide documentation with
detailed information about new features, improvements, and bug fixes each
time a new version is released. Web developers can learn about relevant
information by reading the release notes. Similarly, we can also obtain CSS-
related information in the corresponding documentation, including the
latest features, feature improvements, and bug fixes.

Compatibility data

The key factor for web development to stop new CSS features is cross-
platform compatibility. If you want to know the compatibility data of a new
feature, you can get it through platforms such as Can I Use , Browser Compat
Data and Time to Stable .

Interoperability
Interop is a cross-browser effort aimed at improving the interoperability of
the Web. Interoperability refers to the effort to improve the interoperability
of Web technologies in different browsers. Interoperability refers to
ensuring consistent behavior and effects when using the same Web
technology in different environments (especially different browsers). Simply
put, each technology achieves exactly the same state in all browsers.

Interop started in 2021, and modern browsers have all participated. So far,
there are Interop2021 , Interop2022 and Interop2023 :

From the above picture, you can see the efforts made by various web
platforms for CSS in 2023, which is why so many new CSS features will be
supported by mainstream web browsers in 2023.

Platform News
In web.dev blog , you will get the latest news about the Web platform every
month. This may include information about updates, improvements or
changes in Web technologies:

As shown in the above figure, it states the new features on the web platform
in December 2023.

Baseline
The benchmark was introduced at the 2023 Google I/O conference to clarify
whether web platform features are available for use. The original definition
of Baseline is that when current and previous versions of all major browsers
(Chrome, Edge, Firefox, and Safari) support these features, these features
are included in Baseline.

Baseline is coming to caniuse.com soon! This blog post will introduce this
integration and explore some of the features included in Baseline 2023.
According to the new definition of benchmark , the feature lifecycle is
divided into two stages. The first option is newly launched , and then fully
launched after 30 months. If a feature is interoperable in the following
browsers, it will become part of the new features provided by Baseline:

Safari (macOS and iOS)

Firefox (Desktop and Android)

Chrome (Desktop and Android)

Edge (desktop device)

In the future, when you caniuse.com check compatibility data, you will see a
flag informing you whether the corresponding function is widely available in
Baseline. In other words, if you see this flag, you can use it boldly without
worrying about cross-browser compatibility issues. This also solves your
biggest doubt about CSS new features — compatibility:

By using the resources mentioned above, you will obtain first-hand

information about the Web platform and the latest information related to
CSS. If you are interested in CSS or Web platform-related technologies,
please subscribe to them to ensure that you always have the latest
information across platforms. This will help you master more skills.

Please note the emoji before the CSS feature title introduced next, which
represents the new Baseline badge! Click here for details:

💯 : Added all stable versions of major browsers (use with confidence)

👁️ : Major browsers only support some features (have to wait)
Architecture foundation
Let’s start with the core functions of CSS. These are the fundamental features
that play a fundamental role in how you write and organize CSS. These
fundamental features solve the problems that have always been a headache
for web developers in CSS. It can be said that these features will directly
change the way you write, manage, and maintain CSS code.

💯 cascade layer
Cascading layers are the most important concept in CSS. Many web
developers fear them, one of the reasons being that the CSS they write can
easily cause conflicts or be overwritten. For example:

ul[class] { /* (0,1,1) */
margin: 0;
padding: 0;
list-style-type: none;
}
.nav { /* (0,1,0) */
margin: 0 40px; /* 被 ul[class] 中的 margin 覆盖 */
}

To determine which declaration (CSS style rule) will “win” (and be applied to
elements), cascading provides corresponding algorithms. Understanding
cascading algorithms helps us understand how browsers resolve style rule
conflicts, that is, browsers decide which style rule to apply to elements.
However, it should be noted that cascading algorithms have different
descriptions in different specifications, and six different levels are provided
in Level 5. Without considering cascading layers, their standards are as
follows:

As in the example above, we need to increase the .nav weight according to

this criterion:
 ul[class] { /* (0,1,1) */
margin: 0;
padding: 0;
list-style-type: none;
}
ul.nav { /* (0,1,1) */
margin: 0 40px;
}

Colleagues familiar with CSS should know that the priority of these
standards is arranged from high to low, and check them one by one until a
obtained declaration is determined. If it cannot be determined which
attribute declaration will win at the higher standard, the cascade will move
to the next standard. For example, as shown in the figure below.

To solve problems such as cascading and weights, CSS adds a cascading layer
rule, @layer .

Simply put: Cascading layers provide a structured way to organize and

balance CSS rules in a single source that ultimately determines who wins !.
Due to the unique position of the cascading layer in CSS cascading, using it
has some benefits, allowing developers to have more control over the
cascading. The cascading layer of CSS is generally located between the “Style
Attribute” and the CSS selector weight (Specificity), namely:

With @layer , we can transform the code shown earlier like this:

@layer reset, components;

@layer reset {
ul[class] {
margin: 0;
padding: 0;
list-style-type: none;
}
}
@layer components {
.nav {
margin: 0 40px;
}
}

I use the following diagram to illustrate the differences in CSS cascading

before and after @layer :
The direct change brought about is that the weight calculation rules have
changed.

With the CSS cascading layer @layer feature, you can abandon some of the
previous CSS methodologies (such as ITCSS), because @layer can better help
you manage CSS cascades.
Simply put, cascading layers @layer is a new feature of CSS that affects the
application and priority of style rules. Here are some key details about
cascading layers:

Add to Cascade Layer: Styles can be added to a specified cascade layer

using the @layer rule. This allows developers to organize styles more
orderly.

Anonymous Cascade Layer: If the @layer rule is not used, the style will
be placed into the default anonymous cascade layer. This ensures that
styles that do not specify a cascade layer will not affect the styles of the
specified cascade layer.

Predefined cascading layer order: Cascading layers can predefine an

order to ensure that styles are applied according to the default
predefined cascading layer order when cascading layers are not explicitly
specified in style rules.

Load external CSS files to the cascade layer: You can load external CSS
files into the specified cascade layer through the @layer rule, which can
organize and load styles more flexibly.

Cascade-less styles: You can use the @layer unlayered rule to add styles to
the style layer of a cascade-less layer, and such styles are not inherited by
any cascade layer by default.

Cascade layer nesting: You can nest one cascade layer within another to
create a more complex style hierarchy.

Rollback Cascade Layer: You can use the @layer rule to roll back to the
previous cascade layer state to undo certain style changes.

Cascading layers provide developers with the ability to manage and organize
styles more finely, making it easier to maintain and extend styles in large
projects.

For a more detailed introduction to the CSS cascading layer @layer feature,
please read the CSS Layering: @layer course in Modern CSS !
💯 nesting

Usually, if web developers do not use CSS processors such as Sass (or SCSS),
LESS, and Stylus, each CSS selector needs to be explicitly declared and
separated from each other. For example:

table.colortable td {
text-align: center;
}
table.colortable td .c {
text-transform: uppercase;
}

table.colortable td:first-child,
table.colortable td:first-child + td {
border: 1px solid black;
}
table.colortable th {
text-align: center;
background: black;
color: white;
}

This will make the style code repetitive, redundant, and scattered. Therefore,
many web developers will use nested methods to write CSS selectors based
on the characteristics of CSS processors. For example, if the above code is
written using the nested syntax of SCSS, it will look like this:

table.colortable {
td {
text-align: center;
.c {
text-transform: uppercase;
}
&:first-child {
border: 1px solid black;
+ td {
border: 1px solid black;
}
}
}
th {
text-align: center;
background: black;
color: white;
}
}

Now, CSS also has nested features similar to SCSS, and relevant style rules
can be grouped into selectors to continue creating selectors.

table.colortable {
& td {
text-align: center;
.c {
text-transform: uppercase;
}
&:first-child,
&:first-child + td {
border: 1px solid black;
}
}
& th {
text-align: center;
background: black;
color: white;
}
}
Nesting can reduce the size of stylesheets, reduce the overhead of duplicate
selectors, and centralize component styles. There was a limitation when this
syntax was originally released: “ Any selector of CSS can be nested into
another selector, but it must start with & , . (class name), # (ID), @ ( @

rule), : , :: , * , + , ~ , > or [ symbols. " These symbols are identifiers

that signal to the parser that it is using nested styles. Later, with nested loose
syntax updates, this limitation has been resolved, such as not needing to add
& identifiers before element selectors:

table.colortable {
td {
text-align: center;
.c {
text-transform: uppercase;
}
&:first-child,
&:first-child + td {
border: 1px solid black;
}
}
th {
text-align: center;
background: black;
color: white;
}
}

Similarly, it can be nested with @ rules, for example:

h1 {
font-size: 2em;

@media (width >= 40em) {

& {
font-size: 4em;
}
}
}
/* 宽松语法 */
h1 {
font-size: 2em;

@media (width >= 40em) {

 font-size: 4em;
}
}

For a more detailed introduction to CSS nesting features, please read the
course “ Nesting and Scope of CSS: & and @scope “ in “ Modern CSS “!

👁️ scope

As we all know, CSS language is different from other programming

languages in that it does not have the concept of scope. Usually, developers
need to achieve scope-like functions through DOM structure and selectors.
This makes web developers find themselves alternating between two worlds
when writing selectors. On the one hand, web developers need to be clear
about which elements to choose specifically; on the other hand, web
developers hope that selectors will be kept later than replacement, rather
than tightly coupled with DOM structure. This is also one of the reasons why
tailwindcss is popular.
To this end, the W3C CSS Working Group added the @scope feature to CSS,
which was first supported by Chrome (version 118). @scope is an @ rule
with two main selling points: proximity-based styling and setting a lower
limit for selectors . In other words, scope brings two key things to CSS:

One set of styles can override another set of styles based on their
proximity in the DOM

More control over which elements selectors target (i.e. better

manipulation of CSS cascades)

This means that the @scope rule lets you scope selectors to a specific subtree
of the document. With the scope style, you can select elements very
specifically without having to write overly specific selectors or tightly couple
them to the DOM structure.

/* 根作用域 */
@scope (.card) {
img {
border-color: green;
}
}

Scoped style rules img { … } can actually only select < img > elements
within the scope of the matched .card element. To prevent < img >

elements within the card content area ( .card__content ) from being

selected, you can use a more specific img selector. Another way is to take
advantage of the fact that the @scope at rule also accepts range restrictions to
determine the lower bound.

@scope (.card) to (.card__content) {

img {
border-color: green;
 }
}

This range-bound style rule targets only < img > elements in the ancestor
tree between .card and .card__content elements. Such ranges with upper
and lower boundaries are often referred to as "donut ranges".

In the following example, the < img > element in the carousel component
does not match due to scope restrictions:
Demo address: https://codepen.io/web-dot-dev/pen/YzBLdjG

Within the CSS cascade , @scope also adds a new condition: determine
adjacent regions . This step comes after specificity but before the rendering
order.
By specification : “When comparing declarations that appear in style rules
with different range roots, the declaration with the fewest algebraic or
sibling element hops between the range root and the style rule subject that
qualifies the range wins”.

For a more detailed introduction to CSS nesting features, please read the
course “ Nesting and Scope in CSS: & and @scope “ in “ Modern CSS “, or see
“ How to Use @scope to restrict the coverage of selectors “ and @Miriam
Suzanne’s “ CSS @scope “.

💯 selectors: is () and: where ()

:is() and :where() are two pseudo-class selectors that can be used to select
a collection of multiple simple selectors and select them as a whole to
simplify and optimize the writing of selectors.

The :is() function takes a list of simple selectors and returns an

element that matches any of them, similar to | | (logical OR) in an
array.

The :where() function also accepts a list of multiple simple selectors,

grouping the elements of the selectors together to make it easier to read
and use.
:is() and :where() selectors are tolerant selectors. When using :is() or
:where() , if one selector cannot be resolved, the entire selector list will not
be considered invalid, but will ignore incorrect or unsupported selectors and
use other selectors. In addition, their usage is basically similar, the only
difference is that the :where() selector weight is always 0 , while the :is()

selector weight count is equal to the value of the highest weight in the
selector list .

Because :where() and :is() selectors can be used to change selector

weights, they can be used as a simple alternative to cascading layers. For
example, if you are creating a framework or library, you can use the :where()

pseudo-class function to reduce the selector weight in the framework or

library to 0 . The benefit of doing this is that web developers using your
framework or library do not need to deal with selector weights, and it can
easily override the style rules in your framework or library.

Simply put, :is() and :where() can help us better manage CSS selector
weights. The most effective way to use them is:

When building a CSS framework or library, use :where() to manage the

weight of all selectors, reducing the selector weight to 0

When using boxes or libraries, you can use :is() to increase the selector
weight, and without changing the HTML code, the selector weight can be
increased to the highest level

Given the difference between :is() and :where() , which selector to use
ultimately depends on your specific needs.

For a more detailed introduction to CSS nesting features, please read the
course “ CSS Selectors: : where () vs. .: is () “ in “ Modern CSS “!

💯 selector: has ()
CSS’s :has() selector is known as the parent selector of CSS! It, like the
container query feature of CSS, has always been the most wanted CSS
feature for web developers.

Personally, CSS :has() is the closest to the if... else... function. It is

closely related to HTML's DOM, which is the main reason why it is called a
relational selector. For example, in the following example, you are looking
for the existence of a descendant element, but the applied style will be the
parent element.

<!-- Case ①
-->
<figure>
<figcaption>CSS Pseudo-Class Specification</figcaption>
<img src="https://picsum.photos/1240/?random=11" alt="">
</figure>
<!-- Case ②
-->
<figure>
<div class="media">
<img src="https://picsum.photos/1240/?random=12" alt="">
</div>
<figcaption>CSS Pseudo-Class Specification</figcaption>
</figure>
<!-- Case ③
-->
<figure>
<img src="https://picsum.photos/1240/?random=13" alt="">
 <figcaption>CSS Pseudo-Class Specification</figcaption>
</figure>

The DOM trees corresponding to these three cases are shown in the
following figure.

Add the following CSS code:

/* 匹配包含 <figcaption>后代元素的 <figure>元素 */

figure:has(figcaption) {
background-color: #3f51b5;
}

figure:has(figcaption) will match all figures because figures contain the

figcaption element:
Demo address: https://codepen.io/airen/full/jOeMapz

What you saw above is just the simplest use of :has() , which can help you
do more complex things, even some operations with interactive behavior.
For example, in the following example, using :has() selector and state
selector, you can implement a pure CSS-made rating component
(StarRating):
Demo address: https://codepen.io/airen/full/poxeoeE

That’s why in Defensive CSS Insights , :has() is included in the category of

conditional CSS , because it allows you to use different CSS based on

relevant dynamic conditions in many cases.

The :has() selector is powerful. In addition to allowing us to implement

some challenging GUIs without using JavaScript scripts (such as the example
above), it has many other functions. For example, @wesbos recently shared a
picture on Twitter , introducing ten tips for the :has() selector:
Image source: https://twitter.com/wesbos/status/1737148340322652632

For more information about the :has() selector, you can also refer to:

CSS parent selector: : has ()

What problems can CSS selector : has () solve?

CSS selector: : has () and : not () combination

💯 complex n- * choice
New in CSS selector level 4 is the option to pass selector lists to :nth-child()

and :nth-last-child() .

:nth-child(An+B [of S]?)

:nth-last-child(An+B [of S]?)

After specifying of S , the An + B logic applies only to elements that match

the given selector list S . This actually means that you can pre-filter
subitems before An + B performs the operation.

With the help of :nth-child() pseudo-class selector , we can select elements

in the DOM by index. You can use An + B micro-grammar to precisely control
which elements to select.

By default, the :nth- *() pseudocode considers all child elements. Starting
from Chrome 111, you can optionally pass the selector list to :nth-child()

and :nth-last-child() . This allows you to pre-filter the list of child items
before An + B performs the operation.
In the demonstration below, the 3n + 1 logic is applied only to small dolls
by pre-filtering them using of.small. Use the drop-down menu to
dynamically change the selector used.

Demo address: https://codepen.io/web-dot-dev/full/YzBLdLW

What’s more interesting is that we can use :has() , :not() , ~ and +

together to simulate :nth-child(An + B [of S]?) and :nth-last-child(An + B

[of S]?) selectors, or even selectors that don't exist in CSS:

:first-in-ElementGroups-of-class(. 😍 ) , which selects the first element in

the ElementGroups (class name 😍
. ), and the corresponding selector is .

😍 : not(: has (+ .😍 )) .

:last-in-ElementGroups-of-class (. 😍 ) , which selects the last element in

the ElementGroups (class name 😍
. ), and the corresponding selector is .

😍 :not(:has (+ .😍 )) .

😍 ) , which selects the only element

:single-in-ElementGroups-of-class(.

in the ElementGroups (class name .😍 ), and the corresponding selector

is .😍 :not (.😍 +.😍 ):not(:has (+.😍 )) .
 😍 ) selects the nth element (class
:nth-in-ElementGroups-of-class (.

name .😍 ) in the ElementGroups . For example .😍 :not(.😍 + .😍 ) + .😍

selects the 2nd element (class name .😍 ); 😍 :not(.😍 + .😍 ) + .😍 + .
😍 selects the 3rd element (class name .😍 ).
:nth-last-in-island-of-class (.special) selects the nth last element
(class name 😍
. ) in the ElementGroups 😍 :not(:has(+.
. For example , .

😍 +.😍 )):has(+.😍 ) selects the 2nd last element (class name .😍 ), .

😍 :not(:has (+.😍 +.😍 +.😍 )):has(+.😍 +.😍 ) selects the 3rd last
element (class name .😍 ).

Demo address: https://codepen.io/airen/full/rNqmGrN

💯 CSS trigonometric function

The CSS Values and Units Module Level 4 in the W3C specification provides
web developers with mathematical expression -related capabilities. In
addition to the familiar calc() function and CSS comparison function (such
as min() , max() and clamp() ), there are also CSS triangle functions , such
as sin() , cos() , tan() , asin() , acos() , atan() and atan2() , etc.

Now, with CSS’s trigonometry function, you can more easily arrange
elements on a circle centered around a point:
Demo address: https://codepen.io/web-dot-dev/full/poGVqLO

If you are an animation enthusiast or often have the need to develop

animations , then CSS triangle function will be your best assistant. During
the animation development process, you can use CSS triangle function like
this:

sin() function can be used to change element size or control animation

duration;

cos() function can be used to keep the size of the rotated element
unchanged;

tan() function can be used to draw parallelograms;

The asin() , acos() , atan() and atan2() functions can be used to

rotate elements.

In addition, trigonometric functions have various applications and roles in

animation. Here are some common examples:

Smooth motion and easing effects : By using trigonometric functions,

especially sine ( sin() ) and cosine ( cos() ) functions, smooth motion
and easing effects of elements can be achieved. This helps to make the
animation look more natural and avoid sudden acceleration and
deceleration.

Periodic Animation : The sine ( sin() ) and cosine ( cos() ) functions

are periodic, so they are often used to create animation effects with
looping or repeating actions. For example, by adjusting the parameters of
the sine ( sin() ) function, ripple or oscillation effects can be created.

Rotation Animation : The rotational nature of trigonometric functions

makes them ideal for creating object rotation animations. Smooth
rotation effects can be achieved by using time variables in sine ( sin() )
and cosine ( cos() ) functions.
 Path Animation : The periodicity and smoothness of trigonometric
functions make them suitable for defining animations of objects moving
along complex paths. Various path animations can be created by
appropriately adjusting the parameters of trigonometric functions.

Oscillation effect : By using the sine ( sin() ) function, oscillation effects

can be simulated, such as swinging or elastic animation of springs.

Phase and frequency adjustment : Adjusting the phase and frequency of

the triangle function can change the speed and period of the animation,
providing more creative control.

These are just some common applications of trigonometric functions in

animation. Creative designers and developers can unleash more potential
and create colorful and fascinating animation effects. For example, the
following Ferris wheel rotating motion graphics applies CSS trigonometric
functions.

Demo address: https://codepen.io/airen/full/JjxzWgW

You can learn more about CSS trigonometric functions in the Magic of Math:
Exploring the Application of Math in Animation sessions.

💯 Subgrid

With CSS subgrid , you can create more complex grid layouts and achieve
better alignment between sublayouts.
It allows a grid within another grid to take the rows and columns of the outer
grid as its own by using subgrid as the values of the grid rows or columns.

Simply put, explicitly setting the value of display on a grid item to grid or
inline-grid , or inheriting the display value of its parent grid container,
means that the grid item is an independent grid formatting context. At the
same time, when the grid-template-columns and/or grid-template-rows of
the subgrid are explicitly set to subgrid , it means that the content of the
subgrid participates in the formatting context of its parent grid, without
establishing a new grid formatting context.

Subgrids in grid layouts are very useful and will give us more ways to achieve
functionality that was previously impossible with CSS grids. Subgrids are
great for aligning peers based on each other's dynamic content, and with
subgrids , the layout can be adjusted to fit the content.
If you are interested in the subgrid layout features, you can read Subgrids
and Nested Grids in Grid Layouts in Modern Web Layouts !

Typesetting

Web typesetting has always been very complex and involves a lot of
knowledge. In the just past year of 2023, web typesetting has made some
important updates. For example, you can use the text-wrap property to

achieve layout adjustments , you can use initial-letter to achieve the

effect of first letter sinking , and you can even use variable fonts and
colored fonts on the web to provide users with a better reading experience.
👁️ the first word sinking

The first character sinking first appeared in print media such as newspapers,
magazines, novels, textbooks, etc. It can add some fashion sense to the first
letter of a chapter or paragraph. These sinking letters can attract readers’
attention and can also use very fancy fonts because they only process one
letter in a string of text and do not affect the readability of the text.

The CSS internal connection layout module Level 3 (CSS Inline Layout
Module Level 3) provides the initial-letter property that allows you to
finely control the style of the first letter sinking. It can specify the size and
number of sinking initials, concave initials, and raised initials.

p::first-letter {
initial-letter: 3 2;
}
Demo address: https://codepen.io/web-dot-dev/full/XWOKGaL

initial-letter is a small but beautiful CSS feature that can be used to style
the placement of initials.

For a more detailed introduction to the CSS initial-letter feature, please

read the course " Initial-letter Sinking: initial-letter " in " Modern CSS "!

👁️ balanced and beautiful

As a developer, you don’t know the final size, font size, or even language of
the title or paragraph. All the variables needed to effectively and beautifully
handle text wrapping are provided in the browser. Since the browser
understands all factors (such as font size, language, and allocated area), it is
very suitable for handling advanced and high-quality text layout.

This requires us to adopt two new text wrapping techniques, one called
balance and the other called pretty . The balance value is designed to
create a harmonious text block, while pretty is designed to prevent isolated
characters and ensure healthy hyphenation. Traditionally, both tasks have
been done manually, and it's great to hand this work over to the browser and
have it support any translated language.

text-wrap: balance; There will be a limit on the number of lines, but this
depends on how many lines are under the text width. When using text-wrap:

balance; , because the browser has a limit on the number of lines for text
wrapping, it should only be used for headings and subheadings. Applying it
to large pieces of text will have no effect and will incur performance costs
because the browser is still trying to calculate the best balance even though
it will not apply anything.

When typesetting text, you need to choose between balance and aesthetics.
For headings and subheadings, use text-wrap: balance; . For text
paragraphs, use text-wrap: pretty; to eliminate isolated words in the last
line. These features are good candidates for progressive enhancement. If
someone is not in a supported browser, it will not have a negative impact on
the experience, but it will improve the visual balance of the page in a
supported browser.

For a more detailed introduction to the CSS text-wrap feature, please read
the course " Classic Typesetting Techniques: Using text-wrap: balance to
achieve text balance and line breaks " in " Modern CSS

Note that only two typesetting features, initial-letter and text-wrap , are
introduced here. In fact, there are other typesetting features that will be
supported by the Web platform in 2023. For example:

F-mods: new features available for @font-face

CSS text-box-trim and text-box-edge bring changes to typography

Variable fonts on the web

Colored fonts on the web

Color
2023 is the year of color for web platforms. With new color spaces and
functions, dynamic color themes can be realized. You can create rich and
bright themes, and customize them!

💯 high definition color space

：
URL https://www.saji8k.com/displays/color-space/

The problem with color and the web is that CSS does not support high-
definition preparations . When CSS was introduced to the web in 1996, most
computer monitors were very bad and mostly not high-definition. Colors
defined using RGB, HSL, or HEX (hexadecimal) were within the sRGB color
gamut and only applicable to monitors at the time.
Nowadays, most new devices have wide color gamut display capabilities,
such as using the Display P3 color gamut , and even larger color gamut like
Rec.2020 . In 2023, we have new colors, more colors, new color spaces, color
functions, and new features.

CSS and colors can now achieve:

Check if user screen hardware supports wide gamut HDR colors

Check if the user’s browser understands color syntax like OKLCH or

Display P3

Specify HDR colors in color spaces such as OKLAB, OKLCH, HWB,

Display P3, Rec.2020, XYZ, etc

Create gradual changes with HDR colors

Interpolate gradual changes in alternate color spaces

Use color-mix () to mix colors

Create color variants using relative color syntax

Demo address: https://codepen.io/web-dot-dev/full/yLZzmGM

CSS colors will be parsed in which color space, mainly divided into sRGB and
non- sRGB . Among them, the colors parsed in the sRGB color space are:

Hexadecimal color

rgb () and rgba ()

hsl () and hsla ()

hwb ()

Name colors such as red , black etc

Colors parsed in non- sRGB color spaces are:

Lab and LCH: lab () and lch ()

OKLAB and OKLCH: oklab () and oklch ()

Any color space: color ()

For more detailed information on this, please refer to:

Color formats in modern CSS: RGB, HSL, HWB, LAB, and LCH

New CSS color space: set high definition colors for the web

OKLAB and OKLCH in CSS

💯 color-mix () function
Blending colors is a classic task, and in 2023, CSS can also do it. You can not
only mix white or black for colors, but also mix transparency, and perform
all these operations in any color space you choose. Compared to traditional
color mixing methods (such as simple average, linearly weighted average,
etc.), the color-mix() function provides more flexible mixing methods. In
addition, it can mix in different color spaces, which is more flexible when
adjusting colors, and can choose the appropriate color space for mixing as
needed.
You can think of color-mix() as a point in time in gradual change. In
gradual change, we can see all the sections from blue to white, and color-

mix() only shows one of the steps. Things get more complicated when you
start thinking about color space and learning how much the mixed color
space differs from the result.
URL: https://color-mix.style/

For a more detailed introduction to color-mix() , please read the course "
Blending Colors in CSS: color-mix () " in " Modern CSS "!

👁️ relative color syntax

CSS Color Module Level 5 Introduces the relative color syntax for the CSS
color function, further enhancing the color function functionality. This
syntax allows you to define a new color based on another color. You can use
it by first defining the starting color using the from keyword, and then
specifying the channel for the new color in the color function as usual.

When you provide the starting color, you can access “channel keywords”,
which allow you to reference each channel in the color space. The keyword
depends on the color function you use. For rgb() , you will have r , g ,
and b channel keywords. For oklch() , you will have l , c , and h

keywords. For each color function, you also have a transparent channel
keyword that references the starting color's Alpha channel. For example:

:root {
--theme-primary: #8832CC;
}
.bg-primary-100 {
background-color: hsl(from var(--theme-primary) h s 90%);
}
.bg-primary-200 {
background-color: hsl(from var(--theme-primary) h s 80%);
}
.bg-primary-300 {
background-color: hsl(from var(--theme-primary) h s 70%);
}
 .bg-primary-400 {
background-color: hsl(from var(--theme-primary) h s 60%);
}

Take hsl(from var(--theme-primary) h s 30%) as an example:

Demo address: https://codepen.io/airen/full/RweBMeY

Relative Color Syntax (RCS) is a supplement to color-mix() for creating color

variants. It is more powerful than color-mix () , but also a different color
processing strategy. color-mix() may mix in white to brighten the color, RCS
can precisely access the brightness channel, and can use calc() on the
channel to programmatically reduce or increase brightness.
Demo address: https://codepen.io/web-dot-dev/full/YzBrmdB

RCS allows you to manipulate colors relatively and absolutely. Relative

variation refers to taking the current saturation or brightness value and
modifying it using calc() . Absolute variation refers to replacing channel
values with brand new values, such as setting opacity to 50% . This syntax
can provide meaningful theme setting tools for time variants and so on.

For a more detailed introduction to Relative Color Syntax (RCS), please read
the Relative Color Syntax in the course Color Formats in Modern CSS: RGB,
HSL, HWB, LAB, and LCH in Modern CSS !

In addition, you can also use CSS’s accent-color and color-scheme to

customize the UI color of Web controls , and use color-contrast() function

to set the contrast of colors to improve User Experience!

👁️ Light-dark () function that responds to light or dark mode

To change the color based on whether light or dark mode is used, a prefers-

color-scheme media query is often used. To make things easier, CSS now
provides a useful function called light-dark() . This function accepts two
color values as arguments. Depending on the color scheme you are currently
using, it will output the first or second argument.

According to the specification :

If the color scheme used is light or unknown, the function calculates the
value of the first color; if the color scheme used is dark, it calculates the
value of the second color.

The color scheme used is based not only on the user’s light or dark mode
settings, but also on the value of the color-scheme property. This is similar to
how System Colors are calculated.

The color-scheme attribute allows an element to indicate which color

scheme it is designed to use for rendering. These values are negotiated with
the user's preferences to form a color scheme to use. This means that for
light-dark() to work, you must also include a color-scheme declaration.
 :root {
color-scheme: light dark;
}
:root {
--text-color: light-dark(#333, #ccc); /* 在浅色模式下返回第一个值。在深色模式下返回
}

Since color-scheme is taken into account, this also means that you can
override its value on each element to force it into a specific mode:

.dark {
color-scheme: dark; /* light-dark() 在此元素及其子元素上始终返回 dark */
}

Using the light-dark() function is much simpler and more convenient than
using prefers-color-scheme media queries.

Responsive design
@Una Kravets Presented at the 2021 Google I/O Conference Proposed a new
responsive design: Component-Driven Web Design . The web ecosystem is
about to enter a new era of responsive web design, changing our perception
of its meaning and bringing new changes to web design. Component-Driven
Web Design (or development) is also known as the next generation of
responsive web design .

In other words, we are once again witnessing the evolution of the responsive
design ecosystem, namely CSS’s new features will be directly based on
components rather than page-based style injection responsiveness This
capability is called Component-Driven Web Design , and component-driven
development will become a truly popular development model.

I also spent a class in “ Modern Web Layout “ to discuss this topic with you: “
Next Generation Responsive Web Design: Component-Driven Web Design “!

Two years later, in 2023, it can be said to be a breakthrough year for

responsive web design. This year has led to a number of new features that
have completely changed the way we build responsive web and pioneered a
 new pattern of component-based responsive design. The combination of CSS
container queries ( size queries , style queries, and status queries ) and
:has() selectors supports components to have their own responsive and
logical styles based on the size of their parent elements and the presence or
status of any child elements. This means that you can finally separate page-
level layouts (macro layouts) from component-level layouts (micro layouts)
and use your components everywhere with just one logic write!

Size Query 💯 Container Query

Container Query allows you to apply styles based on the size, computed style,
and state of the element container. Its biggest features are: Container Query
allows developers to define any element as containing context. The
descendant elements of the query container can change style based on the
Open in app Sign up Sign in
size of the query container or changes in computed style and state !
Search Write
In other words, a query container specifies its query type by using the
container type attribute ( container-type or container ). At the same time,
the style rules of the descendant elements of the query container can be set
independently by using the @container conditional group rules. Simply put,
Query containers (also known as CSS containment) provide a way to isolate
various parts of the page and declare to the browser that these parts are
independent of other parts of the page in terms of style and layout .

Container queries were originally limited to size queries, but over time, style
queries and status queries were added to container queries. In other words,
container queries include three types:

Size query : Adjust the style of its descendant elements according to the
size of the query container

Style Query : Adjust the style of its descendant elements based on the
query container style or CSS variables

State query : adjust the style of its descendant elements according to the
query capacity state
The size query supports querying the size of the parent element, instead of
using the global size information of the viewport (browser window) to apply
CSS styles. This means that you can set dynamic styles for components in
multiple layouts and views.

To use this feature, first set the element on the element you want to query,
and then apply the style using @container with size parameters, similar to
media queries. In addition to container queries, you can also get the
container query size. In the following demonstration, the container query
size cqi (representing the size of the embedded container) is used to adjust
the size of the card header.
Demo address: https://codepen.io/web-dot-dev/full/eYxBNQy

If you are interested in this feature, you can move on to read “ Next
Generation Responsive Web Design: Container Queries “ and “ CSS Container
Queries: Size Queries “. Note that the cqi mentioned above is the container
query unit, which is somewhat similar to the window unit. For more detailed
information on this, please refer to " Relative Units in Modern CSS ".

👁️ Style Query for Container Query

Style queries are very similar to size queries. You can use style queries to
query the computed style of a container, but distinguish size queries through
the style () function, which accepts any valid style declaration. Style ()

function accepts:

@container style(font-style: italic) {

em {
background: var(--highlight);
color: var(--highlight-text);
}
}
@container style(--button: pill) {
button {
border-radius: 50%;
padding-inline: 1em;
}
}
@container colors style(background-color: black) {
a:any-link {
color: var(--link-on-dark);
}
}

Note that the conditions of the style query (as declared in the style ()

function) compare computed values.

Many times, style queries can also achieve the same results as size queries.
That is, you can query the value of a custom property on the parent element
when using @container style() . For example, query whether a custom
property value exists or is set to a specific value, such as @container style(--

rain: true) :

Demo address: https://codepen.io/web-dot-dev/full/mdvBgqv

Although this sounds similar to using class names in CSS, style queries have
some advantages. Firstly, for style queries, you can update the values in CSS
according to the needs of pseudo-state. In addition, in future
implementations, you will be able to query the range of values (such as
style(60 < = --weather < = 70) ) and determine the applied style based on
attribute value pairs (such as style(font-style: italic) ).

For a more detailed introduction to style queries, please read the course “
CSS Container Queries: Style Queries and Status Queries “ in “ Modern CSS “!

👁️ Status Query for Container Query

@Una Kravets shared a topic related to “ Current Status of CSS Community “

during CSS Day 2023, which includes topics related to the status query of CSS
container queries.

In fact, CSS state queries and CSS style queries are somewhat similar. We
mainly use the state() function to distinguish between size queries and
style queries in CSS container queries. For example:

@container state(dir: rtl) {

/* RTL 布局 */
}
However, it is important to note that CSS state queries are only a new type of
query currently being experimented with by the Chromium team.

💯 Update Media Query

With the update media query, you can adapt the interface to the refresh rate
of the device. This feature can report fast , slow or none values, which are
related to the functionality of different devices.

Most of the devices you design may have a fast refresh rate, including
desktop devices and most mobile devices. The refresh rate of devices such as
e-readers and low-energy payment systems may be slow. Knowing that the
device cannot handle animations or frequent updates means you can save
battery life or reduce erroneous view updates.

Demo address: https://codepen.io/web-dot-dev/full/wvNrVNa

When making animations, this media query is very useful if you want to
reduce motion for users with slow networks. In addition, it is often used with
the prefers-reduced-motion: reduce media query to provide different
animation effects for users who have reduced motion preferences:
 @media (prefers-reduced-motion: reduce), (update: slow) {
*,
::before,
::after {
animation-delay: -1ms !important;
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
background-attachment: initial !important;
scroll-behavior: auto !important;
transition-duration: 0s !important;
transition-delay: 0s !important;
}
}

If you are interested in this area, especially how to make accessible web
animations, you can move to read “ Web Animation Journey “ “ Key Tips for
Improving Accessibility Animation “!

💯 Scripted media queries

Scripted media queries ( scripting ) can be used to check if JavaScript is

available. This is very useful for progressive enhancement. Before this media
query was introduced, a strategy for detecting whether JavaScript was
available was to place a nojs class in HTML and then remove it using
JavaScript. These scripts can be removed because CSS can now detect
JavaScript and adjust accordingly.

.steam {
transition: opacity .2s ease;
}
@media (scripting: none) {
.steam {
opacity: 0;
}
}
@media (scripting: enabled) {
.steam {
opacity: 1;
}
}

Demo address: https://codepen.io/web-dot-dev/full/ExrwqrQ

Suppose there is a theme switch on a website. Since JavaScript is not

available, script media queries can help make the switch comply with system
preferences. Alternatively, consider using the switch component — if
JavaScript is available, simply swipe the switch with gestures without having
to turn it on and off. If the script is available, there are many opportunities to
upgrade the User Experience; if the script is disabled, a meaningful basic
experience can be provided.

👁️ Media queries with reduced transparency

Non-transparent interfaces can cause headaches or visual fatigue due to

various types of visual defects. Therefore, Windows, macOS, and iOS have
System Preferences that can reduce or remove the transparency of the
interface. This media query for prefers-reduced-transparency is very suitable
for media queries with other preferences, which allows you to be creative
and adjust for users.
Demo address: https://codepen.io/web-dot-dev/full/RwvLXvO

In some cases, you can provide an alternate layout that does not overlay
content on top of other content. In other cases, you can adjust the opacity of
the color to opaque or almost opaque. @Adam Argyle’s blog post provides
more inspiring demos that can be adjusted according to user preferences .

💯 Media query range

In media queries, min-width (or min-height ) and max-width (or max-height

) are called query ranges. Just using min- and max- is often confusing, at
least for myself: "Using min-width and max-width is often confusing."
Therefore, I always like to use the following figure to make judgments:
But the Media Queries Level 4 specification introduces a new syntax that
uses common mathematical comparison operators such as < , > and = to
determine the range of window widths, which makes more sense
syntactically while writing less code and making it easier to understand the
code.

/* 老方式的查询范围语法 */
@media (min-width: 375px) {
/* 视窗宽度大于或等于 375px */
}
@media (max-width: 768px) {
/* 视窗宽度小于或等于 768px */
}
@media (min-width: 375px) and (max-width: 768px) {
/* 视窗宽度在 之间
375px ~ 768px */
}
/* 新式的查询范围语法 */
@media (width >= 375px) {
/* 视窗宽度大于或等于 375px */
}
@media (width <= 768px) {
/* 视窗宽度小于或等于 768px */
}
@media (375px <= width <= 768px) {
/* 视窗宽度在 375px ~ 768px 之间 */
}

The biggest change in the Media Queries Level 4 specification is that we have
a new operator for comparing values instead of combining values.

< Calculate whether one value is less than another

> : Calculate whether one value is greater than another value

= : calculate whether one value is equal to another value

> = : calculate whether one value is greater than or equal to another

value

< = Calculates whether one value is less than or equal to another

With these new operators, the syntax rules for CSS media queries have
correspondingly changed to the following figure:

Usually, when we write CSS media queries, we create a so-called breakpoint,

which is a design “interrupt” condition, and apply a set of styles to fix it. A
design can have a bunch of breakpoints! They are usually based on a window
between two widths: where the breakpoint starts and where it ends.

New Grammar Apart from the visual differences in grammar, they work
slightly differently. Using min- and max- is equivalent to using
mathematical comparison operators:
 Max-width is equivalent to the < = operator, for example, (max-width:

320px) is the same as (width < = 320px)

Min-width is equivalent to the > = operator, for example, (min-width:

320px) is the same as (width > = 320px)

Note that neither is equivalent to the > or < operators.

For a more detailed introduction to CSS media queries, please read “ Modern
CSS “ in “ CSS Media Query New Features: @media “!

Interactive animation

Interactive animation is the cornerstone of digital experience. It helps users

obtain feedback on the content they click on and their position in virtual
space. In 2023, many exciting features will be launched one after another,
making interactive animation easier to organize and implement, achieving a
smooth User Experience and a more refined network experience.
I am writing a small book related to web animation, if you are interested in
web animation, you can pay attention to “ Web Animation Journey “!

👁️ view transition

View transitions can have a huge impact on the User Experience of the Web.
With the CSS View Transitions API, you can create visual transitions between
two page states in a Single Page Application. These transitions can be full-
page transitions or smaller transitions on a webpage, such as adding or
removing new items from a list.

The core of the CSS View Transitions API is the document.trigViewTranstion

function. Pass in the function that updates the DOM to the new state, and
this API takes care of all the work for you. To do this, it takes before and after
snapshots and then transitions between the two. With CSS, you can control
what is captured and customize how these snapshots are animated as
needed.
 :root {
view-transition-name: none;
}
::view-transition-group(*) {
animation-duration: 0.5s;
}

Demo address: https://codepen.io/web-dot-dev/full/ExrLGJx

For a more detailed introduction to view transitions, please read “ Using CSS
View Transitions to Create Smooth Interface Motion Graphics “ in “ Web
Animation Journey “; or see “ Modern CSS “ in “ Unlocking the Magic of CSS
View Transitions API “!

👁️ Scroll drive motion graphics

Scroll-driven animations are an exciting feature offered since Chrome 115.
They allow you to associate existing CSS animations or animations built
using the Web Animations API with scroll offsets from the scrollers. When
you scroll up and down, or left and right in the horizontal scrollers, the
associated animations will rewind directly in response.

Using ScrollTimeline , you can track the overall progress of the scroller, as
shown in the following demonstration. When you scroll to the end of the
page, the text will be displayed character by character.
Demo address: https://codepen.io/web-dot-dev/full/JjxvwqG

Using ViewTimeline , you can track the movement of elements in the

scrolling viewport. This is similar to how IntersectionObserver track
elements. In the demonstration below, each image starts to gradually appear
the moment it enters the scrolling viewport, until it is in the center position.

Demo address: https://codepen.io/web-dot-dev/full/XWOqovr

Due to the fact that scroll-driven animations work together with CSS
animations and Web Animations APIs, you can benefit from all the
advantages these APIs bring. This includes the ability to run these
animations off the main thread. Now, with just a few extra lines of code, you
can have silky smooth animations, driven by scroll operations, running off
the main thread. What else wouldn’t you like?

When applying scroll-driven animation through CSS, the lookup mechanism

that controls the scrollbar always traverses the DOM tree upwards, so it is
limited to scrolling ancestor entities. However, usually, the element that
needs to add animation effects is not a child element of the scrollbar, but an
element located in a completely different subtree.

To allow an animation element to find a named scroll timeline for a non-

ancestor entity, use the timeline-scope attribute on the shared parent. This
allows you to attach a defined scroll-timeline or view-timeline with that
name, giving it a broader scope. This way, any child of the shared parent can
use a timeline with that name.
After timeline-scope is declared on the shared parent, the scroll-timeline

declared on the scrollbar can be found using the scrollbar as an element of

the animation-timeline .

Nowadays, we only need to use pure CSS to achieve it. By combining CSS
scroll capture , custom properties , and scroll-driven motion graphics, we
can achieve a parallax scrolling animation effect.

Demo address: https://codepen.io/airen/full/YzBMgQB

The above example also has a responsive function. When you reduce the
browser screen to less than 768px , the page can also scroll the whole
screen, and the parallax effect is more obvious:
For a more detailed introduction to CSS scroll-driven motion graphics,
please read “The Art of CSS Scroll-Driven Motion Graphics “ in “ Web
Animation Journey “; or see “ CSS Scroll-Driven Motion Graphics “ in “
Modern CSS “!

👁️ Discrete Property Animation

Another new feature in 2023 is the ability to animate discrete properties,
such as between display: none and display: block . Starting from Chrome
116, you can use display and content-visibility in keyframe rules. You can
also transition any discrete property at 50% instead of 0% . This is achieved
by using the allowed-discrete value of the transition-behavior property, or
as a shorthand in the transition property.

Transition-behavior property value allows-discrete , which allows for

some smooth transitions to discrete properties. This makes it more flexible
to apply transitions to discrete properties. This means that using the allow-

discrete mode, you can achieve smooth transitions to discrete properties

instead of sudden switches. This is very useful for situations where
transitions need to be applied to discrete properties, making it possible to
create smoother animation effects on these properties.

@layer transition {
.card {
transition: opacity 0.25s, display 0.25s;
transition-behavior: allow-discrete;
}
.fade-out {
opacity: 0;
display: none;
 }
}

Demo address: https://codepen.io/airen/full/xxMxrgy

For a more detailed introduction to discrete property animation, you can

read “ Web Animation Journey “ in “ Frame Animation and Transition
Animation: Who is Better for Your Business Scenario “!

👁️ @starting-style
The above picture is from @XboxYan

@Starting-style is a new CSS @ rule that uses new web features to animate
the entry and exit of elements with display: none . This rule provides a way
for browsers to look for "before-open" styles before the element is opened on
the page. This is useful for intro animations and for animating elements
such as pop-ups or dialog boxes. It can also be used when creating an
element and wanting to animate it. The following example animates the
popover property to smoothly enter the view from outside the viewport and
into the top layer.

/* IS-OPEN STATE */
dialog[open] {
translate: 0 0;
}
/* EXIT STATE */
dialog {
transition:
translate 0.7s ease-out,
overlay 0.7s ease-out,
display 0.7s ease-out allow-discrete;
translate: 0 100vh;
}
/* 0. BEFORE-OPEN STATE */
@starting-style {
dialog[open] {
translate: 0 100vh;
}
}
Demo address: https://codepen.io/web-dot-dev/full/OJdjjdX

For more information about @starting-style , see Frame Animation vs.

Transition Animation: Who's Better for Your Business Scenario in Web
Animation Journey !

👁️ overlay
New CSS overlay properties can be added to your transitions to allow
elements with top-level styles (such as popover and dialog ) to smoothly
move out of the top-level animation. If you do not use overlay transitions,
your element will immediately return to the state of being cropped,
transformed, and overwritten, and you will not see the transition occur.
Similarly, when you add an overlay to a top-level element, :: backdrop can
also be smoothly animated out.

Demo address: https://codepen.io/web-dot-dev/full/zYeJbgw

If you’re interested in entry and exit animations, or want to make a smooth

entry and exit animation, see @Una Kravets and @Joey Arhar’s tutorial Four
new CSS features for smooth entry and exit animations .

👁️ Anchor Positioning
CSS Anchor Positioning (CSS Anchor Positioning) is a new method for
locating elements on a web page. It is a new feature of CSS. The W3C
specification describes it as follows : “Through anchor positioning (through
the anchor positioning function anchor() and anchor-size() ), an absolutely
positioned element can be anchored with one or more other elements on the
page, while also allowing them to try multiple possible positions to find the
best position to avoid overlap and overflow".

Simply put, CSS anchor positioning improves the ability of element absolute
positioning. Web developers can use a simpler and more natural way to
locate the relationship between elements, allowing page elements to be
positioned and adjusted according to the position and size of other elements
within their containing blocks. The emergence of this feature provides web
developers with more control and flexibility, while reducing dependence on
JavaScript, making page performance more optimized.

CSS anchor positioning provides a new paradigm for positioning in web

layout by introducing a set of properties and values that allow elements to
connect with each other.
 First, use anchor-name to define an anchor point, and the marked
element will serve as the benchmark target for absolute positioning

Second, use the anchor() or anchor-size() function as the value of the

embedded property ( top , right , bottom , left or their logical
equivalents) of the element being positioned

Finally, using the @position-fallback rule provides a fallback

mechanism for anchor positioning, that is, setting multiple sets of
different anchor positioning rules to adapt to more complex web layouts

In the past, to achieve the effect of the lava lamp menu, we had to rely on
JavaScript scripts. Now, we can use CSS anchor positioning to achieve it. For
example:

Demo address: https://codepen.io/airen/full/RwEpMxM

If you want to learn more about CSS anchor positioning, read CSS Anchor
Positioning: Exploring the Next Generation of Web Layouts in Modern CSS !

👁️ animation compositing
The W3C specification describes CSS compositing animations as follows :

The animation-composition property defines the composite operation used

when multiple animations affect the same property simultaneously.

Roughly speaking, “The animation-composition property defines the

composite operation used when multiple animations affect the same
property at the same time."

In other words, CSS animation compositing ( animation-composition ) refers

to using multiple CSS animation effects to affect the same property at the
same time, and controlling how these animations combine to affect the
property values of the animation element through some properties and
methods. This allows for more flexible control of the animation
performance when multiple animation effects act on the element at the
same time, including the overlay and replacement of property values. This
provides web developers with more control to create complex animation
effects without relying on a single animation rule.

For a more detailed introduction to animation-composition , you can refer to "

Multiple CSS Animations and Animation Compositing: Creating More
Complex Animation Effects " in " Web Animation Journey ", or you can read "
Modern CSS " in " CSS Animation Compositing: animation-composition "!

👁️ Slowdown function linear ()

Don’t let the name of this function mislead you. linear() function (not to be
confused with the linear keyword) allows you to create complex easing
functions in a simple way, at the expense of some precision.

Before the introduction of linear() (published in Chrome 113), it was not

possible to create bounce or spring effects in CSS. Thanks to linear() ,
these easing functions can be approximated by simplifying them into a
series of points and then linearly interpolating between these points.

:root {
--linear: linear(0, 1);
--quad-in: linear( 0, 0.0039, 0.0156, 0.0352, 0.0625, 0.0977, 0.1407, 0.1914,
--quad-out: linear( 0, 0.2342, 0.4374, 0.6093 37.49%, 0.6835, 0.7499, 0.8086,
--quad-in-out: linear( 0, 0.0027, 0.0106 7.29%, 0.0425, 0.0957, 0.1701 29.16%,
--power-1-in: linear( 0, 0.0039, 0.0156, 0.0352, 0.0625, 0.0977, 0.1407, 0.191
--power-1-out: linear( 0, 0.2342, 0.4374, 0.6093 37.49%, 0.6835, 0.7499, 0.808
--power-1-in-out: linear( 0, 0.0027, 0.0106 7.29%, 0.0425, 0.0957, 0.1701 29.1
--cubic-in: linear( 0, 0.0014 11.11%, 0.0071 19.24%, 0.0188 26.6%, 0.037 33.33
 --cubic-out: linear( 0, 0.2688 9.91%, 0.3859 15%, 0.4917 20.19%, 0.5865 25.5%,
--cubic-in-out: linear( 0, 0.0036 9.62%, 0.0185 16.66%, 0.0489 23.03%, 0.0962
--power-2-in: linear( 0, 0.0014 11.11%, 0.0071 19.24%, 0.0188 26.6%, 0.037 33.
--power-2-out: linear( 0, 0.2688 9.91%, 0.3859 15%, 0.4917 20.19%, 0.5865 25.5
--power-2-in-out: linear( 0, 0.0036 9.62%, 0.0185 16.66%, 0.0489 23.03%, 0.096
--quart-in: linear( 0, 0.0039 25%, 0.0117 32.89%, 0.0248 39.68%, 0.0457 46.22%
--quart-out: linear( 0, 0.1538 4.09%, 0.2926 8.29%, 0.4173 12.63%, 0.5282 17.1
--quart-in-out: linear( 0, 0.0029 13.8%, 0.0184 21.9%, 0.0339 25.51%, 0.0551 2
--power-3-in: linear( 0, 0.0039 25%, 0.0117 32.89%, 0.0248 39.68%, 0.0457 46.2
--power-3-out: linear( 0, 0.1538 4.09%, 0.2926 8.29%, 0.4173 12.63%, 0.5282 17
--power-3-in-out: linear( 0, 0.0029 13.8%, 0.0184 21.9%, 0.0339 25.51%, 0.0551
--quint-in: linear( 0, 0.0024 29.91%, 0.008 38.03%, 0.0179 44.72%, 0.035 51.16
--quint-out: linear( 0, 0.1641 3.52%, 0.311 7.18%, 0.4413 10.99%, 0.5553 14.96
--quint-in-out: linear( 0, 0.0012 14.95%, 0.0089 22.36%, 0.0297 28.43%, 0.0668
--power-4-in: linear( 0, 0.0024 29.91%, 0.008 38.03%, 0.0179 44.72%, 0.035 51.
--power-4-out: linear( 0, 0.1641 3.52%, 0.311 7.18%, 0.4413 10.99%, 0.5553 14.
--power-4-in-out: linear( 0, 0.0012 14.95%, 0.0089 22.36%, 0.0297 28.43%, 0.06
--strong-in: linear( 0, 0.0024 29.91%, 0.008 38.03%, 0.0179 44.72%, 0.035 51.1
--strong-out: linear( 0, 0.1641 3.52%, 0.311 7.18%, 0.4413 10.99%, 0.5553 14.9
--strong-in-out: linear( 0, 0.0012 14.95%, 0.0089 22.36%, 0.0297 28.43%, 0.066
--elastic-in: linear( 0, 0.0019 13.34%, -0.0056 27.76%, -0.0012 31.86%, 0.0147
--elastic-out: linear( 0, 0.2178 2.1%, 1.1144 8.49%, 1.2959 10.7%, 1.3463 11.8
--elastic-in-out: linear( 0, 0.0009 8.51%, -0.0047 19.22%, 0.0016 22.39%, 0.02
--bounce-in: linear( 0, 0.0117, 0.0156, 0.0117, 0, 0.0273, 0.0468, 0.0586, 0.0
--bounce-out: linear( 0, 0.0039, 0.0157, 0.0352, 0.0625 9.09%, 0.1407, 0.25, 0
--bounce-in-out: linear( 0, 0.0078, 0, 0.0235, 0.0313, 0.0235, 0.0001 13.63%,
--expo-in: linear( 0, 0.0085 31.26%, 0.0167 40.94%, 0.0289 48.86%, 0.0471 55.9
--expo-out: linear( 0, 0.1684 2.66%, 0.3165 5.49%, 0.446 8.52%, 0.5581 11.78%,
--expo-in-out: linear( 0, 0.0053 17.18%, 0.0195 26.59%, 0.0326 30.31%, 0.0506
--circ-in: linear( -0, 0.0048 9.8%, 0.0192 19.5%, 0.043 29.02%, 0.0761 38.26%,
--circ-out: linear( 0, 0.0979 0.48%, 0.195 1.92%, 0.2901 4.3%, 0.3827 7.61%, 0
--circ-in-out: linear( -0, 0.0033 5.75%, 0.0132 11.43%, 0.0296 16.95%, 0.0522
--sine-in: linear( 0, 0.0035, 0.0141 10.7%, 0.0318 16.09%, 0.0566 21.51%, 0.08
--sine-out: linear( 0, 0.2861 18.47%, 0.4829 32.08%, 0.6437 44.52%, 0.7712 56.
--sine-in-out: linear( 0, 0.007 5.35%, 0.0282 10.75%, 0.0638 16.26%, 0.1144 21
--back-in: linear( 0, -0.0029 4.31%, -0.0119 9.02%, -0.0838 31.27%, -0.0956 36
--back-out: linear( 0, 0.1935 4.37%, 0.3671 8.83%, 0.521 13.38%, 0.6557 18.04%
--back-in-out: linear( 0, -0.0077 5.2%, -0.0452 16.98%, -0.0493 22.35%, -0.041
--spring-1: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%,
--spring-2: linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0
--spring-3: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%,
--spring-4: linear(0, 0.009, 0.037 1.7%, 0.153 3.6%, 0.776 10.3%, 1.001, 1.142
--spring-5: linear(0, 0.01, 0.04 1.6%, 0.161 3.3%, 0.816 9.4%, 1.046, 1.189 14
--bounce-1: linear(0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141, 0.191, 0.25, 0
--bounce-2: linear(0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141 15.1%, 0.25, 0.
--bounce-3: linear(0, 0.004, 0.016, 0.035, 0.062, 0.098, 0.141 11.4%, 0.25, 0.
--bounce-4: linear(0, 0.004, 0.016 3%, 0.062, 0.141, 0.25, 0.391, 0.562 18.2%,
--bounce-5: linear(0, 0.004, 0.016 2.5%, 0.063, 0.141, 0.25 10.1%, 0.562, 1 20
}

These easing curves will make your animation more dynamic, weighty, etc.
They bring the animation closer to the movement of objects in real life.
Demo address: https://codepen.io/web-dot-dev/full/bGzMOJM

For a more detailed introduction to the linear() function, see Using Linear
() Function to Create Stunning Animated Curves in Web Animation Journey !

👁️ Scrollend incident
Many interfaces include scrolling interactions, and sometimes interfaces
need to synchronize information related to the current scrolling position or
extract data based on the current state. Before the scrollend event, you have
to use an inaccurate timeout method that can be triggered when the user's
finger is still on the screen. With the scrollend event, you can implement
precisely timed scrollend events to see if the user is still performing gesture
operations.
Demo address: https://codepen.io/web-dot-dev/full/OJdxKqJ

This is very important for browsers because during scrolling, JavaScript

cannot track the presence of fingers on the screen, and relevant information
cannot be obtained. Now, a large amount of inaccurate scrolling end attempt
code can be removed and replaced with high-precision events owned by the
browser.

For a more detailed introduction to the scrollend event, see @Adam

Argyle's Scrollend (a new JavaScript event) !

💯 Scroll Capture
Actually, scroll capture is not a feature that will just be supported in 2023, but
I still included this feature in this article. One of the main reasons is that it
can really help us improve the user experience. It is a very good and easy-to-
use feature.

CSS Scroll Capture gives us a way to, scroll a document to a specific point
(location) as the user scrolls through it . This is helpful for creating a more
application-like (native Client) experience for certain types of applications
(such as <Carousel> pieces) on mobile devices, and even on desktops. In
short, CSS Scroll Capture can:

Prevent awkward scrolling positions when scrolling.

Create a better scrolling experience.

CSS scroll capture related properties are similar to CSS Flexbox and Grid
properties, divided into properties that act on containers (scroll containers)
and properties that act on positioning sub-items (scroll container sub-
elements) . The properties that act on scroll containers mainly include
scroll-snap-type , scroll-padding and scroll-snap-stop ; the properties
that act on positioning sub-items mainly include scroll-margin and scroll-

snap-align .
Now, you can combine scroll capture with scroll-driven animation and
custom scroll bars to achieve a 3D cover effect like the one shown below
without relying on any JavaScript.

Demo address: https://codepen.io/airen/full/yLZWJog

What you need to know is that besides scroll capture , there are other ways
to improve the user’s scrolling experience. For more details, please refer to “
How CSS Improves Scrolling Experience “ in “ Defensive CSS Insights “, “
Beautiful Scrolbar UI: Custom Scrolbar UI “ and “ CSS Scrolling Capture “!

Review of past issues

First of all, I want to declare that the content introduced earlier is the fastest
developing part of CSS features in my opinion in 2023! In addition, some of
the above content is excerpted from Chrome team’s just released “ CSS
Wrapped: 2023! “, but I abandoned the introduction of components, mainly
because this part is more related to HTML.

Actually, since 2020, I have had a habit of publishing a summary article

about new CSS features every year. If you are interested in past content, you
can read the following articles:

What are the new features of CSS in 2020?

 Styles applied to the next generation of web

CSS features you may not know about in 2021

CSS in 2022

CSS In 2023

If you are also interested in CSS, you can also follow my brochure.

“ Modern Web Layout “: focuses on modern CSS features that can be used
for web layout

“ Modern CSS “: mainly talks about the latest features in the CSS field, the
features introduced earlier, basically can be found in this booklet

“ Web Animation Journey “: mainly tells how to make Web animation,

from theory, design principles to practice, if you like animation, then the
 content of this booklet you will love

“ Defensive CSS Intensive Course “: Mainly tells us that when we write

CSS, we should write it with the mentality of “what if”. This booklet can
also be called a collection of CSS skills, which can really help you solve
many CSS problems encountered in production

Written at the end

CSS has been a great success in the past few years (especially in 2023). If you
are interested in CSS, or want to improve your skills in this area and get the
latest features of CSS in a timely manner, please follow me! I will take you to
experience different CSS!

CSS Css Animation Web Development Web

Written by w3cplus Follow

361 Followers

Author of "Modern CSS," "Modern Web Layout," "In-Depth CSS Defense," and "A Journey
into Web Animation!"

More from w3cplus

 w3cplus w3cplus

Do you really understand CSS CSS 颜色设置透明度的新姿势

display? 在 CSS 中，我们有很多种方式为元素设置透明
After learning the CSS box model and visual 度，常见的是给元素设置透明度和给颜色设…
formatting model , we have a clear concept.…

Feb 3 24 Jun 4, 2023 3

w3cplus w3cplus

How much do you know about In-depth exploration of SVG

infinity in CSS? techniques and advanced…
As we all know, many programming Against the backdrop of the booming
languages provide two special values to… development of front-end technology today,…

Mar 11 31 Jun 3 1

See all from w3cplus

Recommended from Medium

Shirhabeel Awan Meghanath Aviligonda

Building Responsive Websites with 10 Common mistakes in CSS

HTML, CSS and JavaScript, Cascading Style Sheet(CSS) is one the most
Nowadays, when using various devices for important in web development, web pages…
accessing a website, responsiveness in web…

Oct 29 509 8 Sep 8 104

Lists

Coding & Development General Coding Knowledge

11 stories · 883 saves 20 stories · 1697 saves

Stories to Help You Grow as a Tech & Tools

Software Developer 21 stories · 334 saves
19 stories · 1455 saves
 Bhuwan Chettri in JavaScript in Plain English Farihatul Maria

🔥 Top 5 CSS Tricks for Perfect CSS-Only Infinite Scrolling

Responsive Layouts 🌐 Backgrounds: Building Seamless…
Creating a responsive website that looks Infinite scrolling backgrounds can add a
amazing on every screen size is both an art… delightful touch of dynamism to websites,…

4d ago 3 Oct 15 6

React Learner Defita F. C. P

The Best Free CSS Alternative CSS Typography Best Practices

Libraries for Frontend Developers
In the ever-evolving landscape of web
development, CSS frameworks are essential…

Oct 27 52 Jul 30 8

See more recommendations