- Intended Audience
- Deployment Assumptions
- How the Gateway Works
- Concepts of the Rewriter
- Adding and Removing Rewriter Rules
- Methodology for Rule Extraction
- Out-Of-Box Rule Set
- Rewriting HTML Attributes
- Rewriting FORM Tag Input
- Rewriting JavaScript Content
- Rewriting Applet Parameters
- Rewriting Cascading Style Sheets
- Rewriting XML
- Performance
- Order Importance
- CASE Studies: How to Configure the Gateway to Rewrite a Web-Based JavaScript Navigation Bar
- Third Party Application Cookbooks
- Exchange
- How to Get Hot Patches
- Glossary
- Acknowledgements
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Rewriting Cascading Style Sheets
Cascading Style Sheets Level 1 (CSS1) is supported by the gateway, out-of-box. Support for rewriting imported style sheets started in SP3 Hot Patch 1. As of SP3 Hot Patch 3, the background-image:url() statement can be case insensitive. The usage of URLs is light in CSS because it seeks to replace image-heavy pages by offering useful styling alternatives.
Every sheet in the cascade will be rewritten where appropriate save for a cascade created using the STYLE attribute, sometimes referred to as an inline sheet. The difference between an internal sheet and an inlined sheet is that the STYLE tag generally contains multiple CSS rules or statements and selector class definitions; whereas, the STYLE attribute usually defines a single multivalued CSS property. Because only the background-image property needs to be rewritten, there is no separate section of the gateway profile specifically for CSS.
Best Practices—CSS Programming for Use Through the Gateway
You should use the following best practices:
Do not add STYLE tags within the page content.
While there is no requirement for the STYLE tag to appear within the HEAD element, it cannot occur in the middle of the BODY element, even if the BODY is only implied.
The following is an example of what to avoid:
<HTML> <HEAD> </HEAD> <BODY BGCOLOR="#FFFFFF" TEXT="#000000"> Table 1: <STYLE> P {background-image:url('/images/logo.gif');} <STYLE> <TABLE> <TR WIDTH="100" HEIGHT="100"> <TD WIDTH="100" HEIGHT="100"><P>Para1</P></TD> </TR> </TABLE> </BODY> </HTML>Avoid creating STYLE tags and content using JavaScript content.
Nesting STYLE tags within SCRIPT tags does not work in the rewriter, prior to the SP4 Hot Patch 1 release. The following is an example of what to avoid:
<HTML> <HEAD> <SCRIPT> var styleTags = '<STYLE></STYLE>'; </SCRIPT> </HEAD> <BODY BGCOLOR="#FFFFFF" TEXT="#000000"> </BODY> </HTML>
Avoid adding styles using the STYLE attribute.
Instead, create the style using the STYLE element within the HEAD element. A selector class can be defined, and the class name can be referred to in the appropriate HTML tag, as in the following example:
<HTML> <HEAD> <STYLE> SPAN.logo { background-repeat: no-repeat; background-width: 116px; background-height: 61px; background-image: url(/images/logo.gif); background-position:top left; } </STYLE> </HEAD> <BODY BGCOLOR="#FFFFFF" TEXT="#000000"> <SPAN CLASS="logo">Here is your logo</SPAN> </BODY> </HTML>The following is an example of what to avoid:
<HTML> <HEAD> </HEAD> <BODY BGCOLOR="#FFFFFF" TEXT="#000000"> <SPAN STYLE="background-image: url(/images/logo.gif)">Here is your logo</SPAN> </BODY> </HTML>