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; }

Annonser

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

För att hemsidan inte ska använda cache

mars 21, 2012 § Lämna en kommentar

Ibland kan det vara väldigt viktigt att få en hemsidan uppdaterad när nya användare kommer till den.
En cookie överlever inte under en så lång tid, (speciellt inte om du har anti virus skydd). För att få hemsidan uppdaterad för alla användare och inte använda ”cache” i webbläsaren så rekommenderar jag den här koden:

<meta Http-Equiv=”Cache-Control” Content=”no-cache”>
<meta Http-Equiv=”Pragma” Content=”no-cache”>
<meta Http-Equiv=”Expires” Content=”0″>

DOM – Document Object Model

maj 26, 2011 § Lämna en kommentar

DOM är ett sätt för HTML att kommunicera med t.ex Javascript.
Det här innefattar t.ex element som: body, div, h1 och p med mycket mer.

Bilden får ni gärna använda så länge ID software godkänner det 🙂

HTML5 får en loggo

januari 19, 2011 § Lämna en kommentar

W3C har skapat en ny loggo för html5. Såhär ser den ut:

HTML5 Javascript API

november 23, 2010 § Lämna en kommentar

HTML5 har en hel del nya funktioner. Nyheterna finns inom HTML, CSS och naturligtvis JavaScript. Den officiella versionen av HTML5 specifikationen sägs att inte bli helt färdigutvecklad förrän 2022.

Majoriteten av JavaScript-funktioner som beskrivs närmare är redan genomförda i moderna webbläsare (t.ex. Sarafi, Chrome, Firefox, Opera). Även Internet Explorer fått möjlighet att göra canvas och andra grejer (antar vi använder ExplorerCanvas eller Chrome Frame).
Ta en närmare titt på vad som kommer att göra ditt liv enklare:

Hur många gånger har du undrat varför det finns getElementById, getElementsByTagName, men inte getElementByClassName? Nya JavaScript API löser detta problemet:

var element = document.getElementsByClassName (‘dagbok’);

Dessutom finns det nu möjlighet att hämta element på ett nytt sätt:
var elements = document.querySelectorAll(”ul li:nth-child(odd)”);
var first_td = document.querySelector(”table.test > tr > td”);

Web Storage (sessionStorage, localStorage)

Cookies har vissa nackdelar. Som W3C sade:

1. Om webbplatsen använder cookies för att hålla koll på vilken biljett användaren köper, när användaren då klickar mellan olika sidor i windows, skulle biljetten som blev köpt ”läcka” från de ena fönstret till det andra, möjligtvis skulle ett dubbelköp kunna uppstå för samma biljett och flygning utan att personen lade märke till något.

2.
Webbapplikationer kan vilja spara flera megabyte av data på klient sidan, till exempel för ett färdig skrivet dokument eller en användares mailbox. Cookies hanterar inte det här bra. Eftersom det baseras på varje begäran.

Såhär gör man för att rädda data varje gång en tangent blir tryckt:
textarea.addEventListener(‘keyup’, function () { window.localStorage[‘value’] = area.value; window.localStorage[‘timestamp’] = (new Date()).getTime(); }, false); textarea.value = window.localStorage[‘value’];

Rita din egen HTML5 canvas

november 13, 2010 § Lämna en kommentar

För er som är intresserade av att rita en egen HTML5 canvas bild så finns det en hemsida som tillåter er att göra det.
Ni hittar den här: http://mrdoob.com/projects/harmony/

Var befinner jag mig?

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

%d bloggare gillar detta: