Home > Articles > Operating Systems, Server > Solaris

  • Print
  • + Share This
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>
  • + Share This
  • 🔖 Save To Your Account