Cascading Style Sheets [CSS] là một cơ chế đơn giản để thêm kiểu [e. g. phông chữ, màu sắc, khoảng cách] vào tài liệu Web. JSON [Ký hiệu đối tượng JavaScript] là một định dạng trao đổi dữ liệu nhẹ. CSS có thể dễ dàng được biểu thị bằng ký hiệu JSON [CSS JSON]. CSS JSON là một cách tiếp cận mạnh mẽ và linh hoạt cho phép kế thừa và cấu trúc logic trong CSS
CSS JSON Structure
{ "selector-1":{ "property-1":"value-1", "property-n":"value-n" } }
Chuyển đổi CSS JSON thành văn bản CSS bằng JavaScript
var cssjson = { "selector-1":{ "property-1":"value-1", "property-n":"value-n" } } var styleStr = ""; for[var i in cssjson]{ styleStr += i + " {\n" for[var j in cssjson[i]]{ styleStr += "\t" + j + ":" + cssjson[i][j] + ";\n" } styleStr += "}\n" }
Ví dụ trên trả về định dạng văn bản CSS sau
selector-1 { property-1:value-1; property-n:value-n; }
Mở rộng CSS bằng CSS JSON
Thuộc tính/giá trị của bộ chọn tùy chỉnh có thể được sử dụng trong CSS JSON như một cơ chế để mở rộng CSS. Có thể xử lý trước văn bản CSS thông qua ánh xạ của một thuộc tính được chỉ định tới quy trình phân tích cú pháp được thực thi có điều kiện
Kế thừa bộ chọn CSS với CSS JSON và JavaScript
Bộ chọn CSS có thể được kế thừa trong một bộ chọn khác bằng cách sử dụng CSS JSON
var cssjson = { ".copy-1":{ "font-family":"Verdana, Geneva, Arial, Helvetica, sans-serif", "font-size":"11px", "color":"#CCC" }, "div#container div#header":{ "CSSJSON-INHERIT-SELECTOR":".copy-1", "position":"absolute", "top":"12px", "left":"4px" } } var styleStr = ""; for[var i in cssjson]{ styleStr += i + " {\n" for[var j in cssjson[i]]{ if[j=="CSSJSON-INHERIT-SELECTOR"]{ for[var k in cssjson[cssjson[i][j]]]{ styleStr += "\t" + k + ":" + cssjson[cssjson[i][j]][k] + ";\n" } }else{ styleStr += "\t" + j + ":" + cssjson[i][j] + ";\n" } } styleStr += "}\n" }
Ví dụ trên trả về định dạng văn bản CSS sau
.copy-1 { font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:11px; color:#CCC; } div#container div#header { font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:11px; color:#CCC; position:absolute; top:12px; left:4px; }
CSS JSON sử dụng các ngôn ngữ xử lý khác
- perl - http. // naoya. g. thù hận. ne. jp
Triển khai CSS JSON
Các định dạng tuần tự hóa dữ liệu CSS thay thế
câu hỏi liên hệ
Vui lòng chuyển tiếp bất kỳ câu hỏi, nhận xét hoặc triển khai CSS JSON nào tới http. //các nhóm. Yahoo. com/nhóm/cssjson
Nếu bạn đang theo dõi cộng đồng JavaScript, chắc hẳn bạn đã biết về CSS trong JS. Đó là một cách để đặt CSS của bạn vào tệp JavaScript của bạn, thay vì tệp CSS riêng biệt. Giải pháp mà tôi đang trình bày trong bài viết này thì ngược lại, đó là một đối tượng JSON được đưa vào tệp CSS được phân tích cú pháp bằng JavaScript [bạn có thể đặt JS trong CSS nhưng tôi đã không kiểm tra nó]. Lý do tại sao chúng tôi làm điều này là để kiểm soát CSS dựa trên JavaScript, API là một phần của Houdini
Houdini là tập hợp các API mới được tạo cho một mục đích. Vì vậy, các nhà phát triển có thể kiểm soát cách hoạt động của công cụ CSS. Để kết nối các bộ phận bên trong của nó và làm cho nó hoạt động như họ muốn. Một số API đã được triển khai, một số được lên kế hoạch triển khai và một số vẫn đang trong quá trình thiết kế nên chúng có thể thay đổi. Bạn có thể xem trạng thái của Houdini trên trang web ishoudinireadyyet. com
Sơn WorkletWorklet này giống như một worker thông thường [các luồng riêng biệt chạy trong trình duyệt] nhưng nó cho phép đăng ký lớp “paint” có quyền truy cập vào API giống như canvas có thể được sử dụng bên trong CSS để hiển thị mọi thứ [e. g. sử dụng hình nền]
Để đăng ký worklet sơn, bạn thực hiện mã này
CSS.paintWorklet.addModule['plik.js'];
Bên trong tệp đó, bạn có thể tạo lớp đặc biệt như lớp bên dưới
class Circle {static get inputProperties[] {
return ['--pointer-x', '--pointer-y', '--pointer-options'];
}paint[context, geom, properties] {
var x = properties.get['--pointer-x'].value || 0;
var y = properties.get['--pointer-y'].value || 0;
const prop = properties.get['--pointer-options'];
// destructure object props with defaults
const {
background,
color,
width
} = Object.assign[{
color: 'white',
background: 'black',
width: 10
}, JSON.parse[prop.toString[]]];
// draw circle at point
context.fillStyle = color;
console.log[{x,y, color, background, width}]
context.beginPath[];
const r = Math.floor[width / 2];
context.arc[x, y, r, 0, 2 * Math.PI, false];
context.closePath[];
context.fill[];
}
}
sau đó bạn có thể đăng ký lớp này như paint
registerPaint['circle', Circle];
JSON trong CSSNếu bạn xem mã trước đó của lớp, bạn sẽ thấy điều này
________số 8Vì vậy, chúng tôi lấy dữ liệu thô từ CSS và phân tích cú pháp dưới dạng JSON. Trong CSS nó trông như thế này
div {
height: 100vh;
background-image: paint[circle];
--pointer-x: 20px;
--pointer-y: 10px;
--pointer-options: {
"color": "rebeccapurple",
"width": 20
};
}
Mỗi khi bạn thay đổi thuộc tính tùy chỉnh [thuộc tính có hai dấu gạch ngang ở phía trước, còn được gọi là biến CSS], nó sẽ hiển thị lại nền
GHI CHÚ. Lần trước tôi đã kiểm tra đoạn mã này, các biến CSS bắt buộc phải có dấu gạch ngang ở giữa, nếu không chúng sẽ không hoạt động với paint worklet