Czy naprawdę warto podać wartość url ()?

Którego z poniższych należy użyć w moich arkuszach stylów?

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

Co W3C określa jako prawidłowy sposób ?

W3C mówi, że oferty są opcjonalne, wszystkie trzy sposoby są legalne.

Cytat otwierający i zamykający musi być tylko tym samym znakiem.

Jeśli w adresie URL znajdują się znaki specjalne, należy użyć cudzysłowów lub znaków specjalnych (patrz poniżej).

Składnia i podstawowe typy danych

Format wartości identyfikatora URI to „url (”, po którym następuje opcjonalna biała spacja, a następnie opcjonalny pojedynczy cudzysłów („) lub znak podwójnego cudzysłowu (”), a następnie sam identyfikator URI, a następnie opcjonalny pojedynczy cudzysłów (”) lub podwójny cudzysłów („), po którym następuje opcjonalna biała spacja, po której następuje„) ”. Dwa znaki cudzysłowu muszą być takie same.

Uciekające znaki specjalne:

Niektóre znaki występujące w niecytowanym URI, takie jak nawiasy, białe znaki, pojedyncze cudzysłowy (') i podwójne cudzysłowy ("), muszą być poprzedzone odwrotnym ukośnikiem, aby wynikowa wartość URI była tokenem URI:' \ (', „\)”.

Lepsze wykorzystanie cytatów, ponieważ jest zalecane przez najnowszy standard i jest mniej przypadków brzegowych.

Według najnowszego szkicu wartości i modułów CSS poziomu 3 (18 grudnia 2015 r.)

Adres URL jest wskaźnikiem do zasobu i jest oznaczeniem funkcjonalnym oznaczonym przez <url>. Składnia a <url>to:
<url> = url( <string> <url-modifier>* )

Niecytowana wersja jest obsługiwana tylko z wcześniejszych powodów i wymaga specjalnych reguł analizy (dla sekwencji specjalnych itp.), Dlatego jest nieporęczna i nie obsługuje modyfikatorów URL.

Oznacza to, że url(...)składnia ma być notacją funkcjonalną, która przyjmuje parametry i modyfikator adresu URL jako parametry. Użyj notacji cytatowej (która tworzy token łańcuchowy) byłby bardziej zgodny ze standardami i wprowadziłby mniej złożoności.

@ Komentarz SimonMouriera w górnej odpowiedzi jest błędny, ponieważ szukał złej specyfikacji. Ten url-tokentyp został wprowadzony tylko dla starszych specjalnych reguł analizy, dlatego nie ma on nic wspólnego z cudzysłowami.

Oto, co mówi specyfikacja W3 CSS 2.1:

Format wartości identyfikatora URI to „url (”, po którym następuje opcjonalna biała spacja, a następnie opcjonalny pojedynczy cudzysłów („) lub znak podwójnego cudzysłowu (”), a następnie sam identyfikator URI, a następnie opcjonalny pojedynczy cudzysłów (”) lub podwójny cudzysłów („), po którym następuje opcjonalna biała spacja, po której następuje„) ”. Dwa znaki cudzysłowu muszą być takie same.

Źródło: http://www.w3.org/TR/CSS21/syndata.html#uri

Tak więc wszystkie 3 zaproponowane przez Ciebie przykłady są poprawne, ale ten, który wybrałbym, jest pierwszy, ponieważ używasz mniej znaków, a zatem wynikowy plik CSS będzie mniejszy, co spowoduje mniejsze użycie przepustowości.

Może się wydawać, że to nie jest ważne, ale witryny o dużym natężeniu ruchu wolą oszczędzać przepustowość i wiele plików css, a odwołania do adresów URL w nich mają sens, aby wybrać opcję, która zmniejsza plik ... Nawet jeśli nie ma żadnej przewagi nie robiąc tego .

Uwaga: być może trzeba będzie unikać znaków, jeśli adresy URL zawierają nawiasy, przecinki, białe znaki, pojedyncze cudzysłowy lub podwójne cudzysłowy. Może to spowodować, że adres URL będzie dłuższy niż tylko użycie cudzysłowów (które wymagają mniejszej liczby znaków ucieczki). Dlatego możesz chcieć podać plik Css z adresami URL bez cudzysłowów tylko wtedy, gdy narzut związany z ucieczką nie powoduje, że adres URL jest dłuższy niż tylko użycie cudzysłowów (co jest bardzo rzadkie).

Jednak nie spodziewałbym się, że jakikolwiek człowiek weźmie pod uwagę te przypadki krawędzi ... Optymalizator CSS poradziłby sobie z tym za Ciebie ... (ale na pewno musisz wiedzieć o tym wszystkim, jeśli faktycznie piszesz optymalizator CSS: P)

Według W3C trzy sposoby są legalne. Jeśli masz w nazwie znaki specjalne (jako spację), powinieneś użyć drugiego lub trzeciego.

Przykłady 2 lub 3 są najlepsze:

From W3C: Format wartości URI to „url (”, po którym następuje opcjonalna biała spacja, po której opcjonalny znak pojedynczego cudzysłowu („) lub podwójny cudzysłów (”), po czym sam URI, a następnie opcjonalny pojedynczy cudzysłów (”) lub znak podwójnego cudzysłowu („), po którym następuje opcjonalna biała spacja, po której następuje„) ”. Dwa znaki cudzysłowu muszą być takie same.

Uwaga z tego samego objaśnienia: Przykład 1 jest dopuszczalny, jeśli odpowiednie znaki zostaną pominięte.

Miałem:

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

Trochę zajęło mi zrozumienie, że nawias klamrowy nazwy pliku łamie regułę.

Nie jest to zatem obowiązkowe, ale nawet jeśli cytowanie nie jest tak dobrze rozumiane przez starsze przeglądarki, może zaoszczędzić ci bólu głowy na dość złożonych dynamicznie generowanych stronach.

Zgodnie ze stylem kodowania Google CSS

Nie używaj cudzysłowów w wartościach URI (url ()).

Wyjątek: jeśli potrzebujesz użyć reguły @charset, użyj podwójnych cudzysłowów - pojedyncze cudzysłowy nie są dozwolone.