Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Latest CSS Properties and APIs for Web Design in 2020
CSS continues to evolve with new properties and APIs that enhance web design capabilities. Here are some of the latest CSS features that provide developers with powerful tools for creating modern, responsive, and accessible websites.
Key CSS Properties
focus-within Pseudo-class
The :focus-within pseudo-class selects elements that contain a focused element, improving focus accessibility for complex components.
<!DOCTYPE html>
<html>
<head>
<style>
.form-group {
padding: 20px;
border: 2px solid #ccc;
border-radius: 5px;
transition: border-color 0.3s;
}
.form-group:focus-within {
border-color: #007bff;
background-color: #f8f9fa;
}
input {
padding: 8px;
border: 1px solid #ddd;
border-radius: 3px;
}
</style>
</head>
<body>
<div class="form-group">
<label>Username: </label>
<input type="text" placeholder="Enter username">
</div>
</body>
</html>
A form container that highlights with blue border and light background when the input field is focused.
CSS Gap Property in Flexbox
The gap property is now supported in flexbox layouts, allowing containers to control spacing instead of individual child elements.
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
gap: 20px;
padding: 20px;
background-color: #f0f0f0;
}
.flex-item {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
</body>
</html>
Three green boxes arranged horizontally with 20px gaps between them, without needing margins on individual items.
CSS Math Functions
The min(), max(), and clamp() functions allow dynamic value calculations for responsive design.
<!DOCTYPE html>
<html>
<head>
<style>
.responsive-text {
font-size: clamp(1rem, 4vw, 3rem);
padding: 20px;
background-color: #e3f2fd;
text-align: center;
border-radius: 8px;
}
.responsive-box {
width: min(90%, 600px);
height: max(200px, 30vh);
background-color: #ffeb3b;
margin: 20px auto;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="responsive-box">
<div class="responsive-text">
Responsive Text & Container
</div>
</div>
</body>
</html>
A yellow container with responsive dimensions containing blue text that scales smoothly based on viewport size.
Backdrop Filter
The backdrop-filter property applies visual effects to the area behind an element, creating modern glass-like effects.
<!DOCTYPE html>
<html>
<head>
<style>
.background {
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.glass-card {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 30px;
color: white;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.3);
}
</style>
</head>
<body>
<div class="background">
<div class="glass-card">
<h3>Glass Effect</h3>
<p>Backdrop filter creates this blur effect</p>
</div>
</div>
</body>
</html>
A frosted glass card with blurred background effect overlaying a colorful gradient background.
Conclusion
These modern CSS properties provide developers with powerful tools for creating responsive, accessible, and visually appealing web interfaces. Features like gap, clamp(), and backdrop-filter enable cleaner code and better user experiences across different devices and preferences.
197 Views
