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
|
---
title: Propiedades y Valores Lógicos de CSS
slug: Web/CSS/CSS_Logical_Properties
tags:
- CSS
- Propiedades lógicas
- Referencia
- Valores lógicos
- Visión general
translation_of: Web/CSS/CSS_Logical_Properties
---
<div>{{CSSRef}}</div>
<p><strong>CSS Logical Properties</strong> (las propiedades lógicas en CSS) son un módulo de <a href="/en-US/docs/Web/CSS"><abbr title="Cascading Stylesheets">CSS</abbr></a> que introduce propiedades y valores lógicos, proporcionando la capacidad de controlar el diseño de forma lógica en vez de la asignación de dimensiones físicas de dirección y dimensión.</p>
<p>Este módulo también define propiedades y valores lógicos para propiedades previamente definidas en <abbr title="Cascading Stylesheets">CSS</abbr> 2.1. Las propiedades lógicas definen una equivalencia a sus propiedades físicas correspondientes. </p>
<h3 id="Dimensiones_de_bloque_y_en_línea">Dimensiones de bloque y en línea</h3>
<p>Las propiedades y valores lógicos usan los términos abstractos de bloque (<em>block)</em> y en línea (<em>inline)</em> para describir la dirección en la que fluyen. El sentido físico de estos términos depende del <a href="/en-US/docs/Web/CSS/CSS_Writing_Modes">modo de escritura</a>.</p>
<dl>
<dt><a id="block-dimension" name="block-dimension">Dimensión de bloque</a></dt>
<dd>Es la dimensión perpendicular al flujo del texto en línea, es decir, la dimensión vertical en un modo de escritura horizontal, y la dimensión horizontal en un modo de escritura vertical. Para el texto estándar en inglés, es la dimensión vertical.</dd>
<dt><a name="inline-dimension">Dimensión en línea</a></dt>
<dd>Es la dimensión paralela al flujo del texto en línea, es decir, la dimensión horizontal en un modo de escritura horizontal, y la dimensión vertical en un modo de escritura vertical. Para el texto estándar en inglés, es la dimensión horizontal.</dd>
</dl>
<h2 id="Referencia">Referencia</h2>
<h3 id="Propiedades_para_dimensionamiento">Propiedades para dimensionamiento</h3>
<div class="index">
<ul>
<li>{{CSSxRef("block-size")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("inline-size")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("max-block-size")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("max-inline-size")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("min-block-size")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("min-inline-size")}} {{Experimental_Inline}}</li>
</ul>
</div>
<h3 id="Propiedades_para_márgenes_bordes_y_relleno">Propiedades para márgenes, bordes y relleno</h3>
<div class="index">
<ul>
<li>{{CSSxRef("border-block")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("border-block-color")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("border-block-end")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("border-block-end-color")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("border-block-end-style")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("border-block-end-width")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("border-block-start")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("border-block-start-color")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("border-block-start-style")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("border-block-start-width")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("border-block-style")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("border-block-width")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("border-color")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} palabra clave)</span></li>
<li>{{CSSxRef("border-inline")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("border-inline-color")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("border-inline-end")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("border-inline-end-color")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("border-inline-end-style")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("border-inline-end-width")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("border-inline-start")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("border-inline-start-color")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("border-inline-start-style")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("border-inline-start-width")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("border-inline-style")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("border-inline-width")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("border-start-start-radius")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("border-start-end-radius")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("border-end-start-radius")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("border-end-end-radius")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("border-style")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} palabra clave)</span></li>
<li>{{CSSxRef("border-width")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} palabra clave)</span></li>
<li>{{CSSxRef("margin")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} palabra clave)</span></li>
<li>{{CSSxRef("margin-block")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("margin-block-end")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("margin-block-start")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("margin-inline")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("margin-inline-end")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("margin-inline-start")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("padding")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} palabra clave)</span></li>
<li>{{CSSxRef("padding-block")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("padding-block-end")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("padding-block-start")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("padding-inline")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("padding-inline-end")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("padding-inline-start")}} {{Experimental_Inline}}</li>
</ul>
</div>
<h3 id="Propiedades_para_flotantes_y_posicionamiento">Propiedades para flotantes y posicionamiento</h3>
<div class="index">
<ul>
<li>{{CSSxRef("clear")}} (<code style="white-space: nowrap;">inline-end</code> {{Experimental_Inline}} y <span style="white-space: nowrap;"><code>inline-start</code> {{Experimental_Inline}} palabras claves)</span></li>
<li>{{CSSxRef("float")}} (<code style="white-space: nowrap;">inline-end</code> {{Experimental_Inline}} y <span style="white-space: nowrap;"><code>inline-start</code> {{Experimental_Inline}} palabras claves)</span></li>
<li>{{CSSxRef("inset")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("inset-block")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("inset-block-end")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("inset-block-start")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("inset-inline")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("inset-inline-end")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("inset-inline-start")}} {{Experimental_Inline}}</li>
</ul>
</div>
<h3 id="Otras_propiedades">Otras propiedades</h3>
<div class="index">
<ul>
<li>{{CSSxRef("caption-side")}} (<code style="white-space: nowrap;">inline-end</code> {{Experimental_Inline}} y <span style="white-space: nowrap;"><code>inline-start</code> {{Experimental_Inline}} palabras claves)</span></li>
<li>{{CSSxRef("resize")}} {{Experimental_Inline}} (<code>block</code> {{Experimental_Inline}} y <span style="white-space: nowrap;"><code>inline</code> {{Experimental_Inline}} palabras claves)</span></li>
<li>{{CSSxRef("text-align")}} (<code>end</code> {{Experimental_Inline}} y <span style="white-space: nowrap;"><code>start</code> {{Experimental_Inline}} palabras claves)</span></li>
</ul>
</div>
<h3 id="Propiedades_obsoletas">Propiedades obsoletas</h3>
<div class="index">
<ul>
<li>{{CSSxRef("offset-block-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">(ahora {{CSSxRef("inset-block-end")}} {{Experimental_Inline}})</span></li>
<li>{{CSSxRef("offset-block-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">(ahora {{CSSxRef("inset-block-start")}} {{Experimental_Inline}})</span></li>
<li>{{CSSxRef("offset-inline-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">(ahora {{CSSxRef("inset-inline-end")}} {{Experimental_Inline}})</span></li>
<li>{{CSSxRef("offset-inline-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">(ahora {{CSSxRef("inset-inline-start")}} {{Experimental_Inline}})</span></li>
</ul>
</div>
<h2 id="Guías">Guías</h2>
<ul>
<li><a href="/en-US/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts">Conceptos básicos de propiedades y valores lógicos</a></li>
<li><a href="/en-US/docs/Web/CSS/CSS_Logical_Properties/Sizing">Propiedades Lógicas para dimensionamiento</a></li>
<li><a href="/en-US/docs/Web/CSS/CSS_Logical_Properties/Sizing">Propiedades Lógicas para márgenes, bordes y relleno</a></li>
<li><a href="/en-US/docs/Web/CSS/CSS_Logical_Properties/Sizing">Propiedades Lógicas para flotantes y posicionamiento</a></li>
</ul>
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Comentario</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS Logical Properties")}}</td>
<td>{{Spec2("CSS Logical Properties")}}</td>
<td>Definición inicial.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_en_los_Navegadores">Compatibilidad en los Navegadores</h2>
<p>En general:</p>
<ul>
<li>Firefox tiene soporte para las propiedades asignadas — donde hay una directa asignación desde la versión física a la versión lógica.</li>
<li>Chrome, desde la versión 69, tiene soporte para las propiedades asignadas.</li>
<li>Edge actualmente no tiene soporte.</li>
<li>Firefox 66 introduce soporte para dos valores abreviados.</li>
</ul>
<p>Mira la página de la propiedad en específico para tener una información más completa sobre su compatibilidad.</p>
|
