Eyad Syria-lover

!important Rule Should Be Removed From W3.CSS...

4 posts in this topic

I've Been Analyzing W3.CSS When I Found A Strange Thing.

I Found That !important Rule Is Used More 90 Times In This Framework,The Problem Here Is That !important Is Paralyzing The Ability To Manipulate Some Of Those Elements Who Carries Some Of The w3-* Classes Using Javascript,For Example:

.w3-deep-purple,.w3-hover-deep-purple:hover
{
color:#fff !important;
background-color:#673ab7 !important;
}

As You Can See,I Can't Manipulate Any Element Which Carries The .w3-deep-purple Class Because The !important Rule Has Disabled Style Manipulation Using JavaScript,This Means That The Following Code Is Useless:

function changeFontColor()
{
document.getElementsByClassName("w3-deep-purple")[0].style.color="orange";
}

Although This Code Is 100% Valid,But This Just Won't Work Because Of !important.

 

I Suggest Removing This Rule From The Future Versions Of W3.CSS In Order To Give The Ability To The Developer To Add More Interactivity To His Projects.

Share this post


Link to post
Share on other sites

I don't think the W3Schools staff visits the forum. But this is the problem with calling something "deep-purple" as a class name. It means that when you want to change the color you have to change the HTML.

 

To work around this, you can change the class name of the element instead:

document.getElementsByClassName("w3-deep-purple")[0].className = "w3-orange";
1 person likes this

Share this post


Link to post
Share on other sites

You could use cssText

 

document.getElementsByClassName("w3-deep-purple")[0].style.cssText+="color:orange !important;";

1 person likes this

Share this post


Link to post
Share on other sites

I don't think the W3Schools staff visits the forum. But this is the problem with calling something "deep-purple" as a class name. It means that when you want to change the color you have to change the HTML.

 

To work around this, you can change the class name of the element instead:

document.getElementsByClassName("w3-deep-purple")[0].className = "w3-orange";

That Seems Fair To Me,But The Problem Still About How To Manipulate The Color Using JavaScript If There Is No Class Name For That Color In W3.CSS,For Example There's No Class Name ".w3-deep-pink" (hex=#FF1493) For That Color...

 

In Your Opinion,Should I Contact Them To Fix This?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now