From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/css/used_value/index.html | 132 +++++++++++++++++++++++++++++++++ 1 file changed, 132 insertions(+) create mode 100644 files/ru/web/css/used_value/index.html (limited to 'files/ru/web/css/used_value') diff --git a/files/ru/web/css/used_value/index.html b/files/ru/web/css/used_value/index.html new file mode 100644 index 0000000000..07cc2213ee --- /dev/null +++ b/files/ru/web/css/used_value/index.html @@ -0,0 +1,132 @@ +--- +title: Используемое значение +slug: Web/CSS/used_value +tags: + - CSS + - Reference +translation_of: Web/CSS/used_value +--- +
{{cssref}}
+ + + +
Используемое значение - CSS свойство, которое используется, когда все вычисления уже выполнены, смотрите вычисленное значение.
+ +
+

После того как {{glossary("user agent")}} закончил свои расчеты каждое свойство CSS имеет своё значение. Используемые значения  (например, {{cssxref("width")}}, {{cssxref("line-height")}}) в пикселях. Используемые значения сокращённых свойств (например, {{cssxref("background")}}) согласуются с теми из свойств компонентов  (например, {{cssxref("background-color")}} или {{cssxref("background-size")}}) и с {{cssxref("position")}} и {{cssxref("float")}}.

+ +
+

Змечание:  {{domxref("Window.getComputedStyle", "getComputedStyle()")}} DOM API возвращает решённое значение, которое может быть вычесленным значением или используемым значением, в зависимости от свойства.

+
+ +

Пример

+ +

Данный пример показывает вычисление и отображение значения width трёх элементов (обновление при изменении размера):

+ +

HTML

+ +
<div id="no-width">
+  <p>No explicit width.</p>
+  <p class="show-used-width">..</p>
+
+  <div id="width-50">
+    <p>Explicit width: 50%.</p>
+    <p class="show-used-width">..</p>
+
+    <div id="width-inherit">
+      <p>Explicit width: inherit.</p>
+      <p class="show-used-width">..</p>
+    </div>
+  </div>
+</div>
+ +

CSS

+ +
#no-width {
+  width: auto;
+}
+
+#width-50 {
+  width: 50%;
+}
+
+#width-inherit {
+  width: inherit;
+}
+
+/* Make results easier to see */
+div {
+  border: 1px solid red;
+  padding: 8px;
+}
+ +

JavaScript

+ +
function updateUsedWidth(id) {
+  var div = document.querySelector(`#${id}`);
+  var par = div.querySelector('.show-used-width');
+  var wid = window.getComputedStyle(div)["width"];
+  par.textContent = `Used width: ${wid}.`;
+}
+
+function updateAllUsedWidths() {
+  updateUsedWidth("no-width");
+  updateUsedWidth("width-50");
+  updateUsedWidth("width-inherit");
+}
+
+updateAllUsedWidths();
+window.addEventListener('resize', updateAllUsedWidths);
+ +

Результат

+ +

{{ EmbedLiveSample('Example', '80%', 372) }}

+ +

Difference from computed value

+ +

CSS 2.0 defined only computed value as the last step in a property's calculation. Then, CSS 2.1 introduced the distinct definition of used value. An element could then explicitly inherit a width/height of a parent, whose computed value is a percentage. For CSS properties that don't depend on layout (e.g., display, font-size, or line-height), the computed values and used values are the same. The following are the CSS 2.1 properties that do depend on layout, so they have a different computed value and used value: (taken from CSS 2.1 Changes: Specified, computed, and actual values):

+ + + +

Спецификация

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS2.1", "cascade.html#used-value", "used value")}}{{Spec2("CSS2.1")}}Initial definition
+ +
+
+ + + +
+
+
+ +

Смотреть так же:

+ + -- cgit v1.2.3-54-g00ecf