5

I'm building a simple CSS editor and I want to let the user to edit CSS properties of an element or to add a new one.

Before applying the new CSS property to the element, I want to check if the property is valid.

Do you know a simple way to check if a CSS property/value is valid with jQuery?

UPDATE:

Example:

$('#some-element').css('margin','10px'); //this is valid and it will be applied
$('#some-element').css('margin','asds'); //this is not valid and it will not be applied

How to check, before applying the property, that margin: asds; is not valid?

Improve this question
3
  • 3
    Depends on what you consider "valid". A gecko browser will not recognize certain CSS properties that are only available in webkit, for example. Commented Feb 28, 2013 at 12:11
  • you could use normal javascript and regex to do this. Commented Feb 28, 2013 at 12:14
  • @Fabrício Matté - I would consider a valid property, a property that will be accepted and applied to the element by the browser (either gecko or webkit). Commented Feb 28, 2013 at 12:19

6 Answers 6

Reset to default
12

The quickes solution I might think of, is to use CSS.supports function. Will work with vanilla js too. This is how it goes:

CSS.supports(propertyName, propertyValue)

CSS.supports('color','red') 
//True.
CSS.supports('color', '#007')
//True. 

CSS.supports('color', 'random')
//False. 
CSS.supports('colours', 'red')
//False.

I don't think there's any need to generate a helper function, because it's pretty straightforward.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

6

You can create a new element and apply your CSS to it. You read the initial value, apply your css to this element and immediately read the value again. If the new value does not equal the initial value, your css is valid (because it has been successfully applied to the element).

var div = $("<div>");
var _old = div.css(property);
div.css(property,value);
var _new = div.css(property);
var valid = _old!=_new;
// if (_old != _new), the rule has been successfully applied
console[valid?"log":"warn"]( `${property}:${value} is ${valid?"":"not"} valid!` );

Example fiddle

Improve this answer

5 Comments

This will work in some cases. But if I apply $('#some-element').css('color','black'); the browser will return the computed style. So $('#some-element').css('color'); will return rgb(0,0,0). In this case the values are not equal.
OK, meanwhile you've added the code. I'll give it a try this way to see how it works.
Great! This is the answer!
@Victor be aware, i did not test anything, some properties might not work properly until you attach this element to the dom. If thi is the case, attach it and remove it afterwards. Also some values like width might have initial values like 0px, which you need to check too. But I think you got the right direction now and can figure such things out by yourself now.
Yes, I have to make some tests. If needed, I'll make some changes. However, you solution is very good! Thank you.
4

From Christoph answer I got to this:

function validCSS(property,value){
    var div = $("<div>");
    var _old = div.css(property);
    div.css(property,value);
    var _new = div.css(property);
    return (_old!=_new);
}

used like this:

if (validCSS(property, value)) {
    $('#some-element').css(property, value);
} else {
    alert ('Invalid CSS');
}
Improve this answer

Comments

2

You can read the CSS property on any element and check whether the result is defined. Most (all?) CSS properties have a default value.

$("body").css("border");  // "0px none rgb(0, 0, 0)"
$("body").css("borderx"); // undefined
Improve this answer

3 Comments

You have a point. This is closer to what I'm looking for but this way I can validate only the property name, not the value. Maybe I can get the CSS value before applying the property and then check if something has changed.
Yes, I can't see another way to check the value.
$("body").css("border", '1px 1px'); => // none
1

Answer

You can use this function I created

function validCSS(property, value){
  var $el = $("<div></div>");
  $el.css(property, value);
  return ($el.css(property) == value);
}

https://gist.github.com/dustinpoissant/7828a80d2899c57d92472b59675fc3fa

Test

console.log(validCSS("width", "FooBar")); // false
console.log(validCSS("width", "100px")); // true
Improve this answer

Comments

-3

You can use normal javascript and regex to check if css is 'valid', you find out more about javascript's regex implementation at w3schools.

There's also a SO post here which discusses creating a regex which finds CSS.

Improve this answer

6 Comments

And how, pray tell, would you do this?
...well the second link discusses it.
With regex I can do just a general validation. For example margin: 10px; passes the regex validation and it will be applied by the browser but margin: asdsd; passes the regex validation too not being valid and it will not be applied by the bowser.
what does a css file regex have to do with element style validation?
@Victor that's my point, link in anser has nothing to do with what you are trying to do
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.