Keskustelu: Nettisivujen teko: .css tiedostoissa jotain vikaa

Eli miksi .css tiedostossa olevat tyylitykseni toimivat pienellä viiveellä? Jos teen nyt muutoksia .css tiedostoon pitää odottaa noin 1h että kuva mikä .css tiedostosta tehdään liikahtaa pisteeseensä. Käytän shellit.org serveriä ja Winscp ohjelmaa sekä sftp yhteyttä portista 21 vai 22 en muista.

Siis index.php:ssä lukee näin:

<link rel="stylesheet" href="link.css" type="text/css" />´
<?php
$paa=1;
echo '<div class="Paa_'.$paa.'" style="width: 100px;"> </div>';
?>

ja link.css tiedostossa:

.Paa_1 {
height: 80px;
background-image: url(kuvat/Hahmo/naama_1.png);
position: absolute;
top: 585px;
left: 500px;
z-index:10;
color: Black;
}

Tarkoitatko siis, että sivu päivittyy käyttäjille vasta tunnin päästä muutoksesta?

ei vaan Paa_1 div vaihtaa uuteen paikkaansa vasta 1h päästä.

Palvelin vaikuttaisi välimuistittavan. Voit pakottaa uudelleenlatauksen Ctrl + Shift + R tai Ctrl + F5 tai Ctrl + R, riippuu selaimesta mikä toimii.

Yksi tapa kiertää ongelmia muutoksissa on nimetä CSS-tiedostonsa esim. päivämäärän mukaisesti. Vaikkapa siis tyylit_2010-11-22.css – tästä on hieman ylimääräistä vaivaa HTML:n/templaatin puolella, mutta ainakaan ei tarvitse miettiä, latautuuko uusin versio kaikille vaiko ei.

Sivujen kehittäminen ja tyylittely olisi useimmiten parasta hoitaa omalla koneella. Jos jokin järjestelmä generoi HTML:n, niin voit vaikka kopsata HTML-sorsan koneelle malliksi.

Siis käyttäjä lataa sivun. Sivulla tapahtuu tapahtuma, joka muuttaa Paa_1 divin arvoja. 1h kuluttua muutos tulee sivulle.

Ei vaan huomaisn uuden jutun.. Jos kirjoitan Paa_1 divin left: px; kohtaan sata lisää mozillassa ei tapahdu mitään, mutta cromessa tapahtuu. Eli onko tämä vain jokin mozillan oma juttu? :D

Minun käsittääkseni Mika muuttaa CSS-tiedostoa itse käsipelillä, mutta selain lataa välimuistista vielä vanhan CSS-tiedoston, joka kertoo vanhan kuvan nimen eikä uutta kuvaa.

Katso aiempi viestini noista näppäinoikoteistä, joilla voi pakottaa täydellisen uudelleenlatauksen.

Viestissäsi on muuten virhe, jos tarkoitit selaimen välimuistia.

Merri kirjoitti:

Palvelin vaikuttaisi välimuistittavan.

Merri kirjoitti:

Yksi tapa kiertää ongelmia muutoksissa on nimetä CSS-tiedostonsa esim. päivämäärän mukaisesti. Vaikkapa siis tyylit_2010-11-22.css

Vielä yksinkertaisempaa on lisätä aikaleima kysymysmerkin jälkeen, jolloin kaiken saa toimimaan automaattisesti:

<link rel="stylesheet" href="link.css?<?php echo filemtime("link.css"); ?>" type="text/css" />

Metabolix: Ovelaa, käytännöllistä ja helppoa. Kiitos vinkistä! :-)

Jokotai: palvelimelta tulee selaimelle ohjeita tiedostojen välimuistituksesta ja selain sitten noudattaa niitä. CSS:n välimuistitus on siis pääosin kiinni palvelimen asetuksista, vaikka välimuisti onkin selaimen heiniä. Palvelin on olennaisempi kuin selain :)

Miksei tuollaisia juttuja koskaan mulle opetettu :(

Mutta kun se on noin, niin minkäs nimisessä tiedostossa nuo välimuistitus käskytykset kulkee?

Ne kulkee sivun otsikkotiedoissa.

Apache-palvelimilla otsikkotietojen säätö onnistuu .htaccess-tiedostoilla. Omat tuotannossa olevat sivustot käyttävät palttiarallaa tämänkaltaista osuutta välimuistitukselle:

# Fonttien tyyppi
AddType application/octet-stream .ttf .eot .woff

# Salli fontit
<FilesMatch "\.(ttf|otf|eot|woff)$">
	<IfModule mod_headers.c>
		Header set Access-Control-Allow-Origin "*"
	</IfModule>
</FilesMatch>

# Vektorien tyyppi
AddType image/svg+xml .svg
AddType image/svg+xml .svgz
AddEncoding gzip .svgz
<FilesMatch \.svgz$>
  <IfModule mod_gzip.c>
    mod_gzip_on No
  </IfModule>
</FilesMatch>

# Pakkaa tiedostot nopeampaa jakelua varten
<ifModule mod_gzip.c>
	mod_gzip_on Yes
	mod_gzip_dechunk Yes
	mod_gzip_item_include file \.(html?|txt|css|js|php|pl|eot|ttf)$
	mod_gzip_item_include handler ^cgi-script$
	mod_gzip_item_include mime ^text/.*
	mod_gzip_item_include mime ^application/x-javascript.*
	mod_gzip_item_exclude mime ^image/.*
	mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

# Pakota selain välimuistittamaan tiedostot pitkäksi aikaa
<ifModule mod_expires.c>
	ExpiresActive On
	ExpiresDefault "access plus 1 seconds"
	ExpiresByType text/html "access plus 1 seconds"
	ExpiresByType image/gif "access plus 2592000 seconds"
	ExpiresByType image/jpeg "access plus 2592000 seconds"
	ExpiresByType image/png "access plus 2592000 seconds"
	ExpiresByType text/css "access plus 604800 seconds"
	ExpiresByType text/javascript "access plus 216000 seconds"
	ExpiresByType application/x-javascript "access plus 216000 seconds"
	ExpiresByType application/octet-stream "access plus 2592000 seconds"
</ifModule>

# Pakota selain luottamaan ylläoleviin tietoihin
<ifModule mod_headers.c>
	Header unset ETag
</ifModule>
FileETag None

# Välimuistin tarkemmat määritykset
<ifModule mod_headers.c>
	<filesMatch "\\.(ico|pdf|flv|jpg|jpeg|png|gif|swf|eot|ttf|svg|woff)$">
		Header set Cache-Control "max-age=2592000, public"
	</filesMatch>
	<filesMatch "\\.(css)$">
		Header set Cache-Control "max-age=604800, public"
	</filesMatch>
	<filesMatch "\\.(js)$">
		Header set Cache-Control "max-age=216000, private"
	</filesMatch>
	<filesMatch "\\.(xml|txt)$">
		Header set Cache-Control "max-age=216000, public, must-revalidate"
	</filesMatch>
	<filesMatch "\\.(html|htm|php)$">
		Header set Cache-Control "max-age=1, private, must-revalidate"
	</filesMatch>
</ifModule>

Tuossa on sekä puutteita että ylimääräisyyksiä riippuen siitä, mitä kaikkea sivustolla on käytössä. En ole juuria myöten aiheeseen perehtynyt, vaan se mitä tässä näkyy on pitkälle muutaman kerran lueskelun/opiskelun jäljiltä kasaan kyhättyä.