SFDC：Classic向けVisualforce開発でLightning Design Systemを適用する方法

Lightning Design SystemはLEX向けの画面開発で活躍すると思いますが、Classic向けのページを開発する際にも利用したくなるケースがあると思います。ですがサイトからダウンロードしたCSSを適用すると次のように標準CSSに干渉してしまいます。

<apex:page showHeader="true" sidebar="false" id="page">
    <!-- Lightning Design System -->
    <apex:stylesheet value="{!URLFOR($Resource.SLDS221, 'assets/styles/salesforce-lightning-design-system.css')}" />
    <!-- App -->
    <div xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="vf-page">
        <div class="slds-page-header">
            <div class="slds-grid">
                <div class="slds-col slds-has-flexi-truncate">
                    <div class="slds-media slds-no-space slds-grow">
                        <div class="slds-media__figure">
                            <svg class="slds-icon slds-icon-standard-user" aria-hidden="true">
                                <use xlink:href="{!URLFOR($Resource.SLDS221, '/assets/icons/standard-sprite/svg/symbols.svg#user')}"></use>
                            </svg>
                        </div>
                        <div class="slds-media__body">
                            <p class="slds-text-title--caps slds-line-height--reset">Record Type</p>
                            <h1 class="slds-page-header__title slds-m-right--small slds-align-middle slds-truncate" title="this should match the Record Title">Record Title</h1>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</apex:page>

この問題は、apex:sldsタグを利用することで解決できそうです。

これで標準CSSに影響を与えずにCSSを適用できました。

apex:sldsタグを使った場合、lightning-design-system-vf.min.jsと「-vf」のついたVF向けCSSが適用されるためです。

Lightning Design Systemのサイトからダウンロードすると-vfのJSファイルは含まれていません。そのため過去のバージョンの古いCSSファイルから引っ張ってくる必要があると思っていました。apex:sldsタグでは比較的最新バージョンの-vf版CSSが適用されるので古いバージョンを使いまわす必要もないようです。

サンプルコード

<apex:page showHeader="true" sidebar="false" id="page">
    <!-- Lightning Design System -->
    <apex:slds />
    <!-- App -->
    <div xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="vf-page">
        <div class="slds-page-header">
            <div class="slds-grid">
                <div class="slds-col slds-has-flexi-truncate">
                    <div class="slds-media slds-no-space slds-grow">
                        <div class="slds-media__figure">
                            <svg class="slds-icon slds-icon-standard-user" aria-hidden="true">
                                <use xlink:href="{!URLFOR($Asset.SLDS, '/assets/icons/standard-sprite/svg/symbols.svg#user')}"></use>
                            </svg>
                        </div>
                        <div class="slds-media__body">
                            <p class="slds-text-title--caps slds-line-height--reset">Record Type</p>
                            <h1 class="slds-page-header__title slds-m-right--small slds-align-middle slds-truncate" title="this should match the Record Title">Record Title</h1>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</apex:page>