Visualforce Developer Guide

Introducing Visualforce
Tools for Visualforce Development
Getting a Quick Start with Visualforce
Customizing the Appearance and Output of Visualforce Pages
Styling Visualforce Pages
Using Salesforce Styles
Extending Salesforce Styles with Stylesheets
Using the Lightning Design System
Style Existing Visualforce Pages with Lightning Experience Stylesheets
Using Custom Styles
Suppressing the Salesforce User Interface and Styles
Defining Styles for a Component’s DOM ID
Using Styles from Salesforce Stylesheets
Identifying the Salesforce Style Your Users See
Determining the Salesforce Style That Users See in JavaScript
HTML Comments and IE Conditional Comments
HTML Tags Added or Modified by Visualforce
Using a Custom Doctype
Using a Custom ContentType
Setting Custom HTML Attributes on Visualforce Components
Offline Caching Using the HTML5 manifest Attribute
Render a Visualforce Page as a PDF File
Standard Controllers
Standard List Controllers
Custom Controllers and Controller Extensions
Live Controller (Pilot)
Advanced Examples
Overriding Buttons, Links, and Tabs with Visualforce
Using Static Resources
Creating and Using Custom Components
Dynamic Visualforce Bindings
Dynamic Visualforce Components
Integrating Email with Visualforce
Visualforce Charting
Creating Maps with Visualforce
Render Flows with Visualforce
Templating with Visualforce
Developing Salesforce Apps with Visualforce
Adding Visualforce to a Salesforce AppExchange App
Using JavaScript in Visualforce Pages
Communicating Across the DOM with Lightning Message Service
Best Practices
Standard Component Reference
Appendices
Glossary
PDF

Newer Version Available

This content describes an older version of this product. View Latest

Using the Lightning Design System

Use the <apex:slds> element to incorporate the Lightning Design System in your Visualforce pages and align them with the styling of Lightning Experience. This component is a streamlined alternative to uploading the Lightning Design System as a static resource and using it in your Visualforce pages.

You don’t have to upload the Lightning Design System as a static resource. That means you can keep the syntax of your page simple and stay under the 250-MB static resource limit. To use Lightning Design System stylesheets in your Visualforce page, add <apex:slds /> anywhere in your page markup.

The Lightning Design System is not uploaded as a static resource. This feature keeps the page syntax example under the 250-MB static resource limit.

To use Lightning Design System stylesheets in your Visualforce page:
  1. Add <apex:slds /> anywhere in your page markup.
  2. Set the <apex:page> applyBodyTag or applyHtmlTag attribute to false.

  3. Include the slds-scope class on any SLDS style or asset parent element.

Do not to wrap any of Visualforce tags in the slds-scope element.

Warning

Example:

In general, the Lightning Design System is already scoped. However, if you set applyBodyTag or applyHtmlTag to false, you must include the scoping class slds-scope. Within the scoping class, your markup can reference Lightning Design System styles and assets.

To reference assets in the Lightning Design System, such as SVG icons and images, use the URLFOR() formula function and the $Asset global variable. Use the following markup, for example, to reference the SVG account icon.

To use SVG icons, add the required XML namespaces by using xmlns="http://www.w3.org/2000/svg" and xmlns:xlink="http://www.w3.org/1999/xlink" in the html tag.

Currently, if you are using the Salesforce sidebar, header, or built-in stylesheets, you can’t add attributes to the html . VG icons are only supported ifshowHeader, standardStylesheets, and sidebar set to false.

Note

Example

The following markup shows a simple account detail page. This page uses the Lightning Design System card element and the account standard controller. This page also includes the account PNG icon.

s page doesn’t have any data in it, unless you load it with a record ID. The Lightning Design System doesn’t support components that bring data into your Visualforce pages, such as <apex:pageBlock> and <apex:detail>. To access Salesforce data from pages using the Lightning Design System, instead use Remote Objects, JavaScript remoting, or the REST API.

For more examples of Lightning Design System styling, see the Salesforce Lightning Design System reference site, and learn more about the Lightning Design System on Trailhead.