Webpaladset

Browser problemer

I det nuværende web univers er der mange browsere, som kan inkludere:

• Google Chrome
• Mozilla Firefox
• Internet Explorer
• Safari

Problematikken her er at de forskellige browser ikke følger samme web standarder.I mange tilfælde er man nødsaget til at lave et helt ekstra stylesheet kun til Internet Explorer 7. Her er det vigtigt og pointere at endda de forskellige versioner af browserne kan have vildt anderledes standarder end de andre. Som programmering af html og javascript m.m. udvikler sig, er det klart at de nyeste browser gerne vil følge disse ændringer. Med Internet Explorer 9 og Firefox 10, så kan man klart se at Firefox tager førende i lancering af deres nye versioner. Sidste år alene gik Firefox igennem 4-5 forskellige versioner.  Internet Explorer sidder lidt i baggrunden på det punkt, og er kommet med en version (9) sidste år – men har en 10′r på vej. Der er verden til forskel på hvordan IE9 og Firefox 10 indlæser dine hjemmesider, dermed, kan det være nødvendigt at anvende forskellige egenskaber til de forskellige browser. Chrome og Safari har også hver sin standard – hver i sær på sin egen måde også. Man kan hurtigt lave et script i javascript, eller HTML til en vis grænse, der tidlader dig at bruge et stylesheet til hver browser. Men det er ikke just den hurtigste metode for til trods for deres forskelle er det stadig langt de fleste elementer og egenskaber der reagere ens. Istedet findes der nogen småting du kan gøre i dit stylesheet for at fikse disse problemer.

Blast from the past…

Jeg har tidligere været inde på dette i CSS tips og tricks – hvor jeg hurtigt forklare at man kan putte et * foran et egenskab efter det er sat for at ændre denne værdi kun til Internet Explorer – hvor at de andre browser som Firefox ikke følger hvad der står efter *.

Jeg har dog nu erfaret at det ikke altid er faktum at * virker i Internet Explorer. Jeg er dog ikke sikker på hvad det er, der er til forskel på når det virker og ikke virker.

Det værende sagt så har jeg fundet nogen andre der kan sørger for at kun Firefox eller Safari og Chrome indlæser egenskabet.

Firefox

Der findes en metode i css som direkte tjekker om det er en Firefox browser din bruger anvender. På denne måde kan man ændre egenskabet til og blive læst anderledes i browseren. Lad os kigge på følgende kode

div.popUp {
position: absolute;
margin-left: 200px;
margin-top: 100px;
}

Vi sætter en div op, der skal side 200px til højre og 100px fra toppen af hovedet elementet (parent element). Problemet er at den sætter sig lidt forkert i Internet Explorer. Dette har jeg i hvert fald set mange steder efterhånden, og måske er dette blot pga andre CSS egenskaber rundt omkring der også har inflydelse på div.popUp. Men alas, er man ude for dette problem kan det rettes med dette trick:

div.popUp {
position: absolute;
margin-left: 200px;
margin-top: 100px;
}
@-moz-document url-prefix() {
    div.popUp {
        margin-left: 100px;
    }
}

Her bruger vi metoden @-moz-document url-prefix til og finde ud af om det er en Firefox browser vi har med at gøre. Dernæst, laver vi om på vores første css kode ved og indsætte klassen forfra og så sætte margin-left til 100px mindre. Dette sørger for at margin-left er 200px i Internet Explorer og 100px i Firefox. Dette hack/trick kan hjælpe rette netop dette problem.

Chrome og Safari

Der findes også en metode der laver samme princip, bare til Chrome og Safari. Det ska lige noteres at jeg stadig har problemer med det ser rigtigt ud i begge browser engang imellem, men har ikke kunne lure noget fiks på at sætte en værdi anderldes i Safari end i Chrome. Lad os tage samme eksempel igen, denne gang sætter vi margin-left til 100px i Chrome og Safari.

div.popUp {
position: absolute;
margin-left: 200px;
margin-top: 100px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    div.popUp {
        margin-left: 100px;
    }
}

Her bruger vi -webkit-min-device-pixel-ratio:0 som kun de to browsere returne med et 0, jeg mener faktisk ikke de andre browser har denne værdi overhovedet. @media screen sørger bare for det er skærm css’en du arbejder i. Denne værdi kan også sættes til print, så ens css kan virke på forskellige måder på en side der skal printes (@media print) og en der skal vises på skærmen.

Man kan jo så gå ind og blande alle disse egenskaber sammen, for at have forskellige CSS egenskaber for de forskellige browser om nødvendigt.

!important

En lille ekstra tilføjelse er brug af !important som hjælper dig i tilfælde af du gerne vil overskrive andre CSS egenskaber i stylesheetet. !important sørger simpelthen for at lige præcis denne værdi bliver overholdt. Et hurtigt eksempel ville være at du i et ekstern stylesheet har:

div.search {
font-family: Verdana, Arial;
}

Nu viser div.search med fonten Verdana, Arial – dvs. Verdana som fortrukne font og hvis computeren ikke har Verdana, så anvender den Arial. Langt de fleste computer har Verdana, hvis ikke alle, men at sætte en ekstra font eller to er bare smart kodning. Så lad os sige at du egentlig gerne vil lave div.search om til at vise Arial istedet for Verdana, når der er søgt på noget for eksempel. Så kan du senere i din kode tilføje:

div.search {
font-family: Arial !important;
}

Nu sørger !important for at overskrive det originale egenskab af Verdana, Arial til kun Arial.

Dette konkludere mit andet sæt af Css tips og tricks.