Introduction
CSS (Cascading Style Sheets) is a powerful language that enhances the presentation and styling of web pages. Over the years, CSS has evolved, introducing new features that make it even more versatile and capable. In this blog post, we will explore some of the top CSS features you should know to create modern and engaging web designs. We'll provide examples for each feature to help you understand their practical application. Let's dive into it.
1. clamp() function
The clamp() function allows you to define a value within a specific range. It's especially useful for creating responsive designs. For instance, let's consider setting a flexible font size based on viewport width:
p {
font-size: clamp(16px, 4vw, 24px);
}
In this example, the font size will vary between 16 pixels and 24 pixels based on the viewport width. It will be at least 16 pixels but not exceed 24 pixels.
2. smooth function
The smooth property adds smooth scrolling behavior to an element. This can be beneficial when navigating within a long webpage or animating scrolling effects. Here's how you can use it:
html {
scroll-behavior: smooth;
}
By applying scroll-behavior: smooth to the HTML element, any scrolling actions triggered by anchors or JavaScript will be animated smoothly.
3. Scroll Snap
Scroll Snap provides a way to control the scrolling position precisely, allowing elements to "snap" into place during scrolling. This feature is ideal for creating scrollable galleries or carousels. Consider the following example:
.container {
scroll-snap-type: y mandatory;
overflow-y: scroll;
}
.item {
scroll-snap-align: start;
}
In this case, the .container element enables vertical scrolling and mandates snap behavior. Each .item inside the container will snap to the top when scrolling, creating a smooth, step-like effect.
4. inset
The inset property simplifies the positioning of elements by providing a shorthand for setting the top, right, bottom, and left properties simultaneously. Here's an example:
div {
inset: 10px 20px 30px 40px;
}
In this case, the div element will have an inset of 10px from the top, 20px from the right, 30px from the bottom, and 40px from the left.
5. order
The order property allows you to change the order in which elements are displayed without modifying the HTML structure. This feature is particularly valuable in responsive designs. Consider this example:
div:nth-child(2) {
order: -1;
}
By setting the order of the second div to -1, it will be positioned before the first div in the rendering, effectively altering the display order.
6. display: inline, block
The display property defines how an element is rendered and affects its layout behavior. Two commonly used values are inline and block.
span {
display: inline;
}
div {
display: block;
}
In this example, the span of the element will be rendered inline, allowing other elements to flow alongside it, while the div element will be displayed as a block, occupying its own line and taking up the full width available.
7. min, max
The min and max properties enable the specification of the minimum and maximum values for a CSS property. Let's consider setting a minimum and maximum width for an element:
div {
min-width: 200px;
max-width: 800px;
}
In this case, the div element will have a minimum width of 200px and a maximum width of 800px, ensuring it remains within that range.
8. line-clamp
The line-clamp property truncates text content and limits it to a specific number of lines. It is often used to create text snippets or to prevent overflow in a constrained space. Here's an example:
p {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
In this example, the p element will display only three lines of text and any additional content will be hidden with an ellipsis.
9. :has (pseudo-class)
The : has pseudo-class allows you to select an element based on whether it contains a specific selector. It is useful when you want to apply styles to elements that have specific child elements. Consider this example:
div:has(p) {
background-color: lightblue;
}
In this case, any div element containing a p element as a child will have a light blue background.
10. :is (pseudo-class)
The :is pseudo-class simplifies the selection of multiple selectors at once. It allows you to group selectors and apply styles to all elements that match any of those selectors. Here's an example:
:is(h1, h2, h3) {
color: blue;
}
In this example, all h1, h2, and h3 elements will have a blue text color.
Please look at the following example to get more information and more understanding with some practice.
Example
<!DOCTYPE html>
<html>
<head>
<style>
/* 1. Using clamp() */
p {
font-size: clamp(16px, 4vw, 24px);
}
/* 2. Adding smooth scrolling behavior */
html {
scroll-behavior: smooth;
}
/* 3. Implementing Scroll Snap */
.container {
scroll-snap-type: y mandatory;
overflow-y: scroll;
}
.item {
scroll-snap-align: start;
}
/* 4. Using inset for positioning */
div {
inset: 10px 20px 30px 40px;
}
/* 5. Changing order */
div:nth-child(2) {
order: -1;
}
/* 6. Setting display: inline and display: block */
span {
display: inline;
}
div {
display: block;
}
/* 7. Applying min and max width */
div {
min-width: 200px;
max-width: 800px;
}
/* 8. Truncating text with line-clamp */
p {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* 9. Applying styles based on :has pseudo-class */
div:has(p) {
background-color: lightblue;
}
/* 10. Applying styles based on :is pseudo-class */
:is(h1, h2, h3) {
color: blue;
}
</style>
</head>
<body>
<!-- 1. clamp() Example -->
<p>This is a paragraph with varying font size based on viewport width.</p>
<!-- 2. smooth Example -->
<a href="#section2">Scroll smoothly to Section 2</a>
<!-- 3. Scroll Snap Example -->
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
<!-- 4. inset Example -->
<div>This div has an inset of 10px from the top, 20px from the right, 30px from the bottom, and 40px from the left.</div>
<!-- 5. order Example -->
<div>First div (default order)</div>
<div>Second div (order set to -1)</div>
<!-- 6. display: inline and display: block Example -->
<span>This is an inline element.</span>
<div>This is a block element.</div>
<!-- 7. min and max width Example -->
<div>This div has a minimum width of 200px and a maximum width of 800px.</div>
<!-- 8. line-clamp Example -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque posuere rutrum nunc vel eleifend. Sed vitae ante eget arcu aliquam rhoncus et at nulla. Sed sagittis dignissim tellus sed ullamcorper.</p>
<!-- 9. :has pseudo-class Example -->
<div>
<p>This div has a background color of lightblue because it contains a paragraph element.</p>
</div>
<!-- 10. :is pseudo-class Example -->
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<script>
// JavaScript code can be added here if needed
</script>
</body>
</html>
In this example, you'll find each feature implemented with appropriate comments explaining its purpose and usage. Feel free to copy the code and experiment with it to explore the behavior of each feature further. I hope this information helps you to improve your design skills for CSS.
Thank you,& Regards,
Jay Pankhaniya