Tilde in CSS attribute value

Question

I found some CSS like this:

margin-top: ~"-2px\9";

Can anyone tell me what it is and what it does?

http://www.kendoui.com/forums/ui/general-discussions/new-css-error-in-kendo-common-css-introduced-with-2013-1-514-build.aspx — CBroe, Jul 04 '13 at 12:24
The `\9` is a hack targetting IE8. It's really poor practice. Don't do it. — Spudley, Jul 04 '13 at 12:26
http://stackoverflow.com/questions/8004765/css-9-in-width-property — mplungjan, Jul 04 '13 at 12:27

score 34 · Accepted Answer · edited May 23 '17 at 12:34

34

What is it?

A syntax error.

What does it do?

Breaks your stylesheet.

As mentioned in the comments on your question, it may be LESS instead of CSS. In LESS, a tilde before a string literal outputs the string as-is, because it may be a syntax error in pure LESS. \9 is an IE hack. See Escaping.

edited May 23 '17 at 12:34

Community

1
1

answered Jul 04 '13 at 12:20

1

does people write this intentionally ?? what is the purpose? – Grijesh Chauhan Jul 04 '13 at 12:22
1

and the \9 is here http://stackoverflow.com/questions/8004765/css-9-in-width-property – mplungjan Jul 04 '13 at 12:26
Please consider other areas of css, less, sass etc This gentlemen is most likely seeing "Escaping" being used. – David Arango Apr 07 '21 at 15:43

score 7 · Answer 2 · answered Jul 04 '13 at 12:29

7

It may be a LESS Syntax. But tilde character is used in CSS3 as well. E-g the below Syntax:

p ~ ul { background:#ff0; }

will target ul elements that are preceded by a p element with the same parent:

answered Jul 04 '13 at 12:29

defau1t

10,593
2
35
47

score 3 · Answer 3 · answered Dec 20 '19 at 15:39

In Less, this is called "Escaping".

Escaping allows you to use any random string as a property value or variable value.

For example ~"value" or ~'value' will be used as is without changes being made, only exception is interpolation.

Link to Less Docs: http://lesscss.org/#escaping

Tilde in CSS attribute value

3 Answers3