Download Boilerplate 2.0 Updated Aug 10th

Download Boilerplate Keep the hints and links or Download Boilerplate "stripped" No comments, just the bizniss. or Customize Boilerplate 100% hipster.

jQuery

Server Config

Others

Download! Are these options not enough? Go to Initializr for more!

HTML5 Boilerplate is 2.0!

Wednesday, Aug 10th, 2011

Happy Birthday!

H5BP is a year old! We launched on August 10th, 2010 and now we've got a plethora of new, exciting changes that comprise our 2.0 release. We've also added Mathias Bynens and Nicolas Gallagher, two very talented frontend researchers and developers, to the core development team. The highlights of 2.0 are below, followed by a more comprehensive changelog.

NORMALIZE.CSS

We are now using normalize.css developed by Nicolas Gallagher along with Jonathan Neal instead of the traditional CSS Reset stylesheet.

normalize.css retains useful browser defaults and includes several common fixes to improve cross-browser (desktop and mobile) styling consistency.

Lots of research has gone into normalize, verifying what are the default user agent styles provided by each browser. We can very specifically change only the ones we need to instead of the bulldozer approach.

Why this is great news:

  • Who likes being so damn redundant and declaring: em, i { font-style: italic; }
  • By using normalization instead of a reset + building up default styles, we use less styles and save bytes
  • Less noise in your dev tools: when debugging, you don't have to trawl through every reset selector to reach the actual style that is causing the issue.
  • More details on the project page

BUILD SCRIPT++: Faster, @import inlining, appcache generation

If 15 seconds was too long to wait before, you'll be happy with the changes. Via a new "intermediate" folder, we cut down build time by 80% or more.

If you use @imports in your CSS to author in multiple files, the build script will inline all these together. This way, you have a maintainable authoring experience, and still a highly performant production version.

Making an app that works offline is a badge of honor. Now with a flick of a config switch, the H5BP build script can autogenerate your cache manifest file with all the right info and wire it up. It'll also keep the manifest revved as you deploy new changes.

PROMPT CHROME FRAME FOR IE6

  • With the latest release of Chrome frame which does not require admin access to be installed, we felt it was a good time to prompt IE 6 users to install Chrome Frame.

RESPOND.JS

  • Added respond.js as part of a shift to a responsive approach. You can now use media queries anywhere and get full IE6-8 support.

PNGFIX & HANDHELD REMOVED

  • We removed handheld.css as we do not think it was useful among the diverse feature phones
  • We feel tools like imagealpha and pngquant, and techniques like using 8-bit PNGs are more useful than using stopgap fixes like belatedpng.

Changelog

2.0 also gets a lot of major updates Here are all 299 commits since last release, brought to you by over 49 contributors.

Should you upgrade existing sites? Short answer: nah, you're good. (Though dropping in the new build script and .htaccess would be cool)

index.html

  • Use minified jQuery by default (now 1.6.2)
  • Add respond.js as part of shift to ‘mobile first’ approach.
  • Updated to Modernizr 2.0 Complete, Production minified (incl yepnope & respond).
  • Prompt IE 6 users to install Chrome Frame
  • Removing touch icon link tags and retaining only the comment.
  • Encourage people to send the X-UA-Compatible HTTP header instead of leaving it in the HTML, to avoid edge case issues.
  • Remove the cache-busting query parameters from the HTML.
  • Simplify the conditional comment containing code for IE 9+ and modern browsers
  • Simpler escape for </script>.
  • Encourage people to use a custom Modernizr build containing only the features they need for that particular project.
  • Added maximum touch-icon support.
  • Add a link to optional <meta> tags that could be added to the <head> element.
  • Standardize the use of single and double quotes.
  • Added Site Speed tracking for Google Analytics
  • Google Analytics now retrieved with Modernizr.load() for byte brevity and optimal speed

style­.css

  • Major: Now using css normalization instead of css reset + building up default styles.
  • Add ‘oldie’ class to conditional <html> classnames.
  • Add img { max-width: 100%; } to print styles to prevent images from getting cut off.
  • Update clearfix to use ‘micro’ clearfix
  • Add placeholder CSS MQs for mobile-first approach
  • Tweaking our hot pink ::selection. It is now #fe57a1, which is …
    Festal (adj): pertaining to or befitting a feast, festival, holiday, or gala occasion.
  • Use black for links when printing
  • added vertical-align: middle to fix borders on image containers.
  • Add <svg> overflow fix for IE9. Group <img> and <svg> rules in an ‘embedded content’ section of CSS file. Add {cursor:pointer} to <label> element.
  • Switch to outline:0 for accessible focus treatment. Avoids Opera bug when combined with transitions. Also saves bytes.
  • Set {overflow:auto} for <button> and <input> in <table> in IE6/7. Avoids numerous layout and whitespace issues that result from setting {overflow:visible} to fix the odd inner spacing of those form elements.
  • Add {resize: vertical} to <textarea>. Only allow vertical resizing

Build Script

  • CSSLint, JSLint, JSHint tools are now optionally available in the build script
  • New features in build script:

    Added a files.bypass property which when set, will not compress the listed JavaScript files, but just silently passes it on to the publish folder without any change.

    Added a images.bypass with a list of image files or folders within the img directory that you do not want to be optimized.

  • Build script is compatible with php files now. it appears.
  • Build script compatible with Ant >= 1.8.2. Error message otherwise.
  • removes concatenated css files from index.html when they are linked to with link tag.
  • Concatenated script is added with a @defer attribute
  • Added DOCTYPE so Eclipse and other IDE’s do not complain about the lack of schema.
  • Minification affects all .css and .js files in /css and /js dirs, not just the ones explicitly included in concatenation.
  • Build script: compress all images in subfolders, too.
  • Added gae.js dir and gae.css dir so that App Engine projects can have the correct directory names swapped in their templates.
  • Improved build script compatibility with Netbeans IDE.
  • Adding properties to project.properties so that Google App Engine builds don’t have “static” prepended when swapping for minified versions.
  • console.log messages are no longer commented out for you. use log() instead
  • Much faster build process

    Files are not deleted at the beginning of every build, and files that have already been processed will not be reprocessed unless the source has changed. A new "intermediate" folder is used for this.

  • Files are revved by SHA hash, not incrementally at each build

    Versioned files are referenced by a SHA-1 hash of the content rather than a build number. This means that changing your HTML and rebuilding will not cause your users to redownload the same CSS and JavaScript, and a reverted change may cause users to use a copy that was previously downloaded. It may be better to use only part of the hash so the HTTP request is shorter.

  • copy files last This slightly simplifies copying because we don’t have to exclude PNG, JPEG, or HTML files from the copy stage. it comes preminified, and we don’t need to minify it again This also updates the HTML so that the script is not missing if the unminified scripts are unavailable on the server. This commit requires a change to existing HTML files :/
  • Build script no longer upgrades expires headers in the htaccess. 1yr for everyone!
  • update yuicompressor to 2.4.5. Fixes media query minification issue that shipped with 1.0
  • update htmlcompressor to 1.4.3 which uses the new yuicompressor for CSS and fixed a bunch of edgecasey php bugs users had.
  • Lots of bug fixes for edge cases and improved techniques..

Project

  • gitignore additions: textmate project folder, older CVS folders, sass_cache.
  • Update HTML elements demo: reduce repetition, remove deprecated elements, add certain HTML5 elements, add more comprehensive collection of HTML5 input types, include different form markup styles, add form elements box-sizing test
  • Add .gitattributes to help with consistent line endings
  • Changed curly quotes to straight quotes in crossdomain.xml

Webserver Configs

.htaccess
  • Disable directory browsing by default
  • removed trailing slash redirects in htaccess. More
  • Updating TTF mimetype to fix Google Chrome warning
  • Improved support for all versions of Apache, including workaround for bug in mod_filter.
  • Way better and more robust gzip rules.
  • Add gzip support for XHTML, RSS, Atom
  • Added m4a (Need it for IE9) and m4v (HandBrake default) MIME types.
  • added Header unset ETag In some servers setting FileETag None alone, is not enough. Removing header and setting it to None fixes the issue.
  • Add Options +FollowSymlinks when RewriteEngine is used. Fixes #489.
  • Some more security for PHP: turn off error display and turn on error logging
  • Allow Blackberry to read vCards, because those people are swell.
nginx, node.js, lighttpd, google app engine, IIS

Significant commits

The commit messages on these commits are particularly fun and worth a read if you're into frontend research

  • 26a391c Revert "Added native iOS inertia scrolling"
  • ddaf66a Major: Now using css normalization instead of css reset + building up default styles
  • e5e057e Change our conditional comments around the HTML tag to use a single .oldie class.
  • 7f53f98 Revert "Change our conditional comments around the HTML tag to use a single .oldie class."
  • 648026d Tweaking our hot pink ::selection based on a suggestion from David Murdoch and research from Adam Diehm.
  • 0e1c7ba Use minified jQuery by default.
  • a0ac99a optimize build process
  • bb22ca6 Remove the cache-busting query parameters from the HTML.

Walk through it with me, now

index.html

<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">

  <!-- Use the .htaccess and remove these lines to avoid edge case issues.
       More info: h5bp.com/b/378 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title></title>
  <meta name="description" content="">
  <meta name="author" content="">

  <!-- Mobile viewport optimized: j.mp/bplateviewport -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->

  <!-- CSS: implied media="all" -->
  <link rel="stylesheet" href="css/style.css?v=2">

  <!-- More ideas for your <head> here: h5bp.com/docs/#head-Tips -->

  <!-- All JavaScript at the bottom, except for Modernizr and Respond.
       Modernizr enables HTML5 elements & feature detects; Respond is a polyfill for min/max-width CSS3 Media Queries
       For optimal performance, use a custom Modernizr build: www.modernizr.com/download/ -->
  <script src="js/libs/modernizr-2.0.6.min.js"></script>
</head>

<body>

  <div id="container">
    <header>

    </header>
    <div id="main" role="main">

    </div>
    <footer>

    </footer>
  </div> <!--! end of #container -->


  <!-- JavaScript at the bottom for fast page loading -->

  <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.5.1.min.js">\x3C/script>')</script>


  <!-- scripts concatenated and minified via ant build script-->
  <script src="js/plugins.js"></script>
  <script src="js/script.js"></script>
  <!-- end scripts-->


  <!-- Change UAXXXXXXXX1 to be your site's ID -->
  <script>
    window._gaq = [['_setAccount','UAXXXXXXXX1'],['_trackPageview'],['_trackPageLoadTime']];
    Modernizr.load({
      load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
    });
  </script>
  
  <!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to support IE 6.
       chromium.org/developers/how-tos/chrome-frame-getting-started -->
  <!--[if lt IE 7 ]>
    <script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
    <script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
  <![endif]-->  

</body>
</html>

style­.css

/*
 * HTML5 ✰ Boilerplate
 *
 * What follows is the result of much research on cross-browser styling. 
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 *
 * Detailed information about this CSS: h5bp.com/css
 */


/* =============================================================================
   HTML5 element display
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }



/* =============================================================================
   Base
   ========================================================================== */

/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units

 * 2. Force vertical scrollbar in non-IE

 * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g

 */

html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body { margin: 0; font-size: 13px; line-height: 1.231; }

body, button, input, select, textarea { font-family: sans-serif; color: #222; }

/* 
 * Remove text-shadow in selection highlight: h5bp.com/i

 * These selection declarations have to be separate

 * Also: hot pink! (or customize the background color to match your design)

 */

::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }


/* =============================================================================
   Links
   ========================================================================== */

a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }

/* Improve readability when focused and hovered in all browsers:
 h5bp.com/h */
a:hover, a:active { outline: 0; }


/* =============================================================================
   Typography
   ========================================================================== */

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

blockquote { margin: 1em 40px; }

dfn { font-style: italic; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

ins { background: #ff9; color: #000; text-decoration: none; }

mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }

/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }

small { font-size: 85%; }

/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }


/* =============================================================================
   Lists
   ========================================================================== */

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }


/* =============================================================================
   Embedded content
   ========================================================================== */

/*
 * 1. Improve image quality when scaled in IE7 h5bp.com/d
 * 2. Remove the gap between images and borders on image containers h5bp.com/e 
 */

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

/*
 * Correct overflow not hidden in IE9 
 */

svg:not(:root) { overflow: hidden; }


/* =============================================================================
   Figures
   ========================================================================== */

figure { margin: 0; }


/* =============================================================================
   Forms
   ========================================================================== */

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }
/* 
 * 1. Correct color not inheriting in IE6/7/8/9 
 * 2. Correct alignment displayed oddly in IE6/7 
 */

legend { border: 0; *margin-left: -7px; padding: 0; }

/*
 * 1. Correct font-size not inheriting in all browsers
 * 2. Remove margins in FF3/4 S5 Chrome
 * 3. Define consistent vertical alignment display in all browsers
 */

button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }

/*
 * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
 * 2. Correct inner spacing displayed oddly in IE6/7
 */

button, input { line-height: normal; *overflow: visible; }

/*
 * Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
 */

table button, table input { *overflow: auto; }

/*
 * 1. Display hand cursor for clickable form elements
 * 2. Allow styling of clickable form elements in iOS
 */

button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }

/*
 * Consistent box sizing and appearance
 */

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/* 
 * Remove inner padding and border in FF3/4 h5bp.com/l 
 */

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/* 
 * 1. Remove default vertical scrollbar in IE6/7/8/9 
 * 2. Allow only vertical resizing
 */

textarea { overflow: auto; vertical-align: top; resize: vertical; }

/* Colors for form validity */
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }


/* =============================================================================
   Tables
   ========================================================================== */

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }

/* =============================================================================
   Primary styles
   Author: 
   ========================================================================== */
















/* =============================================================================
   Non-semantic helper classes
   Please define your styles before this section.
   ========================================================================== */

/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }

/* Hide for both screenreaders and browsers: h5bp.com/m */
.hidden { display: none !important; visibility: hidden; }

/*  Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: h5bp.com/q */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }



/* =============================================================================


   
   
   

   Use Media Queries for Responsive Design.
   Pixel widths given as samples.
   Edit the widths to suit where your design breaks, rather than 
   for device pixels, see 'Using a mobile-first approach': h5bp.com/w
   ========================================================================== */

@media only screen and (min-width: 480px) {
  /* Style adjustments for viewports 480px and over go here */

}

@media only screen and (min-width: 768px) {
  /* Style adjustments for viewports 768px and over go here */

}



/* =============================================================================
   Print styles.
   Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */
 
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}

plugins.js

// usage: log('inside coolFunc', this, arguments);
// paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/
window.log = function(){
  log.history = log.history || [];   // store logs to an array for reference
  log.history.push(arguments);
  if(this.console) {
   arguments.callee = arguments.callee.caller;
   var newarr = [].slice.call(arguments);
   (typeof console.log === 'object' ? log.apply.call(console.log, console, newarr) : console.log.apply(console, newarr));
  }
};
// make it safe to use console.log always
(function(b){function c(){}for(var d="assert,count,debug,dir,dirxml,error,exception,group,groupCollapsed,groupEnd,info,log,timeStamp,profile,profileEnd,time,timeEnd,trace,warn".split(","),a;a=d.pop();){b[a]=b[a]||c}})((function(){try
{console.log();return window.console;}catch(err){return window.console={};}})());

// place any jQuery/helper plugins in here, instead of separate, slower script files.

script.js

/* Author:

*/

robots.txt

# www.robotstxt.org/
# www.google.com/support/webmasters/bin/answer.py?hl=en&answer=156449

User-agent: *

humans.txt

/* the humans responsible & colophon */
/* humanstxt.org */


/* TEAM */
  <your title>: <your name>
  Site: 
  Twitter: 
  Location: 

/* THANKS */
  Names (& URL): 

/* SITE */
  Standards: HTML5, CSS3
  Components: Modernizr, jQuery
  Software:
  

                                    
                               -o/-                       
                               +oo//-                     
                              :ooo+//:                    
                             -ooooo///-                   
                             /oooooo//:                   
                            :ooooooo+//-                  
                           -+oooooooo///-                 
           -://////////////+oooooooooo++////////////::    
            :+ooooooooooooooooooooooooooooooooooooo+:::-  
              -/+ooooooooooooooooooooooooooooooo+/::////:-
                -:+oooooooooooooooooooooooooooo/::///////:-
                  --/+ooooooooooooooooooooo+::://////:-   
                     -:+ooooooooooooooooo+:://////:--     
                       /ooooooooooooooooo+//////:-        
                      -ooooooooooooooooooo////-           
                      /ooooooooo+oooooooooo//:            
                     :ooooooo+/::/+oooooooo+//-           
                    -oooooo/::///////+oooooo///-          
                    /ooo+::://////:---:/+oooo//:          
                   -o+/::///////:-      -:/+o+//-         
                   :-:///////:-            -:/://         
                     -////:-                 --//:        
                       --                       -:

.htaccess

# Apache configuration file
# httpd.apache.org/docs/2.2/mod/quickreference.html

# Note .htaccess files are an overhead, this logic should be in your Apache config if possible
# httpd.apache.org/docs/2.2/howto/htaccess.html

# Techniques in here adapted from all over, including:
#   Kroc Camen: camendesign.com/.htaccess
#   perishablepress.com/press/2006/01/10/stupid-htaccess-tricks/
#   Sample .htaccess file of CMS MODx: modxcms.com


###
### If you run a webserver other than apache, consider:
### github.com/paulirish/html5-boilerplate-server-configs
###



# ----------------------------------------------------------------------
# Better website experience for IE users
# ----------------------------------------------------------------------

# Force the latest IE version, in various cases when it may fall back to IE7 mode
# github.com/rails/rails/commit/123eb25#commitcomment-118920
# Use ChromeFrame if it's installed for a better experience for the poor IE folk


<IfModule mod_headers.c>
    Header set X-UA-Compatible "IE=Edge,chrome=1"
    # mod_headers can't match by content-type, but we don't want to send this header on *everything*
    <FilesMatch "\.(js|css|gif|png|jpe?g|pdf|xml|oga|ogg|m4a|ogv|mp4|m4v|webm|svg|svgz|eot|ttf|otf|woff|ico|webp|appcache|manifest|htc|crx|xpi|safariextz|vcf)$" >
      Header unset X-UA-Compatible
    </FilesMatch>
</IfModule>


# ----------------------------------------------------------------------
# Cross-domain AJAX requests
# ----------------------------------------------------------------------

# Serve cross-domain ajax requests, disabled.   
# enable-cors.org
# code.google.com/p/html5security/wiki/CrossOriginRequestSecurity

#  <IfModule mod_headers.c>
#    Header set Access-Control-Allow-Origin "*"
#  </IfModule>



# ----------------------------------------------------------------------
# Webfont access
# ----------------------------------------------------------------------

# 
# allow access from all domains for webfonts
# alternatively you could only whitelist
# your subdomains like "sub.domain.com"
# 

<FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>



# ----------------------------------------------------------------------
# Proper MIME type for all files
# ----------------------------------------------------------------------


# JavaScript
#   Normalize to standard type (it's sniffed in IE anyways) 
#   tools.ietf.org/html/rfc4329#section-7.2
AddType application/javascript         js

# Audio
AddType audio/ogg                      oga ogg
AddType audio/mp4                      m4a

# Video
AddType video/ogg                      ogv
AddType video/mp4                      mp4 m4v
AddType video/webm                     webm

# SVG
#   Required for svg webfonts on iPad
#   twitter.com/FontSquirrel/status/14855840545
AddType     image/svg+xml              svg svgz 
AddEncoding gzip                       svgz
                                       
# Webfonts                             
AddType application/vnd.ms-fontobject  eot
AddType application/x-font-ttf    ttf ttc
AddType font/opentype                  otf
AddType application/x-font-woff        woff

# Assorted types                                      
AddType image/x-icon                   ico
AddType image/webp                     webp
AddType text/cache-manifest            appcache manifest
AddType text/x-component               htc
AddType application/x-chrome-extension crx
AddType application/x-xpinstall        xpi
AddType application/octet-stream       safariextz
AddType text/x-vcard                   vcf



# ----------------------------------------------------------------------
# Allow concatenation from within specific js and css files  
# ----------------------------------------------------------------------

# e.g. Inside of script.combined.js you could have
#   <!--#include file="libs/jquery-1.5.0.min.js" -->
#   <!--#include file="plugins/jquery.idletimer.js" -->
# and they would be included into this single file.

# This is not in use in the boilerplate as it stands. You may
# choose to name your files in this way for this advantage or
# concatenate and minify them manually.
# Disabled by default.

#<FilesMatch "\.combined\.js$">
#  Options +Includes
#  AddOutputFilterByType INCLUDES application/javascript application/json
#  SetOutputFilter INCLUDES
#</FilesMatch>
#<FilesMatch "\.combined\.css$">
#  Options +Includes
#  AddOutputFilterByType INCLUDES text/css
#  SetOutputFilter INCLUDES
#</FilesMatch>



# ----------------------------------------------------------------------
# Gzip compression
# ----------------------------------------------------------------------

<IfModule mod_deflate.c>


# force deflate for mangled headers 
# developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping/
<IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
    RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
  </IfModule>
</IfModule>

# HTML, TXT, CSS, JavaScript, JSON, XML, HTC:
<IfModule filter_module>
  FilterDeclare   COMPRESS
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/html
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/css
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/plain
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/xml
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/x-component
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/javascript
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/json
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/xml
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/xhtml+xml
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/rss+xml
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/atom+xml
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/vnd.ms-fontobject
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $image/svg+xml
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/x-font-ttf
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $font/opentype
  FilterChain     COMPRESS
  FilterProtocol  COMPRESS  DEFLATE change=yes;byteranges=no
</IfModule>

<IfModule !mod_filter.c>
  # Legacy versions of Apache
  AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
  AddOutputFilterByType DEFLATE application/xhtml+xml application/rss+xml application/atom+xml
  AddOutputFilterByType DEFLATE image/svg+xml application/vnd.ms-fontobject application/x-font-ttf font/opentype
</IfModule>
</IfModule>



# ----------------------------------------------------------------------
# Expires headers (for better cache control)
# ----------------------------------------------------------------------

# 
# 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" 
# 

<IfModule mod_expires.c>
  ExpiresActive on

# Perhaps better to whitelist expires rules? Perhaps.
  ExpiresDefault                          "access plus 1 month"

# cache.appcache needs re-requests in FF 3.6 (thx Remy ~Introducing HTML5)
  ExpiresByType text/cache-manifest       "access plus 0 seconds"



# Your document html
  ExpiresByType text/html                 "access plus 0 seconds"
  
# Data
  ExpiresByType text/xml                  "access plus 0 seconds"
  ExpiresByType application/xml           "access plus 0 seconds"
  ExpiresByType application/json          "access plus 0 seconds"

# RSS feed
  ExpiresByType application/rss+xml       "access plus 1 hour"

# Favicon (cannot be renamed)
  ExpiresByType image/x-icon              "access plus 1 week" 

# Media: images, video, audio
  ExpiresByType image/gif                 "access plus 1 month"
  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"
  ExpiresByType video/webm                "access plus 1 month"
  
# HTC files  (css3pie)
  ExpiresByType text/x-component          "access plus 1 month"
  
# Webfonts
  ExpiresByType font/truetype             "access plus 1 month"
  ExpiresByType font/opentype             "access plus 1 month"
  ExpiresByType application/x-font-woff   "access plus 1 month"
  ExpiresByType image/svg+xml             "access plus 1 month"
  ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
    
# CSS and JavaScript
  ExpiresByType text/css                  "access plus 1 year"
  ExpiresByType application/javascript    "access plus 1 year"
  ExpiresByType text/javascript           "access plus 1 year"
  
  <IfModule mod_headers.c>
    Header append Cache-Control "public"
  </IfModule>
  
</IfModule>



# ----------------------------------------------------------------------
# ETag removal
# ----------------------------------------------------------------------

# FileETag None is not enough for every server.
<IfModule mod_headers.c>
  Header unset ETag
</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



# ----------------------------------------------------------------------
# Stop screen flicker in IE on CSS rollovers
# ----------------------------------------------------------------------

# The following directives stop screen flicker in IE on CSS rollovers in combination with the "ExpiresByType" rules for images (see above)
# If needed, un-comment the following rules.

# BrowserMatch "MSIE" brokenvary=1
# BrowserMatch "Mozilla/4.[0-9]{2}" brokenvary=1
# BrowserMatch "Opera" !brokenvary
# SetEnvIf brokenvary 1 force-no-vary



# ----------------------------------------------------------------------
# Cookie setting from iframes
# ----------------------------------------------------------------------

# Allow cookies to be set from iframes (for IE only)
# If needed, uncomment and specify a path or regex in the Location directive

# <IfModule mod_headers.c>
#   <Location />
#     Header set P3P "policyref=\"/w3c/p3p.xml\", CP=\"IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT\""
#   </Location>
# </IfModule>



# ----------------------------------------------------------------------
# Start rewrite engine
# ----------------------------------------------------------------------

# Turning on the rewrite engine is necessary for the following rules and features.
# FollowSymLinks must be enabled for this to work.
<IfModule mod_rewrite.c>
  Options +FollowSymlinks
  RewriteEngine On
</IfModule>



# ----------------------------------------------------------------------
# Suppress or force the "www." at the beginning of URLs
# ----------------------------------------------------------------------

# 
# The same content should never be available under two different URLs, especially not with and without "www." at the beginning, since this can cause SEO problems (duplicate content).
# That's why you should choose one of the alternatives and redirect the other one.
# 

# By default option 1 (no "www.") is activated.
# Remember: Shorter URLs are sexier.
# no-www.org/faq.php?q=class_b

# 
# If you rather want to use option 2, just comment out all option 1 lines and uncomment option 2.
# IMPORTANT: NEVER USE BOTH RULES AT THE SAME TIME!
# 

# ----------------------------------------------------------------------

# 
# Option 1:
# Rewrite "www.domain.com -> domain.com"
# 

<IfModule mod_rewrite.c>
  RewriteCond %{HTTPS} !=on
  RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
  RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L]
</IfModule>

# ----------------------------------------------------------------------

# 
# Option 2:
# To rewrite "domain.com -> www.domain.com" uncomment the following lines.
# Be aware that the following rule might not be a good idea if you use "real" subdomains for certain parts of your website.
# 

# <IfModule mod_rewrite.c>
#   RewriteCond %{HTTPS} !=on
#   RewriteCond %{HTTP_HOST} !^www\..+$ [NC]
#   RewriteCond %{HTTP_HOST} (.+)$ [NC]
#   RewriteRule ^ http://www.%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
# </IfModule>



# ----------------------------------------------------------------------
# Built-in filename-based cache busting
# ----------------------------------------------------------------------

# 
# If you're not using the build script to manage your filename version revving, you might want to consider enabling this, which will route requests for /css/all.20110203.css to /res/all.css
# 

# To understand why this is important and a better idea than all.css?v1231, read:
# github.com/paulirish/html5-boilerplate/wiki/Version-Control-with-Cachebusting

# Uncomment to enable.
# <IfModule mod_rewrite.c>
#   RewriteCond %{REQUEST_FILENAME} !-f
#   RewriteCond %{REQUEST_FILENAME} !-d
#   RewriteRule ^(.+)\.(\d+)\.(js|css|png|jpg|gif)$ $1.$3 [L]
# </IfModule>


	
# ----------------------------------------------------------------------
# Prevent SSL cert warnings
# ----------------------------------------------------------------------

# 
# Rewrite secure requests properly to prevent SSL cert warnings
# e.g. prevent https://www.domain.com when your cert only allows https://secure.domain.com 
# Uncomment the following lines to use this feature.
# 

# <IfModule mod_rewrite.c>
#   RewriteCond %{SERVER_PORT} !^443
#   RewriteRule ^ https://example-domain-please-change-me.com%{REQUEST_URI} [R=301,L]
# </IfModule>



# ----------------------------------------------------------------------
# Prevent 404 errors for non-existing redirected folders
# ----------------------------------------------------------------------

# 
# without -MultiViews, Apache will give a 404 for a rewrite if a folder of the same name does not exist e.g. /blog/hello : webmasterworld.com/apache/3808792.htm
# 

Options -MultiViews 



# ----------------------------------------------------------------------
# Custom 404 page
# ----------------------------------------------------------------------

# You can add custom pages to handle 500 or 403 pretty easily, if you like.
ErrorDocument 404 /404.html



# ----------------------------------------------------------------------
# UTF-8 encoding
# ----------------------------------------------------------------------

# use utf-8 encoding for anything served text/plain or text/html
AddDefaultCharset utf-8

# force utf-8 for a number of file formats
AddCharset utf-8 .html .css .js .xml .json .rss .atom



# ----------------------------------------------------------------------
# A little more security
# ----------------------------------------------------------------------


# 
# Do we want to advertise the exact version number of Apache we're running? Probably not.
# This can only be enabled if used in httpd.conf - It will not work in .htaccess
# 
# ServerTokens Prod


# 
# "-Indexes" will have Apache block users from browsing folders without a default document
# Usually you should leave this activated, because you shouldn't allow everybody to surf through every folder on your server (which includes rather private places like CMS system folders).
# 
# Options -Indexes


# 
# Block access to "hidden" directories whose names begin with a period. 
# This includes directories used by version control systems such as Subversion or Git.
# 
<IfModule mod_rewrite.c>
  RewriteRule "(^|/)\." - [F]
</IfModule>


# 
# If your server is not already configured as such, the following directive should be uncommented in order to set PHP's register_globals option to OFF. This closes a major security hole that is abused by most XSS (cross-site scripting) attacks. For more information: http://php.net/register_globals
#
# IF REGISTER_GLOBALS DIRECTIVE CAUSES 500 INTERNAL SERVER ERRORS :
#
# Your server does not allow PHP directives to be set via .htaccess. In that case you must make this change in your php.ini file instead.If you are using a commercial web host, contact the administrators for assistance in doing this.Not all servers allow local php.ini files, and they should include all PHP configurations (not just this one), or you will effectively reset everything to PHP defaults.
# Consult www.php.net for more detailed information about setting PHP directives.
# 

# php_flag register_globals Off

# Rename session cookie to something else, than PHPSESSID
# php_value session.name sid

# Do not show you are using PHP
# Note: Move this line to php.ini since it won't work in .htaccess
# php_flag expose_php Off

# Level of log detail - log all errors
# php_value error_reporting -1

# Write errors to log file
# php_flag log_errors On

# Do not display errors in browser (production - Off, development - On)
# php_flag display_errors Off

# Do not display startup errors (production - Off, development - On)
# php_flag display_startup_errors Off

# Format errors in plain text
# php_flag html_errors Off

# Show multiple occurrence of error
# php_flag ignore_repeated_errors Off

# Show same errors from different sources
# php_flag ignore_repeated_source Off

# Size limit for error messages
# php_value log_errors_max_len 1024

# Don't precede error with string (doesn't accept empty string, use whitespace if you need)
# php_value error_prepend_string " "

# Don't prepend to error (doesn't accept empty string, use whitespace if you need)
# php_value error_append_string " "

# Increase cookie security
<IfModule php5_module>
	php_value session.cookie_httponly true
</IfModule>

Make it even better!

Read the docs for how to take your own boilerplate further.

Comments

If you have any questions about the code, we encourage you to read HTML5 Boilerplate's extensive documentation, plus you can ask questions in the comment thread at the bottom of each docs page.

If you have ideas for changes to the project, join the H5BP community on github and file a ticket!