![Swetha Gopalakrishnan](https://web.dev/images/authors/swethagopalakrishnan.jpg) Swetha Gopalakrishnan [X](https://twitter.com/swetha_go) [LinkedIn](https://www.linkedin.com/in/swetha-gopalakrishnan-5ba92936) ![Saurabh Rajpal](https://web.dev/images/authors/saurabhrajpal.jpg) Saurabh Rajpal [X](https://twitter.com/imsaurabhrajpal) [LinkedIn](https://www.linkedin.com/in/imsaurabhrajpal)

<br />

CSS and UI capabilities refer to new CSS features and syntax which enable you to
reduce or replace custom JavaScript solutions or some CSS hacks and help you
write better and simpler code. Adopting modern CSS features enable developers
to:

- Reduce development time.
- Improve code efficiency, readability, and maintainability.
- Improve performance.
- Create beautiful user interfaces that are seamless, efficient, and accessible.

In this series of case studies, learn how a variety of ecommerce sites adopted
Scroll-driven animations, View Transitions, the Popover API, Container Queries,
and the `has()` selector, and the benefits they have seen from doing so.

> [!NOTE]
> **Note:** For a summary of the latest features, browser statuses and implementation details, check out [CSS wrapped 2023](https://developer.chrome.com/blog/css-wrapped-2023). We also cover many features in the [CSS and UI technical documentation](https://developer.chrome.com/docs/css-ui).

## Why should ecommerce sites use these features?

In [Six Steps for Justifying Better
UX](https://www.forrester.com/report/The+Six+Steps+For+Justifying+Better+UX/-/E-RES117708),
Forrester Research shows that a well designed UI can increase conversions by up
to 200%. Users seem to correlate design quality with trust with [94% of
consumers](https://www.researchgate.net/publication/221516871_Trust_and_mistrust_of_online_health_sites)
citing design being the main reason for leaving or distrusting a website. This
is why ecommerce sites will especially benefit from these CSS and UI
capabilities. Conversion funnels need to be as frictionless as possible, so that
users can easily and confidently complete their task. Responsive interactions
and seamless navigation can provide good visual feedback for the user, and add
delight and expression to the overall journey.

These features have been designed to be easy to use, and can be implemented
mostly in CSS with minimal JavaScript. They help to create awesome ecommerce
experiences without having to resort to third-party libraries or custom
JavaScript to create the same functionality. Using less JavaScript can also give
you a performance boost: making these experiences more smooth and responsive.

Web UI capabilities can be used across all parts of the user journey. Here are a
few real world examples:

| **Feature/Company** | *redBus* | *PolicyBazaar* | *Tokopedia* |
|---|---|---|---|
| *Scroll-driven animations* | Cart | Product Listing Page (PLP) | Product Details Page (PDP) |
| *View Transitions* | Login | PDP | PDP |
| *Popover* | - | - | PDP |
| *Container Queries* | Home | - | PDP |
| *:has()* | - | PLP | PDP |

This can also be displayed as a conversion funnel:

![Conversion funnel combining CSS features.](https://developer.chrome.com/static/blog/css-ui-ecommerce/image/funnel.png)

The following case studies share how companies implemented these features and
the benefits they discovered.

- [Scroll-Driven Animations](https://developer.chrome.com/blog/css-ui-ecommerce-sda)
- [View Transitions](https://developer.chrome.com/blog/css-ui-ecommerce-vt)
- [Popover API](https://developer.chrome.com/blog/css-ui-ecommerce-popover)
- [Container Queries](https://developer.chrome.com/blog/css-ui-ecommerce-cq)
- [:has() selector](https://developer.chrome.com/blog/css-ui-ecommerce-has)

*Special call out to Penelope McLachlan, Hannah Van Opstal, Una Kravets, Bramus
Van Damme, and Rachel Andrew for your feedback and reviewing of this series of
articles.*