Go to Top

20 kodsnuttar du bör använda i HTML5 Boilerplate

Som de flesta andra webbutvecklare har jag de senaste åren helt gått över till att använda ‘frameworks’ av olika varianter. Idag finns det en uppsjö av olika frameworks att använda, både för backend och frontend. HTML5 Boilerplate är ett front end framework som används av flera av webbens stora sajter, några av dem är Google, Microsoft, NASA, Nike, Barack Obama, ITV News, Creative Commons och många fler.

Fördelen med HTML5 Boilerplate är att den kan användas som utgångspunkt för i princip alla typer av webbplatser, men även till mobila appar. Det är i grund och botten en bra mall med html och css att använda för alla sina webbprojekt. Det innehåller en samlad kompetens och erfarenhet från många av webbens frontend-utvecklare.

HTML

Här kommer en lista på de kodsnuttar jag själv använder oftast, alla är inte HTML men de ska placeras i html-dokument. (I mitt verktyg SublimeText sparar jag alla min kodsnuttar med ett kortkommando).

Favicon och Apple

En ikon som visas i din webbkäsare, som är unik för sajtens identitet, kallas för favicon. Den visas också när du sparar en länk i dina bokmärken. De flesta sajter har idag en favicon av något slag för sin sajt (dock inte jag), och för Apple-touch sparas denna ikon med genväg för bokmärket, Apple-touch fungerar även för Android. Det ska också tilläggas att om du lägger dina ikoner i  din webbplats huvudkatalog (rot) så behöver du förmodligen inte ange detta i din kod.

<!-- Placera din favicon.ico och apple-touch-icon.png i din huvudkatalog för din domän. Radera sedan dessa referenser nedan -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Ett litet hack för att ladda sajten snabbare

Denna något korta och innehållslösa kodsnutt används för att snabba upp din sajt när den laddas i din webbläsare. Det är en så kallad ‘conditional comment’ som du stoppar in i din kod för allt annat. Vad gör den då? Jo, den stoppar all nedladdning av filer tills huvud-css-filen har laddat klart. Prioritet på CSS-filen alltså, sedan kommer innehållet. (Läs mer om detta här)

<!--[if IE]><![endif]-->

Kompabilitet med X-UA

Internet Explorer, Firefox, Chrome med flera har många olika alternativ för att rendera innehåll på sajter. Med denna kodsnutt instruerar vi Internet Explorer att använda den senaste renderingsmotorn, och talar om för den att använda Chrome Frame (plugin) för att rendera sajtens innehåll. Chrome Frame är ett plugin från Google för äldre varianter av IE som ger webbläsaren bättre stöd för ny grafik och teknik. (Läs mer om Chrome Frame här)

<!-- Tvinga alltid senaste IE rendering-motor (även på intranet) & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

Body-tagg med villkor

Denna kodsnutt är direkt tagen från HTML5 Boilerplates utvecklare Paul Irish. Den ger dig möjlighet att specifikt rikta in instruktioner direkt till webbläsaren Internet Explorer utan att behöva skapa separata http-förfrågningar och använda separata CSS-filer. Om besökaren använder en IE webbläsare skapar koden en separat klass i <body>-taggen som du kan använda för att skriva egna CSS-klasser för de olika versionerna av IE. Om besökaren använder en annan webbläsare, förblir <body>-taggen orörd.

<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie8"> <![endif]-->
<!--[if IE 9 ]> <body class="ie9"> <![endif<]-->
<!--[if (gt IE 9)|!(IE)]><!--> <!--<![endif]-->

Alternativa källor för jQuery

En stor del av världens webbplatser använder idag JavaScript-biblioteket jQuery, och många av dem hämtar det från Googles servrar. Dels för att Google bättre hanterar hastighet och cross site cache-funktioner. Denna kodsnutt kollar egentligen bara om jQuery är inläst från Googles server, annars läser den in ditt lokala jQuery-bibliotek från din server. (Glöm inte att lägga till filen på din server).

<!-- Hämta Google CDN's jQuery. Växla till lokal version om nödvändigt -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')</script>

Optimera din Google Analytics-kod

Google Analytics är förmodligen den mest populära tjänsten för att spåra besökare och spara statistik för webbplatser runtom i världen. Tjänsten ger dig möjlighet att inte bara se hur många besökare du har, utan kan även ge dig värdefull information om hur de beter sig på din webbplats, vad de söker, vilka sidor de läser mest osv. Jag använder denna kodsnutt ofta, och anpassar den emellanåt.

<!-- asynchronous google analytics
change the UA-XXXXX-X to be your site's ID -->
<script>
 var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview']];
 (function(d, t) {
 var g = d.createElement(t),
 s = d.getElementsByTagName(t)[0];
 g.async = true;
 g.src = '//www.google-analytics.com/ga.js';
 s.parentNode.insertBefore(g, s);
 })(document, 'script');
</script>

Custom Style Sheets (CSS)

Dessa kodsnuttar är några ur min samling, många av dem är från andra källor på Internet och anpassas löpande efter behov. Många kan vara små och ses som obetydliga, men är väldigt användbara ändå. Jag använder mig mycket av frameworks och hittar många av dessa kodsnuttar från dem, eller via olika kod-snutt-tjänster på nätet.

Återställ HTML5 (html5 ready reset)

Många utvecklare har säkerligen uppmärksammat och använder idag Eric Meyers CSS reset-teknik, den är idag ofta standard i många frameworks. Denna kodsnutt är en något omarbetad och vidareutvecklad version av Richard Clark.  Den har fullt stöd för html5 och sätter alla nya struktur-taggar till block-nivå och återställer deras utseende till standard.

/* html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline) v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark html5doctor.com/html-5-reset-stylesheet/*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section, menu,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
 
article, aside, figure, footer, header,
hgroup, nav, section { display:block; }
 
nav ul { list-style:none; }
 
blockquote, q { quotes:none; }
 
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
 
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
 
ins { background-color:#ff9; color:#000; text-decoration:none; }
 
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
 
del { text-decoration: line-through; }
 
abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }
 
/* tables still need cellspacing="0" in the markup */
table { border-collapse:collapse; border-spacing:0; }
 
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
 
input, select { vertical-align:middle; }
/* END RESET CSS */

Normalisera dina typsnitt

Denna kodsnutt används för att bättre hantera inkonsekvent rendering av typsnitt som ofta uppstår mellan olika operativsystem och webbläsare när man ska visa typsnitt som pixlar. Med denna kodsnutten kan du se till att storlek på typsnitt är konsekvent över hela sajten i förhållande till radavstånd m.m. Du bestämmer storleken genom att ange procent, för att rendera lika överallt.

/*
fonts.css from the YUI Library: developer.yahoo.com/yui/
Please refer to developer.yahoo.com/yui/fonts/ for font sizing percentages
*/
body { font:13px sans-serif; *font-size:small; *font:x-small; line-height:1.22; }
table { font-size:inherit; font:100%; }
select, input, textarea { font:99% sans-serif; }

Webkit för jämnare typsnitt

Tyvärr fungerar bara anti-aliasing med webkit-baserade webbläsare på MacOSX. Den förbättrar renderingen och utseendet på alla typsnitt för att göra dem mer läsbara.

/* maxvoltar.com/archive/-webkit-font-smoothing */
html { -webkit-font-smoothing: antialiased; }

Formatera citerad kod

Denna kodsnutt hjälper webbläsaren att hantera text som inte får tolkas som kod. Precis så som jag gör på denna sida när jag inkluderar kod som text. Kodsnutten använder <pre>-taggen som aktivering och ser till att kod behåller sitt format och ser lika ut i alla webbläsare. Denna kodsnutt inkluderas ofta i olika mallar som finns för olika publiceringssystem (CMS).

pre {
padding: 15px;
white-space: pre; /* CSS2 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */
}

Tvinga in rullningslisten!

Ibland hamnar ditt innehåll utanför skärmen och en del webbläsare (speciellt mobila enheter) har ibland inte vett att känna av att en rullningslist (scrollbar) behövs. Så här tvingar du in en ‘scrollbar’ när det behövs.

html { overflow-y: scroll; }

Placera dina etiketter rätt

Etiketter och rubriker kan ibland vara en huvudvärk att få på rätt plats. Denna kodsnutt är till för att få dem på samma plats i alla webbläsare.

* placera checkboxar, radios, text inputs på rätt plats med sin rubrik */
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }

Klickbara objekt

Av någon anledning har de flesta webbläsare inget naturligt stöd för att ändra på muspekaren för att visa att ett objekt på sidan är klickbart. Kodsnutten instruerar webbläsaren att byta pekare på alla så kallade ‘inputs’.

/* Peka med hela handen på alla klickbara objekt för fan */
label, input[type=button], input[type=submit], button { cursor: pointer; }

Screenreaders och tabbar

Vill du ha det bästa av två världar? När det kommer till så kallade screen readers (mjukvara som läser upp text på skärmen genom ex. högtalare med text-to-speech.) så är det bra om de kan skilja på de olika objekten i din kod, denna kodsnutt ger små förändringar som gör skillnad. 🙂

a:hover, a:active { outline: none; }
 
a, a:active, a:visited { color:#607890; }
a:hover { color:#036; }

Internet Explorer 7 och bildhantering

Som standard använder IE7 en algoritm för att hantera bilder som innebär att den skalar ned dem på ett sätt som ibland kan vara allt annat än tilltalande eller vackert. För att lösa detta gjorde jag en del research och hittade en kodsnutt som i princip ger IE7 ett alternativt sätt att skala bilder på. Resultatet är betydligt bättre än standard. Läs gärna denna Flickr-artikel från 2008 om detta.

/* bicubic resizing for non-native sized IMG:
code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
.ie7 img { -ms-interpolation-mode: bicubic; }

Utskrifter och Print styles

Ibland är det bra att kunna skriva ut saker från en webbplats, och det är långt från alla som har ett så kallat ‘Print stylesheet’. Det är CSS-kod som är specifikt skriven för att formatera innehållet för en skrivare i A4-storlek. Det fungerar även när du sparar ner innehåll som ex. PDF från sajten.

@media print {
* { background: transparent !important; color: #444 !important; text-shadow: none; }
 a, a:visited { color: #444 !important; text-decoration: underline; }
 a:after { content: " (" attr(href) ")"; }
 abbr:after { content: " (" attr(title) ")"; } .ir a:after { content: ""; } /* Don't show links for images */ pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } img { page-break-inside: avoid; }
 @page { margin: 0.5cm; }
 p, h2, h3 { orphans: 3; widows: 3; }
 h2, h3{ page-break-after: avoid; }
}

Landskap och portsätt för alla enheter

Här är två kodsnuttar som är till för att anpassa ditt innehåll på sajten till de olika mobila formaten på surfplattor och telefoner med flera. Du kan ange separat CSS för exempelvis porträtt-läget (stående), och för landskaps-läget (liggande). (eng. portrait och landscape).

@media all and (orientation:portrait) {
/* Style adjustments for portrait mode goes here */
}
 
@media all and (orientation:landscape) {
/* Style adjustments for landscape mode goes here */
}

HTML5 Boilerplate & .htaccess

När du laddar ned HTML5 Boilerplate får du automatiskt med en anpassad .htaccess-fil. Dessa kodsnuttar ger dig lite extra hjälp på serversidan av din sajt.

Kompabilitet med X-UA på din webbserver

Denna kodsnutt fungerar ungefär på samma sätt som den kodsnutt jag har ovan för att tvinga rendering med en specifik motor i Internet Explorer (Chrome Frame). Fördelen med denna .htaccess-snutt är att du slipper ha med HTML-koden för detta i alla dina HTML-filer. Detta gör det hela lite mer effektivt, men det är inte alla webhotell som tillåter att du ändrar eller ger instruktioner till webbservern via .htaccess.

<IfModule mod_headers.c>
 BrowserMatch MSIE ie
 Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
 IfModule>
IfModule>

Komprimera och snabba upp med Gzip

Med Gzip kan du minska storleken på alla dina filer för sajten och därmed går det snabbare att skicka dem till dina besökare. Gzip är ett verktyg som ska användas med måttlighet om du har många filer som är stora. Gör research på Gzip innan du använder det på din sajt!

# gzip compression.
<IfModule mod_deflate.c>
 # html, xml, css, and js:
 AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/x-javascript text/javascript application/javascript application/json
 # webfonts and svg:
 <FilesMatch "\.(ttf|otf|eot|svg)$" >
 SetOutputFilter DEFLATE
 </FilesMatch>
</IfModule>

Bestäm utgångsdatum för alla cache-filer

Att använda cache för att göra din sajt snabbare är kanske inget nytt, men det är också bra om dina besökare kan få nya filer när du uppdaterar dem, eller besöker din sajt vid ett senare tillfälle. Med denna kodsnutt för .htaccess kan du bestämma hur länge filen ska få lov att finnas i cache innan webbläsaren tvingas hämta den på nytt. Jag använder denna snutt emellanåt, dock inte med alla de filtyper och val som finns i den som standard. Anpassa denna kod utefter dina egna behov och vad du tror är bäst för just din sajt. Kodsnutten skapades ursprungligen av Steve Souders.

# these are pretty far-future expires headers
# they assume you control versioning with cachebusting query params like
# <script src="application.js?20100608">
# additionally, consider that outdated proxies may miscache
# www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/
# if you don't use filenames to version, lower the css and js to something like
# "access plus 1 week" or so
<IfModule mod_expires.c>
 Header set cache-control: public
 ExpiresActive on
 
 # Perhaps better to whitelist expires rules? Perhaps.
 ExpiresDefault "access plus 1 month"
 # cache.manifest needs re-reqeusts in FF 3.6 (thx Remy ~Introducing HTML5)
 ExpiresByType text/cache-manifest "access plus 0 seconds"
 # your document html
 ExpiresByType text/html "access"
 # rss feed
 ExpiresByType application/rss+xml "access plus 1 hour"
 # favicon (cannot be renamed)
 ExpiresByType image/vnd.microsoft.icon "access plus 1 week"
 # media: images, video, audio
 ExpiresByType image/png "access plus 1 month"
 ExpiresByType image/jpg "access plus 1 month"
 ExpiresByType image/jpeg "access plus 1 month"
 ExpiresByType video/ogg "access plus 1 month"
 ExpiresByType audio/ogg "access plus 1 month"
 ExpiresByType video/mp4 "access plus 1 month"
 # webfonts
 ExpiresByType font/ttf "access plus 1 month"
 ExpiresByType font/woff "access plus 1 month"
 ExpiresByType image/svg+xml "access plus 1 month"
 # css and javascript
 ExpiresByType text/css "access plus 1 month"
 ExpiresByType application/javascript "access plus 1 month"
 ExpiresByType text/javascript "access plus 1 month"
</IfModule>
 
# Since we're sending far-future expires, we don't need ETags for
# static content.
# developer.yahoo.com/performance/rules.html
#etags
FileETag None

Testa, testa och testa igen!

Under tiden som du utvecklar din sajt och skriver kod bör du kontinuerligt testa den mot vad som är standard. Se till att din kod hela tiden fungerar och har bra standard. Jag testar ofta min kod mot olika tjänster, testa din sajt idag!

Vad tycker du?

Kommentera gärna artikeln via Twitter eller här på sajten med dina egna erfarenheter och tips. Tack för att du läst! 🙂

, , , ,

About Christer Johansson

Jag är utbildad webbutvecklare & webbredaktör som även arbetar med e-handel. Sedan starten 1997 har jag sett och gjort många webbplatser på Internet. Jag hjälper dig med allt som har med webb och trycksaker att göra.

Connect with Christer on Google+