apex:slds vs lightningstylesheet option

What is the benefit of using <apex:slds> vs specifying the lightningstylesheet attribute on your <apex:page>?

These links talks about both but I don’t understand the difference

Does lightningstylesheet attribute deprecate or trump using the <apex:slds> tag after winter 18?

With both I see that I can inherit lightning style sheets in my page. Is one better than other (or) is there a marked difference between these options?

Answer

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.

Attribution
Source : Link , Question Author : Rao , Answer Author : glls

Leave a Comment