Keskustelu: Nettisivujen teko: CSS: järjestys, tiivistys jne

Ilmeisesti vaikuttaa sivujen hitauteen nämä css-tiedostot jonkin verran. Tai sitten minulla on jotain etuoikeusjärjestyksiä nurinpäin. (onko sellaisia olemassa, kysyy tyhmä)

Voiko näitä tiivistää jotenkin, esim. background-määreitä?
Muita hyviä neuvoja..?

Sivut latautuu muuten hyvin mutta taustakuva ei oikein. Ilmestyy näkyviin jos skrollaa tekstiä hiirellä, käyttää jotain ikkunaa päällä tai ko. selainikkunaa alhaalla. Eli siis jotain pientä häikkää...

   <STYLE TYPE="text/css">

   <!--
   BODY
   {
   background-image: url(lehmukset.jpg);
   background-repeat: no-repeat;
   background-position: 30em 0em;
   background-attachment: fixed;
   list-style-image:url(rinkula.gif);
   font-family: 'Arial narrow', 'Arial', 'Helvetica'
   }

   TABLE.tekstit
   {
   fontsize: small;
   color : #003300;
   position: absolute;
   left: 3em;
   }

   A { text-decoration: none};
   A:link {color:black};
   A:visited {color:dimgray};
   A:active {text-decoration:underline};
   A:hover {text-decoration:underline}
   -->
   </STYLE>

Hmm... enpä usko kyllä että tuollainen kovin paljon latautumista hidastaa, muutaman sadan tavun tiedostohan tuo vain on.

Enkä ole kuullut, että css voisi tiivistää. Voisit kyllä kokeilla laittaa kaikki yhteen pötköön.

En oikein ymmärtänyt juttuasi tuosta taustakuvasta. Voisitko laittaa jonkun esimerkin?

lainaus:

Voisit kyllä kokeilla laittaa kaikki yhteen pötköön.

Ei missään tapauksessa kannata! Se tuhoaa koodin luettavuuden ja muokattavuuden. Laskin että tuossa on 28 riviä eli 28 newline merkkiä, suunilleen yhden koodirivin verran.

http://www.w3schools.com/CSS/

Tuolla esimerkissä on seuraava:

background: #00ff00
url("/images/smiley.gif")
no-repeat fixed
center center

background: color url repeat attachment vposition hposition;

Ja sama sinun koodissa:

background: url(lehmukset.jpg) no-repeat fixed 30em 0em;

lainaus:

Ilmeisesti vaikuttaa sivujen hitauteen nämä css-tiedostot jonkin verran.

Joissakin tapauksissa kyllä. Ks. esim. http://www.bluerobot.com/web/css/fouc.asp

lainaus:

Muita hyviä neuvoja..?

Älä laita puolipisteitä aaltosulkujen jälkeen. Ei ole syntaktisesti validia ja saattaa aiheuttaa mitä kummallisimpia virheitä.

lainaus:

Sivut latautuu muuten hyvin mutta taustakuva ei oikein. Ilmestyy näkyviin jos skrollaa tekstiä hiirellä, käyttää jotain ikkunaa päällä tai ko. selainikkunaa alhaalla. Eli siis jotain pientä häikkää...

Käyttämäsi selain saattaa bugittaa, ookko kokeillu useammalla ku yhellä?

lainaus:

fontsize: small;

font-size

lainaus:

A { text-decoration: none};

-_-

lainaus:

A:visited {color:dimgray};

Olen kohtuullisen varma, että dimgraytä ei oo määritelty spekseissä. Laita tilalle vaikka #999

Hmm... tuo on kyllä alle 200 kilotavua ja reilusti! Yhden tekemäni nettisivun koodi on puolet pitempi ja se on kooltaan 60,6 kilotavua. Olen myös törmännyt tuohon hidastumis juttuun. Jos avaa jotain sivua modeemilla, sen hidastumisen huomaa selvästi.