HTML5 CSS reset!

juni 8, 2012 § Lämna en kommentar

Jag har hittat ett en bra css reset.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video

{ margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section

{ display: block; } body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ”; content: none; }

table { border-collapse: collapse; border-spacing: 0; }

CSS3 selector :not – En enkel slidedown

juni 7, 2012 § Lämna en kommentar

CSS3 har en ny selector som används för att välja ut det som inte är aktivt på sidan t.ex: a:not(dennaClass) <—- Det används för att välja ut alla anchors som inte har classen dennaClass. För att göra en enkel dropdown med den här stilen:

HTML (index.html):

<!DOCTYPE html>
<head>
<title>For fun</title>
<link rel=”stylesheet” type=”text/css” media=”all” href=”stil.css”>
</head>
<body>
<dl>
<dt><a href=”#Section1″>definition term 1</a></dt>
<dd id=”Section1″><p>definition data 1</p></dd>
<dt><a href=”#Section2″>definition term 2</a></dt>
<dd id=”Section2″><p>definition term 2</p></dd>
</dl>
</body>

CSS (stil.css):

dl{padding: 10px; width:20%;}
dl dt{-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border: 1px solid #cccccc;}
dl dt a {color: #777; padding: 10px; display: block;}
dl dd{color: #cccccc;margin: 0; overflow: hidden; -webkit-transition: height 1s ease; -moz-transition: height 1s ease; -o-transition: height 1s ease;}
dl dd p{padding: 10px; margin: 0;}
dl dd:not(:target) {height: 0; }
dl dd:target {height: 2.667em; }

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 tittar för närvarande i arkivet för juni, 2012Tobiasboman's Blog.

%d bloggare gillar detta: