<PublishingWebControls:EditModePanel runat="server" PageDisplayMode=”Edit”/> to show the page editing fields without CSS in edit mode
and
<PublishingWebControls:EditModePanel runat="server" PageDisplayMode=”Display”/> to show the page fields with style sheet references in the browsing mode.
This worked fine, but only till I configured my site for anonymous access. I was expecting the content under display mode to be visible for anonymous users as well, but that was not the case. Any page content residing in an "EditModePanel" is visible only to authenticated users.
Resolution:
The resolution was to use another control "PublishingWebControls:AuthoringContainer" in addition to the "EditModePanel". The authoring container control has a DisplayAudience property that can be set to either "ReadersOnly" or "AuthorsOnly".
I used the authoring container control as shown below to get around this problem:
<PublishingWebControls:AuthoringContainer DisplayAudience="ReadersOnly" runat="server">
Content to be shown for anonymous users <no edit mode panel here>
</PublishingWebControls:AuthoringContainer>
Content to be shown for authenticated users within edit mode panel.
<PublishingWebControls:AuthoringContainer DisplayAudience="AuthorsOnly" runat="server">
<PublishingWebControls:EditModePanel runat="server" PageDisplayMode="Display">
</PublishingWebControls:EditModePanel>
<PublishingWebControls:EditModePanel runat="server" PageDisplayMode="Edit">
</PublishingWebControls:EditModePanel>
</PublishingWebControls:AuthoringContainer>
This solved my problem, but had to compromise on having two additional controls on the page. If you do not want this overhead, another option is to override this "EditModePanel" class behavior by sub classing it. But for me, the above workaround was just fine.