Can I check if a CSS property is valid with jQuery?

Question

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?

Depends on what you consider "valid". A gecko browser will not recognize certain CSS properties that are only available in webkit, for example. — Fabrício Matté, Feb 28 '13 at 12:11
@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). — Victor, Feb 28 '13 at 12:19

score 9 · Answer 1 · edited Apr 18 '23 at 13:30

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.

Christoph · Accepted Answer · 2016-07-08T15:50:38.087

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

edited Jul 08 '16 at 15:50

answered Feb 28 '13 at 12:55

Christoph

50,121
21
99
128

1

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. – Victor Feb 28 '13 at 13:01
OK, meanwhile you've added the code. I'll give it a try this way to see how it works. – Victor Feb 28 '13 at 13:10
Great! This is the answer! – Victor Feb 28 '13 at 13:38
1

@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. – Christoph Feb 28 '13 at 13:46
Yes, I have to make some tests. If needed, I'll make some changes. However, you solution is very good! Thank you. – Victor Feb 28 '13 at 13:51

score 3 · Answer 3 · answered Feb 28 '13 at 13:44

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');
}

Michaël Witrant · Answer 4 · 2013-02-28T12:23:01.790

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

edited Feb 28 '13 at 12:23

answered Feb 28 '13 at 12:17

Michaël Witrant

7,525
40
44

1

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. – Victor Feb 28 '13 at 12:33
Yes, I can't see another way to check the value. – Michaël Witrant Feb 28 '13 at 13:06
$("body").css("border", '1px 1px'); => // none – Hisham Dalal Dec 06 '19 at 09:37

score 1 · Answer 5 · answered Nov 21 '16 at 15:05

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

score -3 · Answer 6 · edited May 23 '17 at 11:54

-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.

edited May 23 '17 at 11:54

Community

1
1

answered Feb 28 '13 at 12:15

dotty

40,405
66
150
195

And how, pray tell, would you do this? – BoltClock Feb 28 '13 at 12:16
...well the second link discusses it. – dotty Feb 28 '13 at 12:18
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. – Victor Feb 28 '13 at 12:25
what does a css file regex have to do with element style validation? – charlietfl Feb 28 '13 at 12:46
@charlietfl - I'm not validating a CSS file, please see the update. – Victor Feb 28 '13 at 12:54
1

@Victor that's my point, link in anser has nothing to do with what you are trying to do – charlietfl Feb 28 '13 at 12:59

Can I check if a CSS property is valid with jQuery?

6 Answers6

Answer

Test

Linked