Question

我正在研究支持和不支持的自定义和自定义CSS方法，这些方法可以在sharepoint在线用于品牌推广，但由于微软的混乱和含糊不清的文章，很难澄清。

我正在研究如何通过备用CSS在发布网站中应用自定义CSS并查看本文：

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

在本文中，有一点是＆＃34;一般原则＆＃34; ，这一点含糊不清，并没有详细说明。

一般原则

在SharePoint Online环境中标记门户时，应考虑以下一般原则：

SharePoint Online服务不断改进。为服务提供的更新可能会影响开箱即用页面的DOM结构，以及开箱即用文件（例如，母版页）的内容。开发人员必须牢记这一点，不应依赖不受支持的自定义方法（例如，页面DOM结构中特定元素的位置）。

在上面提到：开发人员必须牢记这一点，不应该依赖不受支持的自定义方法（例如，页面DOM结构中特定元素的位置）。 - 这到底意味着什么？这是否适用于仅在少数Web部件页面上通过备用CSS URL应用的自定义CSS，而CSS仅适用于Web部件区域和OOTB Web部件。

有人可以澄清一下吗？我需要专家意见。上述语句仅适用于Office 365 bar DOM及其OOTB Web部件页面的CSS或DOM吗？如果是这样呢？有人可以举个例子吗？我编写了自定义CSS并通过备用CSS网址应用，它主要改变了Web部件区域的外观和OOTB列表查看其中的Web部件（如颜色，宽度，更大的字体等）

Answer 1

我并不认为这与SharePoint有关，甚至与外部CSS样式表的使用有关。让我们分解语言一秒钟：

＆＃34;开发人员[...]不应该依赖于页面DOM结构中特定元素的位置＆＃34;

我相信Microsoft指的是使用CSS（甚至是JavaScript）来基于DOM结构而不是元素ID或类来定位元素。考虑p + div（针对任何立即进行<div>元素的<p>元素。

在这种情况下，它有效：

＆＃13;

p + div {
  color: red;
}

＆＃13;

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

＆＃13;

在这种情况下，它不会：

＆＃13;

p + div {
  color: red;
}

＆＃13;

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

＆＃13;

我所做的就是移动#div元素在DOM中的位置，突然我的选择器不再有效。我相信这是微软暗指的危险。

因此，它会更加安全。使用#到 select the ID 来定位所需元素直接：

＆＃13;

#div {
  color: red;
}

＆＃13;

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

＆＃13;

显然，有些情况下您不会拥有元素的ID，但您可以依赖 class selectors ， attribute selectors ，甚至 type selectors 。使用 specificity ，并适应，以尽可能避免上下文。

希望这有帮助！：）

自定义CSS和Sharepoint在线

1 个答案: