Andrew Mata Andrew Mata - 1 month ago 31
CSS Question

Safari Unexpected CSS Token: :

I'm working on an application and it seems to be running fine in all browsers with exception to safari(Including the latest version)

It seems to be revolving around CSS lines such as the following.

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);


The error simply states

Unexpected CSS token: :

Answer

It's because Safari is taking the second : as invalid syntax.

You don't need to remove it, as browsers simply ignore invalid properties.

However, if for some reason you need it to be valid, or it's just bugging you, here's your options:


The easiest option is to just remove the filter property. You do lose IE8 support, which you may or may not need.

If you do need IE support, use the -ms-filter attribute, and wrap the value in quotes:

-ms-filter: 'filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);';

You will lose support for IE7 and below by doing this, as it is only supported in IE8. However, since this group makes up 0.061% of the global usage, many/most/if not all websites don't support them anymore.

Resources:

FontAwesome had an issue with this