Browserweiche

Cross-Browser Fähigkeit, also die Nutzbarkeit und eine aktzeptable Ansicht einer Website mit verschiedenen Browsern, lässt sich bei den meisten Layouts und CSS Programmierungen nur noch mit Browserweichen realisieren.

Dies bedeutet, dass für unterschiedliche Browser auch unterschiedliche CSS-Dateien genutzt werden. Auch wenn das TemplateOne Layout weitgehend ohne solche Differenzierungen auskommt, so muss schnell bei möglichen Erweiterungen auf eine solche Browserweiche zurückgegriffen werden.

Conditional Comments

Das Vorgehen lässt sich natürlich auch unabhängig vom CMS bzw. OpenCMS verwenden. Im Ausschnitt des Codes aus dem main-Template (/system/modules/org.opencms.frontend.templateone/templates/main)ist der CSS relevante Teil markiert. Dabei wird auf eine Funktion des Internet Explorer (IE) zurück gegriffen: Conditional Comments, hiermit lassen sich weitere Differenzierungen nach Versionsnummer nutzen, siehe das folgende Beispiel:

<!--[if IE]>
    <style type="text/css">@import url(ie.css);</style>
  <![endif]-->

  <!--[if IE 6]>
    <style type="text/css">@import url(ie6.css);</style>
  <![endif]-->

  <!--[if lt IE 7]>
    <style type="text/css">@import url(ie5-6.css);</style>
  <![endif]-->

  <!--[if lte IE 5.5999]>
    <style type="text/css">@import url(ie55-.css);</style>
  <![endif]-->

  <!--[if gte IE 5.5]>
    <style type="text/css">@import url(ie55+.css);</style>

<![endif]-->

CSS Differenzierung im main-Template

...

} else if (cms.getLayout().equals(CmsTemplateBean.PARAM_ACCESSIBLE)) {
        %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
        <html lang="<%= cms.getRequestContext().getLocale() %>">
        <head>
            <title><%= cms.key("prefix.title") + cms.getTitle(cms.key("default.title")) %></title>
            <meta http-equiv="Content-Type" content="text/html; charset=<%= cms.getEncoding() %>">
            <meta name="description" content="<%= cms.getDescription(cms.key("default.description")) %>">
            <meta name="keywords" content="<%= cms.getKeywords(cms.key("default.keywords")) %>">
            <meta name="robots" content="index, follow">
            <meta name="revisit-after" content="7 days">
            <% cms.editable(true); %>
            <link type="text/css" rel="stylesheet" media="screen" href="<%= cms.getResourcePath() %>reset.css">
            <link type="text/css" rel="stylesheet" media="screen" href="<%= cms.getStyleSheetUri(resPath, cms.getStyleSheetConfigUri(), cms.getRequestContext().getSiteRoot(), cms.getRequestContext().getLocale()) %>">
        
            <style type="text/css">
            <!--
            /* head image row */

...