Flytta styleinformation till CSS-fil

Denna inställning hittar du under Övriga inställningar på fliken Avancerade inställningar för Webbplatsinställningar:

Skärmdump på fliken Avancerade inställningar

För att nå hela fliken krävs det att du har behörigheten "Egenskaper för webbplats"

Alla utseendeinställningar för moduler och layouter skrivs ut i den bakomliggande HTML-koden som style-attribut medan bland annat formatmallar skrivs ut som class-attribut.

Nackdelen med detta är att webbsidor kan bli onödigt stora. Eftersom webbläsare cachar CSS-filer så är det bättre om style-koden istället ligger i CSS-filen. Det är precis detta som funktionen 'Flytta styleinformation till CSS-fil' gör. Funktionen skapar CSS-klasser av all kod i style-attribut dvs ersätter informationen i style-attribut med information i class-attribut.

Den gör det enligt följande:

Går igenom webbsidans HTML-kod
Innehållet i varje style-attribut som hittas registreras som en CSS-klass
Alla registrerade CSS-klasser läggs in i en särskild CSS-fil
En modifierad variant av webbsidan HTML-kod returneras och där finns en referens till den särskilda CSS-filen finns som innehåller alla CSS-klasser

Ett exempel

Nedan visas ett utdrag av HTML-koden för en webbsida som endast innehåller en textmodul. Textmodulen innehåller endast texten 'En liten text' som använder en formatmall som har klassnamnet 'normal'. (OBS! Inställningen 'Flytta styleinformation till CSS-fil' används INTE.)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
   <head>
      <title>Demowebb</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <meta http-equiv="imagetoolbar" content="no" />
      <meta name="DC.Publisher" content="SiteVision AB" />
      <meta name="DC.Date.Modified" content="2008-08-21 15:23" />
      <meta name="DC.Date.Created" content="2008-08-19" />
      <meta name="DC.Creator" content="System" />
      <meta name="DC.Identifier" scheme="URL" content="http://localhost" />
      <meta name="DC.Language" scheme="RFC1766" content="sv" />
      <meta name="DC.Format" scheme="IMT" content="text/html" />
      <meta name="DC.Type" content="text" />
      <link rel="schema.DC" href="http://purl.org/DC/elements/1.0/" />
      <style type="text/css" media="all">
         @import url(/2.4fd02c4f11865610f9580000/9/9032/SiteVision.css);
      </style>
      
   </head>

<div style="padding-top: 1.0em; clear:left;width: 400px;" id="svid12_579f210a11be446fc7f80000">
<a name="Text"></a><span class="normal">En liten text</span>
</div>

</div>

</div>
</div>

</body>
</html>

Ovan kan du se att viss CSS skrivs ut i webbplatsens CSS-fil och sedan refereras till i HTML-koden som class-attribut, medan annan CSS skrivs ut direkt i style-attribut. Den enda CSS-fil som finns i HTML-koden är webbplatsens CSS-fil.

Nedan visas motsvarande HTML-kod efter att funktionen 'Flytta styleinformation till CSS-fil' har aktiveras:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
   <head>
      <title>Demowebb</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <meta http-equiv="imagetoolbar" content="no" />
      <meta name="DC.Publisher" content="SiteVision AB" />
      <meta name="DC.Date.Modified" content="2008-08-21 15:23" />
      <meta name="DC.Date.Created" content="2008-08-19" />
      <meta name="DC.Creator" content="System" />
      <meta name="DC.Identifier" scheme="URL" content="http://localhost" />
      <meta name="DC.Language" scheme="RFC1766" content="sv" />
      <meta name="DC.Format" scheme="IMT" content="text/html" />
      <meta name="DC.Type" content="text" />
      <link rel="schema.DC" href="http://purl.org/DC/elements/1.0/" />
      <style type="text/css" media="all">
         @import url(/2.4fd02c4f11865610f9580000/9/9032/SiteVision.css);
         @import url(/2.4fd02c4f11865610f9580000/auto-1-56/9032/SiteVision.css);
      </style>
      
      <script type="text/javascript" src="/sitevision/util/externallinks.js"></script>
   </head>

<div class="c55" id="svid12_579f210a11be446fc7f80000">
<a name="Text"></a><span class="normal">En liten text</span>
</div>

</div>

</div>
</div>

</body>
</html>

Som du kan se ovan så är alla style-attribut ersatta med class-attribut och sidan innehåller CSS-filen med informationen som förut låg i style-attributen.

Uppdatering av CSS-filen

CSS-filen med style-information har alltid ett löpnummer ('auto-1-56/9032' i ovanstående exempel). Detta löpnummer ändras för varje gång som någon besökare kommer till någon sida och en ny CSS-klass behöver definieras (dvs på den sidan finns något style-attribut som inte redan finns registrerat som klass i CSS-filen). Detta för att förhindra att webbläsare cachar en CSS-fil som nu har utökats. När ett antal sidor har besökts så kommer alla tänkbara CSS-klasser ha skapats och CSS-filen kommer inte att behöva uppdateras något mer.

Oavsett vilket löpnummer en webbläsare använder för att hämta CSS-filen så får webbläsaren alltid den senaste CSS-filen.

Implikationer med funktionen

Prestanda

Eftersom funktionen gör att det tar lite längre tid att behandla webbsidor så ger funktionen en liten prestandasänkning av sidrenderingen på SiteVisionservern. Detta är dock nödvändigtvis inget som webbplatsbesökarna behöver märka av. Eftersom varje sida blir mindre (långa texter i style-attribut har ersatts av ett kort CSS-klassnamn i class-attributet) så blir nedladdningstiderna kortare eftersom webbläsaren kan cacha CSS-filen (dvs behöver bara hämta den en gång).

Hur webbläsare hanterar CSS

Det finns tyvärr inte någon standardiserad prioritetsordning mellan CSS-filer (bara regler för prioritet inom samma CSS-fil). Eftersom ett style-attribut alltid har högre prioritet än ett class-attribut så kan 'krockar' i undantagsfall uppstå om HTML-koden verkligen är beroende av att det som förut stod i style-attributet har högst prioritet.

OBS! Funktionen används bara i publicerad version, dvs inte i redigeringsläget. Har du problem med att det ser konstigt ut i publicerad version men inte i redigeringsläget så kan du vara drabbad av ovan beskrivna "CSS-krockar".

Sidan uppdaterad: 2013-06-14

Nästa generations publiceringsverktyg är här!

Läs mer om SiteVision 4

se-sto-ste-sv5-2.sitevision-cloud.net
3.143.9.115