Home > Article > Web Front-end > The latest CSS properties and APIs for web design in 2020
The latest CSS properties and APIs for web design in 2020
- WBOYforward
- 2023-09-08 14:53:011088browse
To help developers customize their sites using a mix of JavaScript and CSS, we've developed new CSS properties that now support popular browsers. Some of them are listed below -
focus-within
It is designed to solve focus accessibility within an element
scroll-snap
This can Implementing native scrolling and deceleration
@media(prefers-*)
Helps tailor the UI and UX of the page based on the user’s device preferences, allowing for a higher level of personalization.
* Can represent brightness, force color, color scheme, contrast, reduce motion, and reduce transparency
Position: Stickiness
to keep the UI within the viewport.
Logical properties with standard layout
Allows us to have dynamic directional spacing inside and around elements.
gap property
This property is now available for Flexbox. Gap sets the container to have spacing, rather than giving each child element its own spacing.
backfrop-filter
Used to conveniently set the style behind the element.
CSS Houdini APIA low-level API that enables developers to tell the browser how they want custom CSS to be read and understood. Developers now have easier-to-use access to the CSS object model. Layout API, Paint API, Parser API, Properties & Values API, AnimationWorklet, Typed OM and Font Metrics API fall under this scope.
Aspect ratio
Maintain media size
size
Set height and width in one attribute
min(), max () and clamp()
Set constraints on any CSS property
Display: external internal
Double value syntax can better fit elements
list -style-type
Add custom styles to list
CSS modules
We can now use JavaScript to request specific modules from local or remote files
CSS Area
Filled area with content
CSS Subgrid
Helps us create microlayouts using microlayout in CSS grid.
Example
The following example shows some of these properties -
Live Demonstration
<!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 results-
Example
Live Demonstration
<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 results-
The above is the detailed content of The latest CSS properties and APIs for web design in 2020. For more information, please follow other related articles on the PHP Chinese website!