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

235

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 ?

Poru
fonte
5
possível duplicação da imagem de plano de fundo CSS - Qual é o uso correto?
Robert MacLean

Respostas:

243

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:' \ (', '\)'.

Pekka
fonte
9
Alguns navegadores mais antigos podem ter problemas com os URLs citados, como o IE Mac.
mveerman
5
Como complemento ao que o bic72 disse, alguns navegadores mais antigos também fazem solicitações duplas quando confrontados com URLs citados no CSS, primeiro solicitam "myfile.png" e depois myfile.png - daí o motivo de eu evitar usá-los.
Pebbl
FWIW, a especificação à qual você vincula parece ter sido reescrita desde que você publicou a segunda cotação. Agora, as vírgulas parecem não exigir escape.
Ben Ben
@pebbl - Você está certo, e navegadores mais antigos incluem a versão mais recente do Chrome no mac.
Daniel Beardsley
7
O rascunho do Editor mais recente do CSS 3 (maio de 2015) parece não permitir mais aspas: dev.w3.org/csswg/css-syntax (verifique o url-tokenesquema da ferrovia), enquanto a recomendação atual do candidato (fevereiro de 2014): w3.org/TR / css-sintaxe-3 suponho que quer promover o uso da seqüência de escape em vez de aspas
Simon Mourier
34

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.

sodatea
fonte
"A versão não citada é suportada apenas por motivos herdados [..]" Fonte?
Semmel 22/02
5
drafts.csswg.org/css-values-3/#ref-for-url-value-7 "Nota: As regras de análise especiais para a sintaxe de aspas herdada entre aspas e menos <url> significam que ..."
sodatea
Eu li, mas devo ter perdido essa parte - obrigado! De qualquer maneira - conselhos muito valiosos. Imho esta deve ser a resposta aceita!
Semmel 22/02
A versão 2020 do documento referenciado não parece mencionar 'a versão não citada é suportada apenas por motivos herdados'.
Jahmic
11

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)

Andrea Zilio
fonte
5
Não sei por que isso foi rebaixado; para um site de alto tráfego, idéias como essa fazem uma grande diferença ao longo de um ano.
Joisey Mike
7
↑ Duvido muito disso. Quantos URLs existem por css? Não muito. E você apenas poupou DOIS bytes (em ascii ou utf-8) em cada um. Além disso, você pode realmente aumentar o URL, porque pode precisar usar barras invertidas. Há muito melhores maneiras de reduzir o tamanho da web ...
kralyk
1
Obviamente, não poupa muito, mas Andrea e Joisey ainda estão corretas. Como um exemplo extremo, o Google só precisa remover um byte de sua página inicial para economizar um pouco de largura de banda;)
Pebbl
2
@kralyk ... Portanto, a melhor coisa a fazer é não usar aspas quando não for necessário ... Portanto, é melhor usar aspas quando você tiver um URL com mais de dois parênteses, vírgulas, caracteres de espaço em branco, aspas simples ou aspas duplas . Que, no entanto, eu nunca encontrei em um arquivo Css ... E tenho certeza de que nunca irei :) (atualizou a resposta) #
Andrea Zilio
18
Os programadores que se preocupam com a otimização de caracteres individuais a partir de seus códigos-fonte estão perdendo o barco completamente - eles quase nunca otimizam nada. De qualquer forma, eu sempre uso aspas duplas. Eu sou um homem de consistência.
ChaseMoskal
6

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.

Y. Shoham
fonte
3

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.

Nick Craver
fonte
1

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.

TechNyquist
fonte
0

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.

Junhao
fonte
2
@ DávidHorváth: Não estou dizendo que você está errado, mas que más convenções você quer dizer?
Sam Dutton