CSS till förbannelse

Mycket tid i dag har spenderats till att få min nya sida och blogg att se någorlunda bra i de mest förekommande webbläsarna och plattformarna.

iOS/iPad

Först ut var Apples iPad och dess version utav Safari. Det största problemet där är att mobila platformar oftast (eller alltid? Kan bara tala för iOS Safari och Androids webbläsare) inte hanterar element som är ”fixed” som man förväntar sig. På dessa plattformar så är verkligen elementet fixed, där den befinner sig när sidan har renderats, där kommer den att befinna sig resten av tiden du befinner dig på webbplatsen. Självklart innebar detta problem för mig då den fina bakgrundsbilden på min skrivbord är ett fixerat element.

Markup:en ser ut på följande sätt (väldigt simpelt):

1<div id="bg">
2    <img src="img/bild.JPG" alt="">
3</div>
1<div id="bg">
2    <img src="img/bild.JPG" alt="">
3</div>

Och CSS:en:

 1#bg {
 2    position:fixed;
 3    width:100%;
 4    height:100%;
 5    z-index: -1;
 6}
 7 
 8#bg img {
 9    position:absolute;
10    top:0;
11    left:0;
12    right:0;
13    bottom:0;
14    margin:auto;
15    min-width:100%;
16    min-height:100%;
17}
 1#bg {
 2    position:fixed;
 3    width:100%;
 4    height:100%;
 5    z-index: -1;
 6}
 7 
 8#bg img {
 9    position:absolute;
10    top:0;
11    left:0;
12    right:0;
13    bottom:0;
14    margin:auto;
15    min-width:100%;
16    min-height:100%;
17}

Tur är att många innan mig också har velat ha tillgång till fixerade element i iOS. Jag lyckades hitta ”iScroll”, ett JavaScript som tillåter en att ”scrolla” i en ”div” på maskiner som kör iOS. Det hela gick väldigt enkelt att implementera, bara att lägga till en div som du vill ska gå att scrolla, lite CSS och sedan är man igång. Dock så är prestandan ingen höjdare, man rekommenderas att lägga så få element inne i den scrollbara diven som möjligt, helst endast list-element, men jag vill ju att hela sidan ska scrolla ovanför bilden. Ska kika på några av de andra skripten som finns där ute när jag har tid för att se om man kan få upp prestandan lite.

Utöver scrollbara div:ar så var jag tvungen att använda CSS3 media queries för att få sidan att se riktigt bra ut på iPad:en (ville gärna ha sökrutan och kontaktrutan på höger sida, inte under). För detta så dög det att minska marginalerna lite, från 10% till 5%, samt att minska bredden från 600px till 500px på huvud-kolumnen.

1@media screen and (max-width: 1024px) {
2    div#main-content {
3        margin-top: 5% !important;
4        margin-left: 5% !important;
5        width: 500px !important;
6    }
7}
1@media screen and (max-width: 1024px) {
2    div#main-content {
3        margin-top: 5% !important;
4        margin-left: 5% !important;
5        width: 500px !important;
6    }
7}

Just nu körs samma layout till iPhone och andra mobiler som används till iPad:en. Det är förmodligen inte optimalt, men om min förra blogg är något att gå efter så kommer besöksandelen endast ligga på cirka 3% från iPhone användare och 2% från Android – så jag ber om ursäkt till er.

Resultatet på iPad:en när allt är klart:

Opera

Opera är kanske inte den största stjärnan på webbläsarhimelen, men jag brukar ändå testa i den för att se hur saker och ting ter sig där.

Till min stora förvåning så tolkade Opera bakgrunden väldigt olikt än vad Firefox, Chrome och Safari gjorde. Den nuvarande CSS:en till bakgrunden har ni redan sett i iPad-delen, tidigare var min-width och min-height satt till 50%, detta för att bilden skulle skala sig lite snyggare. Men Opera uppfattade det här som ”Okej, minsta storlek 50%? Då kör jag på 50% oavsett då”.

Resultatet innan:

Övriga

De övriga (jag kör med Safari som standardwebbläsare) webbläsarna var relativt enkla att putsa upp, några -moz- prefix i CSS:en samt att plocka bort Firefox vansinnigt fula outline som blir på länkar man klickar på.

The Enemy

Då har jag bara en kvar… Behöver jag säga mer?

IE8 kommer att bli en utmaning, minst sagt. Då den varken stödjer opacity i CSS (den har visserligen sin filter:alpha(opacity=xx);) eller box-shadow (har visserligen sin filter: progid: DXImageTransform.Microsoft.Shadow) eller text-shadow. Exakt hur jag ska lösa det här vet jag ännu inte, men det lutar åt att jag kommer att få använda transparenta png-filer (vilket också gör så att äldre IE-modeller faller bort) och skippa skuggorna både på texten och de andra elementen. Men det är en uppoffring jag är villig att göra, förhoppningsvis vill ingen Windows-användare se min iMac ändå…