Gudinna Wiki VisaÄndraBifogaVersionerUppdateratSökKarta

Kompatibel med mycket... CSS webbdesign

Lite tips för den som vill använda CSS och samtidigt skapa en websida som är kompatibel ner till hedenhös (äldre versioner av webbläsare).

http://www.w3schools.com/css/css_examples.asp - kika här först..
http://www.autisticcuckoo.net/archive.php?id=2004/12/10/floating - och här om du någon gång tänker använda css float tagg.
http://www.alistapart.com/articles/imagemap - imagemaps med css

CSS är ganska trevligt eftersom om en webbläsare saknar CSS stöd så försinner bara vissa delar en en websidas design men inte inehållet! Sidor designade med CSS går ofta utmärt att surfa med simpla textbaserade webbläsare som lynx eftersom HTML koden inte innehåller någon speciell layoutkod som kan visas fel.

Problem med CSS och hur man löser dem

Men det finns vissa probem med att använda CSS fullt ut och det beror på att vissa webbläsare har havt implementerat CSS vilket gör vissa CSS designer odugliga i dessa webbläsare. IE5 är speciellt underutvecklad på CSS fronten.

Grunder

<LINK REL="STYLESHEET" TYPE="text/css" HREF="http://www.gudinna.com/style.css">

<style type="text/css">
<!--
@import url("http://www.gudinna.com/style2.css");
-->
</style>

Alla inkluderingar ska ske innom HEAD.

Hur man ordnar så att inte det dyker upp en scrollbar längst ned på sidan om man använder width: 100%

Använd inte width: 100% utan sätt right: 0px istället!
Vill man få kompatiblitet med NN4 så sätt width: till 90% i din CSS 1 fil och ändra width: till auto i din CSS 2 fil samt sätt right: 0px. ( har man ine satt width på en bakgrund i NN4 så klipps bakgrunden där texten ovanpå bakgrunden tar slut, tyvärr kan man inte få samma effekt om man sätte höjden, i NN4 klipps alltid höjden ett par pixlar över och under en text.

Transperans, bäst att undvika eller?

Transperans är vackert men inte problemfritt att implementera.

Netscape 4 stödjer inte transparenta bilder i CSS design men om man trots allt vill ha transperans i nyare webbläsare, tänk på att alltid hålla koden kompatibel med NN4 användare! IE 5.5 och 6 för windows stödjer inte transperanta PNG bilder i CSS. Även Netscape 7.01 för windows har vissa problem med transperanta PNG.

Transperans effekter kan man skapa genom att lägga en CSS box över ett områda och ha en bakgrundsbild med transperans, med GIF bilds filformatet kan man skapa en transperans perforerad bild som släpper igenom vissa pixlar av underlaget vilket ger en grynig tranperans effekt. Med PNG kan man skapa äkta transperans som ser mycket imponerande ut men som enbart är kompatibel med Mozilla,Netscape,Safari och Opera. IE brukar rendrera transperanta PNG filer antigen som helt genomskinliga eller som solidt fyllda ofta med heltäckande bakgrundsfärg. Vi rekommenderar GIF lösningen för fill kompatiblitet. Alla transperans effekter ska ligga i CSS 2 filen eftersom all transperans blir svart i Netscape4.

Om transperanta PNG bilder används måste ett tredje styleshett skapas som fixxar buggar med IE 5.5 och IE 6 för windows! .. Jobbigt... Gör det lätt för dig och använd bara transparenta GIF bilder!

Allting buggar i Internet Explorer

Det finns två lösningar
antigen så får man applicera all trick som finns för att få det att fungera i IE med hjälp av 3st stylesheets eller så får man hindra IE att läsa in dom mer avancerade stylesheet effekterna.. Det går trots allt att få en sida att se rätt bra ut med bara CSS 1 taggar om man undviker absolut och relativ possitionering. fixed possitionering är bara att glömma i IE..

CSS taggar som bör undvikas.

Sätt inte CSS kod infogat i HTML filen, det kommer bli fel med äldre webbläsare! Undvik att använda possition:fixed; som CSS attribut Det funkar dåligt i många webbläsare och under utskrift. Om fixed ska användas inkludera i CSS 2 filen.

För pixel perfektion mellan webbläsare sätt standardvärden som marginaler för BODY i CSS 1 filen!

BODY {
  margin: 10px 10px 10px 10px; 
  /* sätter alla marginaler runt en sida till 10 pixels.
  /* Högra marginalen spelar viss roll eftersom man kan få extra scrollbars om den är satt för lågt*/
  /* vill man inte sätta en marginal så kan man använda auto istället för antar pixlar.. */
}

Trix som fungerar bra

Bakgrundsbilder kan läggas till bakom ALLA HTML taggar med hjälp av att lägga in en background: attribut! Se bara upp med transperanta bakgrundsbilder! Rubrikerna på gudinna wiki är skapade såhär:
/* width: är satt till 100% för att ändra NN4's standardvärde till standard, färgen som är satt i background: visas när rubrikbakgrundsbilden tar slut. */
H2 {
  background: #FFFFFF url(http://www.gudinna.com/style/gudinnatitle.gif) repeat-y top left;
  font-family: "new century schoolbook", "times new roman", times, serif; font-size: 180%;
  color: #000000;
  width: 100%;
  padding: 2px 0px 0px 9px;
}

Vill man byta ut listknappar går även det bra i nyare webbläsare
http://css.maxdesign.com.au/listutorial/07.htm

länkar

http://www.dcjt.demon.co.uk/dc/web/2002/hidecss.html
http://www.mako4css.com/index.htm - Informativt!

CSS löser inte alla problem och dom mest effektfulla designerna kan åstakommas genom att kombinera tekniker..
http://www.serve.com/apg/workshop/ - Många tekniker som är kompatibla med NN4

Webdesignsresurser

Medans man designar kan en html referens och färglista komma till användning.

Användbara website-test

Referenser till aktuell sida