Browser-Entwicklertools sind für uns Front-End-Entwickler unverzichtbar. In diesem Artikel werfen wir einen Blick auf den Computed-Tab, eine kleine Ecke des DevTools-Panels, die uns große Dinge zeigt, wie zum Beispiel, wie relative CSS-Werte aufgelöst werden. Wir werden auch sehen, wie Vererbung in den Stilberechnungsprozess des Browsers passt.
Der Inhalt des Computed-Tabs ist wichtig, weil er uns die Werte zeigt, die der Browser tatsächlich auf der gerenderten Website verwendet. Wenn ein Element nicht so gestylt ist, wie Sie denken, kann ein Blick auf seine berechneten Werte helfen zu verstehen, warum.
Wenn Sie eher an die Styles-Registerkarte gewöhnt sind (in Firefox Rules genannt), fragen Sie sich vielleicht, wie sie sich von der Computed-Registerkarte unterscheidet. Ich meine, beide zeigen Stile, die auf ein Element angewendet werden. Die Antwort? Die Computed-Registerkarte zeigt eine alphabetische Liste von *aufgelösten* Stilen an, die das in Ihrem Stylesheet Deklarierte, aus Vererbung abgeleitete und die Standardeinstellungen des Browsers umfassen.
Die Styles-Registerkarte hingegen zeigt die genauen Stylesheets eines ausgewählten Elements genau so an, wie sie geschrieben wurden. Während die Styles-Registerkarte Ihnen also etwas wie .subhead {font-size: 75%} anzeigen könnte, zeigt die Computed-Registerkarte die tatsächliche Schriftgröße oder was 70 % derzeit ergibt. Zum Beispiel ist die tatsächliche Schriftgröße für den gerenderten Text wie oben gezeigt 13,2px.
Als Nächstes werfen wir einen kurzen Blick auf die Konzepte der Vererbung und der Kaskade, zwei Dinge, die einen großen Teil dazu beitragen, wie die berechneten Werte im Computed-Tab ermittelt werden.
Crashkurs zu Vererbung und Kaskade
MDN
CSS steht für Cascading Style Sheets, und das erste Wort „cascading“ ist unglaublich wichtig zu verstehen – die Art und Weise, wie die Kaskade funktioniert, ist der Schlüssel zum Verständnis von CSS.
Die Kaskade ist bemerkenswert, weil sie der „C“ in CSS ist. Sie ist der Mechanismus zur Auflösung von Konflikten, die zwischen den verschiedenen Quellen von Stildeklarationen für ein Dokument bestehen.
Stellen Sie sich zum Beispiel ein Stylesheet vor, das die Breite eines div zweimal definiert
div {
width: 65vw;
}
/* Somewhere, further down */
div {
width: 85vw;
}In diesem speziellen Beispiel gewinnt die zweite Breite, da sie zuletzt deklariert wurde. Die erste Breite könnte immer noch mit !important gewinnen, aber das bricht technisch gesehen die Kaskade durch rohe Gewalt. Der Punkt ist, dass der Kaskadenalgorithmus bestimmt, welche Stile für jedes Element gelten und sie in einer vordefinierten Reihenfolge priorisiert, um einen Wert festzulegen.
Die Kaskade wird für explizit festgelegte Eigenschaften angewendet, sei es durch den Browser, den Webentwickler oder den Benutzer. Vererbung kommt ins Spiel, wenn die Ausgabe der Kaskade leer ist. Wenn dies geschieht, wird der berechnete Wert einer Eigenschaft des übergeordneten Elements als eigener Wert für diese Eigenschaft übernommen. Wenn Sie beispielsweise eine Farbe für ein Element festlegen, erben alle Kindelemente diese Farbe, wenn Sie ihre eigene nicht festlegen.
Es gibt vier wichtige Eigenschaftswerte im Zusammenhang mit Vererbung, mit denen wir uns vertraut machen sollten, bevor wir weitermachen. Wir werden diese im gesamten Artikel verwenden.
initial
In einem HTML-Dokument, in dem die höchste Ebene des DOM-Baums das <html>-Element ist, verwenden wir das Schlüsselwort initial für ein Element wie dieses...
…die Textfarbe für dieses Element ist schwarz, obwohl das body-Element auf green gesetzt ist. Es gibt die Angelegenheit der div-Selektor mit einer höheren Spezifität, aber wir sind daran interessiert, warum initial zu schwarz übersetzt wurde.
Einfach ausgedrückt setzt dieses Schlüsselwort den Standardwert einer Eigenschaft, wie in seiner Definitionstabelle (in den CSS-Spezifikationen) angegeben. In diesem Fall ist schwarz zufällig die Browserimplementierung des initial-Farbwerts.
Ich erwähne gegen Ende des Artikels, dass Sie herausfinden können, ob eine Eigenschaft standardmäßig vererbt wird oder nicht, indem Sie ihre Seite auf MDN überprüfen. Nun, Sie können auch den Anfangswert für jede Eigenschaft auf diese Weise finden.
inherit
Bei nicht vererbten Eigenschaften erzwingt dieses Schlüsselwort die Vererbung. Im folgenden Beispiel hat das <body>-Element einen durchgezogenen roten Rand. Die Eigenschaft border wird standardmäßig nicht vererbt, aber wir können unserem div sagen, dass es denselben roten Rand wie das <body>-Element erben soll, indem wir das Schlüsselwort inherit für seine border-Eigenschaft verwenden.
unset
unset wird zu einem vererbten Wert aufgelöst, wenn eine Eigenschaft vererbt wird. Andernfalls wird der initial-Wert verwendet. Das bedeutet im Grunde, dass unset eine Eigenschaft zurücksetzt, je nachdem, ob sie vererbt wird oder nicht. Hier ist eine Demo, die unset umschaltet, um seine Wirkung auf Elemente mit unterschiedlichen Spezifitätsebenen zu zeigen.
revert
Wenn keine CSS-Eigenschaften auf einem Element festgelegt sind, erhält es dann überhaupt Stile? Ja, das tut es. Es verwendet die Standardstile des Browsers.
Zum Beispiel ist der Anfangswert für die Eigenschaft display für span-Elemente inline, aber wir können ihn in unserem Stylesheet als block angeben. Verwenden Sie die Schaltfläche in der folgenden Demo, um revert für die Eigenschaften display und color des span-Elements umzuschalten.
Der Span wird ordnungsgemäß zu einem Inline-Element, aber warten Sie mal! Haben Sie bemerkt, dass die Farbe des Span zu einem grünen Farbton wird, anstatt zum schwarzen Standardwert des Browsers? Das liegt daran, dass revert Vererbung zulässt. Es geht so weit zurück wie der Standardwert des Browsers, um die Farbe festzulegen, aber da wir explizit eine grüne Farbe für das <body>-Element festgelegt haben, wird diese übernommen.
Berechnete Werte in DevTools finden
Hier beginnen wir über die berechneten Werte in DevTools zu sprechen. Genau wie bei den Standardwerten von Eigenschaften wird der berechnete Wert einer CSS-Eigenschaft durch die Definitionstabelle dieser Eigenschaft in den CSS-Spezifikationen bestimmt. So sieht das für die Eigenschaft height aus.
Nehmen wir an, wir verwenden relative Längen in unserem CSS, wie z. B. 10em, 70 % oder 5vw. Da diese „relativ“ zu etwas sind – Schriftgröße oder Viewport –, müssen sie zu einem Pixel-absoluten Wert aufgelöst werden. Zum Beispiel kann ein Element mit einer Breite von 10 % zu 100 Pixeln berechnet werden, wenn der Viewport 1000 Pixel breit ist, aber eine andere Zahl, wenn sich die Viewport-Breite ändert.
Diese Werte werden bei jeder DOM-Änderung in einem Prozess namens Berechnung von berechneten Stilen berechnet. Dadurch weiß der Browser, welche Stile auf jedes Seitenelement angewendet werden sollen.
Stilberechnungen erfolgen in mehreren Schritten, die verschiedene Werte umfassen. Diese sind in der Spezifikation CSS Cascading and Inheritance Level 4 dokumentiert und beeinflussen alle den endgültigen Wert, den wir im Computed-Tab sehen. Schauen wir uns das als Nächstes an.
Werte und wie sie verarbeitet werden
Die für den Stilberechnungsprozess definierten Werte umfassen den deklarierten Wert, den spezifizierten Wert, den kaskadierten Wert, den berechneten Wert, den verwendeten Wert und den tatsächlichen Wert. Wer hätte gedacht, dass es so viele gibt, oder?
Deklarierte Werte
Ein deklarierter Wert ist jede Eigenschaftsdeklaration, die auf ein Element angewendet wird. Ein Browser identifiziert diese Deklarationen anhand einiger Kriterien, darunter:
- Die Deklaration befindet sich in einem Stylesheet, das auf das aktuelle Dokument angewendet wird
- Es gab einen passenden Selektor in einer Stildeklaration
- Die Stildeklaration enthält eine gültige Syntax (d. h. gültigen Eigenschaftsnamen und -wert)
Nehmen Sie das folgende HTML
<main>
<p>It's not denial. I'm just selective about the reality I accept.</p>
</main>Hier sind deklarierte Werte, die für die font-size des Textes gelten
main {
font-size: 1.2em; /* this would apply if the paragraph element wasn't targeted specifically, and even then, as an inherited value, not "declared value" */
}
main > p {
font-size: 1.5em; /* declared value */
}Kaskadierte Werte
Die Liste aller deklarierten Werte, die auf ein Element angewendet werden, werden anhand von Dingen wie diesen priorisiert, um einen einzelnen Wert zurückzugeben
- Ursprung der Deklaration (stammt sie vom Browser, vom Entwickler oder aus einer anderen Quelle?)
- Ob die Deklaration mit „!important“ markiert ist oder nicht
- Wie spezifisch eine Regel ist (z. B.
span {}vssection span {}) - Reihenfolge des Erscheinens (z. B. wenn mehrere Deklarationen gelten, wird die letzte verwendet)
Mit anderen Worten, der kaskadierte Wert ist die „gewinnende“ Deklaration. Und wenn die Kaskade nicht zu einem gewinnenden deklarierten Wert führt, nun, dann gibt es keinen kaskadierten Wert.
main > p {
font-size: 1.2em;
}
main > .product-description { /* the same paragraph targeted in the previous rule */
font-size: 1.2em; /* cascaded value based on both specificity and document order, ignoring all other considerations such as origin */
}Spezifizierte Werte
Wie bereits erwähnt, ist es möglich, dass die Ausgabe der Kaskade leer ist. Ein Wert muss jedoch immer noch auf andere Weise gefunden werden.
Nun, nehmen wir an, wir haben für eine bestimmte Eigenschaft auf einem Element keinen Wert deklariert, aber für das übergeordnete Element. Das tun wir oft absichtlich, weil es keinen Sinn macht, denselben Wert an mehreren Stellen festzulegen. In diesem Fall wird der vererbte Wert des übergeordneten Elements verwendet. Dies wird als spezifizierter Wert bezeichnet.
In vielen Fällen ist der kaskadierte Wert auch der spezifizierte Wert. Er kann jedoch auch ein vererbter Wert sein, wenn kein kaskadierter Wert vorhanden ist und die betreffende Eigenschaft vererbt wird, entweder standardmäßig oder mit dem Schlüsselwort inherit. Wenn die Eigenschaft nicht vererbt wird, dann ist der spezifizierte Wert der Anfangswert der Eigenschaft, der, wie bereits erwähnt, auch explizit mit dem Schlüsselwort initial festgelegt werden kann.
Zusammenfassend lässt sich sagen, dass der spezifizierte Wert der Wert ist, den wir für ein Element verwenden möchten, sei es explizit darauf deklariert oder nicht. Dies ist etwas unklar, da der Standardwert des Browsers auch der spezifizierte Wert werden kann, wenn im Stylesheet nichts deklariert wird.
/* Browser default = 16px */
main > p {
/* no declared value for font-size for the paragraph element and all its ancestors */
}Berechnete Werte
Zuvor haben wir kurz besprochen, wie relative Werte in ihre Pixel-absoluten Entsprechungen aufgelöst werden müssen. Dieser Prozess ist, wie bereits erwähnt, vordefiniert. Zum Beispiel haben Eigenschaftsdefinitionstabellen ein Feld „Computed value“, das beschreibt, wie spezifizierte Werte im Allgemeinen aufgelöst werden.
color.Im folgenden Beispiel arbeiten wir mit em, einer relativen Einheit. Hier ist der endgültige Wert, der bei der Darstellung des Elements, auf das die Eigenschaft angewendet wird, nicht eine feste Zahl, wie in unserem deklarierten Wert gesehen, sondern etwas, das auf mehreren Faktoren berechnet werden muss.
main {
font-size: 1.2em;
}
main > p {
font-size: 1.5em; /* declared value */
}Die font-size des Absatz-Elements ist auf 1,5em gesetzt, was sich auf den font-size-Wert des main-Elements (1,2em) bezieht. Wenn main ein direktes Kind des body-Elements ist – und keine zusätzlichen font-size-Deklarationen darüber gemacht werden, z. B. durch Verwendung des :root-Selektors –, können wir davon ausgehen, dass die Berechnung für die font-size des Absatzes ungefähr so abläuft:
Browser_Default_FontSize = 16px;
Calculated_FontSize_For_Main = 1.2 * Browser_Default_FontSize; // 19.2px
Calculated_FontSize_For_Paragraph = 1.5 * Calculated_FontSize_For_Main; // 28.8pxDiese 28,8px sind der berechnete Wert. Hier ist eine Demo
Öffnen Sie DevTools und schauen Sie sich die berechneten Schriftgrößen im Computed-Tab an.
font-size für das main-Element beträgt 1,2em, was 19,2px ergibt.
font-size für das Absatz-Element beträgt 1,5em, was 28,8px ergibt.Nehmen wir an, wir verwenden stattdessen rem-Einheiten
html {
font-size: 1.2em;
}
main {
font-size: 1.5rem;
}
div {
font-size: 1.7rem;
}Der berechnete Wert einer rem-Einheit basiert auf der font-size des Root-HTML-Elements. Das bedeutet, dass sich die Berechnung ein wenig ändert. In diesem speziellen Fall verwenden wir auch eine relative Einheit für das HTML-Element, sodass der Standardwert der font-size des Browsers verwendet wird, um die Basis-font-size zu berechnen, die wir zur Auflösung aller unserer rem-Werte verwenden werden.
Browser_Default_FontSize = 16px
Root_FontSize = 1.2 * Browser_Default_FontSize; // 19.2px
Calculated_FontSize_For_Main = 1.5 * Root_FontSize; // 28.8px
Calculated_FontSize_For_Div = 1.7 * Root_FontSize; // 32.64pxÖffnen Sie für diese Demo erneut DevTools
Der Wert 16px für Browser_Default_FontSize wird häufig von Browsern verwendet, aber dies unterliegt Schwankungen. Um Ihre aktuelle Standardeinstellung zu sehen, wählen Sie das <html>-Element in DevTools aus und schauen Sie sich die dafür angezeigte font-size an. Beachten Sie, dass, wenn ein Wert für das Root-Element explizit festgelegt wurde, wie in unserem Beispiel, Sie ihn möglicherweise im Rules-Tab deaktivieren müssen. Schalten Sie dann das Kontrollkästchen „Show all“ oder „Browser styles“ (Firefox) im Computed-Tab ein, um den Standardwert anzuzeigen.
Während der Vererbung werden berechnete Werte von den übergeordneten Elementen an die Kindelemente weitergegeben. Der Berechnungsprozess hierfür berücksichtigt die vier Vererbungskontrollschlüsselwörter, die wir zuvor betrachtet haben. Im Allgemeinen werden relative Werte absolut (d. h. 1rem wird zu 16px). Hier werden auch relative URLs zu absoluten Pfaden, und Schlüsselwörter wie bolder (Wert für die Eigenschaft font-weight) werden aufgelöst. Weitere Beispiele hierfür finden Sie in den Dokumenten.
Verwendete Werte
Der verwendete Wert ist das Endergebnis, nachdem alle Berechnungen auf dem berechneten Wert durchgeführt wurden. Hier werden alle relativen Werte in absolute umgewandelt. Dieser verwendete Wert wird bei der Seitenlayoutberechnung angewendet (vorläufig). Sie fragen sich vielleicht, warum weitere Berechnungen erforderlich sind. Wurde nicht alles im vorherigen Schritt erledigt, als spezifizierte Werte zu berechneten Werten verarbeitet wurden?
Hier ist der Punkt: Einige relative Werte werden erst an diesem Punkt in Pixel-Absolutwerte umgewandelt. Zum Beispiel benötigt eine prozentual spezifizierte Breite möglicherweise das Seitenlayout, um aufgelöst zu werden. In vielen Fällen ist der berechnete Wert jedoch auch der verwendete Wert.
Beachten Sie, dass es Fälle gibt, in denen ein verwendeter Wert möglicherweise nicht existiert. Laut der Spezifikation CSS Cascading and Inheritance Level 4
…wenn eine Eigenschaft nicht auf ein Element angewendet wird, hat sie keinen verwendeten Wert; so hat beispielsweise die Eigenschaft
flexkeinen verwendeten Wert auf Elementen, die keine Flex-Items sind.
Tatsächliche Werte
Manchmal kann ein Browser den verwendeten Wert nicht sofort anwenden und muss Anpassungen vornehmen. Dieser angepasste Wert wird als tatsächlicher Wert bezeichnet. Denken Sie an Fälle, in denen eine Schriftgröße basierend auf verfügbaren Schriftarten angepasst werden muss, oder wenn der Browser beim Rendern nur ganzzahlige Werte verwenden kann und nicht-ganzzahlige Werte annähern muss.
Vererbung bei Browser-Stilberechnungen
Zur Erinnerung: Vererbung steuert, welcher Wert auf ein Element für eine Eigenschaft angewendet wird, die nicht explizit festgelegt ist. Für vererbte Eigenschaften wird dieser Wert von dem übernommen, was beim übergeordneten Element berechnet wird, und für nicht vererbte Eigenschaften wird der Anfangswert für diese Eigenschaft festgelegt (der verwendete Wert, wenn das Schlüsselwort initial angegeben ist).
Wir haben zuvor über die Existenz eines „berechneten Wertes“ gesprochen, aber wir müssen etwas klären. Wir haben berechnete Werte im Sinne eines Wertetyps besprochen, der am Stilauflösungsprozess teilnimmt, aber „berechneter Wert“ ist auch ein allgemeiner Begriff für Werte, die der Browser für die Seitenformatierung berechnet. Sie werden normalerweise anhand des umgebenden Kontexts verstehen, welche Art wir meinen.
Nur berechnete Werte sind für eine vererbte Eigenschaft zugänglich. Ein Pixel-absoluter Wert wie 477px, eine Zahl wie 3 oder ein Wert wie left (z. B. text-align: left) ist für den Vererbungsprozess bereit. Ein Prozentwert wie 85 % ist dies nicht. Wenn wir relative Werte für Eigenschaften angeben, muss ein endgültiger (d. h. „verwendeter“) Wert berechnet werden. Prozentwerte oder andere relative Werte werden mit einer Referenzgröße (z. B. font-size) oder einem Wert (z. B. der Breite Ihres Geräte-Viewports) multipliziert. Der endgültige Wert einer Eigenschaft kann also gerade das sein, was deklariert wurde, oder er muss zur Verwendung weiterverarbeitet werden.
Sie haben es vielleicht schon bemerkt oder auch nicht, aber die Werte, die im Computed-Tab des Browsers angezeigt werden, sind nicht unbedingt die berechneten Werte, die wir zuvor besprochen haben (wie in „berechnet vs. spezifiziert oder verwendete Werte“). Vielmehr sind die angezeigten Werte dieselben wie die, die von der Funktion getComputedStyle() zurückgegeben werden. Diese Funktion gibt einen Wert zurück, der je nach Eigenschaft entweder der berechnete Wert oder der verwendete Wert ist.
Nun sehen wir einige Beispiele.
Farbvererbung
main {
color: blue;
}
/* The color will inherit anyway, but we can be explicit too: */
main > p {
color: inherit;
}Der für die Eigenschaft color auf dem main-Element berechnete Wert ist blau. Da color standardmäßig vererbt wird, brauchten wir color: inherit für das Absatz-Kindelement nicht wirklich, da es sowieso blau wäre. Aber es hilft, den Punkt zu veranschaulichen.
Farbwerte durchlaufen ihren eigenen Auflösungsprozess, um zu verwendeten Werten zu werden.
Schriftgrößenvererbung
main {
font-size: 1.2em;
}
main > p {
/* No styles specified */
}Wie wir bereits im Abschnitt über Werte und deren Verarbeitung gesehen haben, wird unser relativer Wert für font-size in einen absoluten Wert berechnet und dann vom Absatz-Element geerbt, auch wenn wir ihn nicht explizit deklarieren (auch hier wird font-size standardmäßig vererbt). Wenn wir zuvor Stile über einen globalen Absatz-Element-Selektor gesetzt hätten, würde der Absatz aufgrund der Kaskade zusätzliche Stile erhalten. Alle Eigenschaftswerte, die möglicherweise vererbt werden, werden dies tun, und einige Eigenschaften, für die die Kaskade und Vererbung keinen Wert ergeben haben, werden auf ihren Anfangswert gesetzt.
Prozentual spezifizierte Schriftgrößenvererbung
body {
font-size: 18px;
}
main {
font-size: 80%;
}
main > p {
/* No styles specified */
}Ähnlich wie im vorherigen Beispiel wird die font-size des <main>-Elements zur Vorbereitung der Vererbung absolviert, und der Absatz erbt eine font-size von 80 % des 18px-Wertes des Body, also 14,4px.
Erzwungene Vererbung und Nach-Layout-Berechnung
Berechnete Werte lösen den spezifizierten Wert im Allgemeinen so weit wie möglich ohne Layout auf, aber wie bereits erwähnt, können einige Werte erst nach dem Layout aufgelöst werden, z. B. prozentual spezifizierte width-Werte. Obwohl width keine vererbbare Eigenschaft ist, können wir die Vererbung erzwingen, um die Stilauflösung vor und nach dem Layout zu demonstrieren.
Dies ist ein konstruiertes Beispiel, aber wir nehmen ein Element aus dem Seitenlayout, indem wir seine display-Eigenschaft auf none setzen. Wir haben zwei divs in unserem Markup, die eine width von 50 % von ihrem übergeordneten Element <section> erben. Im Computed-Tab in DevTools ist die berechnete width für den ersten div absolut und wurde auf einen Pixelwert (bei mir 243,75 Pixel) aufgelöst. Auf der anderen Seite hat die Breite des zweiten div, das mit display: none aus dem Layout genommen wurde, immer noch 50 %.
Wir stellen uns vor, dass der spezifizierte und berechnete Wert für das übergeordnete <section>-Element 50 % (vor dem Layout) und der verwendete Wert wie im Computed-Tab gezeigt ist – bei mir 487,5 Pixel nach dem Layout. Dieser Wert wird für die Vererbung durch die Kind-Divs halbiert (50 % des enthaltenden Blocks).
Diese Werte müssen immer dann berechnet werden, wenn sich die Breite des Browser-Viewports ändert. Prozentual spezifizierte Werte werden also zu prozentual berechneten Werten, die zu Pixel-verwendeten Werten werden.
Eigenschaften, die standardmäßig vererbt werden
Woher weiß man, ob eine Eigenschaft standardmäßig vererbt wird oder nicht? Für jede CSS-Eigenschaft in den MDN-Dokumenten gibt es einen Spezifikationsabschnitt, der zusätzliche Details enthält, einschließlich der Angabe, ob die Eigenschaft vererbt wird oder nicht. So sieht das für die color-Eigenschaft aus.
color.Welche Eigenschaften standardmäßig vererbt werden und welche nicht, ist größtenteils gesunder Menschenverstand.
MDN
Eine weitere Referenzmöglichkeit ist der Abschnitt „Properties“ der W3C-Spezifikationen. Noch eine ist dieser StackOverflow-Thread, der zum Zeitpunkt des Schreibens möglicherweise nicht vollständig ist.
Hier sind einige Beispiele für Eigenschaften, die standardmäßig vererbt werden
colordirectionfont-familyfont-sizefontletter-spacingline-heightlist-style-typetab-sizetext-aligntext-justifytext-transformvisibilityword-wrap
Beispiele für Eigenschaften, die dies nicht tun (aber die Sie mit dem Schlüsselwort inherit dazu zwingen können, zu vererben)
Hoffentlich gibt Ihnen dies eine solide Vorstellung davon, wie Browser Stile berechnen und wie Sie sie in DevTools nachschlagen können. Wie Sie sehen können, steckt hinter einem Wert vieles, was im Hintergrund geschieht. Dieser Kontext hilft Ihnen bei der Fehlerbehebung Ihrer Arbeit und vertieft Ihr allgemeines Verständnis der wunderbaren Sprache, die wir als CSS kennen.
Weiterführende Literatur
- Die Werte inherit, initial und unset von QuirksMode.org
- CSS-Vererbung: Eine Einführung von Asha Laxmi
- CSS-Vererbung, Kaskade und globaler Geltungsbereich: Deine neuen alten besten Freunde von Heydon Pickering
- Die neuesten Wege, um mit Kaskade, Vererbung und Spezifität umzugehen von Ollie Williams
- Kaskade und Vererbung von MDN
- Vererbung von MDN
- Kaskade von MDN
- CSS Cascading and Inheritance Level 4 (W3C-Spezifikation)
- Render-Baum-Konstruktion, Layout und Paint von Ilya Grigorik
- Window.getComputedStyle() von MDN
- URL zu Interaktiv von Aaron Gustafson
Was für ein großartiger Artikel! Sie haben viel Mühe in die Recherche und das Schreiben gesteckt, und das merkt man. Dies ist ein hervorragendes Referenzwerk, um sich mit CSS-Kaskaden und Standardwerten vertraut zu machen.
Hallo Jon,
Vielen Dank für Ihre freundlichen Worte! Es freut mich, dass Sie ihn nützlich fanden. Es hat Spaß gemacht, das zu schreiben, und das Team von CSS-Tricks hat es viel besser gemacht, als ich es allein gekonnt hätte.
Erstaunlich!!!!!
Das ist wirklich gut. Viel Wissen gewonnen.
Danke! Es freut mich, dass Sie ihn nützlich fanden.
Toller Artikel! Vielen Dank!
Ich frage mich nur, was „prozentuale berechnete Werte“ sind und wie sie sich von „prozentualen angegebenen Werten“ unterscheiden. Nochmals vielen Dank.
Hallo Ying! Danke! Freut mich, dass Sie den Artikel nützlich fanden.
Zu Ihrer Frage: prozentuale berechnete und prozentuale angegebene Werte sind einfach angegebene oder berechnete Werte mit der Prozentangabe. Zum Beispiel „20 %“.
Die Begriffe „berechnet“ und „angegeben“ haben die gleiche Bedeutung wie im Abschnitt über den Prozess der Stilberechnung (Werte und deren Verarbeitung) erläutert.