string concatenation in css

Question

I want to achieve the following in css. How do i do it in a way that works in IE8+

url(\'../img/icons/\' + attr(\'type\') + \'_10.png\')

Answer 1

CSS performs concatenation without using any operator (e.g. +, &, etc). Keep your strings in quotes combine the strings, attr, var, etc into one line.

Examples:

• url('not/very' '/useful/concatenation'); // not/very/useful/concatentation
• url('../img/icons/' attr('type') '_10.png'); //../img/icons/${type}_10.png
• url(attr('href') '#hash'); // https://${href}/#hash
• url(var(--hello) ' world'); // Hello World