CSS - 添加任意未知屬性名稱是否合法？

我正在寫一個chrome擴展，它操作頁面的樣式表，並且希望在樣式表本身中存儲一些額外的信息。簡單地使用值創建'假'屬性並讀取它們（例如使用styleElem.sheet.cssRules）對我來說是合法的嗎？CSS - 添加任意未知屬性名稱是否合法？

也就是說，

.myclass { 
    background-color: yellow; 
    bogus-property: 10; 
}

thaks！

來源

2017-09-26 kofifus

您可以使用標註？ '/ *這將不會被評估* /'（編輯：抱歉，我沒有注意到你也試圖讀取它們，但我會保留這個以供任何人蔘考） – agm1984

如果你做了'.myClass {/ *好的* /}'。我注意到，當它空虛的身體變得瘋狂時，它總能平靜我的皮棉。 – agm1984

任意屬性不會破壞樣式表並阻止它們被讀取（規則將被刪除），但我不相信它們會被傳遞給JS中的任何樣式對象。否則有興趣看到！ –

通常使用自定義屬性會忽略並且無法從CSSStyleDeclaration讀取。

但只要你使用的是支持的瀏覽器，要知道，你可以使用前綴Custom Properties屬性名稱：用雙破折號--前綴，還意味着性能與var() CSS功能使用。

例如：

body { 
    --my-property:30px; 
}

要獲得通過JavaScript這個值，訪問包含樣式表的CSSStyleDeclaration並調用getPropertyValue()與全屬性名稱。

var style = document.styleSheets[0].rules[0].style; 
console.log(style.getPropertyValue('--my-property'));

注意，如果您使用的是外部鏈接的css文件，則需要具有財產上設置一個元素上使用window.getComputedStyle()。由於樣式聲明對於外部CSS不可讀。

var style = window.getComputedStyle(document.body); 
console.log(style.getPropertyValue('--my-property'));

演示

var style = document.styleSheets[0].rules[0].style; 
 

 
console.log(style.getPropertyValue('--custom-property')); 
 

 
console.log(style.getPropertyValue('--other-property'));

body { 
 
    --custom-property:30px; 
 
    --other-property:url('some.jpg'); 
 
    font-size:var(--custom-property); 
 
}

Custom properties should be printed in console log of supporting browsers

來源

2017-09-26 23:45:39

從CSS 3.0規範：https://www.w3.org/TR/css-syntax-3/#style-rules

宣言未知CSS屬性或者其值不匹配的屬性定義的語法是無效的，必須被忽略。樣式規則內容的有效性對樣式規則本身的有效性沒有影響。

因此，瀏覽器需要忽略它不理解的東西，但不會因爲它而拒絕周圍的屬性。

來源

2017-09-26 23:28:38 llama

thx！但'忽略'是什麼意思？顯然他們不能應用，但他們仍然可以閱讀？即像在約翰內斯2上面評論的前綴那樣？ – kofifus

@kofifus：該規範適用於正在讀取所有數據的解析器。只要您遵循有效的語法結構，它就會通過它讀取分號或關閉大括號。當您呈現的自定義值被分析並發現未知時，它將被簡單地傳遞。不知道有關檢索它。 – llama

（從評論移動）

你可以使用一個假的前綴 - 前綴由不理解他們的瀏覽器忽略。

像-webkit-justify-content作爲justify-content的webkit特定定義（通常是在標準在所有瀏覽器中均等實現之前創建的），可以構成一個前綴，如-mything-something這應該是被所有瀏覽器忽略，因爲它們都沒有「我的」引擎...

來源

2017-09-26 23:40:36 Johannes

CSS - 添加任意未知屬性名稱是否合法？

回答

相關問題