在線定製CSS和Sharepoint

Question

我正在研究支持和不支持的自定義和自定義CSS方法，可用於在線共享點品牌，但由於微軟的混淆和模糊的文章很難得到澄清。

我是研究通過替代CSS的發佈網站應用自定義CSS和尋找到這篇文章：

https://msdn.microsoft.com/en-us/pnp_articles/portal-branding

在這篇文章中有在「通則」的一個點，這個點是模糊/模糊並沒有詳細說明。

通則

以下一般原則應該在SharePoint Online的環境品牌門戶網站時，應考慮：

在SharePoint在線服務正在不斷完善。爲服務提供的更新可能會影響開箱即用頁面的DOM結構以及開箱即用文件（例如母版頁）的內容。開發人員必須牢記這一點，不應該依賴不受支持的定製方法（例如，頁面DOM結構中特定元素的位置）。

上面提到：開發人員必須牢記這一點，不應該依賴不支持的自定義方法（例如，在頁面的DOM結構中特定元素的位置）。 - 這是什麼意思？這是否適用於僅在少數Web部件頁面上通過替代CSS URL應用的自定義CSS，而CSS僅適用於Web部件區域和其中的OOTB Web部件。

有人可以澄清這一點嗎？我需要專家意見。上述說明僅適用於Office 365欄DOM，它是OOTB Web部件頁的CSS還是DOM？如果是的話那怎麼樣？有人可以提供例子嗎？我已經編寫了自定義CSS並通過備用CSS url進行應用，它主要改變Web部件區域和OOTB列表視圖中的Web部件的外觀（如顏色，寬度，更大的字體等）

Answer 1

我不認爲這涉及到特別是SharePoint，或者甚至利用外部CSS樣式表。讓我們打破對第二語言：

「開發商[...]不應該依賴於[...]在頁面的DOM結構中的特定元素的位置」

這是我相信微軟指的是使用CSS（甚至JavaScript）來定位基於DOM結構的元素，而不是元素ID或類。考慮p + div（其目標爲任何<div>元素，其立即執行<p>元素）。

在這種情況下，它的工作原理：

p + div { 
 
    color: red; 
 
}

<p>Text</p> 
 
<div id="div">More text</div>

在這種情況下，它不會：

p + div { 
 
    color: red; 
 
}

<p>Text</p> 
 
<a>Link</a> 
 
<div id="div">More text</div>

所有我在DOM中移動#div元素的位置，突然間我的選擇器不再有效。我相信這是微軟暗指的危險。

因此，這將是迄今爲止 '更安全' 的目標所需的元素直接，與#到select the ID：

#div { 
 
    color: red; 
 
}

<p>Text</p> 
 
<a>Link</a> 
 
<div id="div">More text</div>

顯然會有情況下，您將不會有一個元素的ID，但您可以依靠class selectors，attribute selectors，或甚至type selectors。與specificity合作，並適應適合，旨在儘可能避免上下文。

希望這會有所幫助！ :)