Loves CSS 😍, Check 10 Most Used Modern CSS Features

Cascading Style Sheet aka stylesheet, CSS is most used stylesheet which front-end developer love the just, but when it handover to backend developer they find it most notorious thing in whole world. 😂

Meme for backend developer doing CSS

Mostly developer face CSS interview problem, make your CSS advance with these .

So let understand CSS in W3C language :

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.

These pages contain information on how to learn and use CSS and on available software. They also contain news from the CSS working group.

The modern web would not be possible without CSS. The markup language is responsible for the fact that websites look good, have a pleasant layout, and that every element stays where it belongs. Yet, did you know that new CSS features come out all the time?

Over the years, CSS has gone way beyond background colors, borders, text styling, margins, and the box model. Modern CSS is capable of a whole range of functionality that normal CSS cannot do.

As we know modern web frameworks are more demanding in the market with this developer must also get updated with CSS also and without this no framework is useful.

Ready, Steady let roll and explore.

Here are some interesting thing that CSS are capable of :

  1. Custom Properties/Variable

Custom properties basically allow you to define stand differently for CSS properties in a central place to use for your design. The best way to understand why that is useful is to go over an example.

Usually, when building a theme, you would choose a color scheme and then declare those colors every time it’s necessary.

a { 
color: #cd2653;
}
.social-icons a {
background: #cd2653;
}
.wp-block-button.is-style-outline {
color: #cd2653;
}

The problem with this approach is, if you want to make changes to one of the colors, you have to change every single instance of it. While code editors can easily do that via search and replace, but this is risky and need a proper testing before deployment, it’s still annoying. Especially if you just want to do a quick test and have to reverse everything again.

Check the better solution

Custom properties do away with this. With their help, you can assign the colors in question to a variable once and then simply input that variable as the CSS property every time you use it like so:

:root {
--global--color-primary: #28303d;
}

a {
color: var(--global--color-primary);
}

.social-icons a {
background: var(--global--color-primary);
}

That way, when you want to make change, you only have to do it in one place. Cool, right? In the past, you needed to employ a preprocessor such as SASS to use variables, now it’s a native functionality of CSS.

As you can see above, custom properties are also very simple to use. Define your variables at the beginning of the document under the :root selector (notice the double hyphen — in front of the variables, this is what defines them as custom properties, also they are case-sensitive!). After that, you can use them throughout the document via the var() function. If you want to change a variable, simply change the declaration under :root, and you are good to go.

Check the browser support

browser support

2. @supports

Second one, we have a CSS rule similar to media queries. However, instead of making CSS rules conditional on screen size or phone type, @support allows you to do, this to check that depending on what CSS properties and values the user browser supports.

So first question arise what is this for?

As you will see throughout this post, not all CSS features are supported in all browsers and devices. While you can often deal with this using fallback declarations, in some cases, if you don’t specifically include a support for older technology, it can seriously break your site. In addition.

You can use @supports to add extra features or styling for more modern browsers that can deal with them.

 (display: grid) { 
.site-content {
display: grid;
}
}

As you can see, it’s simply the rule followed by the property or property-value pair you want to check for in brackets. After that comes the usual CSS declaration for what rules to apply if the condition is met.

The above example states that if the browser supports CSS grid property, it should apply display: grid; to the element with the class .site-content.

It’s also important to note that @supports understands the operators not, and, and or (that can also be combined) to create more specific rules, such as a fallback for browsers that don’t support that particular feature. Ex:

 not (display: grid) { 
/* Isolated code for non-support of grid */
}

3. content-visibility

New CSS properties for improving page load performance. content-visibility enables the user agent to skip an element’s rendering work, including layout and painting, until it is needed. Because rendering is skipped, if a large portion of your content is off-screen, leveraging the content-visibility property makes the initial user load much faster. It also allows for faster interactions with the on-screen content. This is very interesting one new CSS have

content-visibility
/* Keyword values */ 
content-visibility: visible;
content-visibility: hidden;
content-visibility: auto;
/* Global values */
content-visibility: initial;
content-visibility: unset;

content-visibility takes three values. By default, it is set to visible, in which case the element loads as usual. Alternatively, you can set it to hidden, in which case the element is not rendered, no matter whether it’s visible or not. When set to auto, on the other hand, elements outside the visible area will be skipped and then rendered once they appear on screen. Pretty cool stuff, right?

4. Scroll Snap

Scroll snapping gives you the option to lock the user’s viewport to a certain parts or element of your site. It is very useful to create cool transitions and help users focus on the most important page elements while scrolling down the page. You can find a simple demo of it here.

Scroll-snap

This effect is visible in mobile apps a lot, yet, with scroll snapping, you can bring it to websites as well. Usage is also relatively simple on the most basic level. You simply apply the type of scroll snapping to a container and define where its children should snap to.

.container {
scroll-snap-type: y mandatory;
}

.container div {
scroll-snap-align: start;
}

5. :is

The :is() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list. This is useful for writing large selectors in a more compact form.

Ok, let explore with example, for example we wrote hover on all a tag.

.main a:hover,
.sidebar a:hover,
.site-footer a:hover {
/* markup goes here */
}

To this, we only wrote hover and bind in is pseudo.

:is(.main, .sidebar, .site-footer) a:hover {
/* markup goes here */
}

6. :where

The :where() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list.

The make you can use where to achieve the same feature.

/* The above is equivalent to the following */
header p:hover,
main p:hover,
footer p:hover {
color: red;
cursor: pointer;
}

To this, we only wrote hover and bind in where pseudo.

:where(header, main, footer) p:hover {
color: red;
cursor: pointer;
}

7. :not()

The :not() property in CSS is a negation pseudo class and accepts a simple selector or a selector list as an argument. It matches an element that is not represented by the argument. The passed argument may not contain additional selectors or any pseudo-element selectors.

.entry :not(.intro) { 
font-size: 14px;
}

In above example if you see we have .entry class is getting pseudocode and in nested we have .intro class, so we are making all element under entry as font size 14 except .intro class.

8. :placeholder-shown

The :placeholder-shown CSS pseudo-class represents any <input> or <textarea> element that is currently displaying placeholder text.

:placeholder-shown { 
border: 2px solid silver;
}

Results,

placeholder-shown

9. drop-shadow()

As we discuss more about the CSS functions and the image the first thing comes in mind is drop-shadow one.

The drop-shadow() CSS function applies a drop shadow effect to the input image. Let check an example.

drop-shadow

This function is somewhat similar to the box-shadow property. The box-shadow property creates a rectangular shadow behind an element’s entire box, while the drop-shadow() filter function creates a shadow that conforms to the shape.

10. calc()

The calc() CSS function lets you perform calculations when specifying CSS property values. The calc() function takes a single expression as its parameter, with the expression's result used as the value.

width: calc(100% - 80px);

This is my list of modern CSS feature and modern way to use CSS. We also know that most of the CSS terms are not compatible with mostly browser,but this can be a future of CSS.

Keep coding, thanks for reading this blog.

Read code • Learn Code • Write code • Relax • Write code,

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store