JSON sang CSS

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

Worklet 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);

Nếu bạn xem mã trước đó của lớp, bạn sẽ thấy điều này

Vì 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

Làm cách nào để nhập JSON trong tệp CSS?

JSON có sử dụng CSS không?

Tôi có thể chuyển đổi JSON sang HTML không?

Làm cách nào để tạo kiểu cho tệp JSON?