DEV Community

Devyn Clark
Devyn Clark

Posted on

CSS Updates

As one of the most essential and popular Front-end languages, CSS has received a litany of new updates to assist developers in the new year ahead and beyond. As is expected of updates in the world of Web Development, the storied language has again found a way to pick up speed.

Starting things off is the new @property syntax which can be used to create custom properties in your CSS selectors.

Example:

@property --my-textColor {
syntax: ' ';
inherits:true;
initial-value:black;
}
.element {
color: var(--my-color); /* Defaults to black */
}

Syntax: Specifies our allowed data type that will be used in type-checking and validations, to prevent any unexpected behavior.

Inherits: This syntax controls if the property can inherit its value from parent elements.

Initial-Value: Sets the default value going forward.

I happen to quite like this syntax since it not only decreases the amount of time spent on global-scale CSS, but also allows for a great amount of variety in potential website themes as well as the ability to toggle between said themes.

Moving from @property, we also have @scope. As implied by the name, this syntax applies a range to the rules created by your selectors.


This paragraph is inside the scope.


This paragraph is outside the scope.

@scope (#my-component) {
p {
color: black;
}
}

With @scope, style conflicts can be nothing more than a distant memory, thanks to it preventing styles from leaking into parts of the page where they don’t belong. This can be a particular boon when using third-party libraries and or Component-based architecture since it can quarantine any Widgets or Components that overlap with the rules of other elements in your website.

The mod() function allows Modulo operations to be done in the comfort of your stylesheet. The function takes the first argument as the dividen and the second element as the divisor, before returning the remainder as the value.

.container {
width: mod(500px, 120px); /* Returns 20px */
}

As seen above this function can see great use in calculating the size of certain elements as well as calculating the positions as well as creating patterns for the elements that you animate. Combining mod() with media queries can also be used to simplify responsive design.

πŸ‘‹ While you are here

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

πŸ‘‹ Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay