With the use of CSS, we can control various styles, such as the text color, the font style, the spacing among paragraphs, column size and layout, background color and images, design of the layout, display variations for distinct screens and device sizes, and many other effects as well.
1. Container Queries
Responsive web design is non-negotiable in today’s context. It’s not uncommon to find consumers who surf the web using multiple devices at once. As such, your site must be prepared to cater to different gadgets with varying screen dimensions.
To do this, you need to adjust your designs and move around visual elements depending on the size of the viewport. The problem is that some components don’t automatically adjust to the changes made to their parent containers.
For instance, a photo would keep its original size even though its container shrank to fit on the screen.
Container queries define the full range of styles components must follow based on the specifications of their containers. You can still use a responsive grid for your general page layout while container queries fine-tune the individual sections of the page.
As you can imagine, this feature presents an elegant solution to common problems with CSS’s Grid.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.container{
display: flex;
flex-wrap: wrap;
gap:1em;
}
.child{
flex-basis: calc( calc(500px - 100%) * 999);;
flex-grow: 1;
background: rgb(231, 227, 227);
padding:1em;
font-size: 18px;
}
</style>
</head>
<body>
<div class="container">
<div class="child child1">
“Many of life’s failures are people who did not realize how close they were to success when they gave up.”
</div>
<div class="child child2">
“Many of life’s failures are people who did not realize how close they were to success when they gave up.”
</div>
<div class="child child3">
“Many of life’s failures are people who did not realize how close they were to success when they gave up.”
</div>
</div>
</body>
</html>Output:
2. Accent Color
Styling forms is one of the most tedious tasks when building a website. Forms, along with many other controls, follow the default styles of web browsers. If you want to customize their appearance, you’d have to go out of your way to write code from scratch.
A single color change would require a significant amount of work that could slow you down. Accent color addresses this problem by allowing you to adjust the colors used on controls with a single line of CSS.
As of writing, accent color is supported only by checkboxes, radio buttons, range controls, and progress bars. Modifying other form controls require the traditional approach of styling. But don’t fret, we’re sure this feature will earn better browser support after a few more months.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
input[type=checkbox] {
accent-color: red;
}
input[type=radio] {
accent-color: green;
}
input[type=range] {
accent-color: rgb(0, 0, 255);
}
progress {
accent-color: hsl(39, 100%, 50%);
}
</style>
</head>
<body>
<h1>The accent-color Property</h1>
<h3>Accent color for checkboxes:</h3>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike" checked>
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car" checked>
<label for="vehicle2"> I have a car</label><br><br>
<h3>Accent color for radiobuttons:</h3>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS" checked>
<label for="css">CSS</label><br>
<h3>Accent color for a range field:</h3>
<label for="vol">Volume:</label>
<input type="range" id="vol" name="vol" min="0" max="50">
<h3>Accent color for a progress element:</h3>
<label for="file">Downloading progress:</label>
<progress id="file" value="72" max="100"> 72% </progress>
</body>
</html>Output:
3. CSS Subgrid
A few weeks into exploring CSS, you’ll discover that a recurring problem is aligning nested subgrids with the parent grid. That’s because nested grids act independently of the main grid and each other.
With subgrid, there’s no need to manage separate grids to adjust their dimensions. Instead, you can indicate that certain rows and columns belong to a larger grid and have them respond to new ratios and positions accordingly.
Subgrid is already supported by Firefox but is not yet available on Google Chrome.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.grid {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-template-rows: repeat(4, minmax(100px, auto));
}
.item {
display: grid;
grid-column: 2 / 7;
grid-row: 2 / 4;
grid-template-columns: subgrid;
grid-template-rows: repeat(3, 80px);
}
.subitem {
grid-column: 3 / 6;
grid-row: 1 / 3;
}
</style>
</head>
<body>
<div class="grid">
<div class="item">
<div class="subitem"></div>
</div>
</div>
</body>
</html>Output:
4. Overscroll Behavior
Consider a web page with an element that has independent scrolling. When you reach the end, the default setting is for the scrolling to affect the next parent element. This is called scroll chaining.
Some websites take advantage of scroll chaining and work it into their UI design. But for many, scroll chaining is an unwanted effect that confuses users.
Overscroll behavior is an elegant solution that overrides scroll chaining. With it, users can focus on modal content without having to worry about moving the main page.
Overscroll behavior is especially useful for mobile navigation, chat components, horizontal lists, and sidebars.
The scroll-behavior property specifies whether to smoothly animate the scroll position, instead of a straight jump, when the user clicks on a link within a scrollable box.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
html {
scroll-behavior: smooth;
}
#section1 {
height: 300px;
background-color: pink;
}
#section2 {
height: 300px;
background-color: yellow;
}
</style>
</head>
<body>
<h1>CSS Overscroll Bahavior</h1>
<div class="main" id="section1">
<h2>Section 1</h2>
<p>Click on the link to see the "smooth" scrolling effect.</p>
<a href="#section2">Click Me to Smooth Scroll to Section 2 Below</a>
<p>Note: Remove the scroll-behavior property to remove smooth scrolling.</p>
</div>
<div class="main" id="section2">
<h2>Section 2</h2>
<a href="#section1">Click Me to Smooth Scroll to Section 1 Above</a>
</div>
</body>
</html>Output:
5. New Viewport Units
The viewport is the user's visible area of a web page. The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen. Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size. Then, when we started surfing the internet using tablets and mobile phones, fixed size web pages were too large to fit the viewport. To fix this, browsers on those devices scaled down the entire web page to fit the screen.
Setting The Viewport
HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag.
You should include the following <meta> viewport element in all your web pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">This gives the browser instructions on how to control the page's dimensions and scaling. The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
Example:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>To understand this Example, Please open the image in phone or Tablet</h2>
<img src="https://static.wixstatic.com/media/0f65e1_a9c72e51e9e94f059a7b886fca43d285~mv2.png">
<p>Technology is the application of scientific knowledge to the practical aims of human life or, as it is sometimes phrased, to the change and manipulation of the human environment.</p>
</body>
</html>Output:
6. CSS Parent Selector :has()
:has() is one of the features on this list that have yet to gain extensive browser support. It’s a parent selector that lets you choose specific elements based on custom criteria. The best way to understand it is to think of :has() as a parent selector pseudo-class.
It allows you to select <div>s containing <p> effortlessly or apply styles to certain elements depending on their content.
Up until this point, CSS did not support parent selectors to avoid performance issues. Now, :has() opens tons of possibilities as it reshapes CSS entirely.
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p:has(span)").css("border", "solid red");
});
</script>
</head>
<body>
<p><span>This is a span element inside a p element.</span></p>
<p>This is a p element with no span element.</p>
</body>
</html>Output:
7. Cascade Layers
The thing that makes CSS so iconic is also the cause of many of its problems. Cascading conflicts and selector specificity top that list, prompting developers to avoid using the cascade altogether.
CSS overrides style changes to one element if another element in the cascade has higher specificity. For big projects, it’s almost inevitable to run into this issue because of the large codebase.
Different methodologies have been developed to circumvent this problem. The downside is that all of them require extra code work that’s time-consuming and inefficient. This is where cascade layers come in.
Example:
<html>
<body>
<div style = "background-color: red;
width:300px;
height:100px;
position: relative;
top:10px;
left:80px;
z-index:2">
</div>
<div style = "background-color: yellow;
width:300px;
height:100px;
position: relative;
top:-60px;
left:35px;
z-index:1;">
</div>
<div style = "background-color: green;
width: 300px;
height: 100px;
position: relative;
top:-220px;
left:120px;
z-index:3;">
</div>
</body>
</html>Output:
Resource Code: w3school.com
The Tech Platform