1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
|
---
title: Introducción a CSS en cascada
slug: Web/CSS/Cascade
translation_of: Web/CSS/Cascade
---
<div>{{CSSRef}}</div>
<div>La <strong>cascada</strong> es un algoritmo que define como combinar valores de propiedad originarios de diferentes fuentes. Este se encuentra en el núcleo de CSS, como enfatizafo por el nombre: <em>Hojas de Estilo en Cascada</em>. Este articulo explica que es cascada, el orden de las <span class="seoSummary">{{Glossary("CSS")}} </span><a href="/en-US/docs/Web/API/CSSStyleDeclaration">declaraciones</a> en cascada, y como esto te afecta, el desarrollador web.</div>
<h2 id="¿Cuáles_entidades_CSS_participan_en_la_cascada">¿Cuáles entidades CSS participan en la cascada?</h2>
<p>Solo las declaraciones CSS, es decir pares de propiedad/valor, participan en la cascada. Esto significa que las <a href="/es/docs/Web/CSS/At-rule">at-rules</a> que contienen entidades distintas de las declaraciones, como una regla <code>@font-face</code> que contiene <em>descriptores</em>, no participan en la cascada. En estos casos, solo la regla-at en su conjunto participa en la cascada: aquí, la <code>@font-face</code> identificada por su descriptor de familia de tipografías. Si se definen varias reglas <code>@font-face</code> con el mismo descriptor, solo se considera la <code>@font-face</code>, como conjunto, más adecuada. </p>
<p>Mientras que las declaraciones contenidas en la mayoría de las reglas-at -como aquellas en <code>@media</code>, <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">@document</span></font> o <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">@support</span></font> - participan en la cascada, las declaraciones contenidas en <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">@keyframes</span></font> no. Como con <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">@font-face</span></font>, solo la regla-at en su conjunto se selecciona a través del algoritmo en cascada.</p>
<p>Finalmente, debemos tener en cuenta que {{cssxref ("@ import")}} y {{cssxref ("@ charset")}} obedecen a algoritmos específicos y no se ven afectados por el algoritmo en cascada.</p>
<h2 id="Origin_of_CSS_declarations">Origin of CSS declarations</h2>
<p>The CSS cascade algorithm's job is to select CSS declarations in order to determine the correct values for CSS properties. CSS declarations originate from different origins: the <strong>{{anch("User-agent stylesheets")}}</strong>, the <strong>{{anch("Author stylesheets")}}</strong>, and the <strong>{{anch("User stylesheets")}}</strong>.</p>
<p>Though style sheets come from these different origins, they overlap in scope; to make this work, the cascade algorithm defines how they interact.</p>
<h3 id="User-agent_stylesheets">User-agent stylesheets</h3>
<p>The browser has a basic style sheet that gives a default style to any document. These style sheets are named <strong>user-agent stylesheets</strong>. Some browsers use actual style sheets for this purpose, while others simulate them in code, but the end result is the same.</p>
<p>Some browsers let users modify the user-agent stylesheet. Although some constraints on user-agent stylesheets are set by the HTML specification, browsers still have a lot of latitude: that means that significant differences exist from one browser to another. To simplify the development process, Web developers often use a CSS reset style sheet, forcing common properties values to a known state before beginning to make alterations to suit their specific needs.</p>
<h3 id="Author_stylesheets">Author stylesheets</h3>
<p><strong>Author stylesheets</strong> are the most common type of style sheet. These are style sheets that define styles as part of the design of a given web page or site. The author of the page defines the styles for the document using one or more stylesheets, which define the look and feel of the website — its theme.</p>
<h3 id="User_stylesheets">User stylesheets</h3>
<p>The user (or reader) of the web site can choose to override styles in many browsers using a custom <strong>user stylesheet</strong> designed to tailor the experience to the user's wishes.</p>
<h2 id="Cascading_order">Cascading order</h2>
<p>The cascading algorithm determines how to find the value to apply for each property for each document element.</p>
<ol>
<li>It first filters all the rules from the different sources to keep only the rules that apply to a given element. That means rules whose selector matches the given element and which are part of an appropriate media at-rule.</li>
<li>Then it sorts these rules according to their importance, that is, whether or not they are followed by <code>!important</code>, and by their origin. The cascade is in ascending order, which means that <code>!important</code> values from a user-defined style sheet have precedence over normal values originated from a user-agent style sheet:
<table class="standard-table">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">Origin</th>
<th scope="col">Importance</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>user agent</td>
<td>normal</td>
</tr>
<tr>
<td>2</td>
<td>user</td>
<td>normal</td>
</tr>
<tr>
<td>3</td>
<td>author</td>
<td>normal</td>
</tr>
<tr>
<td>4</td>
<td>animations</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>author</td>
<td><code>!important</code></td>
</tr>
<tr>
<td>6</td>
<td>user</td>
<td><code>!important</code></td>
</tr>
<tr>
<td>7</td>
<td>user agent</td>
<td><code>!important</code></td>
</tr>
<tr>
<td>8</td>
<td>transitions</td>
<td></td>
</tr>
</tbody>
</table>
</li>
<li>In case of equality, the <a href="/en-US/docs/Web/CSS/Specificity" title="/en-US/docs/Web/CSSSpecificity">specificity</a> of a value is considered to choose one or the other.</li>
</ol>
<h2 id="Resetting_styles">Resetting styles</h2>
<p>After your content has finished altering styles, it may find itself in a situation where it needs to restore them to a known state. This may happen in cases of animations, theme changes, and so forth. The CSS property {{cssxref("all")}} lets you quickly set (almost) everything in CSS back to a known state.</p>
<p><code>all</code> lets you opt to immediately restore all properties to any of their initial (default) state, the state inherited from the previous level of the cascade, a specific origin (the user-agent stylesheet, the author stylesheet, or the user stylesheet), or even to clear the values of the properties entirely.</p>
<h2 id="CSS_animations_and_the_cascade">CSS animations and the cascade</h2>
<p><a href="/en-US/docs/Web/CSSUsing_CSS_animations" title="/en-US/docs/Web/CSSUsing_CSS_animations">CSS animations</a>, using {{ cssxref("@keyframes")}} at-rules, define animations between states. Keyframes don't cascade, meaning that at any given time CSS takes values from only one single {{cssxref("@keyframes")}}, and never mixes multiple ones together.</p>
<p>When several keyframes are appropriate, it chooses the latest defined in the most important document, but never combined all together.</p>
<h2 id="Example">Example</h2>
<p>Let's look at an example involving multiple sources of CSS across the various origins; here we have a user agent style sheet, two author style sheets, a user stylesheet, and inline styles within the HTML:</p>
<p><strong>User-agent CSS:</strong></p>
<pre class="brush:css;">li { margin-left: 10px }</pre>
<p><strong class="brush:css;">Author CSS 1:</strong></p>
<pre class="brush:css;">li { margin-left: 0 } /* This is a reset */</pre>
<p><strong class="brush:css;">Author CSS 2:</strong></p>
<pre class="brush:css;">@media screen {
li { margin-left: 3px }
}
@media print {
li { margin-left: 1px }
}
</pre>
<p><strong class="brush:css;">User CSS:</strong></p>
<pre class="brush:css;">.specific { margin-left: 1em }</pre>
<p><strong>HTML:</strong></p>
<pre class="brush:html;"><ul>
<li class="specific">1<sup>st</sup></li>
<li>2<sup>nd</sup></li>
</ul>
</pre>
<p>In this case, declarations inside <code>li</code> and <code>.specific</code> rules should apply. No declaration is marked as <code>!important</code>, so the precedence order is author style sheets before user style sheets or user-agent stylesheet.</p>
<p>So three declarations are in competition:</p>
<pre class="brush:css;">margin-left: 0</pre>
<pre class="brush:css;">margin-left: 3px</pre>
<pre class="brush:css;">margin-left: 1px</pre>
<p>The last one is ignored (on a screen), and the first two have the same selector, hence the same specificity. Therefore, it is the last one that is then selected:</p>
<pre class="brush:css;">margin-left: 3px</pre>
<p>Note that the declaration defined in the user CSS, though having a greater specificity, is not chosen as the cascade algorithm is applied before the specificity algorithm.</p>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS4 Cascade")}}</td>
<td>{{Spec2("CSS4 Cascade")}}</td>
<td>Added the {{CSSxRef("revert")}} keyword, which allows rolling a property back a cascade level.</td>
</tr>
<tr>
<td>{{SpecName("CSS3 Cascade")}}</td>
<td>{{Spec2("CSS3 Cascade")}}</td>
<td>Removed the override cascade origin, as it was never used in a W3C standard.</td>
</tr>
<tr>
<td>{{SpecName("CSS2.1", "cascade.html", "the cascade")}}</td>
<td>{{Spec2("CSS2.1")}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName("CSS1", "#the-cascade", "the cascade")}}</td>
<td>{{Spec2("CSS1")}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">A very simple introduction to the CSS cascade</a></li>
<li>{{CSS_Key_Concepts}}</li>
</ul>
|
