apex:slds vs lightningstylesheet option

Based on currently published information, it seems like mostly personal preference. Functionally, they are stated to achieve the same goal, namely including the most recent SLDS Stylesheet.

The currently known differences:

With the <apex:slds /> tag:

  • Earliest API Version available is 39.0
  • Requires you to add a tag inside your <apex:page>

With the lightningStylesheets attribute on the <apex:page> tag:

  • Earliest API Version tested is 39.0
  • Requires an attribute on your <apex:page>, but no additional tags

Seems like there could be some impact on Viewstate but I can't add this attribute in any of my orgs currently to test that hypothesis.


When using <apex:slds /> you are always receiving the latest version of CSS from SLDS while using the lightningStylesheets="true" does not add the SLDS stylesheets to the page, but instead changes the standard stylesheets from Visualforce to "look" like SLDS.

when using lightningStylesheets="true", Observing the network tab traffic, we clearly see that SLDS is not loaded, but instead a mock slds:

enter image description here VS using the apex:slds Tag enter image description here

Style Existing Visualforce Pages with Lightning Experience Stylesheets

Some components differ slightly in style from Lightning Experience. For example, <apex:selectOptions>, <apex:selectRadio>, <apex:inputFile>, and some elements use the browser’s default styling instead.

Most importantly:

To include SLDS components that aren’t part of the Visualforce component library, you can use the <apex:slds /> tag with custom SLDS code in addition to the lightningStylesheets attribute. ThelightningStylesheets attribute doesn’t affect custom styling, so custom code and must be updated to match the page’s SLDS styling.

So,

lightningStylesheets="true" does not deprecate apex:slds

they can even co-exist together in the same page.

The link above contains the list of Visualforce components that support the lightningStylesheets attribute or don’t require styling.


Use lightningStylesheets="true" to automatically style Visualforce/Apex markup to look like Lightning. It was created explicitly to retrofit legacy Visualforce markup with Lightning styling.

If you are using Lightning Design System markup in your page, add <apex:slds>

Ideally, if you are mixing Visualforce with SLDS markup, be sure to acutely wrap your areas of SLDS markup with <div class="slds-scope"> as adding the slds-scope class to a root element of a mixed Visualforce/SLDS markup page could cause styling side effects.

As the lead author of the CSS for LightningStylesheets, hopefully this clarifies the confusion :)

Tags:

Visualforce

Slds

Recent Posts