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

235

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 ?

Poru
quelle
5
Mögliches Duplikat des CSS-Hintergrundbildes - Was ist die richtige Verwendung?
Robert MacLean

Antworten:

243

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

Pekka
quelle
9
Einige ältere Browser haben möglicherweise Probleme mit zitierten URLs, nämlich IE Mac.
Mveerman
5
Zusätzlich zu dem, was bic72 gesagt hat, stellen einige ältere Browser auch doppelte Anfragen, wenn sie mit zitierten URLs in CSS konfrontiert werden. Zuerst fordern sie "myfile.png" und dann myfile.png an - daher vermeide ich die Verwendung dieser URLs.
Pebbl
FWIW Die Spezifikation, auf die Sie verlinken, scheint neu geschrieben worden zu sein, seit Sie das zweite Zitat veröffentlicht haben. Jetzt müssen Kommas nicht mehr maskiert werden.
Ben
@pebbl - Sie haben Recht, und ältere Browser enthalten die neueste Version von Chrome für Mac.
Daniel Beardsley
7
Der neueste Entwurf des CSS 3-Editors (Mai 2015) scheint keine Zitate mehr zuzulassen : dev.w3.org/csswg/css-syntax ( sieheurl-token Eisenbahnschema), während die aktuelle Kandidatenempfehlung (Februar 2014) dies tut: w3.org/TR / CSS-Syntax-3 Ich nehme an, sie wollen die Verwendung von Escape-Sequenzen anstelle von Anführungszeichen fördern
Simon Mourier
34

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.

sodatea
quelle
"Die nicht zitierte Version wird nur aus älteren Gründen unterstützt [..]" Quelle?
Semmel
5
Drafts.csswg.org/css-values-3/#ref-for-url-value-7 "Hinweis: Die speziellen Parsing-Regeln für die Legacy-Anführungszeichen-
freie
Ich habe es gelesen, muss aber diesen Teil verpasst haben - danke! So oder so - sehr wertvolle Ratschläge. Imho das sollte die akzeptierte Antwort sein!
Semmel
In der Version 2020 des Dokuments, auf das verwiesen wird, scheint nicht mehr zu erwähnen, dass die nicht zitierte Version nur aus älteren Gründen unterstützt wird.
Jahmic
11

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)

Andrea Zilio
quelle
5
Ich weiß nicht, warum dies abgelehnt wurde. Für eine Website mit hohem Datenaufkommen machen solche Ideen im Laufe eines Jahres einen großen Unterschied.
Joisey Mike
7
↑ Das bezweifle ich wirklich. Wie viele URLs gibt es pro CSS? Nicht zu viel. Und Sie haben jeweils nur ZWEI Bytes (in ASCII oder UtF-8) geschont. Außerdem könnten Sie die URL tatsächlich verlängern, da Sie möglicherweise Backslashes verwenden müssen. Es gibt viel bessere Möglichkeiten, um die Größe des Webs zu reduzieren ...
kralyk
1
Natürlich ist es keine große Ersparnis, aber Andrea und Joisey haben immer noch Recht. Als extremes Beispiel muss Google nur ein Byte von seiner Homepage entfernen, um einiges an Bandbreite zu sparen;)
Pebbl
2
@kralyk ... Daher ist es am besten, keine Anführungszeichen zu verwenden, wenn sie nicht benötigt werden. Daher ist es besser, Anführungszeichen zu verwenden, wenn Sie eine URL mit mehr als zwei Klammern, Kommas, Leerzeichen, einfachen Anführungszeichen oder doppelten Anführungszeichen haben . Was ich jedoch nie in einer CSS-Datei gesehen habe ... Und ich bin mir ziemlich sicher, dass ich es nie tun werde :) (aktualisierte die Antwort)
Andrea Zilio
18
Programmierer, die sich mit der Optimierung einzelner Zeichen aus ihren Quellcodes befassen, vermissen das Boot völlig - sie werden kaum jemals etwas optimieren. Jedenfalls verwende ich immer doppelte Anführungszeichen. Ich bin ein Mann von Beständigkeit.
ChaseMoskal
6

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

Y. Shoham
quelle
3

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.

Nick Craver
quelle
1

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.

TechNyquist
quelle
0

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.

Junhao
quelle
2
@ DávidHorváth: Ich sage nicht, dass du falsch liegst, aber welche schlechten Konventionen meinst du?
Sam Dutton