18

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?

Improve this question
0

4 Answers 4

Reset to default
9

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.

Improve this answer
6
  • Is that usage different between using <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.
    – Adrian Larson ♦
    Oct 13, 2017 at 2:39
  • Apex:slds does not require static resource upload, both seem to do the same job except that apex:slds has this scoping requirement with corner cases like no suport for apex:pageblock etc.. while lightningstylesheets affect the vf page components all over with no corner cases, i wanted to know what was the reasoning behind having 2 tags that do almost same job(or atleast i assume they do the same job)
    – Rao
    Oct 13, 2017 at 2:49
  • @Rao It's not two tags. It's one tag vs. one attribute. They did not introduce a new tag which does the same thing.
    – Adrian Larson ♦
    Oct 13, 2017 at 2:50
  • But dont they do the same thing apex:slds attribute and lightningstylesheet tag
    – Rao
    Oct 13, 2017 at 2:54
  • @glls my bad i pasted the wrong link first time i asked the question, please relook into the updated question
    – Rao
    Oct 13, 2017 at 3:06
6

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:

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.

Improve this answer
3
  • Point taken, once lightningstylesheet goes GA which would be the better option is what i am trying to understand
    – Rao
    Oct 13, 2017 at 2:57
  • 2
    @Rao It does not seem to have any clear advantages. If I can enable this feature I can dig deeper but have not been able to yet.
    – Adrian Larson ♦
    Oct 13, 2017 at 2:58
  • I am very intersted to hear your observations on this question
    – Rao
    Oct 13, 2017 at 3:02
3

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 :)

Improve this answer
0

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

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .