有沒有一種無痛的方式來製作一個「CSS沙盒」？

通過CSS沙箱我的意思是我的佈局中有一個完全獨立的外觀部分。我需要這個，因爲我的一些類需要在佈局中輸出一些「窗口」的內容，但我不希望應用程序的CSS混亂。他們主要是調試相關的，如打印var內容，基準圖或顯示一些錯誤/異常。有沒有一種無痛的方式來製作一個「CSS沙盒」？

到目前爲止，我正在做某種本地重置，但這真的很煩人，以避免碰撞，並可能失敗，如果我忘記了一些規則。例如：

html body div.eh-box { 
    margin: 0 !important; 
    padding: 0 !important; 
    border: 0 !important; 
    font-size: 100% !important; 
    vertical-align: baseline !important; 
    background-color: #fff !important; 
    font: 12px/12px 'Helvetica Neue', Helvetica, Arial, sans-serif !important; 
    margin-bottom: 20px !important; 
} 

html body div.eh-box * { 
    margin: 0 !important; 
    padding: 0 !important; 
    border: 0 !important; 
    font-size: 100% !important; 
    font: inherit !important; 
    vertical-align: baseline !important; 
    color: #333 !important; 
} 

html body div.eh-box .title { 
    font-size: 50px !important; 
    line-height: 75px !important; 
    /*font-weight: bold !important;*/ 
} 

html body div.eh-box .desc { 
    font-size: 24px !important; 
    line-height: 36px !important; 
}

來源

2013-04-18 hugo_leonardo

創建它自己的'div'？ – Kermit

如果應用程序對任何標籤進行了樣式設置（例如，認爲是twitter引導程序），那麼簡單的'div'也不會保護我的內容不被樣式化。 –

@hugo_leonardo：你爲什麼不製作iframe？您也可以使用本地CSS重置，但這不會阻止'！important'屬性泄漏。 – Blender

您可以使用ID創建容器元素，然後重置其規則（確保該部分最後加載）。您可能遇到的唯一問題是!important規則，但您也可以在復位部分使用這些規則（不是真正推薦的做法，但它會起作用）。

此外，根據您網站的結構，您可能需要儘可能具體地調用您的容器元素，例如body #top_element #another_top_element #container以賦予它更高的優先級，但在大多數情況下，這不是必需的。

來源

2013-04-18 02:14:45 Shomz

'！important '對於也使用'！important'且具有更高特異性的CSS規則將無濟於事。但是另外爲容器使用'id'屬性並使用相應的id選擇器作爲所有選擇器的一部分使得沙箱幾乎是安全的。 –

@ JukkaK.Korpela Yup，這就是我在第二段中試圖說的。 – Shomz

這是什麼我在做...也許如果我使用'*'選擇器我可以緩解進程？用class而不是id的特定規則也是安全的？因爲某些結構不止一次顯示 –

我不很瞭解，但我認爲是或多或少什麼Shadow DOM確實

來源

2013-04-18 14:27:35

哇！這非常整齊！如果只是它不是那麼新，實驗/不報道。我可能無法使用它，但無論如何，這是非常棒的。謝謝（： –

另一種可能的解決方案 - 這取決於你的應用程序，是加載該佈局部分在iframe - 這樣的一個完全獨立的文件受制於一組獨立的風格。不知道是否需要提及使用框架有一定的缺點。

來源

2013-04-18 15:12:16

）缺點不會是一個問題，因爲它只是用於調試，但是這在評論中已經討論過了，似乎只有chrome和safari支持iframe中的內聯標記（使用'srcdoc'屬性）。 't幫助不大...... –

oops，沒有閱讀評論，但我不確定我是否理解了內聯標記的內容，如果我這樣做了，我會更改iframe中的頁面。它會根據GET參數在查詢字符串中顯示內容，然後當你想更新幀的內容iframe.html？error = display + this + error + text' –

但你可能更好的時候，你可以改變幀的src。問題是爲什麼你不能將大部分調試信息移動到控制檯？關於圖形的IDK ...但是也可以使用Canvas進行調試？ –

有沒有一種無痛的方式來製作一個「CSS沙盒」？

回答

相關問題