Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

 

Используемое значение CSS свойство, которое используется, когда все вычисления уже выполнены, смотрите вычисленное значение.

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

Змечание:  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);

Результат

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., displayfont-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):

  • background-position
  • bottomleftrighttop
  • heightwidth
  • margin-bottommargin-leftmargin-rightmargin-top
  • min-heightmin-width
  • padding-bottompadding-leftpadding-rightpadding-top
  • text-indent

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

Specification Status Comment
CSS Level 2 (Revision 1)
Определение 'used value' в этой спецификации.
Рекомендация Initial definition
 

 

 

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

Метки документа и участники

Метки: 
Внесли вклад в эту страницу: mdnwebdocs-bot, Tuman
Обновлялась последний раз: mdnwebdocs-bot,