自定義CSS屬性，爲什麼不呢？

我曾希望CSS3會帶來JavaScript可讀的自定義CSS屬性，並影響元素的行爲。像jQuery UI之類的JavaScript庫通過JavaScript API傳遞樣式選項，就像ASP.NET控件例如它應該打擾有嚴重AOP的嚴重開發人員。爲什麼使用CSS自定義屬性不被認爲是有用的，例如「-ui-resizable-handles：e se;」或者以任何格式。 AOP是CSS的全部內容，不是嗎？自定義CSS屬性，爲什麼不呢？

來源

2011-06-08 user788364

「影響元素行爲」沒有。 – BoltClock 2011-06-08 04:59:08

有意詳細說明或指出來源？ – user788364 2011-06-08 17:22:28

也許不完全是你的意思，但確實可以節省很多時間，並提供更多的靈活性！

http://lesscss.org/

以內的動態行爲如變量，混入，操作和功能擴展CSS。 LESS運行在客戶端（IE 6+，Webkit，Firefox）和服務器端的上，帶有Node.js.

來源

2011-06-08 04:55:16

不是我正在尋找的，但有趣的是。我認爲這與ern0的建議是一致的，即爲了生成CSS具有更大的靈活性，但並沒有解決讓CSS提供超出其固定屬性集的樣式的問題。我經常認爲css僞類如下：徘徊在思考之後，在解決一個更大的問題時不斷努力。 IE的CSS「行爲」不是最好的實現，但可能有一點指向它，即CSS的可擴展性。 – user788364 2011-06-08 17:10:52

不回答問題。 – 2012-12-08 05:14:50

沒錯，好主意，但我認爲有創造增強CSS樣式表的更自然方式：生成與PHP（ASP，JSP等，無論您使用）CSS，在服務器端，只是在HTML的情況。那麼，這取決於你，從什麼來源獲得什麼CSS。

所有網頁都使用動態生成的HTML頁面（在AJAX之前，它是構建應用程序的唯一方式），但是使用靜態CSS樣式。爲什麼？

來源

2011-06-08 05:12:23 ern0

在確定會使生成動態CSS規則變得更容易之前，我有過這樣的想法。這裏提出的問題是不同的，我希望有一種方法來分隔關注點，例如JS（如jQuery插件）編碼器不需要在JS API中使用樣式命令，例如{height：「fill 「}。 – user788364 2011-06-08 17:20:52

我明白了。另外，服務器端生成的/ JS操縱的CSS是一個常見的「父」神話中的「孩子」：CSS是神聖且不可觸及的，它必須被編輯並存儲在最終的形式中......而我們有1000個模板用於服務器端HTML構建的引擎和用於客戶端HTML（DOM）操作的600 JS框架。 – ern0 2011-06-09 06:51:36

很多站點都會生成CSS。但是，這並沒有解決OP需要找到級聯自定義CSS屬性的方法。 – 2012-12-08 05:15:56

您可以借用一個現有的屬性，該屬性的值爲任意字符串。想到的是font-family,counter-reset和counter-increment或animation-name。使用counter-reset你可以做這樣的事情：

CSS

* {counter-reset: inherit;} /* by default, counter-reset does NOT inherit */

HTML

<div style="counter-reset: my-value; "> <!-- want to set value here --> 
    <p id="para">Some text.</p> <!-- and retrieve result of cascade here --> 
</div>

JS這裏

var p_styles = window.getComputedValue(document.getElementById("para"),null); 
var p_reset_value = p_styles.counterReset; 
var p_myvalue = p_reset_value.split(" ")[0]; /* computed value will be 'my-value 0' */

唯一可能的兼容性問題，因爲你是不太可能發生實際上在代碼中使用計數器是CSS規則的不必要的副作用。另請注意，該值必須符合"identifier"的CSS定義。如果用空格給出值，它將被解釋爲兩個不同的計數器，並且如果將其用引號括起來，則CSS值將被視爲無效。

使用-webkit-區域

如果你是真正的勇者，你也可以使用-webkit-locale。由於它繼承並接受單個字符串值，因此不需要上述大部分內容，包括CSS規則和JS將計算值分開，並消除了值爲CSS「identifer」的限制：

HTML

<div style="-webkit-locale: 'bar foo'; "> <!-- want to set value here --> 
    <p id="para">Some text.</p> <!-- and retrieve result of cascade here --> 
</div>

var style = window.getComputedValue(document.getElementById("para"),null); 
var prop = style.webkitLocale; // "bar foo"

希望在不久的將來，我們將有CSS層疊變量，這兩輪牛車將不再是必要的。

來源

2012-12-08 05:12:44

+1純粹是因爲我需要將一些功能轉入現有站點（儘可能少地改變），並且需要在圖像中存儲可點擊的url，但是需要在CSS中存儲。我使用了'font-family'，現在看到該網站的人可以更改圖片網址和點擊通過網址（如果他們有字體系列值，我只是創建了一個包含鏈接標籤的圖片腳本）。輝煌 - 謝謝:) – Archer 2014-01-06 15:24:13

自定義CSS屬性，爲什麼不呢？

回答

相關問題