CSS för Internet explorer (IE)

juni 6, 2012 § Lämna en kommentar

I skrivande stund så använder 18% av alla användare Internet explorer (källa: w3schools). Med CSS3 och HTML5 så skapar det lite svårigheter för webbdesigners. Här kommer det vanligaste och enklaste tipsen:

  • Modernizr – har varit ett vanligt sätt att få HTML5 kompatibilitet med IE.
  • Google har släppt html5 shiv som gör samma sak med mindre kod. Du hittar det här: HTML5 shiv
  • För att det ska gälla i Internet explorer som är äldre än version 9 skriv: <!–[if lt IE 9]&gt;–>
  • För att ha en specifik CSS fil för alla internet explorer: <!–[if IE]–>
  • Genom att byta ut raden: <!–[if lt IE 9]–> så kan vi påverka vilka webbläsare (IE versioner) som avläser den raden.
  • <!–[if gte IE 6]–> Versioner som är IE 6.0 eller större
  • <!–[if lt IE 9]–> Versioner som är IE 8 eller mindre
  • <!–[if IE 9]–> Byt ut 9 till den version du vill ska gälla

Responsive design en snabb resumé/förklaring

juni 6, 2012 § Lämna en kommentar

Responsive design är ett relativt nytt uttryck. Det innebär att skapa en design som är tillgänglig för alla skärm-upplösningar och alla ”devices” (t.ex tabloids och smartphones). Det viktigaste att tänka på är:

  • Använd ”em” istället för ”px” för all text på hemsidan
  • Definera width, padding och margin med %
  • För att dina bilder ska anpassa sig efter skärmen skriv:
    img {
    max-width: 50%;
    height: auto;}
  • Använd CSS3 media queries för att anpassa hemsidan till tabloids och smartphones. Exempel:
    @media screen and (max-width: 980px) {// skriv allt som du vill ska gälla mellan upplösningen 980px ner till 700px}
    @media screen and (max-width: 700px) {// skriv allt som du vill ska gälla mellan 700px ner till 480px}
    @media screen and (max-width: 480px) {// skriv allt som du vill ska gälla mellan 480px och neråt}
    Tänk på att media ärver all css som du definerade i den tidigare upplösningen.

Fortsätt designa!

Var befinner jag mig?

Du bläddrar för närvarande i kategorin Responsive designTobiasboman's Blog.

%d bloggare gillar detta: