Ist es wirklich notwendig, den Wert von url () anzugeben?

Welche der folgenden Optionen sollte ich in meinen Stylesheets verwenden?

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

Was legt der W3C als richtigen Weg fest ?

Laut W3C sind Zitate optional, alle drei Möglichkeiten sind legal.

Das öffnende und schließende Zitat muss nur das gleiche Zeichen haben.

Wenn Ihre URL Sonderzeichen enthält, sollten Sie Anführungszeichen verwenden oder die Zeichen maskieren (siehe unten).

Syntax und grundlegende Datentypen

Das Format eines URI-Werts lautet 'url (', gefolgt von einem optionalen Leerzeichen, gefolgt von einem optionalen einfachen Anführungszeichen (') oder einem doppelten Anführungszeichen ("), gefolgt von der URI selbst, gefolgt von einem optionalen einfachen Anführungszeichen (') oder einem doppelten Anführungszeichen (") Zeichen gefolgt von optionalem Leerzeichen gefolgt von ')'. Die beiden Anführungszeichen müssen identisch sein.

Sonderzeichen entkommen:

Einige Zeichen in einem nicht in Anführungszeichen gesetzten URI, z. B. Klammern, Leerzeichen, einfache Anführungszeichen (') und doppelte Anführungszeichen ("), müssen mit einem umgekehrten Schrägstrich versehen werden, damit der resultierende URI-Wert ein URI-Token ist:' \ (', '\)'.

Verwenden Sie besser Anführungszeichen, da dies vom neuesten Standard empfohlen wird und es weniger Randfälle gibt.

Laut dem neuesten Entwurf des Herausgebers von CSS-Werten und -Modulen Level 3 (18. Dezember 2015)

Eine URL ist ein Zeiger auf eine Ressource und eine funktionale Notation, die mit gekennzeichnet ist <url>. Die Syntax von a <url>lautet:
<url> = url( <string> <url-modifier>* )

Die nicht zitierte Version wird nur aus älteren Gründen unterstützt und benötigt spezielle Parsing-Regeln (für Escape-Sequenzen usw.). Sie ist daher umständlich und unterstützt keine URL-Modifikatoren.

Das heißt, die url(...)Syntax soll eine funktionale Notation sein, die einen String und einen URL-Modifikator als Parameter verwendet. Die Verwendung der Anführungszeichen-Notation (die ein Zeichenfolgentoken erzeugt) wäre standardkonformer und würde weniger Komplexität verursachen.

@ SimonMouriers Kommentar in der oberen Antwort ist falsch, weil er nach der falschen Spezifikation gesucht hat. Der url-tokenTyp wird nur für die älteren speziellen Parsing-Regeln eingeführt, daher hat er nichts mit Anführungszeichen zu tun.

In der W3 CSS 2.1-Spezifikation heißt es Folgendes:

Das Format eines URI-Werts lautet 'url (', gefolgt von einem optionalen Leerzeichen, gefolgt von einem optionalen einfachen Anführungszeichen (') oder einem doppelten Anführungszeichen ("), gefolgt von der URI selbst, gefolgt von einem optionalen einfachen Anführungszeichen (') oder einem doppelten Anführungszeichen (") Zeichen gefolgt von optionalem Leerzeichen gefolgt von ')'. Die beiden Anführungszeichen müssen identisch sein.

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

Alle drei von Ihnen vorgeschlagenen Beispiele sind also korrekt, aber das, das ich auswählen würde, ist das erste, da Sie weniger Zeichen verwenden und daher die resultierende CSS-Datei kleiner ist, was zu einer geringeren Bandbreitennutzung führt.

Dies mag als nicht wichtig erachtet werden, aber Websites mit hohem Datenverkehr bevorzugen es, Bandbreite und viele CSS-Dateien zu sparen, und URL-Verweise in ihnen sind sinnvoll, die Option zu wählen, die die Datei kleiner macht ... Auch weil es keinen Vorteil gibt dabei nicht .

Hinweis: Möglicherweise müssen Sie Zeichen maskieren, wenn URLs Klammern, Kommas, Leerzeichen, einfache Anführungszeichen oder doppelte Anführungszeichen enthalten. Dies kann dazu führen, dass die URL länger ist als nur Anführungszeichen (die weniger maskiert werden müssen). Daher möchten Sie möglicherweise eine CSS-Datei mit URLs ohne Anführungszeichen nur dann bereitstellen, wenn der Aufwand für das Escapezeichen die URL nicht länger macht als nur die Verwendung von Anführungszeichen (was sehr selten ist).

Ich würde jedoch nicht erwarten, dass ein Mensch diese Randfälle überhaupt in Betracht zieht ... Ein CSS-Optimierer würde dies für Sie erledigen ... (aber Sie müssen dies alles wissen, wenn Sie tatsächlich einen CSS-Optimierer schreiben: P)

Laut W3C sind drei Wege legal. Wenn der Name Sonderzeichen enthält (als Leerzeichen), sollten Sie das zweite oder dritte verwenden.

Beispiel 2 oder 3 sind am besten:

Von W3C: Das Format eines URI-Werts ist 'url (' gefolgt von einem optionalen Leerzeichen, gefolgt von einem optionalen einfachen Anführungszeichen (') oder einem doppelten Anführungszeichen ("), gefolgt vom URI selbst, gefolgt von einem optionalen einfachen Anführungszeichen ('). oder doppeltes Anführungszeichen (") gefolgt von einem optionalen Leerzeichen gefolgt von ')'. Die beiden Anführungszeichen müssen identisch sein.

Beachten Sie aus derselben Erklärung, dass Beispiel 1 akzeptabel ist, wenn entsprechende Zeichen maskiert werden.

Ich hatte:

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

Es dauerte eine Weile, bis ich begriff, dass die geschlossene Klammer mit dem Dateinamen gegen die Regel verstieß.

Es ist also nicht obligatorisch, aber selbst wenn das Zitieren von älteren Browsern nicht so gut verstanden wird, kann es Ihnen bei ziemlich komplexen dynamisch generierten Seiten Kopfschmerzen ersparen.

Laut Google CSS Coding Style

Verwenden Sie keine Anführungszeichen in URI-Werten (url ()).

Ausnahme: Wenn Sie die @ charset-Regel verwenden müssen, verwenden Sie doppelte Anführungszeichen - einfache Anführungszeichen sind nicht zulässig.