Citar o valor de url () é realmente necessário?

Qual das seguintes opções devo usar nas minhas folhas de estilo?

/* Example #1: */ background-image: url(image.png);
/* Example #2: */ background-image: url("image.png");
/* Example #3: */ background-image: url('image.png');

O que o W3C especifica como a maneira correta ?

O W3C diz que as cotações são opcionais, todas as três formas são legais.

A citação de abertura e fechamento só precisa ter o mesmo caractere.

Se você tiver caracteres especiais no seu URL, use aspas ou escape dos caracteres (veja abaixo).

Sintaxe e tipos de dados básicos

O formato de um valor de URI é 'url (' seguido de espaço em branco opcional seguido por um caractere de aspas simples (') ou aspas duplas (")) seguido pelo próprio URI, seguido de uma aspas simples (') ou aspas duplas opcionais (") seguido de espaço em branco opcional seguido de ')'. Os dois caracteres de aspas devem ser os mesmos.

Escapando caracteres especiais:

Alguns caracteres que aparecem em um URI não citado, como parênteses, caracteres de espaço em branco, aspas simples (') e aspas duplas ("), devem ser escapados com uma barra invertida para que o valor URI resultante seja um token URI:' \ (', '\)'.

Cotações de melhor uso, porque são recomendadas pelo padrão mais novo e há menos casos extremos.

De acordo com o mais novo rascunho de valores e módulos de CSS do editor, nível 3 (18 de dezembro de 2015)

Uma URL é um ponteiro para um recurso e é uma notação funcional indicada por <url>. A sintaxe de a <url>é:
<url> = url( <string> <url-modifier>* )

A versão não citada é suportada apenas por motivos herdados e precisa de regras de análise especiais (para seqüências de escape, etc.), sendo, portanto, complicada e sem suporte para modificadores de URL.

Isso significa que a url(...)sintaxe deve ser uma notação funcional, que usa uma string e um modificador de URL como parâmetros. O uso da notação de cotação (que produz um token de string) seria mais compatível com os padrões e apresentaria menos complexidade.

O comentário de @ SimonMourier na resposta superior está errado, porque ele procurou a especificação errada. O url-tokentipo é introduzido apenas para as regras de análise especiais herdadas, por isso não tem nada a ver com aspas.

Aqui está o que a especificação W3 CSS 2.1 diz:

O formato de um valor de URI é 'url (' seguido de espaço em branco opcional seguido por um caractere de aspas simples (') ou aspas duplas (")) seguido pelo próprio URI, seguido de uma aspas simples (') ou aspas duplas opcionais (") seguido de espaço em branco opcional seguido de ')'. Os dois caracteres de aspas devem ser os mesmos.

Fonte: http://www.w3.org/TR/CSS21/syndata.html#uri

Portanto, todos os três exemplos que você propôs estão corretos, mas o que eu escolheria é o primeiro porque você usa menos caracteres e, portanto, o arquivo CSS resultante será menor, resultando em menor uso de largura de banda.

Pode parecer que isso não é importante, mas sites de alto tráfego preferem economizar largura de banda e muitos arquivos css, e referências de URL neles, faz sentido escolher a opção que torna o arquivo menor ... Mesmo porque não há vantagem em não fazer isso .

Nota: pode ser necessário escape de caracteres se os URLs contiverem parênteses, vírgulas, caracteres de espaço em branco, aspas simples ou aspas duplas. Isso pode tornar o URL mais longo do que apenas usar aspas (que precisam de menos escape). Portanto, convém servir um arquivo CSS com URLs sem aspas apenas quando a sobrecarga de escape não aumentar a URL do que apenas usar aspas (o que é muito raro).

No entanto, eu não esperaria que nenhum ser humano sequer considerasse esses casos extremos ... Um otimizador de Css lidaria com isso para você ... (mas com certeza você precisa saber sobre tudo isso se estiver realmente escrevendo um otimizador de css: P)

Três maneiras são legais, de acordo com o W3C. Se você tiver caracteres especiais no nome (como espaço), use o segundo ou o terceiro.

Os exemplos 2 ou 3 são os melhores:

No W3C: o formato de um valor de URI é 'url (' seguido de espaço em branco opcional seguido de um caractere de aspas simples (') ou de aspas duplas (")) seguido pelo próprio URI, seguido de uma aspas simples opcional (') ou caractere de aspas duplas (") seguido de espaço em branco opcional seguido de ')'. Os dois caracteres de aspas devem ser os mesmos.

Observe na mesma explicação que o Exemplo 1 é aceitável, se os caracteres apropriados forem escapados.

Eu tinha:

a.pic{
    background-image: url(images/img (1).jpg);
}

Demorei um pouco para entender que a chave fechada do nome do arquivo estava violando a regra.

Portanto, não é obrigatório, mas, mesmo que a citação não seja tão bem compreendida pelos navegadores mais antigos, você pode economizar um pouco de dor de cabeça em páginas geradas dinamicamente bastante complexas.

De acordo com o estilo de codificação CSS do Google

Não use aspas nos valores de URI (url ()).

Exceção: se você precisar usar a regra @charset, use aspas duplas - aspas simples não são permitidas.