Custom CSS and Sharepoint online

Question

I was researching for supported and unsupported customization and custom CSS approaches that can be used in sharepoint online for branding, however due to microsoft's confusing and vague articles it is very hard to get clarification.

I was researching on applying custom CSS through alternate CSS in publishing site and looking into this article :

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

In this article there one point under "General Principles" , this point is ambiguous/vague and doesn't give clarification in detail.

General Principles

The following general principles should be considered when branding portals in an SharePoint Online environment:

The SharePoint Online service is constantly improving. Updates provisioned to the service may affect DOM structure of out of the box pages, and the content of out of the box files (for example, master pages). Developers must keep this in mind and should not rely on unsupported customization approaches (for example, position of specific element in DOM structure of the page).

In above point it mentions : Developers must keep this in mind and should not rely on unsupported customization approaches (for example, position of specific element in DOM structure of the page). -- What does this really mean ? Does this apply to Custom CSS applied through alternate CSS URL only on few web part pages and CSS only applies to web part zones and OOTB web parts within.

Can someone clarify this ? I need expert opinion. Does above statement only apply to Office 365 bar DOM and it's CSS or DOM of OOTB web part page ? If so then how ? Could someone please provide example ? I have written custom CSS and applied through alternate CSS url , it mostly changes appearance of web part zones and OOTB list view web parts within them (like color, width, bigger fonts etc)

Obsidian Age Obsidian Age · Accepted Answer · 2017-08-01T02:33:26

I don't think this relates to SharePoint specifically, or even the utilisation of an external CSS stylesheet. Let's break down the language for a second:

"Developers [...] should not rely on [...] position of specific element in DOM structure of the page"

It is my belief that Microsoft are referring to using CSS (or even JavaScript) to target elements based on the DOM structure, rather than element ID or class. Consider p + div (which targets any <div> element that immediately proceeds a <p> element).

In this situation, it works:

p + div {
  color: red;
}

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

In this situation, it does not:

p + div {
  color: red;
}

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

All I did was move the #div element's position in the DOM, and suddenly my selector no longer worked. I believe this is the danger that Microsoft is alluding to.

As such, it would be far 'safer' to target the desired element directly, with # to select the ID:

#div {
  color: red;
}

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

Obviously there will be situations where you won't have an ID for an element, though you can rely on class selectors, attribute selectors, or even type selectors. Work with specificity, and adapt to suit, aiming to avoid context as much as possible.

Hope this helps! :)

Custom CSS and Sharepoint online

1 Answers