CSS Accent Property | CSS New Property Frontend Everything
Hey friends, and welcome to the Frontend Everything blog. Today, I'm going to teach you about the brand new CSS Accent Property. This is a brand new CSS property that came out recently which is super useful for Frontend Developers. Let's get into the article!
Let's first see about the accent property itself. You might not be familiar with this property and that's because it's technically still a work in progress. Accent color property comes under the CSS Basic User Interface Module Level 4 which is still in draft.
This means it's still in development and changes/upgrades can happen anytime. However, for now, we have some cool functions to use in the accent property.
Before using the accent property, let's first see where we can use this accent property. Generally, we can use this property on certain types of HTML Form Inputs. These include radio inputs, checkbox inputs, range sliders, and also HTML progress bars.
If you're not familiar with these inputs, I would recommend you to quickly search about it and then come back here. Alright, now that you know where we can use this property, let's start seeing how to actually use it.
For this example, please paste the following codes into your HTML file.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
</style>
<body>
<input type="checkbox" name="" value="">
<input type="radio" name="" value="">
<progress value="50" max="100">50%</progress>
<input type="range" name="" value="">
</body>
</html>
Now in this code block, I have added several HTML inputs that are compatible with the CSS accent property. Now, as you've might have realized in the code block above, there's a <style> tag to add our CSS code.
Now let's first try styling the HTML radio input. To do this, we use the radio input as our CSS selector and then declare the accent property inside it.
Another alternative would be to give a class to the input field and then use the class name as the selector in CSS.
Next, we give value to the accent property. In this case, I'm going to give this radio input a nice red color. You can choose any color you want according to your needs.
input[type="radio"]{
accent-color:tomato;
}
Now to test this out, try clicking on the radio button output. Without using accent property, the default color would be blue. However since we have styled it with the accent property, it would change to a red color as we styled earlier.
Now refer to the code block below, where we follow the same steps for the checkbox, progress, and range slider inputs. For a change, we would be giving them a gold color instead.
input{
accent-color: gold;
}
progress{ accent-color: gold; }Now the final output would be:
The accent property is a very easy-to-use and useful CSS property. However, since this is a new property, it has a small disadvantage. That is the browser support.
As of the time of writing, the accent color property is not compatible with Internet Explorer, Opera Android, Samsung Internet Browser, and more. Here's the summary of the browser provided by Mozilla's Developer Site.
Now some of you might be wondering that if this is a new property, then how did developers style HTML inputs before this property was published? Well, the straight answer is that we had to style it manually using the checked selector.
If you would like to see an article on how to style HTML inputs manually, do let me know in the comments section below.
And that's all for this article. Thanks for reading and I hope to see you in more blogs. Till then, goodbye!
written by @codingporium
....
..
Thank You For Scrolling Till here 😊. If You gain any knowledge then do checkout me at @frontendeverything. I am Piyush 🎉 I provide Content related to programming, technology, web development Daily.
.
More blogs you should give a check!
coding porium-- Contact (My Website)
- Instagram
- YouTube
- Contact (My Website)
- YouTube
Thanks this was very useful
ReplyDeleteGlad it was useful!
Delete