## Introduction
With daily advancements in technology and the ever-growing demand for better and more innovative web experiences, the future of [CSS](https://www.css3.com/) looks more exciting than ever. In this article, we will be taking a look at some of the most promising CSS features. These include new CSS modules and improved CSS features that provide more innovative ways to improve the interactivity of websites. Some are already starting to land in browsers, others are likely to gain widespread browser support in 2023, while for one or two the process may be a little longer. The primary goal of this article is to provide a glimpse into the future of CSS and how it will shape the future of web design.

## Upcoming CSS Modules
The [CSS Working Group](https://www.w3.org/groups/wg/css) is always looking for ways to improve CSS, and as a result, several upcoming CSS modules are in development. These modules aim to improve the developer's experience, provide greater flexibility, and enhance the capabilities of CSS. Three of the most anticipated CSS modules are [CSS Text Module Level 3](https://www.w3.org/TR/css-text-3/), [CSS Houdini](https://developer.mozilla.org/en-US/docs/Web/Guide/Houdini), and [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties).

### CSS Text Module Level 3
CSS Text Module Level 3 is a specification that enhances the control and styling options for text within HTML documents. It introduces several new properties and features that allow web developers to manipulate and format text in a more precise and flexible manner. These new properties for styling text include both text alignment, and text decoration such as `text-transform`, `text-align`, `text-indent`, `letter-spacing`, `word-spacing`, and `text-shadow`. It also introduces the hyphenation property, which enables developers to control how words are hyphenated in a line of text. With these new properties, developers now have greater control over the appearance of text on a web page.

### How to build with CSS text module level 3
In this first example, we will focus on using `hyphens` and a few other properties to create a simple about OpenReplay subsection.
To get started, we will create an HTML file and input the code below.

<div>
  <a href="https://openreplay.com/" target="_blank">
    <img src="https://hackmd.io/_uploads/BkUMVCSU2.jpg">
  </a>
  Hi there, my name is Christiana, and I am a frontend developer and technical writer. Let me tell you a little about OpenReplay. OpenReplay is an open-source session replay suite, built for developers and self-hosted for full control over your data. It helps developers spend less time debugging and empowers them to create delightful web experiences.
</div>

Next is to write CSS code.

div {
  /*This allows div to hyphenate their contents instead of overflowing their containing block, which is particularly important in long-word*/
  hyphens: auto;
  /*This property specifies whether the UA may break at otherwise disallowed points within a line to prevent overflow*/
  overflow-wrap: normal;
  /*specifies additional spacing between “words”.*/
  letter-spacing: normal| <length>;
  /* white space characters are considered collapsible. N/B this can be either set to 'normal', 'nowrap' or 'preline'*/
  white-space: normal;
  /*describes how the last line of a block or a line right before a forced line break is aligned*/
  text-align-last: center;
}

Here is the final result
*Image showing the result of CSS text module level 3 example*

### Can I use CSS Text Module Level 3?
Yes, some of the features in CSS Text Module Level 3 are currently supported by modern web browsers.Both hyphenation control and the text-decoration property are currently supported by [Chrome](https://www.google.com/chrome/), [Firefox](https://www.mozilla.org/en-US/firefox/), [Safari](https://www.apple.com/safari/), and [Edge](https://www.microsoft.com/en-us/edge?form=MA13FJ&exp=e00). However, not all features are fully supported across all browsers. You should check the browser compatibility of each property and feature before using them in production.

### CSS Houdini
CSS Houdini is a set of APIs that allow developers to extend the capabilities of a web browser’s rendering engine. This groundbreaking set of APIs provides developers with unparalleled control over CSS, empowering them to develop custom styles and effects that were previously unattainable. By leveraging Houdini, developers can create fresh CSS properties, layout algorithms, and animations, enabling them to have more creative freedom and flexibility to build interactive and dynamic websites and applications. While Houdini is still in its early days of adoption, it represents an exciting new frontier in web development with immense potential for future growth and advancement. As the technology develops further, it could revolutionize the web design industry and offer new opportunities for creating exceptional user experiences.

### How to use CSS Houdini
To use the CSS Houdini, first we have to create a Javascript file and import the [`Confetti`](https://www.npmjs.com/package/js-confetti) Javascript module into our code. In this article, we will be considering four different examples of what we can create with Houdini.

Example 1: **How to use Houdini to create a painting.**
The first step is to download the script and install the library from NPM, then import the module and initialize as seen below.
`yarn add js-confetti
`

import "https://unpkg.com/extra.css/confetti.js";
import JSConfetti from 'js-confetti'

const jsConfetti = new JSConfetti()

jsConfetti.addConfetti()

This will create an HTML Canvas element and add it to the page, **so call it only once!**

Next we input the CSS code

body {
  background: paint(extra-confetti);
  height: 100vh;
  margin: 0;
}

This will give us the painting below.

*Result: Example 1 Painting*

Example 2: **How to create curve lines with Houdini**
Another dynamic function of Houdini is the creation of different types of curve lines. Again, we must first import the Javascript module.

import "https://unpkg.com/extra.css/confetti.js";

Then we write our css codes.

.custom-line-1 {
  /* This determines all the attributes of the curve line */
  --curved-lineHeight: 30;
  --curved-lineWidth: 5;
  --curved-lineColor: midnightblue;
  --curved-lineSpread: 20;
}

.custom-line-2 {
  --curved-lineHeight: 5; /* default: element height */
  --curved-lineWidth: 2; /* default: 3 */
  --curved-lineColor: deeppink; /* default: 'black' */
  --curved-lineSpread: 10; /* default: 50 */
  height: 10px;
}

.custom-line-3 {
  --curved-lineHeight: 5; /* default: element height */
  --curved-lineWidth: 5; /* default: 3 */
  --curved-lineColor: saddlebrown; /* default: 'black' */
  --curved-lineSpread: 2; /* default: 50 */
  height: 10px;
}

Results
*Image showing different curve lines as described in example 2*

Example 3: **How to create Parrallelowow with CSS Houdini**
Again, import the Javascript confetti module and then write the CSSS code

.demo {
  /* these are the attributes of the parallelowow*/
  --parallelowow-tile-width: 40;
  --parallelowow-base-color: pink;
  --parallelowow-color-step: 7;
  --parallelowow-probability: 0.6;
  --parallelowow-stroke-weight: 0.5;
  background: paint(parallelowow), var(--parallelowow-base-color);
}

*Image showing Parallelowow created in example 3*

Example 4: **Creating Connections with CSS Houdini**
Again import the module and write the CSS code

.demo {
  --connections-particleColor: (20, 44, 146);
  --connections-lineColor: (41, 123, 255);
  --connections-particleAmount: 140;
  --connections-defaultRadius: 2;
  --connections-variantRadius: 3;
  --connections-linkRadius: 60;
  background: paint(connections);
}

Result:
*Image showing connections created in example 4*

### Can I use CSS Houdini?
This module is only supported by three mainstream desktop browsers which are Chrome, Edge, and Opera. However several tests are still ongoing for other devices. Although it is still in its early stages, CSS Houdini has the potential to revolutionize the way style writers create their works. This is only the tip of the iceberg; many more APIs are still to be made public. The CSS Houdini project is among the most thrilling ones for developers to anticipate in future years.

## Emerging CSS Features
To keep up with the ever-evolving landscape of web design, it's important to stay on top of the latest emerging CSS features. These new additions to the CSS specification include advanced [CSS Selectors Level 4](https://www.w3.org/TR/selectors-4/), which provide more granular control over selecting and styling specific elements. Additionally, CSS Flexbox Level 2 introduces even more powerful layout techniques for building responsive and dynamic designs. CSS Scroll Snap provides a way to create engaging and intuitive scrolling experiences, while animation and transition effects continue to evolve with innovative new approaches. Furthermore, these features also address critical web design concerns, such as accessibility and performance optimization. And with these advancements, staying current with emerging CSS features is essential for crafting engaging, modern, and functional websites in the fast-paced world of web design. For this article, we will be exploring the CSS Selector Level 4 and CSS Scroll Snap properties.

### CSS Selectors Level 4
CSS Selectors Level 4 is the most recent incarnation of the CSS selector specification, which governs how CSS styles can be applied to individual HTML elements on a web page. The selectors themselves are an influential and indispensable tool for targeting specific elements and applying custom styles.

This latest version introduces a plethora of additional attribute selectors, such as `:matches`, `:not`, and `:has`, that provide enhanced flexibility in selecting elements based on complex criteria. Additionally, several new pseudo-class selectors, such as `:focus-within` and `:focus-visible`, allow for more precise targeting of elements based on their focus state.

One particularly noteworthy new selector is the `:nth-match()` selector, which enables more sophisticated targeting of elements based on their position within a set of siblings. This is a significant improvement over the more limited `:nth-child()` and `:nth-of-type()` selectors.

### How to Use
To have a grasp of CSS selectors level 4, we will be creating a simple static CSS Selectors Level 4: Overview page utilizing these three selectors `:not`, `:matches` and `Case-sensitivity` attribute selectors.
First create an index.html file and copy the code below, or create your own code.

<article class="not">
  <header>
    <h2 id="not">:not() Negation pseudo-class</h2>
  </header>
  <ul>
    <li class="item test">Hy there, I'm a list item!</li>
    <li class="item test">Me too!</li>
    <div class="item">I'm wrong here :(</div>
  </ul>	
</article>
<article class="matches">
  <header>
    <h2 id="matches">:matches() Matches-any pseudo-class</h2>
  </header>
  <ul>
    <li class="item">Hy there, I'm a list item!</li>
    <li class="item">Me too!</li>
    <div class="item">I'm wrong here :(</div>
  </ul>	
</article>

<article class="case-sensitive">
  <header>
    <h2 id="matches">Attribute selectors: Case-sensitivity</h2>
  </header>
  <input type="text" value="Test" class="true"/>
  <input type="text" value="test" class="true"/>	
</article>

Now create a css file with the code below

// Selectors Level 4
.not{
  .item:not(li){ // E:not(s1,s2) => E != s1 || s2
  color: @false-color;
  }
}

.matches{
  .item:matches(li),							
  li.item{
  color: @true-color;
  }
}

.case-sensitive{
  input[value="test" i], 		
  input[value="test"],
  input[value="Test"],
  input[value="tEst"],
  input[value="teSt"],
  input[value="tesT"],
  input[value="TEst"],
  input[value="TeSt"]{
    border: 2px solid @true-color;
  }
}

Now it's time to create our index.js file, this file will hold the function that selects the different selectors.

var forms = document.querySelectorAll('form');
[].forEach.call(forms, function(form){
  console.log(form);
  form.addEventListener('submit', function(e){
    e.preventDefault();
    console.log(this);
    this.classList.add('submitted');
  })
});

The results should be displayed with all the different selector active.


### Can I use CSS Selector Level 4?
The current working editor's draft was released on 11 January 2023, and not much information is available as to when it will be available for developers to use.

### CSS Scroll Snap
A web browser's CSS scroll snap behavior can be controlled using the helpful collection of features that CSS offers. Some of this functionality has been accessible for some time, while other parts are just now becoming accessible to more recent browser versions. The trend's strongest point is that just one-third of CSS users are aware of it. There are several ways to change how a container's scroll position is shown using the `scroll-snap-type` property. End consumers benefit from a better, more controllable user experience while developers gain greater precision.

A snap position can be produced by declaring a desired alignment on an element. The position is the scroll offset at which the nearest ancestor scroll container and element are aligned as specified for the given axis. The following alignments are possible on each axis: start, end, center.

Start alignment means that the scroll container snapport start edge should be flushed with the element snap area start edge. Similarly, end and center alignments mean that the scroll container snapport end edge or center should be flushed with the element snap area end edge or center.
*Example of various alignments on horizontal scrolling axis.*

### How to use the CSS scroll snap feature to create custom scrolling experiences

First, we need to write our HTML code

<div class="section">
  <div class="section__item">Item 1</div>
  <div class="section__item">Item 2</div>
 </div>

Then we write the CSS code and introduce the `scroll-snap-type`. This specifies if an element is a scroll snap container, how strictly it snaps, and which axes are considered.
To make the container scroll horizontally, we will input the CSS code below

/* Horizontal */
.section {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x;
}
.section__item {
  scroll-snap-align: start;
}

To make the container scroll vertically, we will input the CSS code below.

/* Vertical */
.section {
  height: 250px;
  overflow-y: auto;
  scroll-snap-type: y;
}
.section__item {
  scroll-snap-align: start;
}


### Can I use the CSS Scroll Snap feature?
Currently, the scroll snap feature is supported by about 95.89% including Chrome, Edge, Safari, Firefox, operamini, EI 

## Conclusion
As we speak, CSS is going through a period of rapid growth and development. A common thread among many of the new features is their ability to improve the quality and efficiency of our code, while also reducing our reliance on pre-processing tools like Sass. Additionally, these updates encourage web developers to embrace the inherent flexibility of the web and to be mindful of the various ways in which users may be accessing their sites. With countless devices and user preferences to consider, today's web designers must be adaptable and considerate, catering to users who may prefer different contrast levels, color schemes, or motion settings. Whether our users rely on screen readers, older devices, or the latest tech, the future of CSS promises to be inclusive, responsive, and endlessly customizable.

## Resources
* [CSS Text Module Level 3](https://www.w3.org/TR/css-text-3/).
* [Tizen Docs](https://docs.tizen.org/application/web/guides/w3c/ui/text-module/).
* [Mozilla Developer Network]( https://developer.mozilla.org/en-US/docs/Web/Houdini)
* [Caniuse.com](https://caniuse.com)
* [CSS Houdini](https://css-houdini.rocks/)
* [W3C Selectors Level 4](https://www.w3.org/TR/selectors-4/)
* [Selector Level 4 CR Test Suite](http://test.csswg.org/suites/selectors-4_dev/nightly-unstable/)
* [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-timeline)
* [Scroll-driven Animations W3](https://drafts.csswg.org/scroll-animations-1/)