A configuração

Digamos que você queira que uma lista embutida seja renderizada assim:

Item 1 \ Item 2 \ Item 3

Você pode ficar tentado a fazer isso:

.backslash_list > li:after {
   content: '\'
}

Mas então você deve se lembrar,

“Nossa, isso mesmo – um caractere de barra invertida é usado para escapar das sequências ASCII para a contentpropriedade”.

Portanto, agora certifique-se de escapar dessa barra invertida com outra barra invertida.

.backslash_list > li:after {
   content: '\\'
}

Isso vai funcionar … exceto quando não funcionar. É aqui que tudo começa a quebrar e dar errado.

O problema

Uma regra CSS como essa provavelmente estará em um arquivo CSS de nível superior. Mesmo que não seja definido diretamente em seu arquivo, seu script de compressão pode muito bem ser configurado para incluir esta regra (onde quer que seja definida) junto com outro CSS.global.css

Acontece que o Safari 5.1 e 5.0 não gosta disso … de jeito nenhum. O que acaba acontecendo? Cada regra CSS na mesma linha após esta sequência de caracteres será ignorada. O resultado não é bonito:

A solução

Você provavelmente já adivinhou ( dica: aconteceu durante o seu momento de clareza quando você escapou da primeira barra invertida ): use o código ASCII para o caractere de barra invertida:

.backslash_list > li:after {
   content: '\005C'
}

Muuuuuuch melhor 🙂

Espero que isso salve pelo menos um de vocês desse bug obscuro no futuro!