Säkra kompatibilitet varje gång

måndag den 14 juli 2008 åtta kommentarer

Att försäkra kompatibilitet för de mest populära webbläsarna är viktigt, men ofta även väldigt tidsödande. Nedan är en summering av How to get Cross Browser Compatibility Every Time. Gå igenom dessa punkter och försäkra dig om att din HTML och CSS kommer att fungera optimalt.

Webbläsare Safari, Firefox, Camino, Opera & Safari

  • Använd alltid strict-doctype och standardkompatibel HTML/CSS
  • Använd alltid återställning i början av din CSS
  • Använd -moz-opacity:0.99 på textelement (P, LI, etc) för att förfina rendering i Firefox, och text-shadow: #000 0 0 0 för Safari.
  • Skala aldrig bilder med HTML eller CSS
  • Kontrollera rendering i populära webbläsare och använd inte Lucida
  • Sätt textstorlek för body i %, därefter endast em
  • Alla element som har float bör även ha display:inline och overflow:hidden
  • Alla containers bör ha overflow:auto
  • Använd inga häftiga CSS3-selectorer (ännu)
  • Använd inte trensperenta PNG-bilder (PNG24) utan att knuffa igång Alpha-kanalerna


Jag hoppas du gillade inlägget!

Facebook Delicious RSS Du kan prenumerera på alla inlägg via RSS, e-post eller genom att följa mig på Bloggy.


Kommentarer

Gravatar

Chrille sa..

tisdag den 15 juli 2008

Tack för din kommentar! Markup:en och CSS:en är självklart väldigt viktigt.. Tänkte passa på och tipsa dig om en grej, din startsida fungerar inte riktigt som det är tänkt. Hela sidan blir svart..och därmed är det i princip omöjligt att läsa :(

Gravatar

Erik Pettersson sa..

tisdag den 15 juli 2008

Tack Chrille, det är Facebook-statusen som inte alltid vill ladda. Får försöka lösa det genom att cacha RSS-flödet från ansiktsboken..

Gravatar

Antonio Riveras sa..

onsdag den 16 juli 2008

Bra sammanfattning, jag tjatar alltid på att folk ska använda display:inline i samband med float. Men de flesta envisas med att hacka och strula med paddings och margins istället!

Vad är det moz-opacity och text-shadow gör egentligen??? Har aldrig stött på det innan, restena av din lista är en självklarhet dock =)!

Gravatar

Erik Pettersson sa..

fredag den 18 juli 2008

moz-opacity och text-shadow rensar upp rendering i Firefox samt Safari (Win & Mac). Utan dessa ser texten fetare ut än vad den egentligen är. Snuttarna nollställer helt enkelt webbläsarna.

Gravatar

Marcus sa..

tisdag den 22 juli 2008

Textrendreringen ser väldigt olika ut på olika system, så jag rekommenderar att -inte- använda -moz-opacity och text-shadow, då det kan ge oönskade resultat på vissa system.

Tycker också att det är helt fritt fram att använda CSS3, "bra" webbutvecklare ser till att sidan är bakåtkompatibel, dvs att sidan fungerar även om vissa saker inte syns.

Gravatar

Mattias sa..

lördag den 2 augusti 2008

Det här är jättebra tips, vilket jag skulle följa om jag orkade skriva om min CSS från den template jag har, haha

Gravatar

Ola sa..

onsdag den 27 augusti 2008

Precis som Mattias säger. Mycket bra tips som jag definitivt ska använda på nya projekt. Får sådan tok-ångest av diverse CSS:er jag har på mina nuvarande siter. Tyvärr är ju den enda lösningen att typ skrota allt och börja om .. :/

Gravatar

Markus sa..

tisdag den 7 oktober 2008

Tack för detta inlägget som hjälpte mig få ordning på krånglande text "vikt" på min Mac.


RSS Lämna en kommentar du också!

Namn: *

E-postadress: (alternativ för att visa din Gravatar)

Webbplats: (självklart får du en länk utan nofollow)

Kommentar: * (ej HTML)