Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Latest CSS Properties and APIs for Web Design in 2020
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 −
<!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
<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 −
69 Views
