CSS value serialization

Khi nào và cách các giá trị được tuần tự hóa

Việc tuần tự hóa xảy ra bất cứ khi nào các giá trị thuộc tính CSS được đọc dưới dạng chuỗi thông qua các API JavaScript, chẳng hạn như:

• CSSStyleDeclaration.getPropertyValue()
• CSSStyleDeclaration.cssText
• Truy cập trực tiếp các thuộc tính trên đối tượng CSSStyleDeclaration (ví dụ, element.style.backgroundColor)

Các API khác nhau trả về đối tượng CSSStyleDeclaration ở các giai đoạn khác nhau của xử lý giá trị, nên hành vi tuần tự hóa cũng hơi khác nhau. Ví dụ, Window.getComputedStyle() và HTMLElement.style trả về giá trị đã giải quyết của thuộc tính, trong khi CSSStyleRule.style trả về gần như giá trị đã khai báo.

Mỗi kiểu giá trị CSS đều có một định dạng tuần tự hóa đi kèm do các đặc tả CSS định nghĩa. Một số quy tắc phổ biến gồm:

• Các từ khóa (như auto, block, none) được tuần tự hóa thành chữ thường hoàn toàn.
• <angle>: được tuần tự hóa thành một đơn vị góc nào đó, tùy bối cảnh (không được chỉ rõ). Với element.style và getComputedStyle(), đơn vị là deg.
• <color>:
  • Với màu sRGB (<named-color>, transparent, <system-color>, <hex-color>, rgb, hsl, hwb): được tuần tự hóa dưới dạng cú pháp cũ dùng dấu phẩy rgb(R, G, B) hoặc rgba(R, G, B, A), trong đó mọi đối số đều là số. Dạng rgb được chọn nếu alpha chính xác bằng 1.
  • Với màu lab(), lch(), oklab(), oklch(), và color(): giữ nguyên dạng hàm, với các đối số số.
  • Từ khóa currentColor được tuần tự hóa thành currentcolor.
• <percentage>: được giữ nguyên dưới dạng phần trăm.
• <ratio>: được tuần tự hóa thành hai số phân tách bằng " / ".
• <url>: được tuần tự hóa thành một <url> có dấu ngoặc kép (url("...")), với URL được phân giải thành URL tuyệt đối.

Cần lưu ý rằng giá trị <percentage> thường được chuyển thành các kích thước tuyệt đối (như <length>) trong quá trình xử lý giá trị, nên chúng có thể không còn xuất hiện dưới dạng phần trăm khi được tuần tự hóa từ style đã tính toán. Với các kích thước có đơn vị, như <frequency>, <length>, <resolution>, và <time>, đơn vị được tuần tự hóa phụ thuộc vào bối cảnh và không được đặc tả rõ ràng. getComputedStyle() và element.style tuần tự hóa chúng thành Hz, px, dppx, và s tương ứng.

Khi tuần tự hóa giá trị cho các thuộc tính viết tắt, các thuộc tính con của nó sẽ được tuần tự hóa và ghép lại theo quy tắc dành cho thuộc tính viết tắt đó.

<div>Example Element</div>

div {
  position: absolute; /* keyword */
  rotate: 1rad; /* <angle> */
  color: hsl(240 100% 50%); /* <color> */
  background-color: hsl(120 50% 50% / 0.3); /* <color> with alpha */
  border-color: lab(10 -120 -120); /* <color> in non-sRGB space */
  margin: 2em; /* relative <length> */
  padding: 2cm; /* absolute <length> */
  font-size: calc(1em + 2px); /* complex expression */
  left: 50%; /* <percentage> */
  animation-duration: 500ms; /* <time> */
}

const element = document.querySelector("div");
const table = document.createElement("table");
const elemStyle = getComputedStyle(element);
const ruleStyle = document.getElementById("css-output").sheet.cssRules[0].style;
const head = table.createTHead().insertRow();
["Property", "getComputedStyle()", "CSSStyleRule"].forEach((text) => {
  const th = document.createElement("th");
  th.textContent = text;
  head.appendChild(th);
});
for (const property of [
  "position",
  "rotate",
  "color",
  "background-color",
  "border-color",
  "margin",
  "padding",
  "font-size",
  "left",
  "animation-duration",
]) {
  const row = document.createElement("tr");
  const propCell = document.createElement("td");
  const valueCell = document.createElement("td");
  const ruleCell = document.createElement("td");
  propCell.textContent = property;
  valueCell.textContent = elemStyle.getPropertyValue(property);
  ruleCell.textContent = ruleStyle.getPropertyValue(property);
  row.appendChild(propCell);
  row.appendChild(valueCell);
  row.appendChild(ruleCell);
  table.appendChild(row);
}
document.body.appendChild(table);

Ví dụ

Tuần tự hóa giá trị màu

Màu là một trong những kiểu dữ liệu thường xuyên bị ảnh hưởng bởi tuần tự hóa. Dù bạn định nghĩa màu bằng hsl(), hwb(), một từ khóa, hay một không gian màu hiện đại, JavaScript thường trả về nó ở định dạng rgb() hoặc rgba() cũ.

Các ví dụ sau minh họa cách các định dạng màu khác nhau được tuần tự hóa khi truy cập qua JavaScript.

<div class="example hsl">HSL Color</div>
<div class="example lab">LAB Color</div>
<div class="example named">Named Color</div>
<div class="example alpha">Transparent Color</div>
<pre id="output"></pre>

.example {
  padding: 10px;
  margin: 5px;
  color: white;
}

.hsl {
  background-color: hsl(240 100% 50%);
}

.lab {
  background-color: lab(100% 0 0);
}

.named {
  background-color: blue;
}

.alpha {
  background-color: hsl(120 50% 50% / 0.3);
}

const examples = document.querySelectorAll(".example");
const output = document.getElementById("output");

examples.forEach((element) => {
  const style = getComputedStyle(element);
  output.textContent += `${element.className}: ${style.getPropertyValue("background-color")}\n`;
});

Tuần tự hóa giá trị độ dài

Độ dài là một trường hợp phổ biến khác. Các đơn vị tương đối (như em, %) thường được giải thành pixel tuyệt đối khi được tuần tự hóa qua các API JavaScript.

element.style.marginLeft = "2em";
console.log(getComputedStyle(element).marginLeft);
// "32px" (tùy thuộc vào kích thước phông chữ)

Việc chuẩn hóa này cho phép script so sánh hoặc tính toán độ dài một cách nhất quán.

Thông số kỹ thuật

Xem thêm

• CSSStyleDeclaration.getPropertyValue()
• Window.getComputedStyle()
• CSS colors
• <color>
• CSS values and units module