Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It only takes a minute to sign up.
Sign up to join this community
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?
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:
VS using the apex:slds Tag
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.
<apex:slds> though versus using the lightningstylesheet attribute on your <apex:page>? It seems like you are comparing the former to uploading your own resource, rather than the new page attribute.
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:
<apex:page>With the lightningStylesheets attribute on the <apex:page> tag:
<apex:page>, but no additional tagsSeems 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.
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 :)
The lightningStylesheets attribute is a quick and simple way to update VF page styling to reflect Lightning.
Depending on your situation (i.e. you need to update the styling of a standard Button, etc.) you might require a more tailored approach, in which case you'd want to follow the Lightning Design System blueprint.
Specifics can be found in the Developer Guide here
