How to ignore Salesforce CSS on VF Page (with header)

Question

I've been working on a Visualforce page using remoting, and am trying out building a custom UI to go along with it (not using any VF tags for the UI). While I'm aware that you can leverage standardStylesheets=false if you turn off the header to get rid of all the Salesforce CSS, I am curious how to leverage the Salesforce header but ignore the Salesforce CSS in my VF implementation. I'm hoping to maintain the header to give the illusion that my page fits into the desktop application and can be navigated to/from.

I noticed that if I use the apex:stylesheet tag, it gets loaded ahead of the Salesforce CSS includes when I look at it in the markup, so the Salesforce CSS is overriding anything I set (for instance, the h1 tag) unless I declare it inline.

I assume one way that you could handle this is making your implementation page have no header, and then have a wrapper VF page that has the header and pulls in your main VF page via an iframe, but that opens another can of worms around navigation. Is there a best practice on how to handle this?

Answer 1

You won't be able to ignore the Salesforce CSS as it will be loaded by the browser and thus used whenever there is a class that matches the name.

You don't need to use an <apex:stylesheet /> tag to include a stylesheet in your page, you can just use a regular tag. This isn't supported by the specification, but browsers will accept it.

You could also put the styles directly in the page, which again isn't supported by the specification but the browser will accept it, or use the HTML5 scope attribute on a mid-document style. You do lose the benefits of CSS this way though, as the styles are in the page and thus not cached or reusable. It looks like browser support is pretty patchy for this too.

Adding !important to your styles is a potential way to ensure that your styles have precedence over the Salesforce styles regardless of order, but there are a couple of downsides:

1. This tag was introduced as an accessibility feature to allow users with particular needs (e.g. large fonts due to impaired vision or different colour combinations due to colour blindness) to apply their preferred styles to a page, so your important styles could well break the page for them.
2. Its more difficult for someone to customise the style on your page - for example, they add a style class to the page but it has no effect because somewhere in a stylesheet the important tag has been used and that takes precedence.

The way I tend to approach this though is to use JavaScript to append my tag to the existing ones, typically through the jQuery method outlined in the answer to this question:

https://stackoverflow.com/questions/12093509/jquery-add-css-to-head

Answer 2

See other answers re: the non-advisability of this. That said you can make a pretty robust sandbox:

1. derive a CSS selector that finds the main content area, both with and without the sidebar:

   table#bodyTable > tbody > tr > td:last-child
   

2. take a CSS reset and boost its specificity so it dominates that main content area (a table cell):

3. prefix all your selectors with the same CSS selector so they don't trample the Salesforce styles

Here's one I prepared earlier:

table#bodyTable > tbody > tr > td:last-child html,
table#bodyTable > tbody > tr > td:last-child body,
table#bodyTable > tbody > tr > td:last-child div,
table#bodyTable > tbody > tr > td:last-child span,
table#bodyTable > tbody > tr > td:last-child applet,
table#bodyTable > tbody > tr > td:last-child object,
table#bodyTable > tbody > tr > td:last-child iframe,
table#bodyTable > tbody > tr > td:last-child h1,
table#bodyTable > tbody > tr > td:last-child h2,
table#bodyTable > tbody > tr > td:last-child h3,
table#bodyTable > tbody > tr > td:last-child h4,
table#bodyTable > tbody > tr > td:last-child h5,
table#bodyTable > tbody > tr > td:last-child h6,
table#bodyTable > tbody > tr > td:last-child p,
table#bodyTable > tbody > tr > td:last-child blockquote,
table#bodyTable > tbody > tr > td:last-child pre,
table#bodyTable > tbody > tr > td:last-child a,
table#bodyTable > tbody > tr > td:last-child abbr,
table#bodyTable > tbody > tr > td:last-child acronym,
table#bodyTable > tbody > tr > td:last-child address,
table#bodyTable > tbody > tr > td:last-child big,
table#bodyTable > tbody > tr > td:last-child cite,
table#bodyTable > tbody > tr > td:last-child code,
table#bodyTable > tbody > tr > td:last-child del,
table#bodyTable > tbody > tr > td:last-child dfn,
table#bodyTable > tbody > tr > td:last-child em,
table#bodyTable > tbody > tr > td:last-child img,
table#bodyTable > tbody > tr > td:last-child ins,
table#bodyTable > tbody > tr > td:last-child kbd,
table#bodyTable > tbody > tr > td:last-child q,
table#bodyTable > tbody > tr > td:last-child s,
table#bodyTable > tbody > tr > td:last-child samp,
table#bodyTable > tbody > tr > td:last-child small,
table#bodyTable > tbody > tr > td:last-child strike,
table#bodyTable > tbody > tr > td:last-child strong,
table#bodyTable > tbody > tr > td:last-child sub,
table#bodyTable > tbody > tr > td:last-child sup,
table#bodyTable > tbody > tr > td:last-child tt,
table#bodyTable > tbody > tr > td:last-child var,
table#bodyTable > tbody > tr > td:last-child b,
table#bodyTable > tbody > tr > td:last-child u,
table#bodyTable > tbody > tr > td:last-child i,
table#bodyTable > tbody > tr > td:last-child center,
table#bodyTable > tbody > tr > td:last-child dl,
table#bodyTable > tbody > tr > td:last-child dt,
table#bodyTable > tbody > tr > td:last-child dd,
table#bodyTable > tbody > tr > td:last-child ol,
table#bodyTable > tbody > tr > td:last-child ul,
table#bodyTable > tbody > tr > td:last-child li,
table#bodyTable > tbody > tr > td:last-child fieldset,
table#bodyTable > tbody > tr > td:last-child form,
table#bodyTable > tbody > tr > td:last-child label,
table#bodyTable > tbody > tr > td:last-child legend,
table#bodyTable > tbody > tr > td:last-child table,
table#bodyTable > tbody > tr > td:last-child caption,
table#bodyTable > tbody > tr > td:last-child tbody,
table#bodyTable > tbody > tr > td:last-child tfoot,
table#bodyTable > tbody > tr > td:last-child thead,
table#bodyTable > tbody > tr > td:last-child tr,
table#bodyTable > tbody > tr > td:last-child th,
table#bodyTable > tbody > tr > td:last-child td,
table#bodyTable > tbody > tr > td:last-child article,
table#bodyTable > tbody > tr > td:last-child aside,
table#bodyTable > tbody > tr > td:last-child canvas,
table#bodyTable > tbody > tr > td:last-child details,
table#bodyTable > tbody > tr > td:last-child embed,
table#bodyTable > tbody > tr > td:last-child figure,
table#bodyTable > tbody > tr > td:last-child figcaption,
table#bodyTable > tbody > tr > td:last-child footer,
table#bodyTable > tbody > tr > td:last-child header,
table#bodyTable > tbody > tr > td:last-child hgroup,
table#bodyTable > tbody > tr > td:last-child menu,
table#bodyTable > tbody > tr > td:last-child nav,
table#bodyTable > tbody > tr > td:last-child output,
table#bodyTable > tbody > tr > td:last-child ruby,
table#bodyTable > tbody > tr > td:last-child section,
table#bodyTable > tbody > tr > td:last-child summary,
table#bodyTable > tbody > tr > td:last-child time,
table#bodyTable > tbody > tr > td:last-child mark,
table#bodyTable > tbody > tr > td:last-child audio,
table#bodyTable > tbody > tr > td:last-child video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
table#bodyTable > tbody > tr > td:last-child article,
table#bodyTable > tbody > tr > td:last-child aside,
table#bodyTable > tbody > tr > td:last-child details,
table#bodyTable > tbody > tr > td:last-child figcaption,
table#bodyTable > tbody > tr > td:last-child figure, 
table#bodyTable > tbody > tr > td:last-child footer,
table#bodyTable > tbody > tr > td:last-child header,
table#bodyTable > tbody > tr > td:last-child hgroup,
table#bodyTable > tbody > tr > td:last-child menu,
table#bodyTable > tbody > tr > td:last-child nav,
table#bodyTable > tbody > tr > td:last-child section {
    display: block;
}

table#bodyTable > tbody > tr > td:last-child {
    line-height: 1;
}

table#bodyTable > tbody > tr > td:last-child ol,
table#bodyTable > tbody > tr > td:last-child ul {
    list-style: none;
}

table#bodyTable > tbody > tr > td:last-child blockquote,
table#bodyTable > tbody > tr > td:last-child q {
    quotes: none;
}

table#bodyTable > tbody > tr > td:last-child blockquote:before,
table#bodyTable > tbody > tr > td:last-child blockquote:after,
table#bodyTable > tbody > tr > td:last-child q:before,
table#bodyTable > tbody > tr > td:last-child q:after {
    content: '';
    content: none;
}

table#bodyTable > tbody > tr > td:last-child table {
    border-collapse: collapse;
    border-spacing: 0;
}

Answer 3

You can still use your custom stylesheet, loaded through apex:stylesheet component, but to make sure your styles will override the SFDC ones, you should target the css selectors to be more specific than the SFDC ones.

E.g. if you have a css stylesheet with structure resembling this one:

h1 { font-family: Arial; font-size:24px; }
.heading-container h1 { font-size:28px; }
#special-heading h1 { font-size:32px; }

...and an HTML structure resembling this:

<div id="special-heading">
    <h1>Page Title</h1>
</div>

...your heading will end up rendered with a 32px font size.

---

Following the same principle, you could structure your VF page in such way that all contents of the page are placed within a marked container (div with either id or class attribute set):

<apex:page showHeader="true" sidebar="true">
    <apex:stylesheet value="{!URLFOR($Resource.YourSkin,'styles.css')}"/>

    <div id="yourpage-content-area">
        <h1>Title of the page</h1>
        ...
        ...
    </div>
</apex:page>

With css selectors prepended with the ID of the container, you could be sure that styles specified in your stylesheet would get applied to the desired elements. E.g. with the style rule like below, h1 heading from the above example would end up rendered in Verdana coloured in red:

#yourpage-content-area h1 { font-family:Verdana; color:red; }

I suppose you have enough alternatives to choose from now :)

Answer 4

There are two approaches to handle this.

1. Give Id's to your tags so that it ("Id") would get preference other than standard Salesforce CSS.

2. Use the important in the CSS.

I don't know it is a best practice or not, but these are one kind of problem solving.

Answer 5

Retaining the Salesforce header will override the bootstrap css/custom css you have applied for the visualforce page.

Two options here: 1. You can create the tab for VF page 2. You can create the web tab for the VF page and provide the VF page link for this.