Latest CSS Properties and APIs for Web Design in 2020

CSSWeb DevelopmentFront End Technology

To help developers customize their websites with a mix of JavaScript and CSS, new CSS properties have been developed and now support popular browsers. Some of these are listed below −

focus-within

It aims to solve focus-accessibility within elements

scroll-snap

This enables native scroll and deceleration

@media(prefers-*)

Helps set both UI and UX of page according to device preferences of the user, thereby, allowing higher level of personalization.

* can denote light-level, forced-colors, color-scheme, contrast, reduced-motion and reduced-transparency

position: sticky

To keep UI within the viewport.

logical properties for having a standard layout

Allows us to have dynamic directional spacing within and around the elements.

gap property

This property is now available for flexbox. gap sets the container to own the spacing instead of having each child element with its own spacing.

backfrop-filter

For conveniently setting the styles behind an element.

CSS Houdini API

A low-level API that gives developers the ability to tell the browser how they want to read and understand custom CSS. The CSS Object Model is now accessible to developers in more consumable way. Layout API, Paint API, Parser API, Properties & Values API, AnimationWorklet, Typed OM and Font Metrics API come under this.

aspect-ratio

Maintain dimensions of media

size

Set height and width in one attribute

min(), max() and clamp()

Set constraints on any CSS property

display: outer inner

Two valued syntax for better fitting elements

list-style-type

Add custom styles to lists

CSS modules

We can now use JavaScript to ask for a specific module from local or remote file

CSS regions

Fill an area with content

CSS sub-grid

Helps us create micro layouts with micro layouts in CSS Grid.

Example

The following examples show some of these properties −

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
* {
   margin: 2%;
   text-align: center;
}
:is(header, main, footer) span:after {
   content: " Awesome!";
   box-shadow: inset 0 0 8px lightgreen;
   font-size: 1.2em;
   font-family: Calibri;
}
:-webkit-any(header, div, section) span:after {
   content: " Awesome!";
   box-shadow: inset 0 0 8px lightgreen;
   font-size: 1.2em;
   font-family: Calibri;
}
:-moz-any(header, div, section) span:after {
   content: " Awesome!";
   box-shadow: inset 0 0 8px lightgreen;
   font-size: 1.2em;
   font-family: Calibri;
}
:matches(header, div, section) span:after {
   content: " Awesome!";
   box-shadow: inset 0 0 8px lightgreen;
   font-size: 1.2em;
   font-family: Calibri;
}
</style>
</head>
<body>
<header>
<span>:is() operator is</span>
</header>
<div>
<span>DEMO</span>
<span>Alt + F4</span>
<span>Enter</span>
</div>
<section>
<span>Howzit?</span>
</section>
</body>
</html>

Output

This will produce the following result −

Example

 Live Demo

<html>
<head>
<style>
#parent {
   margin: 8%;
   background-image: url("https://images.unsplash.com/photo-1611081352477- 9f1477ec09ae?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb1.2.1&q=80&w=400");
   padding: 2%;
   width: 200px;
   height: 200px;
   box-shadow: 0 0 20px rgba(100,0,40,0.8);
}
h2 {
   margin-top: 20vh;
   backdrop-filter: invert(1);
}
</style>
</head>
<body>
<div id="parent">
<div>
<h2>Watch this cool effect</h2>
</div>
</div>
</body>

Output

This will produce the following result −

raja
Published on 12-Mar-2021 10:39:27
Advertisements