Ich bin auf eine Eigenschaft CSS background gestoßen, die folgenden Wert hat:
Die Syntax der Eigenschaft background ist unter dieser MDN-Seite angegeben. so:
Ist die Reihenfolge der Werte der Eigenschaft background wichtig? Und ganz allgemein: Wie interpretiere ich diese " Formale Syntax ", die auf dem MDN bereitgestellt wird.
Die formale Syntax ist auf der MDN-Site selbst dokumentiert . Die "allgemeinere" Frage, die Sie haben, ist wahrscheinlich zu umfangreich für Stack Overflow: Gehen Sie einfach durch die Dokumentation und kommen Sie zurück, wenn Sie spezielle Fragen haben.
Eine solche spezifische Frage ist, ob die Reihenfolge der Werte für die Eigenschaft background von Bedeutung ist. Die meisten Teile des Hintergrunds (speziell einer bg-Ebene) sind durch "double bars" getrennt, die gemäß der formalen Syntax von MDN ( keine spezifische Reihenfolge ) erforderlich sind. Um die spezifische Dokumentation auf doppelten Balken zu zitieren:
Doppelleiste
Das Trennen von zwei oder mehr Komponenten durch einen doppelten Balken, ||, bedeutet, dass alle Entitäten Optionen sind: Mindestens einer von ihnen muss vorhanden sein und sie können in beliebiger Reihenfolge erscheinen . In der Regel werden damit die verschiedenen Werte einer Kurzschrift-Eigenschaft definiert.
Als Fußnote, obwohl ich MDN die ganze Zeit liebe und benutze, wäre wahrscheinlich eine autorisierte Quelle W3.org, wo Sie zum Beispiel die backup shorthand syntax sowie eine Erklärung der Syntax in CSS Werte und Einheiten Modul Level 3 . Es sagt im Grunde dasselbe, z.B. über "Doppel Bars":
Ein Doppelbalken (||) trennt zwei oder mehr Optionen: Einer oder mehrere müssen in beliebiger Reihenfolge vorkommen.
Dies funktioniert in der Praxis für die background -Eigenschaft, wie Sie in diesem Ausschnitt sehen können, wo unabhängig von der Reihenfolge, in der die Eigenschaften analysiert werden, die gleichen sind:
Reihenfolge spielt keine Rolle. Aber, Reihenfolge ist wichtig.
tl; dr;
Reihenfolge ist nicht wichtig, es ist was es ist, in dieser Dokumentation über MDN und wird auch durch die W3C Specs bestätigt. Ich werde diesen Teil wörtlich wiederholen:
Ein doppelter Balken (
||) trennt zwei oder mehr Optionen: eine oder mehrere davon muss in beliebiger Reihenfolge auftreten.
Aber spring noch nicht zu dieser Schlussfolgerung!
Reihenfolge ist wichtig. Nehmen wir Ihr Beispiel für background Shorthand Syntax:
Und weil wir die Syntax aller möglichen Eigenschaften für mehrere Hintergründe auflisten, reduzieren wir die Komplexität, indem wir einen Hintergrund auswählen. Es sieht so aus:
%Vor% Wenn Sie dies in einem Code-Snippet ausführen und sich auf die in Ihrer Frage und der anderen Antwort erwähnte Dokumentation beziehen, könnten Sie glauben, dass all diese Eigenschaften, die durch einen Doppelbalken ( || ) getrennt sind, weggelassen werden können In irgendeiner Reihenfolge. Richtig ?
Obwohl MDN eine gute Referenz ist, ist es nicht vollständig und kann manchmal wichtige Details auslassen. In diesem speziellen Fall, diese beiden Referenzen ...
... geben Sie die gleiche Syntax an und erklären Sie alle Eigenschaften, aber lassen Sie ein Detail aus.
Sehen Sie sich nun die Eigenschaft box genauer an. Es gibt zwei box -Eigenschaften, die durch Doppelbalken getrennt sind ( || ). Das sollte bedeuten, dass Sie box entweder weglassen oder box in beliebiger Reihenfolge angeben können. Aber das ist nicht ganz richtig . Während Sie natürlich box ganz aus der Kurzschrift weglassen können, können Sie sie nicht in eine beliebige Reihenfolge bringen, ohne unbeabsichtigte Ergebnisse zu erhalten. Dies ist nicht in der MDN-Referenz auf background oben verlinkt angegeben.
Aber in einer anderen Referenz auf background-clip von der gleichen MDN hier:
Es heißt:
Kanonische Reihenfolge: Die eindeutige nicht-mehrdeutige Reihenfolge, die durch die formale Grammatik definiert wird
Dies bedeutet, dass die Reihenfolge von Ambiguität der Eigenschaften bestimmt wird. Wenn die Eigenschaften nicht eindeutig sind, spielt die Reihenfolge oder Unterlassung keine Rolle. Wenn die Eigenschaften mehrdeutig sind, spielt die Reihenfolge und / oder Unterlassung eine Rolle.
In Ihrem background shorthand-Beispiel werden die beiden box -Eigenschaften (falls vorhanden) als die erste interpretiert, die background-origin ist und die zweite background-clip ist.
Wenn Sie eine andere Dokumentationsquelle hier lesen:
Es heißt:
Es gibt ein paar Dinge, auf die Sie achten sollten, wenn Sie den neuen Hintergrund verwenden Kurzschrift. Wenn nur ein Boxwert angegeben wird, werden sowohl background-clip als auch background-origin wird auf diesen Wert gesetzt. Wenn zwei angegeben sind, dann die Der erste wird für den Ursprung und der zweite für den Clip verwendet.
Gibt Folgendes an:
Beachten Sie, dass 'background-clip' 'padding-box', 'background-origin' ist ist 'border-box', 'background-position' ist 'oben links' (die Initiale Wert), und das Element hat eine Grenze ungleich null, dann oben und links des Hintergrundbildes wird abgeschnitten.
Wenn Sie also einen der Werte weglassen, wird dies als background-origin und background-clip interpretiert. Wenn Sie jedoch beide Werte angeben, ist die Reihenfolge wichtig, sonst werden Sie seltsame Ergebnisse erhalten. Außerdem wird das Verhalten durch eine andere Eigenschaft von background-position beeinflusst.
Dies kann anhand dieses Beispiels im folgenden Abschnitt leicht demonstriert werden. In der ersten div ist das Hintergrundbild 15px vom Padding entfernt, wird aber über den Rand hinaus fortgesetzt. Beachten Sie, dass der erste box Wert padding-box und der zweite border-box ist. Im zweiten div befindet sich das Hintergrundbild in der Position 15px vom Rand entfernt, stoppt aber dort, wo das Padding endet. Beachten Sie, dass der erste Wert border-box und der zweite Wert padding-box ist. In der dritten div beginnt das Hintergrundbild vom Rand und setzt sich über den Rand fort. In diesem Fall wird ein Wert weggelassen und sowohl background-origin als auch background-clip erhalten den Wert von border-box .
Snippet:
Es ist gut, auf die Dokumentation zu verweisen. Aber es ist sogar besser, mehrere Quellen zu konsultieren. Diese Antwort bezieht sich auf 5 Quellen . Lesen Sie die W3C-Spezifikationen, aber nicht nur an einer Stelle, lesen Sie alle zugehörigen Eigenschaftsverweise, um zu sehen, wie eine Eigenschaft von anderen Eigenschaftswerten beeinflusst werden kann, und sogar um zu ordnen. Und vergessen Sie nicht, eine Probe zu probieren, Sie werden vielleicht nie wissen, dass eine Überraschung auf Sie warten könnte!
.
Tags und Links css