├── src ├── img │ └── .gitignore ├── js │ ├── main.js │ ├── plugins.js │ └── vendor │ │ └── modernizr-2.8.3.min.js ├── .gitattributes ├── tile.png ├── favicon.ico ├── tile-wide.png ├── robots.txt ├── apple-touch-icon.png ├── .gitignore ├── .editorconfig ├── humans.txt ├── browserconfig.xml ├── crossdomain.xml ├── LICENSE.txt ├── doc │ ├── TOC.md │ ├── js.md │ ├── usage.md │ ├── faq.md │ ├── css.md │ ├── misc.md │ ├── html.md │ └── extend.md ├── 404.html ├── index.html ├── css │ ├── main.css │ └── normalize.css └── .htaccess ├── Dockerfile ├── README.md └── nginx.conf /src/img/.gitignore: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/js/main.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto 2 | -------------------------------------------------------------------------------- /src/tile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learncodeacademy/docker-static-nginx/HEAD/src/tile.png -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learncodeacademy/docker-static-nginx/HEAD/src/favicon.ico -------------------------------------------------------------------------------- /src/tile-wide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learncodeacademy/docker-static-nginx/HEAD/src/tile-wide.png -------------------------------------------------------------------------------- /src/robots.txt: -------------------------------------------------------------------------------- 1 | # www.robotstxt.org/ 2 | 3 | # Allow crawling of all content 4 | User-agent: * 5 | Disallow: 6 | -------------------------------------------------------------------------------- /src/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learncodeacademy/docker-static-nginx/HEAD/src/apple-touch-icon.png -------------------------------------------------------------------------------- /src/.gitignore: -------------------------------------------------------------------------------- 1 | # Include your project-specific ignores in this file 2 | # Read about how to use .gitignore: https://help.github.com/articles/ignoring-files 3 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | FROM nginx 2 | 3 | RUN mkdir /etc/nginx/logs && touch /etc/nginx/logs/static.log 4 | 5 | ADD ./nginx.conf /etc/nginx/conf.d/default.conf 6 | ADD /src /www 7 | -------------------------------------------------------------------------------- /src/.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | charset = utf-8 7 | indent_size = 4 8 | indent_style = space 9 | insert_final_newline = true 10 | trim_trailing_whitespace = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /src/humans.txt: -------------------------------------------------------------------------------- 1 | # humanstxt.org/ 2 | # The humans responsible & technology colophon 3 | 4 | # TEAM 5 | 6 | -- -- 7 | 8 | # THANKS 9 | 10 | 11 | 12 | # TECHNOLOGY COLOPHON 13 | 14 | CSS3, HTML5 15 | Apache Server Configs, jQuery, Modernizr, Normalize.css 16 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Docker Nginx Static 2 | =============== 3 | 4 | > Build a docker image that serves static content with Nginx 5 | 6 | 7 | ## Requirements 8 | 9 | - [boot2docker](http://boot2docker.io) (not required for Linux) 10 | - a [docker hub](http://hub.docker.com) account 11 | 12 | ## Building & running your image 13 | 14 | - `docker build -t youruser/yourproject .` 15 | - `docker run -d -p 80:80 --name project youruserName/yourproject` 16 | -------------------------------------------------------------------------------- /src/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/crossdomain.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 15 | 16 | -------------------------------------------------------------------------------- /src/js/plugins.js: -------------------------------------------------------------------------------- 1 | // Avoid `console` errors in browsers that lack a console. 2 | (function() { 3 | var method; 4 | var noop = function () {}; 5 | var methods = [ 6 | 'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error', 7 | 'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log', 8 | 'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd', 9 | 'timeline', 'timelineEnd', 'timeStamp', 'trace', 'warn' 10 | ]; 11 | var length = methods.length; 12 | var console = (window.console = window.console || {}); 13 | 14 | while (length--) { 15 | method = methods[length]; 16 | 17 | // Only stub undefined methods. 18 | if (!console[method]) { 19 | console[method] = noop; 20 | } 21 | } 22 | }()); 23 | 24 | // Place any jQuery/helper plugins in here. 25 | -------------------------------------------------------------------------------- /nginx.conf: -------------------------------------------------------------------------------- 1 | server { 2 | root /www; 3 | 4 | location / { 5 | autoindex on; 6 | } 7 | 8 | # these settings are from https://github.com/h5bp/server-configs-nginx/blob/master/h5bp/location/expires.conf 9 | # feel free to change as much as you like 10 | # cache.appcache, your document html and data 11 | location ~* \.(?:manifest|appcache|html?|xml|json)$ { 12 | expires -1; 13 | access_log logs/static.log; 14 | } 15 | 16 | # Feed 17 | location ~* \.(?:rss|atom)$ { 18 | expires 1h; 19 | add_header Cache-Control "public"; 20 | } 21 | 22 | # Media: images, icons, video, audio, HTC 23 | location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ { 24 | expires 1M; 25 | access_log off; 26 | add_header Cache-Control "public"; 27 | } 28 | 29 | # CSS and Javascript 30 | location ~* \.(?:css|js)$ { 31 | expires 1y; 32 | access_log off; 33 | add_header Cache-Control "public"; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) HTML5 Boilerplate 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of 4 | this software and associated documentation files (the "Software"), to deal in 5 | the Software without restriction, including without limitation the rights to 6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 7 | of the Software, and to permit persons to whom the Software is furnished to do 8 | so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all 11 | copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 19 | SOFTWARE. 20 | -------------------------------------------------------------------------------- /src/doc/TOC.md: -------------------------------------------------------------------------------- 1 | [HTML5 Boilerplate homepage](https://html5boilerplate.com) 2 | 3 | ## Getting started 4 | 5 | * [Usage](usage.md) — Overview of the project contents. 6 | * [FAQ](faq.md) — Frequently asked questions along with their answers. 7 | 8 | ## HTML5 Boilerplate core 9 | 10 | * [HTML](html.md) — Guide to the default HTML. 11 | * [CSS](css.md) — Guide to the default CSS. 12 | * [JavaScript](js.md) — Guide to the default JavaScript. 13 | * [Everything else](misc.md). 14 | 15 | ## Development 16 | 17 | * [Extending and customizing HTML5 Boilerplate](extend.md) — Going further 18 | with the boilerplate. 19 | 20 | ## Related projects 21 | 22 | The [H5BP organization](https://github.com/h5bp) maintains several projects 23 | that complement HTML5 Boilerplate, projects that can help you improve different 24 | aspects of your website/web app (e.g.: the performance, security, etc.). 25 | 26 | * [Server Configs](https://github.com/h5bp/server-configs) — Fast and 27 | smart configurations for web servers such as Apache and Nginx. 28 | * [Ant Build Script](https://github.com/h5bp/ant-build-script) — Apache 29 | Ant based build script. 30 | -------------------------------------------------------------------------------- /src/doc/js.md: -------------------------------------------------------------------------------- 1 | [HTML5 Boilerplate homepage](https://html5boilerplate.com) | [Documentation 2 | table of contents](TOC.md) 3 | 4 | # The JavaScript 5 | 6 | Information about the default JavaScript included in the project. 7 | 8 | ## main.js 9 | 10 | This file can be used to contain or reference your site/app JavaScript code. 11 | For larger projects, you can make use of a JavaScript module loader, like 12 | [Require.js](http://requirejs.org/), to load any other scripts you need to 13 | run. 14 | 15 | ## plugins.js 16 | 17 | This file can be used to contain all your plugins, such as jQuery plugins and 18 | other 3rd party scripts. 19 | 20 | One approach is to put jQuery plugins inside of a `(function($){ ... 21 | })(jQuery);` closure to make sure they're in the jQuery namespace safety 22 | blanket. Read more about [jQuery plugin 23 | authoring](https://learn.jquery.com/plugins/#Getting_Started). 24 | 25 | By default the `plugins.js` file contains a small script to avoid `console` 26 | errors in browsers that lack a `console`. The script will make sure that, if 27 | a console method isn't available, that method will have the value of empty 28 | function, thus, preventing the browser from throwing an error. 29 | 30 | 31 | ## vendor 32 | 33 | This directory can be used to contain all 3rd party library code. 34 | 35 | Minified versions of the latest jQuery and Modernizr libraries are included by 36 | default. You may wish to create your own [custom Modernizr 37 | build](http://www.modernizr.com/download/). 38 | -------------------------------------------------------------------------------- /src/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Page Not Found 6 | 7 | 54 | 55 | 56 |

Page Not Found

57 |

Sorry, but the page you were trying to view does not exist.

58 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 21 | 22 | 23 |

Hello world! This is HTML5 Boilerplate.

24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /src/doc/usage.md: -------------------------------------------------------------------------------- 1 | [HTML5 Boilerplate homepage](https://html5boilerplate.com) | [Documentation 2 | table of contents](TOC.md) 3 | 4 | # Usage 5 | 6 | Once you have cloned or downloaded HTML5 Boilerplate, creating a site or app 7 | usually involves the following: 8 | 9 | 1. Set up the basic structure of the site. 10 | 2. Add some content, style, and functionality. 11 | 3. Run your site locally to see how it looks. 12 | 4. (Optionally run a build script to automate the optimization of your site - 13 | e.g. [ant build script](https://github.com/h5bp/ant-build-script)) 14 | 5. Deploy your site. 15 | 16 | 17 | ## Basic structure 18 | 19 | A basic HTML5 Boilerplate site initially looks something like this: 20 | 21 | ``` 22 | . 23 | ├── css 24 | │ ├── main.css 25 | │ └── normalize.css 26 | ├── doc 27 | ├── img 28 | ├── js 29 | │ ├── main.js 30 | │ ├── plugins.js 31 | │ └── vendor 32 | │ ├── jquery.min.js 33 | │ └── modernizr.min.js 34 | ├── .editorconfig 35 | ├── .htaccess 36 | ├── 404.html 37 | ├── apple-touch-icon.png 38 | ├── browserconfig.xml 39 | ├── index.html 40 | ├── humans.txt 41 | ├── robots.txt 42 | ├── crossdomain.xml 43 | ├── favicon.ico 44 | ├── tile-wide.png 45 | └── tile.png 46 | ``` 47 | 48 | What follows is a general overview of each major part and how to use them. 49 | 50 | ### css 51 | 52 | This directory should contain all your project's CSS files. It includes some 53 | initial CSS to help get you started from a solid foundation. [About the 54 | CSS](css.md). 55 | 56 | ### doc 57 | 58 | This directory contains all the HTML5 Boilerplate documentation. You can use it 59 | as the location and basis for your own project's documentation. 60 | 61 | ### js 62 | 63 | This directory should contain all your project's JS files. Libraries, plugins, 64 | and custom code can all be included here. It includes some initial JS to help 65 | get you started. [About the JavaScript](js.md). 66 | 67 | ### .htaccess 68 | 69 | The default web server configs are for Apache. For more information, please 70 | refer to the [Apache Server Configs 71 | repository](https://github.com/h5bp/server-configs-apache). 72 | 73 | Host your site on a server other than Apache? You're likely to find the 74 | corresponding server configs project listed in our [Server Configs 75 | ](https://github.com/h5bp/server-configs/blob/master/README.md) repository. 76 | 77 | ### 404.html 78 | 79 | A helpful custom 404 to get you started. 80 | 81 | ### browserconfig.xml 82 | 83 | This file contains all settings regarding custom tiles for IE11. 84 | 85 | For more info on this topic, please refer to 86 | [MSDN](https://msdn.microsoft.com/en-us/library/ie/dn455106.aspx). 87 | 88 | ### .editorconfig 89 | 90 | The `.editorconfig` file is provided in order to encourage and help you and 91 | your team to maintain consistent coding styles between different 92 | editors and IDEs. [Read more about the `.editorconfig` file](misc.md#editorconfig). 93 | 94 | ### index.html 95 | 96 | This is the default HTML skeleton that should form the basis of all pages on 97 | your site. If you are using a server-side templating framework, then you will 98 | need to integrate this starting HTML with your setup. 99 | 100 | Make sure that you update the URLs for the referenced CSS and JavaScript if you 101 | modify the directory structure at all. 102 | 103 | If you are using Google Universal Analytics, make sure that you edit the 104 | corresponding snippet at the bottom to include your analytics ID. 105 | 106 | ### humans.txt 107 | 108 | Edit this file to include the team that worked on your site/app, and the 109 | technology powering it. 110 | 111 | ### robots.txt 112 | 113 | Edit this file to include any pages you need hidden from search engines. 114 | 115 | ### crossdomain.xml 116 | 117 | A template for working with cross-domain requests. [About 118 | crossdomain.xml](misc.md#crossdomainxml). 119 | 120 | ### Icons 121 | 122 | Replace the default `favicon.ico`, `tile.png`, `tile-wide.png` and Apple 123 | Touch Icon with your own. 124 | 125 | If you want to use different Apple Touch Icons for different resolutions please 126 | refer to the [according documentation](extend.md#apple-touch-icons). 127 | 128 | You might want to check out Hans' handy [HTML5 Boilerplate Favicon and Apple 129 | Touch Icon 130 | PSD-Template](https://drublic.de/blog/html5-boilerplate-favicons-psd-template/). 131 | -------------------------------------------------------------------------------- /src/doc/faq.md: -------------------------------------------------------------------------------- 1 | [HTML5 Boilerplate homepage](https://html5boilerplate.com) | [Documentation 2 | table of contents](TOC.md) 3 | 4 | # Frequently asked questions 5 | 6 | * [Why is the URL for jQuery without 7 | `http`?](#why-is-the-url-for-jquery-without-http) 8 | * [Why don't you automatically load the latest version of jQuery from the Google 9 | CDN?](#why-dont-you-automatically-load-the-latest-version-of-jquery-from-the-google-cdn) 10 | * [Why is the Google Analytics code at the bottom? Google recommends it be 11 | placed in the ``.](#why-is-the-google-analytics-code-at-the-bottom-google-recommends-it-be-placed-in-the-head) 12 | * [How can I integrate Bootstrap with HTML5 13 | Boilerplate?](#how-can-i-integrate-bootstrap-with-html5-boilerplate) 14 | * [Do I need to upgrade my site each time a new version of HTML5 Boilerplate is 15 | released?](#do-i-need-to-upgrade-my-site-each-time-a-new-version-of-html5-boilerplate-is-released) 16 | * [Where can I get help with support 17 | questions?](#where-can-i-get-help-with-support-questions) 18 | 19 | -- 20 | 21 | ### Why is the URL for jQuery without `http`? 22 | 23 | It is because of the use of [protocol-relative 24 | URLs](http://paulirish.com/2010/the-protocol-relative-url/). 25 | 26 | **N.B.** If you try to view the local web page directly in the browser, the 27 | browser will fail to load the assets specified using protocol-relative URLs 28 | as it will attempt to fetch them from the local file system. We recommend you 29 | use a local HTTP server to test your web pages, or a file hosting service that 30 | allows you to preview your web pages online (e.g. 31 | [Dropbox](https://www.dropbox.com/)). 32 | 33 | Setting up a local HTTP server can be done using there various 34 | [one-liners](https://gist.github.com/willurd/5720255): 35 | 36 | * PHP 5.4.0+ by running 37 | [`php -S localhost:8080`](https://php.net/manual/en/features.commandline.webserver.php) 38 | from your local directory 39 | * Python 2.x by running `python -m SimpleHTTPServer` from your local directory 40 | * Python 3.x by running `python -m http.server` from your local directory 41 | * Ruby 1.9.2+ by running `ruby -run -ehttpd . -p8080` from your local directory 42 | * Node.js by installing and running either 43 | [`static -p 8080`](https://www.npmjs.org/package/node-static) 44 | or [`http-server -p 8080`](https://www.npmjs.org/package/http-server) 45 | 46 | A list of more complex HTTP servers can be found 47 | [here](misc.md#servers-and-stacks). 48 | 49 | 50 | ### Why don't you automatically load the latest version of jQuery from the Google CDN? 51 | 52 | The [file](https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js) to which 53 | the Google [CDN](https://en.wikipedia.org/wiki/Content_delivery_network) points 54 | to is [no longer updated and will stay locked at version `1.11.1` in order to 55 | prevent inadvertent web 56 | breakage](http://blog.jquery.com/2014/07/03/dont-use-jquery-latest-js/). 57 | 58 | In general, version updating should be an intentional decision! You shouldn't 59 | include a URL that will always point to the latest version, as that version: 60 | 61 | * may not be compatible with the existing plugins/code on the site 62 | * will have a very short cache time compare to the specific version, 63 | which means that users won't get the benefits of long-term caching 64 | 65 | ### Why is the Google Analytics code at the bottom? Google recommends it be placed in the ``. 66 | 67 | The main advantage of placing it in the `` is that you will track the 68 | user's `pageview` even if they leave the page before it has been fully loaded. 69 | However, having the code at the bottom of the page [helps improve 70 | performance](http://stevesouders.com/efws/inline-scripts-bottom.php). 71 | 72 | 73 | ### How can I integrate [Bootstrap](http://getbootstrap.com/) with HTML5 Boilerplate? 74 | 75 | One simple way is to use [Initializr](http://initializr.com) and create a 76 | custom build that includes both HTML5 Boilerplate and 77 | [Bootstrap](http://getbootstrap.com/). 78 | 79 | Read more about how [HTML5 Boilerplate and Bootstrap complement each 80 | other](https://www.quora.com/Is-Bootstrap-a-complement-or-an-alternative-to-HTML5-Boilerplate-or-viceversa/answer/Nicolas-Gallagher). 81 | 82 | 83 | ### Do I need to upgrade my site each time a new version of HTML5 Boilerplate is released? 84 | 85 | No, same as you don't normally replace the foundation of a house once it 86 | was built. However, there is nothing stopping you from trying to work in the 87 | latest changes, but you'll have to assess the costs/benefits of doing so. 88 | 89 | 90 | ### Where can I get help with support questions? 91 | 92 | Please ask for help on 93 | [StackOverflow](https://stackoverflow.com/questions/tagged/html5boilerplate). 94 | -------------------------------------------------------------------------------- /src/css/main.css: -------------------------------------------------------------------------------- 1 | /*! HTML5 Boilerplate v5.1.0 | MIT License | https://html5boilerplate.com/ */ 2 | 3 | /* 4 | * What follows is the result of much research on cross-browser styling. 5 | * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, 6 | * Kroc Camen, and the H5BP dev community and team. 7 | */ 8 | 9 | /* ========================================================================== 10 | Base styles: opinionated defaults 11 | ========================================================================== */ 12 | 13 | html { 14 | color: #222; 15 | font-size: 1em; 16 | line-height: 1.4; 17 | } 18 | 19 | /* 20 | * Remove text-shadow in selection highlight: 21 | * https://twitter.com/miketaylr/status/12228805301 22 | * 23 | * These selection rule sets have to be separate. 24 | * Customize the background color to match your design. 25 | */ 26 | 27 | ::-moz-selection { 28 | background: #b3d4fc; 29 | text-shadow: none; 30 | } 31 | 32 | ::selection { 33 | background: #b3d4fc; 34 | text-shadow: none; 35 | } 36 | 37 | /* 38 | * A better looking default horizontal rule 39 | */ 40 | 41 | hr { 42 | display: block; 43 | height: 1px; 44 | border: 0; 45 | border-top: 1px solid #ccc; 46 | margin: 1em 0; 47 | padding: 0; 48 | } 49 | 50 | /* 51 | * Remove the gap between audio, canvas, iframes, 52 | * images, videos and the bottom of their containers: 53 | * https://github.com/h5bp/html5-boilerplate/issues/440 54 | */ 55 | 56 | audio, 57 | canvas, 58 | iframe, 59 | img, 60 | svg, 61 | video { 62 | vertical-align: middle; 63 | } 64 | 65 | /* 66 | * Remove default fieldset styles. 67 | */ 68 | 69 | fieldset { 70 | border: 0; 71 | margin: 0; 72 | padding: 0; 73 | } 74 | 75 | /* 76 | * Allow only vertical resizing of textareas. 77 | */ 78 | 79 | textarea { 80 | resize: vertical; 81 | } 82 | 83 | /* ========================================================================== 84 | Browser Upgrade Prompt 85 | ========================================================================== */ 86 | 87 | .browserupgrade { 88 | margin: 0.2em 0; 89 | background: #ccc; 90 | color: #000; 91 | padding: 0.2em 0; 92 | } 93 | 94 | /* ========================================================================== 95 | Author's custom styles 96 | ========================================================================== */ 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | /* ========================================================================== 115 | Helper classes 116 | ========================================================================== */ 117 | 118 | /* 119 | * Hide visually and from screen readers: 120 | */ 121 | 122 | .hidden { 123 | display: none !important; 124 | } 125 | 126 | /* 127 | * Hide only visually, but have it available for screen readers: 128 | * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility 129 | */ 130 | 131 | .visuallyhidden { 132 | border: 0; 133 | clip: rect(0 0 0 0); 134 | height: 1px; 135 | margin: -1px; 136 | overflow: hidden; 137 | padding: 0; 138 | position: absolute; 139 | width: 1px; 140 | } 141 | 142 | /* 143 | * Extends the .visuallyhidden class to allow the element 144 | * to be focusable when navigated to via the keyboard: 145 | * https://www.drupal.org/node/897638 146 | */ 147 | 148 | .visuallyhidden.focusable:active, 149 | .visuallyhidden.focusable:focus { 150 | clip: auto; 151 | height: auto; 152 | margin: 0; 153 | overflow: visible; 154 | position: static; 155 | width: auto; 156 | } 157 | 158 | /* 159 | * Hide visually and from screen readers, but maintain layout 160 | */ 161 | 162 | .invisible { 163 | visibility: hidden; 164 | } 165 | 166 | /* 167 | * Clearfix: contain floats 168 | * 169 | * For modern browsers 170 | * 1. The space content is one way to avoid an Opera bug when the 171 | * `contenteditable` attribute is included anywhere else in the document. 172 | * Otherwise it causes space to appear at the top and bottom of elements 173 | * that receive the `clearfix` class. 174 | * 2. The use of `table` rather than `block` is only necessary if using 175 | * `:before` to contain the top-margins of child elements. 176 | */ 177 | 178 | .clearfix:before, 179 | .clearfix:after { 180 | content: " "; /* 1 */ 181 | display: table; /* 2 */ 182 | } 183 | 184 | .clearfix:after { 185 | clear: both; 186 | } 187 | 188 | /* ========================================================================== 189 | EXAMPLE Media Queries for Responsive Design. 190 | These examples override the primary ('mobile first') styles. 191 | Modify as content requires. 192 | ========================================================================== */ 193 | 194 | @media only screen and (min-width: 35em) { 195 | /* Style adjustments for viewports that meet the condition */ 196 | } 197 | 198 | @media print, 199 | (-webkit-min-device-pixel-ratio: 1.25), 200 | (min-resolution: 120dpi) { 201 | /* Style adjustments for high resolution devices */ 202 | } 203 | 204 | /* ========================================================================== 205 | Print styles. 206 | Inlined to avoid the additional HTTP request: 207 | http://www.phpied.com/delay-loading-your-print-css/ 208 | ========================================================================== */ 209 | 210 | @media print { 211 | *, 212 | *:before, 213 | *:after { 214 | background: transparent !important; 215 | color: #000 !important; /* Black prints faster: 216 | http://www.sanbeiji.com/archives/953 */ 217 | box-shadow: none !important; 218 | text-shadow: none !important; 219 | } 220 | 221 | a, 222 | a:visited { 223 | text-decoration: underline; 224 | } 225 | 226 | a[href]:after { 227 | content: " (" attr(href) ")"; 228 | } 229 | 230 | abbr[title]:after { 231 | content: " (" attr(title) ")"; 232 | } 233 | 234 | /* 235 | * Don't show links that are fragment identifiers, 236 | * or use the `javascript:` pseudo protocol 237 | */ 238 | 239 | a[href^="#"]:after, 240 | a[href^="javascript:"]:after { 241 | content: ""; 242 | } 243 | 244 | pre, 245 | blockquote { 246 | border: 1px solid #999; 247 | page-break-inside: avoid; 248 | } 249 | 250 | /* 251 | * Printing Tables: 252 | * http://css-discuss.incutio.com/wiki/Printing_Tables 253 | */ 254 | 255 | thead { 256 | display: table-header-group; 257 | } 258 | 259 | tr, 260 | img { 261 | page-break-inside: avoid; 262 | } 263 | 264 | img { 265 | max-width: 100% !important; 266 | } 267 | 268 | p, 269 | h2, 270 | h3 { 271 | orphans: 3; 272 | widows: 3; 273 | } 274 | 275 | h2, 276 | h3 { 277 | page-break-after: avoid; 278 | } 279 | } 280 | -------------------------------------------------------------------------------- /src/doc/css.md: -------------------------------------------------------------------------------- 1 | [HTML5 Boilerplate homepage](https://html5boilerplate.com) | [Documentation 2 | table of contents](TOC.md) 3 | 4 | # The CSS 5 | 6 | HTML5 Boilerplate's CSS includes: 7 | 8 | * [Normalize.css](#normalizecss) 9 | * [Useful defaults](#useful-defaults) 10 | * [Common helpers](#common-helpers) 11 | * [Placeholder media queries](#media-queries) 12 | * [Print styles](#print-styles) 13 | 14 | This starting CSS does not rely on the presence of 15 | [conditional class names](https://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/), 16 | [conditional style sheets](https://css-tricks.com/how-to-create-an-ie-only-stylesheet/), 17 | or [Modernizr](http://modernizr.com/), and it is ready to use no matter what 18 | your development preferences happen to be. 19 | 20 | 21 | ## Normalize.css 22 | 23 | In order to make browsers render all elements more consistently and in line 24 | with modern standards, we include 25 | [Normalize.css](https://necolas.github.io/normalize.css/) — a modern, HTML5-ready 26 | alternative to CSS resets. 27 | 28 | As opposed to CSS resets, Normalize.css: 29 | 30 | * targets only the styles that need normalizing 31 | * preserves useful browser defaults rather than erasing them 32 | * corrects bugs and common browser inconsistencies 33 | * improves usability with subtle improvements 34 | * doesn't clutter the debugging tools 35 | * has better documentation 36 | 37 | For more information about Normalize.css, please refer to its [project 38 | page](https://necolas.github.com/normalize.css/), as well as this 39 | [blog post](http://nicolasgallagher.com/about-normalize-css/). 40 | 41 | 42 | ## Useful defaults 43 | 44 | Several base styles are included that build upon `Normalize.css`. These 45 | styles: 46 | 47 | * provide basic typography settings that improve text readability 48 | * protect against unwanted `text-shadow` during text highlighting 49 | * tweak the default alignment of some elements (e.g.: `img`, `video`, 50 | `fieldset`, `textarea`) 51 | * style the prompt that is displayed to users using an outdated browser 52 | 53 | You are free and even encouraged to modify or add to these base styles as your 54 | project requires. 55 | 56 | 57 | ## Common helpers 58 | 59 | Along with the base styles, we also provide some commonly used helper classes. 60 | 61 | #### `.hidden` 62 | 63 | The `hidden` class can be added to any element that you want to hide visually 64 | and from screen readers. It could be an element that will be populated and 65 | displayed later, or an element you will hide with JavaScript. 66 | 67 | #### `.visuallyhidden` 68 | 69 | The `visuallyhidden` class can be added to any element that you want to hide 70 | visually, while still have its content accessible to screen readers. 71 | 72 | See also: 73 | 74 | * [CSS in Action: Invisible Content Just for Screen Reader 75 | Users](http://www.webaim.org/techniques/css/invisiblecontent/) 76 | * [Hiding content for 77 | accessibility](http://snook.ca/archives/html_and_css/hiding-content-for-accessibility) 78 | * [HTML5 Boilerplate - Issue #194](https://github.com/h5bp/html5-boilerplate/issues/194/). 79 | 80 | #### `.invisible` 81 | 82 | The `invisible` class can be added to any element that you want to hide 83 | visually and from screen readers, but without affecting the layout. 84 | 85 | As opposed to the `hidden` class that effectively removes the element from the 86 | layout, the `invisible` class will simply make the element invisible while 87 | keeping it in the flow and not affecting the positioning of the surrounding 88 | content. 89 | 90 | __N.B.__ Try to stay away from, and don't use the classes specified above for 91 | [keyword stuffing](https://en.wikipedia.org/wiki/Keyword_stuffing) as you will 92 | harm your site's ranking! 93 | 94 | #### `.clearfix` 95 | 96 | The `clearfix` class can be added to any element to ensure that it always fully 97 | contains its floated children. 98 | 99 | Over the years there have been many variants of the clearfix hack, but currently, 100 | we use the [micro clearfix](http://nicolasgallagher.com/micro-clearfix-hack/). 101 | 102 | 103 | ## Media Queries 104 | 105 | HTML5 Boilerplate makes it easy for you to get started with a 106 | [_mobile first_](http://www.lukew.com/presos/preso.asp?26) and [_responsive web 107 | design_](http://www.alistapart.com/articles/responsive-web-design/) approach to 108 | development. But it's worth remembering that there are [no silver 109 | bullets](http://blog.cloudfour.com/css-media-query-for-mobile-is-fools-gold/). 110 | 111 | We include placeholder media queries to help you build up your mobile styles for 112 | wider viewports and high-resolution displays. It's recommended that you adapt 113 | these media queries based on the content of your site rather than mirroring the 114 | fixed dimensions of specific devices. 115 | 116 | If you do not want to take the _mobile first_ approach, you can simply edit or 117 | remove these placeholder media queries. One possibility would be to work from 118 | wide viewports down, and use `max-width` media queries instead (e.g.: 119 | `@media only screen and (max-width: 480px)`). 120 | 121 | For more features that can help you in your mobile web development, take a look 122 | into our [Mobile Boilerplate](https://github.com/h5bp/mobile-boilerplate). 123 | 124 | 125 | ## Print styles 126 | 127 | Lastly, we provide some useful print styles that will optimize the printing 128 | process, as well as make the printed pages easier to read. 129 | 130 | At printing time, these styles will: 131 | 132 | * strip all background colors, change the font color to black, and remove the 133 | `text-shadow` — done in order to [help save printer ink and speed up the 134 | printing process](http://www.sanbeiji.com/archives/953) 135 | * underline and expand links to include the URL — done in order to allow users 136 | to know where to refer to
137 | (exceptions to this are: the links that are 138 | [fragment identifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href), 139 | or use the 140 | [`javascript:` pseudo protocol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void#JavaScript_URIs)) 141 | * expand abbreviations to include the full description — done in order to allow 142 | users to know what the abbreviations stands for 143 | * provide instructions on how browsers should break the content into pages and 144 | on [orphans/widows](https://en.wikipedia.org/wiki/Widows_and_orphans), namely, 145 | we instruct 146 | [supporting browsers](https://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29#Grammar_and_rules) 147 | that they should: 148 | 149 | * ensure the table header (``) is [printed on each page spanned by the 150 | table](http://css-discuss.incutio.com/wiki/Printing_Tables) 151 | * prevent block quotations, preformatted text, images and table rows from 152 | being split onto two different pages 153 | * ensure that headings never appear on a different page than the text they 154 | are associated with 155 | * ensure that 156 | [orphans and widows](https://en.wikipedia.org/wiki/Widows_and_orphans) do 157 | [not appear on printed pages](https://css-tricks.com/almanac/properties/o/orphans/) 158 | 159 | The print styles are included along with the other `css` to [avoid the 160 | additional HTTP request](http://www.phpied.com/delay-loading-your-print-css/). 161 | Also, they should always be included last, so that the other styles can be 162 | overwritten. 163 | -------------------------------------------------------------------------------- /src/doc/misc.md: -------------------------------------------------------------------------------- 1 | [HTML5 Boilerplate homepage](https://html5boilerplate.com) | [Documentation 2 | table of contents](TOC.md) 3 | 4 | # Miscellaneous 5 | 6 | * [.gitignore](#gitignore) 7 | * [.editorconfig](#editorconfig) 8 | * [Server Configuration](#server-configuration) 9 | * [crossdomain.xml](#crossdomainxml) 10 | * [robots.txt](#robotstxt) 11 | * [browserconfig.xml](#browserconfigxml) 12 | 13 | -- 14 | 15 | ## .gitignore 16 | 17 | HTML5 Boilerplate includes a basic project-level `.gitignore`. This should 18 | primarily be used to avoid certain project-level files and directories from 19 | being kept under source control. Different development-environments will 20 | benefit from different collections of ignores. 21 | 22 | OS-specific and editor-specific files should be ignored using a "global 23 | ignore" that applies to all repositories on your system. 24 | 25 | For example, add the following to your `~/.gitconfig`, where the `.gitignore` 26 | in your HOME directory contains the files and directories you'd like to 27 | globally ignore: 28 | 29 | ```gitignore 30 | [core] 31 | excludesfile = ~/.gitignore 32 | ``` 33 | 34 | * More on global ignores: https://help.github.com/articles/ignoring-files 35 | * Comprehensive set of ignores on GitHub: https://github.com/github/gitignore 36 | 37 | 38 | ## .editorconfig 39 | 40 | The `.editorconfig` file is provided in order to encourage and help you and 41 | your team define and maintain consistent coding styles between different 42 | editors and IDEs. 43 | 44 | By default, `.editorconfig` includes some basic 45 | [properties](http://editorconfig.org/#supported-properties) that reflect the 46 | coding styles from the files provided by default, but you can easily change 47 | them to better suit your needs. 48 | 49 | In order for your editor/IDE to apply the 50 | [properties](http://editorconfig.org/#supported-properties) from the 51 | `.editorconfig` file, you will need to [install a 52 | plugin]( http://editorconfig.org/#download). 53 | 54 | __N.B.__ If you aren't using the server configurations provided by HTML5 55 | Boilerplate, we highly encourage you to configure your server to block 56 | access to `.editorconfig` files, as they can disclose sensitive information! 57 | 58 | For more details, please refer to the [EditorConfig 59 | project](http://editorconfig.org/). 60 | 61 | 62 | ## Server Configuration 63 | 64 | H5BP includes a [`.htaccess`](#htaccess) file for the Apache HTTP server. If you are not using 65 | Apache as your web server, then you are encouraged to download a 66 | [server configuration](https://github.com/h5bp/server-configs) that corresponds 67 | to your web server and environment. 68 | 69 | 70 | ### Servers and Stacks 71 | 72 | A comprehensive list of web servers and stacks are beyond the scope of this 73 | documentation, but some common ones include: 74 | 75 | * [Apache HTTP Server](https://httpd.apache.org/docs/trunk/getting-started.html) 76 | * [LAMP](https://en.wikipedia.org/wiki/LAMP_%28software_bundle%29) 77 | (Linux, Apache, MySQL, and PHP). 78 | Other variants include [MAMP](https://www.mamp.info/en/index.html), 79 | [WAMP](http://www.wampserver.com/en/), 80 | or [XAMPP](https://www.apachefriends.org/index.html). 81 | * LAPP uses PostgreSQL instead of MySQL 82 | * [Nginx](http://wiki.nginx.org/GettingStarted) 83 | * [LEMP](http://www.chrisjohnston.org/ubuntu-tutorials/setting-up-a-lemp-stack-ubuntu-904) 84 | is similar to the LAMP stack but uses Nginx 85 | * [IIS](https://en.wikipedia.org/wiki/Internet_Information_Services) 86 | * [ASP.NET](https://www.asp.net/get-started) 87 | * [MEAN](http://mean.io/) (MongoDB, Express, AngularJS, Node.js) 88 | 89 | 90 | ### .htaccess 91 | 92 | A `.htaccess` (hypertext access) file is a 93 | [Apache HTTP server configuration file](https://github.com/h5bp/server-configs-apache). 94 | The `.htaccess` file is mostly used for: 95 | 96 | * Rewriting URLs 97 | * Controlling cache 98 | * Authentication 99 | * Server-side includes 100 | * Redirects 101 | * Gzipping 102 | 103 | If you have access to the main server configuration file (usually called 104 | `httpd.conf`), you should add the logic from the `.htaccess` file in, for 105 | example, a section in the main configuration file. This is usually 106 | the recommended way, as using .htaccess files slows down Apache! 107 | 108 | To enable Apache modules locally, please see: 109 | https://github.com/h5bp/server-configs-apache/wiki/How-to-enable-Apache-modules. 110 | 111 | In the repo the `.htaccess` is used for: 112 | 113 | * Allowing cross-origin access to web fonts 114 | * CORS header for images when browsers request it 115 | * Enable `404.html` as 404 error document 116 | * Making the website experience better for IE users better 117 | * Media UTF-8 as character encoding for `text/html` and `text/plain` 118 | * Enabling the rewrite URLs engine 119 | * Forcing or removing the `www.` at the begin of a URL 120 | * It blocks access to directories without a default document 121 | * It blocks access to files that can expose sensitive information. 122 | * It reduces MIME type security risks 123 | * It forces compressing (gzipping) 124 | * It tells the browser whether they should request a specific file from the 125 | server or whether they should grab it from the browser's cache 126 | 127 | When using `.htaccess` we recommend reading all inline comments (the rules after 128 | a `#`) in the file once. There is a bunch of optional stuff in it. 129 | 130 | If you want to know more about the `.htaccess` file check out 131 | https://httpd.apache.org/docs/current/howto/htaccess.html. 132 | 133 | Notice that the original repo for the `.htaccess` file is [this 134 | one](https://github.com/h5bp/server-configs-apache). 135 | 136 | 137 | ## crossdomain.xml 138 | 139 | The _cross-domain policy file_ is an XML document that gives a web client — 140 | such as Adobe Flash Player, Adobe Reader, etc. — permission to handle data 141 | across multiple domains, by: 142 | 143 | * granting read access to data 144 | * permitting the client to include custom headers in cross-domain requests 145 | * granting permissions for socket-based connections 146 | 147 | __e.g.__ If a client hosts content from a particular source domain and that 148 | content makes requests directed towards a domain other than its own, the remote 149 | domain would need to host a cross-domain policy file in order to grant access 150 | to the source domain and allow the client to continue with the transaction. 151 | 152 | For more in-depth information, please see Adobe's [cross-domain policy file 153 | specification](https://www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html). 154 | 155 | 156 | ## robots.txt 157 | 158 | The `robots.txt` file is used to give instructions to web robots on what can 159 | be crawled from the website. 160 | 161 | By default, the file provided by this project includes the next two lines: 162 | 163 | * `User-agent: *` - the following rules apply to all web robots 164 | * `Disallow:` - everything on the website is allowed to be crawled 165 | 166 | If you want to disallow certain pages you will need to specify the path in a 167 | `Disallow` directive (e.g.: `Disallow: /path`) or, if you want to disallow 168 | crawling of all content, use `Disallow: /`. 169 | 170 | The `/robots.txt` file is not intended for access control, so don't try to 171 | use it as such. Think of it as a "No Entry" sign, rather than a locked door. 172 | URLs disallowed by the `robots.txt` file might still be indexed without being 173 | crawled, and the content from within the `robots.txt` file can be viewed by 174 | anyone, potentially disclosing the location of your private content! So, if 175 | you want to block access to private content, use proper authentication instead. 176 | 177 | For more information about `robots.txt`, please see: 178 | 179 | * [robotstxt.org](http://www.robotstxt.org/) 180 | * [How Google handles the `robots.txt` file](https://developers.google.com/webmasters/control-crawl-index/docs/robots_txt) 181 | 182 | 183 | ## browserconfig.xml 184 | 185 | The `browserconfig.xml` file is used to customize the tile displayed when users 186 | pin your site to the Windows 8.1 start screen. In there you can define custom 187 | tile colors, custom images or even [live tiles](https://msdn.microsoft.com/en-us/library/ie/dn455106.aspx#CreatingLiveTiles). 188 | 189 | By default, the file points to 2 placeholder tile images: 190 | 191 | * `tile.png` (558x558px): used for `Small`, `Medium` and `Large` tiles. 192 | This image resizes automatically when necessary. 193 | * `tile-wide.png` (558x270px): user for `Wide` tiles. 194 | 195 | Notice that IE11 uses the same images when adding a site to the `favorites`. 196 | 197 | For more in-depth information about the `browserconfig.xml` file, please 198 | see [MSDN](https://msdn.microsoft.com/en-us/library/ie/dn320426.aspx). 199 | -------------------------------------------------------------------------------- /src/css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /** 4 | * 1. Set default font family to sans-serif. 5 | * 2. Prevent iOS and IE text size adjust after device orientation change, 6 | * without disabling user zoom. 7 | */ 8 | 9 | html { 10 | font-family: sans-serif; /* 1 */ 11 | -ms-text-size-adjust: 100%; /* 2 */ 12 | -webkit-text-size-adjust: 100%; /* 2 */ 13 | } 14 | 15 | /** 16 | * Remove default margin. 17 | */ 18 | 19 | body { 20 | margin: 0; 21 | } 22 | 23 | /* HTML5 display definitions 24 | ========================================================================== */ 25 | 26 | /** 27 | * Correct `block` display not defined for any HTML5 element in IE 8/9. 28 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 29 | * and Firefox. 30 | * Correct `block` display not defined for `main` in IE 11. 31 | */ 32 | 33 | article, 34 | aside, 35 | details, 36 | figcaption, 37 | figure, 38 | footer, 39 | header, 40 | hgroup, 41 | main, 42 | menu, 43 | nav, 44 | section, 45 | summary { 46 | display: block; 47 | } 48 | 49 | /** 50 | * 1. Correct `inline-block` display not defined in IE 8/9. 51 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 52 | */ 53 | 54 | audio, 55 | canvas, 56 | progress, 57 | video { 58 | display: inline-block; /* 1 */ 59 | vertical-align: baseline; /* 2 */ 60 | } 61 | 62 | /** 63 | * Prevent modern browsers from displaying `audio` without controls. 64 | * Remove excess height in iOS 5 devices. 65 | */ 66 | 67 | audio:not([controls]) { 68 | display: none; 69 | height: 0; 70 | } 71 | 72 | /** 73 | * Address `[hidden]` styling not present in IE 8/9/10. 74 | * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. 75 | */ 76 | 77 | [hidden], 78 | template { 79 | display: none; 80 | } 81 | 82 | /* Links 83 | ========================================================================== */ 84 | 85 | /** 86 | * Remove the gray background color from active links in IE 10. 87 | */ 88 | 89 | a { 90 | background-color: transparent; 91 | } 92 | 93 | /** 94 | * Improve readability of focused elements when they are also in an 95 | * active/hover state. 96 | */ 97 | 98 | a:active, 99 | a:hover { 100 | outline: 0; 101 | } 102 | 103 | /* Text-level semantics 104 | ========================================================================== */ 105 | 106 | /** 107 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 108 | */ 109 | 110 | abbr[title] { 111 | border-bottom: 1px dotted; 112 | } 113 | 114 | /** 115 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 116 | */ 117 | 118 | b, 119 | strong { 120 | font-weight: bold; 121 | } 122 | 123 | /** 124 | * Address styling not present in Safari and Chrome. 125 | */ 126 | 127 | dfn { 128 | font-style: italic; 129 | } 130 | 131 | /** 132 | * Address variable `h1` font-size and margin within `section` and `article` 133 | * contexts in Firefox 4+, Safari, and Chrome. 134 | */ 135 | 136 | h1 { 137 | font-size: 2em; 138 | margin: 0.67em 0; 139 | } 140 | 141 | /** 142 | * Address styling not present in IE 8/9. 143 | */ 144 | 145 | mark { 146 | background: #ff0; 147 | color: #000; 148 | } 149 | 150 | /** 151 | * Address inconsistent and variable font size in all browsers. 152 | */ 153 | 154 | small { 155 | font-size: 80%; 156 | } 157 | 158 | /** 159 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 160 | */ 161 | 162 | sub, 163 | sup { 164 | font-size: 75%; 165 | line-height: 0; 166 | position: relative; 167 | vertical-align: baseline; 168 | } 169 | 170 | sup { 171 | top: -0.5em; 172 | } 173 | 174 | sub { 175 | bottom: -0.25em; 176 | } 177 | 178 | /* Embedded content 179 | ========================================================================== */ 180 | 181 | /** 182 | * Remove border when inside `a` element in IE 8/9/10. 183 | */ 184 | 185 | img { 186 | border: 0; 187 | } 188 | 189 | /** 190 | * Correct overflow not hidden in IE 9/10/11. 191 | */ 192 | 193 | svg:not(:root) { 194 | overflow: hidden; 195 | } 196 | 197 | /* Grouping content 198 | ========================================================================== */ 199 | 200 | /** 201 | * Address margin not present in IE 8/9 and Safari. 202 | */ 203 | 204 | figure { 205 | margin: 1em 40px; 206 | } 207 | 208 | /** 209 | * Address differences between Firefox and other browsers. 210 | */ 211 | 212 | hr { 213 | box-sizing: content-box; 214 | height: 0; 215 | } 216 | 217 | /** 218 | * Contain overflow in all browsers. 219 | */ 220 | 221 | pre { 222 | overflow: auto; 223 | } 224 | 225 | /** 226 | * Address odd `em`-unit font size rendering in all browsers. 227 | */ 228 | 229 | code, 230 | kbd, 231 | pre, 232 | samp { 233 | font-family: monospace, monospace; 234 | font-size: 1em; 235 | } 236 | 237 | /* Forms 238 | ========================================================================== */ 239 | 240 | /** 241 | * Known limitation: by default, Chrome and Safari on OS X allow very limited 242 | * styling of `select`, unless a `border` property is set. 243 | */ 244 | 245 | /** 246 | * 1. Correct color not being inherited. 247 | * Known issue: affects color of disabled elements. 248 | * 2. Correct font properties not being inherited. 249 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 250 | */ 251 | 252 | button, 253 | input, 254 | optgroup, 255 | select, 256 | textarea { 257 | color: inherit; /* 1 */ 258 | font: inherit; /* 2 */ 259 | margin: 0; /* 3 */ 260 | } 261 | 262 | /** 263 | * Address `overflow` set to `hidden` in IE 8/9/10/11. 264 | */ 265 | 266 | button { 267 | overflow: visible; 268 | } 269 | 270 | /** 271 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 272 | * All other form control elements do not inherit `text-transform` values. 273 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 274 | * Correct `select` style inheritance in Firefox. 275 | */ 276 | 277 | button, 278 | select { 279 | text-transform: none; 280 | } 281 | 282 | /** 283 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 284 | * and `video` controls. 285 | * 2. Correct inability to style clickable `input` types in iOS. 286 | * 3. Improve usability and consistency of cursor style between image-type 287 | * `input` and others. 288 | */ 289 | 290 | button, 291 | html input[type="button"], /* 1 */ 292 | input[type="reset"], 293 | input[type="submit"] { 294 | -webkit-appearance: button; /* 2 */ 295 | cursor: pointer; /* 3 */ 296 | } 297 | 298 | /** 299 | * Re-set default cursor for disabled elements. 300 | */ 301 | 302 | button[disabled], 303 | html input[disabled] { 304 | cursor: default; 305 | } 306 | 307 | /** 308 | * Remove inner padding and border in Firefox 4+. 309 | */ 310 | 311 | button::-moz-focus-inner, 312 | input::-moz-focus-inner { 313 | border: 0; 314 | padding: 0; 315 | } 316 | 317 | /** 318 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 319 | * the UA stylesheet. 320 | */ 321 | 322 | input { 323 | line-height: normal; 324 | } 325 | 326 | /** 327 | * It's recommended that you don't attempt to style these elements. 328 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 329 | * 330 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 331 | * 2. Remove excess padding in IE 8/9/10. 332 | */ 333 | 334 | input[type="checkbox"], 335 | input[type="radio"] { 336 | box-sizing: border-box; /* 1 */ 337 | padding: 0; /* 2 */ 338 | } 339 | 340 | /** 341 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 342 | * `font-size` values of the `input`, it causes the cursor style of the 343 | * decrement button to change from `default` to `text`. 344 | */ 345 | 346 | input[type="number"]::-webkit-inner-spin-button, 347 | input[type="number"]::-webkit-outer-spin-button { 348 | height: auto; 349 | } 350 | 351 | /** 352 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 353 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. 354 | */ 355 | 356 | input[type="search"] { 357 | -webkit-appearance: textfield; /* 1 */ 358 | box-sizing: content-box; /* 2 */ 359 | } 360 | 361 | /** 362 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 363 | * Safari (but not Chrome) clips the cancel button when the search input has 364 | * padding (and `textfield` appearance). 365 | */ 366 | 367 | input[type="search"]::-webkit-search-cancel-button, 368 | input[type="search"]::-webkit-search-decoration { 369 | -webkit-appearance: none; 370 | } 371 | 372 | /** 373 | * Define consistent border, margin, and padding. 374 | */ 375 | 376 | fieldset { 377 | border: 1px solid #c0c0c0; 378 | margin: 0 2px; 379 | padding: 0.35em 0.625em 0.75em; 380 | } 381 | 382 | /** 383 | * 1. Correct `color` not being inherited in IE 8/9/10/11. 384 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 385 | */ 386 | 387 | legend { 388 | border: 0; /* 1 */ 389 | padding: 0; /* 2 */ 390 | } 391 | 392 | /** 393 | * Remove default vertical scrollbar in IE 8/9/10/11. 394 | */ 395 | 396 | textarea { 397 | overflow: auto; 398 | } 399 | 400 | /** 401 | * Don't inherit the `font-weight` (applied by a rule above). 402 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 403 | */ 404 | 405 | optgroup { 406 | font-weight: bold; 407 | } 408 | 409 | /* Tables 410 | ========================================================================== */ 411 | 412 | /** 413 | * Remove most spacing between table cells. 414 | */ 415 | 416 | table { 417 | border-collapse: collapse; 418 | border-spacing: 0; 419 | } 420 | 421 | td, 422 | th { 423 | padding: 0; 424 | } 425 | -------------------------------------------------------------------------------- /src/doc/html.md: -------------------------------------------------------------------------------- 1 | [HTML5 Boilerplate homepage](https://html5boilerplate.com) | [Documentation 2 | table of contents](TOC.md) 3 | 4 | # The HTML 5 | 6 | By default, HTML5 Boilerplate provides two `html` pages: 7 | 8 | * [`index.html`](#indexhtml) - a default HTML skeleton that should form the 9 | basis of all pages on your website 10 | * [`404.html`](#404html) - a placeholder 404 error page 11 | 12 | 13 | ## `index.html` 14 | 15 | 16 | ### The `no-js` class 17 | 18 | The `no-js` class is provided in order to allow you to more easily and 19 | explicitly add custom styles based on whether JavaScript is disabled 20 | (`.no-js`) or enabled (`.js`). Using this technique also helps [avoid the 21 | FOUC](http://paulirish.com/2009/avoiding-the-fouc-v3/). 22 | 23 | 24 | ## Language attribute 25 | 26 | Please consider specifying the language of your content by adding the `lang` 27 | attribute to `` as in this example: 28 | 29 | ```html 30 | 31 | ``` 32 | 33 | ### The order of the `` and `<meta>` tags 34 | 35 | The order in which the `<title>` and the `<meta>` tags are specified is 36 | important because: 37 | 38 | 1) the charset declaration (`<meta charset="utf-8">`): 39 | 40 | * must be included completely within the [first 1024 bytes of the 41 | document](https://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset) 42 | 43 | * should be specified as early as possible (before any content that could 44 | be controlled by an attacker, such as a `<title>` element) in order to 45 | avoid a potential [encoding-related security 46 | issue](https://code.google.com/p/doctype-mirror/wiki/ArticleUtf7) in 47 | Internet Explorer 48 | 49 | 2) the meta tag for compatibility mode 50 | (`<meta http-equiv="x-ua-compatible" content="ie=edge">`): 51 | 52 | * [needs to be included before all other tags except for the `<title>` and 53 | the other `<meta>` 54 | tags](https://msdn.microsoft.com/en-us/library/cc288325.aspx) 55 | 56 | 57 | ### `x-ua-compatible` 58 | 59 | Internet Explorer 8/9/10 support [document compatibility 60 | modes](https://msdn.microsoft.com/en-us/library/cc288325.aspx) that affect the 61 | way webpages are interpreted and displayed. Because of this, even if your site's 62 | visitor is using, let's say, Internet Explorer 9, it's possible that IE will not 63 | use the latest rendering engine, and instead, decide to render your page using 64 | the Internet Explorer 5.5 rendering engine. 65 | 66 | Specifying the `x-ua-compatible` meta tag: 67 | 68 | ```html 69 | <meta http-equiv="x-ua-compatible" content="ie=edge"> 70 | ``` 71 | 72 | or sending the page with the following HTTP response header 73 | 74 | ``` 75 | X-UA-Compatible: IE=edge 76 | ``` 77 | 78 | will force Internet Explorer 8/9/10 to render the webpage in the highest 79 | available mode in [the various cases when it may 80 | not](https://hsivonen.fi/doctype/#ie8), and therefore, ensure that anyone 81 | browsing your site is treated to the best possible user experience that 82 | browser can offer. 83 | 84 | If possible, we recommend that you remove the `meta` tag and send only the 85 | HTTP response header as the `meta` tag will not always work if your site is 86 | served on a non-standard port, as Internet Explorer's preference option 87 | `Display intranet sites in Compatibility View` is checked by default. 88 | 89 | If you are using Apache as your webserver, including the 90 | [`.htaccess`](https://github.com/h5bp/server-configs-apache) file takes care of 91 | the HTTP header. If you are using a different server, check out our [other 92 | server config](https://github.com/h5bp/server-configs). 93 | 94 | Starting with Internet Explorer 11, [document modes are 95 | deprecated](https://msdn.microsoft.com/en-us/library/ie/bg182625.aspx#docmode). 96 | If your business still relies on older web apps and services that were 97 | designed for older versions of Internet Explorer, you might want to consider 98 | enabling [Enterprise Mode](http://blogs.msdn.com/b/ie/archive/2014/04/02/stay-up-to-date-with-enterprise-mode-for-internet-explorer-11.aspx) throughout your company. 99 | 100 | 101 | ## Mobile viewport 102 | 103 | There are a few different options that you can use with the [`viewport` meta 104 | tag](https://docs.google.com/present/view?id=dkx3qtm_22dxsrgcf4 "Viewport and 105 | Media Queries - The Complete Idiot's Guide"). You can find out more in [the 106 | Apple developer docs](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html). 107 | HTML5 Boilerplate comes with a simple setup that strikes a good balance for general use cases. 108 | 109 | ```html 110 | <meta name="viewport" content="width=device-width, initial-scale=1"> 111 | ``` 112 | 113 | ## Favicons and Touch Icon 114 | 115 | The shortcut icons should be put in the root directory of your site. HTML5 116 | Boilerplate comes with a default set of icons (include favicon and one Apple 117 | Touch Icon) that you can use as a baseline to create your own. 118 | 119 | Please refer to the more detailed description in the [Extend section](extend.md) 120 | of these docs. 121 | 122 | ## Modernizr 123 | 124 | HTML5 Boilerplate uses a custom build of Modernizr. 125 | 126 | [Modernizr](http://modernizr.com) is a JavaScript library which adds classes to 127 | the `html` element based on the results of feature test and which ensures that 128 | all browsers can make use of HTML5 elements (as it includes the HTML5 Shiv). 129 | This allows you to target parts of your CSS and JavaScript based on the 130 | features supported by a browser. 131 | 132 | In general, in order to keep page load times to a minimum, it's best to call 133 | any JavaScript at the end of the page because if a script is slow to load 134 | from an external server it may cause the whole page to hang. That said, the 135 | Modernizr script *needs* to run *before* the browser begins rendering the page, 136 | so that browsers lacking support for some of the new HTML5 elements are able to 137 | handle them properly. Therefore the Modernizr script is the only JavaScript 138 | file synchronously loaded at the top of the document. 139 | 140 | ## What about polyfills? 141 | 142 | If you need to include [polyfills](https://remysharp.com/2010/10/08/what-is-a-polyfill) 143 | in your project, you must make sure those load before any other JavaScript. If you're 144 | using some polyfill CDN service, like [cdn.polyfill.io](https://cdn.polyfill.io/), 145 | just put it before the other scripts in the bottom of the page: 146 | 147 | ```html 148 | <script src="//cdn.polyfill.io/v1/polyfill.min.js"></script> 149 | <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 150 | <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script> 151 | <script src="js/plugins.js"></script> 152 | <script src="js/main.js"></script> 153 | </body> 154 | ``` 155 | 156 | If you like to just include the polyfills yourself, you could include them in 157 | `js/plugins.js`. When you have a bunch of polyfills to load in, you could 158 | also create a `polyfills.js` file in the `js/vendor` directory. Also using 159 | this technique, make sure the polyfills are all loaded before any other 160 | Javascript. 161 | 162 | There are some misconceptions about Modernizr and polyfills. It's important 163 | to understand that Modernizr just handles feature checking, not polyfilling 164 | itself. The only thing Modernizr does regarding polyfills is that the team 165 | maintains [a huge list of cross Browser polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills). 166 | 167 | ## The content area 168 | 169 | The central part of the boilerplate template is pretty much empty. This is 170 | intentional, in order to make the boilerplate suitable for both web page and 171 | web app development. 172 | 173 | ### Browser Upgrade Prompt 174 | 175 | The main content area of the boilerplate includes a prompt to install an up to 176 | date browser for users of IE 6/7. If you intended to support IE 6/7, then you 177 | should remove the snippet of code. 178 | 179 | ### Google CDN for jQuery 180 | 181 | The Google CDN version of the jQuery JavaScript library is referenced towards 182 | the bottom of the page using a protocol-independent path (read more about this 183 | in the [FAQ](faq.md)). A local fallback of jQuery is included for rare instances 184 | when the CDN version might not be available, and to facilitate offline 185 | development. 186 | 187 | The Google CDN version is chosen over other [potential candidates (like the 188 | jQuery CDN](https://jquery.com/download/#using-jquery-with-a-cdn)) because 189 | it's fast in absolute terms and it has the best overall 190 | [penetration](http://httparchive.org/trends.php#perGlibs) which increases the 191 | odds of having a copy of the library in your user's browser cache. 192 | 193 | While the Google CDN is a strong default solution your site or application may 194 | require a different configuration. Testing your site with services like 195 | [WebPageTest](https://www.webpagetest.org/) and browser tools like 196 | [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) or 197 | [YSlow](https://developer.yahoo.com/yslow/) will help you examine the real 198 | world performance of your site and can show where you can optimize your specific 199 | site or application. 200 | 201 | 202 | ### Google Universal Analytics Tracking Code 203 | 204 | Finally, an optimized version of the Google Universal Analytics tracking code is 205 | included. Google recommends that this script be placed at the top of the page. 206 | Factors to consider: if you place this script at the top of the page, you’ll 207 | be able to count users who don’t fully load the page, and you’ll incur the max 208 | number of simultaneous connections of the browser. 209 | 210 | Further information: 211 | 212 | * [Optimizing the Google Universal Analytics 213 | Snippet](https://mathiasbynens.be/notes/async-analytics-snippet#universal-analytics) 214 | * [Introduction to 215 | Analytics.js](https://developers.google.com/analytics/devguides/collection/analyticsjs/) 216 | * [Google Analytics Demos & Tools](https://ga-dev-tools.appspot.com/) 217 | 218 | **N.B.** The Google Universal Analytics snippet is included by default mainly 219 | because Google Analytics is [currently one of the most popular tracking 220 | solutions](https://trends.builtwith.com/analytics/Google-Analytics) out there. 221 | However, its usage isn't set in stone, and you SHOULD consider exploring the 222 | [alternatives](https://en.wikipedia.org/wiki/List_of_web_analytics_software) 223 | and use whatever suits your needs best! 224 | -------------------------------------------------------------------------------- /src/js/vendor/modernizr-2.8.3.min.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.8.3 (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-fontface-backgroundsize-borderimage-borderradius-boxshadow-flexbox-hsla-multiplebgs-opacity-rgba-textshadow-cssanimations-csscolumns-generatedcontent-cssgradients-cssreflections-csstransforms-csstransforms3d-csstransitions-applicationcache-canvas-canvastext-draganddrop-hashchange-history-audio-video-indexeddb-input-inputtypes-localstorage-postmessage-sessionstorage-websockets-websqldatabase-webworkers-geolocation-inlinesvg-smil-svg-svgclippaths-touch-webgl-shiv-mq-cssclasses-addtest-prefixed-teststyles-testprop-testallprops-hasevent-prefixes-domprefixes-load 3 | */ 4 | ;window.Modernizr=function(a,b,c){function D(a){j.cssText=a}function E(a,b){return D(n.join(a+";")+(b||""))}function F(a,b){return typeof a===b}function G(a,b){return!!~(""+a).indexOf(b)}function H(a,b){for(var d in a){var e=a[d];if(!G(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function I(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:F(f,"function")?f.bind(d||b):f}return!1}function J(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+p.join(d+" ")+d).split(" ");return F(b,"string")||F(b,"undefined")?H(e,b):(e=(a+" "+q.join(d+" ")+d).split(" "),I(e,b,c))}function K(){e.input=function(c){for(var d=0,e=c.length;d<e;d++)u[c[d]]=c[d]in k;return u.list&&(u.list=!!b.createElement("datalist")&&!!a.HTMLDataListElement),u}("autocomplete autofocus list placeholder max min multiple pattern required step".split(" ")),e.inputtypes=function(a){for(var d=0,e,f,h,i=a.length;d<i;d++)k.setAttribute("type",f=a[d]),e=k.type!=="text",e&&(k.value=l,k.style.cssText="position:absolute;visibility:hidden;",/^range$/.test(f)&&k.style.WebkitAppearance!==c?(g.appendChild(k),h=b.defaultView,e=h.getComputedStyle&&h.getComputedStyle(k,null).WebkitAppearance!=="textfield"&&k.offsetHeight!==0,g.removeChild(k)):/^(search|tel)$/.test(f)||(/^(url|email)$/.test(f)?e=k.checkValidity&&k.checkValidity()===!1:e=k.value!=l)),t[a[d]]=!!e;return t}("search tel url email datetime date month week time datetime-local number range color".split(" "))}var d="2.8.3",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k=b.createElement("input"),l=":)",m={}.toString,n=" -webkit- -moz- -o- -ms- ".split(" "),o="Webkit Moz O ms",p=o.split(" "),q=o.toLowerCase().split(" "),r={svg:"http://www.w3.org/2000/svg"},s={},t={},u={},v=[],w=v.slice,x,y=function(a,c,d,e){var f,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),l.appendChild(j);return f=["­",'<style id="s',h,'">',a,"</style>"].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},z=function(b){var c=a.matchMedia||a.msMatchMedia;if(c)return c(b)&&c(b).matches||!1;var d;return y("@media "+b+" { #"+h+" { position: absolute; } }",function(b){d=(a.getComputedStyle?getComputedStyle(b,null):b.currentStyle)["position"]=="absolute"}),d},A=function(){function d(d,e){e=e||b.createElement(a[d]||"div"),d="on"+d;var f=d in e;return f||(e.setAttribute||(e=b.createElement("div")),e.setAttribute&&e.removeAttribute&&(e.setAttribute(d,""),f=F(e[d],"function"),F(e[d],"undefined")||(e[d]=c),e.removeAttribute(d))),e=null,f}var a={select:"input",change:"input",submit:"form",reset:"form",error:"img",load:"img",abort:"img"};return d}(),B={}.hasOwnProperty,C;!F(B,"undefined")&&!F(B.call,"undefined")?C=function(a,b){return B.call(a,b)}:C=function(a,b){return b in a&&F(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=w.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(w.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(w.call(arguments)))};return e}),s.flexbox=function(){return J("flexWrap")},s.canvas=function(){var a=b.createElement("canvas");return!!a.getContext&&!!a.getContext("2d")},s.canvastext=function(){return!!e.canvas&&!!F(b.createElement("canvas").getContext("2d").fillText,"function")},s.webgl=function(){return!!a.WebGLRenderingContext},s.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:y(["@media (",n.join("touch-enabled),("),h,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=a.offsetTop===9}),c},s.geolocation=function(){return"geolocation"in navigator},s.postmessage=function(){return!!a.postMessage},s.websqldatabase=function(){return!!a.openDatabase},s.indexedDB=function(){return!!J("indexedDB",a)},s.hashchange=function(){return A("hashchange",a)&&(b.documentMode===c||b.documentMode>7)},s.history=function(){return!!a.history&&!!history.pushState},s.draganddrop=function(){var a=b.createElement("div");return"draggable"in a||"ondragstart"in a&&"ondrop"in a},s.websockets=function(){return"WebSocket"in a||"MozWebSocket"in a},s.rgba=function(){return D("background-color:rgba(150,255,150,.5)"),G(j.backgroundColor,"rgba")},s.hsla=function(){return D("background-color:hsla(120,40%,100%,.5)"),G(j.backgroundColor,"rgba")||G(j.backgroundColor,"hsla")},s.multiplebgs=function(){return D("background:url(https://),url(https://),red url(https://)"),/(url\s*\(.*?){3}/.test(j.background)},s.backgroundsize=function(){return J("backgroundSize")},s.borderimage=function(){return J("borderImage")},s.borderradius=function(){return J("borderRadius")},s.boxshadow=function(){return J("boxShadow")},s.textshadow=function(){return b.createElement("div").style.textShadow===""},s.opacity=function(){return E("opacity:.55"),/^0.55$/.test(j.opacity)},s.cssanimations=function(){return J("animationName")},s.csscolumns=function(){return J("columnCount")},s.cssgradients=function(){var a="background-image:",b="gradient(linear,left top,right bottom,from(#9f9),to(white));",c="linear-gradient(left top,#9f9, white);";return D((a+"-webkit- ".split(" ").join(b+a)+n.join(c+a)).slice(0,-a.length)),G(j.backgroundImage,"gradient")},s.cssreflections=function(){return J("boxReflect")},s.csstransforms=function(){return!!J("transform")},s.csstransforms3d=function(){var a=!!J("perspective");return a&&"webkitPerspective"in g.style&&y("@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}",function(b,c){a=b.offsetLeft===9&&b.offsetHeight===3}),a},s.csstransitions=function(){return J("transition")},s.fontface=function(){var a;return y('@font-face {font-family:"font";src:url("https://")}',function(c,d){var e=b.getElementById("smodernizr"),f=e.sheet||e.styleSheet,g=f?f.cssRules&&f.cssRules[0]?f.cssRules[0].cssText:f.cssText||"":"";a=/src/i.test(g)&&g.indexOf(d.split(" ")[0])===0}),a},s.generatedcontent=function(){var a;return y(["#",h,"{font:0/0 a}#",h,':after{content:"',l,'";visibility:hidden;font:3px/1 a}'].join(""),function(b){a=b.offsetHeight>=3}),a},s.video=function(){var a=b.createElement("video"),c=!1;try{if(c=!!a.canPlayType)c=new Boolean(c),c.ogg=a.canPlayType('video/ogg; codecs="theora"').replace(/^no$/,""),c.h264=a.canPlayType('video/mp4; codecs="avc1.42E01E"').replace(/^no$/,""),c.webm=a.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/^no$/,"")}catch(d){}return c},s.audio=function(){var a=b.createElement("audio"),c=!1;try{if(c=!!a.canPlayType)c=new Boolean(c),c.ogg=a.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/,""),c.mp3=a.canPlayType("audio/mpeg;").replace(/^no$/,""),c.wav=a.canPlayType('audio/wav; codecs="1"').replace(/^no$/,""),c.m4a=(a.canPlayType("audio/x-m4a;")||a.canPlayType("audio/aac;")).replace(/^no$/,"")}catch(d){}return c},s.localstorage=function(){try{return localStorage.setItem(h,h),localStorage.removeItem(h),!0}catch(a){return!1}},s.sessionstorage=function(){try{return sessionStorage.setItem(h,h),sessionStorage.removeItem(h),!0}catch(a){return!1}},s.webworkers=function(){return!!a.Worker},s.applicationcache=function(){return!!a.applicationCache},s.svg=function(){return!!b.createElementNS&&!!b.createElementNS(r.svg,"svg").createSVGRect},s.inlinesvg=function(){var a=b.createElement("div");return a.innerHTML="<svg/>",(a.firstChild&&a.firstChild.namespaceURI)==r.svg},s.smil=function(){return!!b.createElementNS&&/SVGAnimate/.test(m.call(b.createElementNS(r.svg,"animate")))},s.svgclippaths=function(){return!!b.createElementNS&&/SVGClipPath/.test(m.call(b.createElementNS(r.svg,"clipPath")))};for(var L in s)C(s,L)&&(x=L.toLowerCase(),e[x]=s[L](),v.push((e[x]?"":"no-")+x));return e.input||K(),e.addTest=function(a,b){if(typeof a=="object")for(var d in a)C(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},D(""),i=k=null,function(a,b){function l(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function m(){var a=s.elements;return typeof a=="string"?a.split(" "):a}function n(a){var b=j[a[h]];return b||(b={},i++,a[h]=i,j[i]=b),b}function o(a,c,d){c||(c=b);if(k)return c.createElement(a);d||(d=n(c));var g;return d.cache[a]?g=d.cache[a].cloneNode():f.test(a)?g=(d.cache[a]=d.createElem(a)).cloneNode():g=d.createElem(a),g.canHaveChildren&&!e.test(a)&&!g.tagUrn?d.frag.appendChild(g):g}function p(a,c){a||(a=b);if(k)return a.createDocumentFragment();c=c||n(a);var d=c.frag.cloneNode(),e=0,f=m(),g=f.length;for(;e<g;e++)d.createElement(f[e]);return d}function q(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return s.shivMethods?o(c,a,b):b.createElem(c)},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/[\w\-]+/g,function(a){return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'})+");return n}")(s,b.frag)}function r(a){a||(a=b);var c=n(a);return s.shivCSS&&!g&&!c.hasCSS&&(c.hasCSS=!!l(a,"article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}")),k||q(a,c),a}var c="3.7.0",d=a.html5||{},e=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,f=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,g,h="_html5shiv",i=0,j={},k;(function(){try{var a=b.createElement("a");a.innerHTML="<xyz></xyz>",g="hidden"in a,k=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){g=!0,k=!0}})();var s={elements:d.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:c,shivCSS:d.shivCSS!==!1,supportsUnknownElements:k,shivMethods:d.shivMethods!==!1,type:"default",shivDocument:r,createElement:o,createDocumentFragment:p};a.html5=s,r(b)}(this,b),e._version=d,e._prefixes=n,e._domPrefixes=q,e._cssomPrefixes=p,e.mq=z,e.hasEvent=A,e.testProp=function(a){return H([a])},e.testAllProps=J,e.testStyles=y,e.prefixed=function(a,b,c){return b?J(a,b,c):J(a,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+v.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f<d;f++)g=a[f].split("="),(e=z[g.shift()])&&(c=e(c,g));for(f=0;f<b;f++)c=x[f](c);return c}function g(a,e,f,g,h){var i=b(a),j=i.autoCallback;i.url.split(".").pop().split("?").shift(),i.bypass||(e&&(e=d(e)?e:e[a]||e[g]||e[a.split("/").pop().split("?")[0]]),i.instead?i.instead(a,e,f,g,h):(y[i.url]?i.noexec=!0:y[i.url]=1,f.load(i.url,i.forceCSS||!i.forceJS&&"css"==i.url.split(".").pop().split("?").shift()?"c":c,i.noexec,i.attrs,i.timeout),(d(e)||d(j))&&f.load(function(){k(),e&&e(i.origUrl,h,g),j&&j(i.origUrl,h,g),y[i.url]=2})))}function h(a,b){function c(a,c){if(a){if(e(a))c||(j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}),g(a,j,b,0,h);else if(Object(a)===a)for(n in m=function(){var b=0,c;for(c in a)a.hasOwnProperty(c)&&b++;return b}(),a)a.hasOwnProperty(n)&&(!c&&!--m&&(d(j)?j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}:j[n]=function(a){return function(){var b=[].slice.call(arguments);a&&a.apply(this,b),l()}}(k[n])),g(a[n],j,b,n,h))}else!c&&l()}var h=!!a.test,i=a.load||a.both,j=a.callback||f,k=j,l=a.complete||f,m,n;c(h?a.yep:a.nope,!!i),i&&c(i)}var i,j,l=this.yepnope.loader;if(e(a))g(a,0,l,0);else if(w(a))for(i=0;i<a.length;i++)j=a[i],e(j)?g(j,0,l,0):w(j)?B(j):Object(j)===j&&h(j,l);else Object(a)===a&&h(a,l)},B.addPrefix=function(a,b){z[a]=b},B.addFilter=function(a){x.push(a)},B.errorTimeout=1e4,null==b.readyState&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",A=function(){b.removeEventListener("DOMContentLoaded",A,0),b.readyState="complete"},0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs=function(a,c,d,e,i,j){var k=b.createElement("script"),l,o,e=e||B.errorTimeout;k.src=a;for(o in d)k.setAttribute(o,d[o]);c=j?h:c||f,k.onreadystatechange=k.onload=function(){!l&&g(k.readyState)&&(l=1,c(),k.onload=k.onreadystatechange=null)},m(function(){l||(l=1,c(1))},e),i?k.onload():n.parentNode.insertBefore(k,n)},a.yepnope.injectCss=function(a,c,d,e,g,i){var e=b.createElement("link"),j,c=i?h:c||f;e.href=a,e.rel="stylesheet",e.type="text/css";for(j in d)e.setAttribute(j,d[j]);g||(n.parentNode.insertBefore(e,n),m(c,0))}}(this,document),Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0))}; 5 | -------------------------------------------------------------------------------- /src/doc/extend.md: -------------------------------------------------------------------------------- 1 | [HTML5 Boilerplate homepage](https://html5boilerplate.com) | [Documentation 2 | table of contents](TOC.md) 3 | 4 | # Extend and customise HTML5 Boilerplate 5 | 6 | Here is some useful advice for how you can make your project with HTML5 7 | Boilerplate even better. We don't want to include it all by default, as 8 | not everything fits with everyone's needs. 9 | 10 | 11 | * [App Stores](#app-stores) 12 | * [DNS prefetching](#dns-prefetching) 13 | * [Google Universal Analytics](#google-universal-analytics) 14 | * [Internet Explorer](#internet-explorer) 15 | * [Miscellaneous](#miscellaneous) 16 | * [News Feeds](#news-feeds) 17 | * [Search](#search) 18 | * [Social Networks](#social-networks) 19 | * [URLs](#urls) 20 | * [Web Apps](#web-apps) 21 | 22 | 23 | ## App Stores 24 | 25 | ### Install a Chrome Web Store app 26 | 27 | Users can install a Chrome app directly from your website, as long as 28 | the app and site have been associated via Google's Webmaster Tools. 29 | Read more on [Chrome Web Store's Inline Installation 30 | docs](https://developer.chrome.com/webstore/inline_installation). 31 | 32 | ```html 33 | <link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/APP_ID"> 34 | ``` 35 | 36 | ### Smart App Banners in iOS 6+ Safari 37 | 38 | Stop bothering everyone with gross modals advertising your entry in the 39 | App Store. Include the following [meta tag](https://developer.apple.com/library/IOS/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html#//apple_ref/doc/uid/TP40002051-CH6-SW2) 40 | will unintrusively allow the user the option to download your iOS app, 41 | or open it with some data about the user's current state on the website. 42 | 43 | ```html 44 | <meta name="apple-itunes-app" content="app-id=APP_ID,app-argument=SOME_TEXT"> 45 | ``` 46 | 47 | ## DNS prefetching 48 | 49 | In short, DNS Prefetching is a method of informing the browser of domain names 50 | referenced on a site so that the client can resolve the DNS for those hosts, 51 | cache them, and when it comes time to use them, have a faster turn around on 52 | the request. 53 | 54 | ### Implicit prefetches 55 | 56 | There is a lot of prefetching done for you automatically by the browser. When 57 | the browser encounters an anchor in your html that does not share the same 58 | domain name as the current location the browser requests, from the client OS, 59 | the IP address for this new domain. The client first checks its cache and 60 | then, lacking a cached copy, makes a request from a DNS server. These requests 61 | happen in the background and are not meant to block the rendering of the 62 | page. 63 | 64 | The goal of this is that when the foreign IP address is finally needed it will 65 | already be in the client cache and will not block the loading of the foreign 66 | content. Fewer requests result in faster page load times. The perception of this 67 | is increased on a mobile platform where DNS latency can be greater. 68 | 69 | #### Disable implicit prefetching 70 | 71 | ```html 72 | <meta http-equiv="x-dns-prefetch-control" content="off"> 73 | ``` 74 | 75 | Even with X-DNS-Prefetch-Control meta tag (or http header) browsers will still 76 | prefetch any explicit dns-prefetch links. 77 | 78 | **_WARNING:_** THIS MAY MAKE YOUR SITE SLOWER IF YOU RELY ON RESOURCES FROM 79 | FOREIGN DOMAINS. 80 | 81 | ### Explicit prefetches 82 | 83 | Typically the browser only scans the HTML for foreign domains. If you have 84 | resources that are outside of your HTML (a javascript request to a remote 85 | server or a CDN that hosts content that may not be present on every page of 86 | your site, for example) then you can queue up a domain name to be prefetched. 87 | 88 | ```html 89 | <link rel="dns-prefetch" href="//example.com"> 90 | <link rel="dns-prefetch" href="//ajax.googleapis.com"> 91 | ``` 92 | 93 | You can use as many of these as you need, but it's best if they are all 94 | immediately after the [Meta 95 | Charset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#attr-charset) 96 | element (which should go right at the top of the `head`), so the browser can 97 | act on them ASAP. 98 | 99 | #### Common Prefetch Links 100 | 101 | Amazon S3: 102 | 103 | ```html 104 | <link rel="dns-prefetch" href="//s3.amazonaws.com"> 105 | ``` 106 | 107 | Google APIs: 108 | 109 | ```html 110 | <link rel="dns-prefetch" href="//ajax.googleapis.com"> 111 | ``` 112 | 113 | Microsoft Ajax Content Delivery Network: 114 | 115 | ```html 116 | <link rel="dns-prefetch" href="//ajax.microsoft.com"> 117 | <link rel="dns-prefetch" href="//ajax.aspnetcdn.com"> 118 | ``` 119 | 120 | ### Further reading about DNS prefetching 121 | 122 | * https://developer.mozilla.org/en-US/docs/Controlling_DNS_prefetching 123 | * https://dev.chromium.org/developers/design-documents/dns-prefetching 124 | * http://blogs.msdn.com/b/ie/archive/2011/03/17/internet-explorer-9-network-performance-improvements.aspx 125 | * http://dayofjs.com/videos/22158462/web-browsers_alex-russel 126 | 127 | 128 | ## Google Universal Analytics 129 | 130 | ### More tracking settings 131 | 132 | The [optimized Google Universal Analytics 133 | snippet](https://mathiasbynens.be/notes/async-analytics-snippet#universal-analytics) 134 | included with HTML5 Boilerplate includes something like this: 135 | 136 | ```js 137 | ga('create', 'UA-XXXXX-X', 'auto'); ga('send', 'pageview'); 138 | ``` 139 | 140 | To customize further, see Google's [Advanced 141 | Setup](https://developers.google.com/analytics/devguides/collection/analyticsjs/advanced), 142 | [Pageview](https://developers.google.com/analytics/devguides/collection/analyticsjs/pages), 143 | and [Event](https://developers.google.com/analytics/devguides/collection/analyticsjs/events) Docs. 144 | 145 | ### Anonymize IP addresses 146 | 147 | In some countries, no personal data may be transferred outside jurisdictions 148 | that do not have similarly strict laws (i.e. from Germany to outside the EU). 149 | Thus a webmaster using the Google Universal Analytics may have to ensure that 150 | no personal (trackable) data is transferred to the US. You can do that with 151 | [the `ga('set', 'anonymizeIp', true);` 152 | parameter](https://developers.google.com/analytics/devguides/collection/analyticsjs/advanced#anonymizeip) 153 | before sending any events/pageviews. In use it looks like this: 154 | 155 | ```js 156 | ga('create', 'UA-XXXXX-X', 'auto'); 157 | ga('set', 'anonymizeIp', true); 158 | ga('send', 'pageview'); 159 | ``` 160 | 161 | ### Track jQuery AJAX requests in Google Analytics 162 | 163 | An article by @JangoSteve explains how to [track jQuery AJAX requests in Google 164 | Analytics](http://www.alfajango.com/blog/track-jquery-ajax-requests-in-google-analytics/). 165 | 166 | Add this to `plugins.js`: 167 | 168 | ```js 169 | /* 170 | * Log all jQuery AJAX requests to Google Analytics 171 | * See: http://www.alfajango.com/blog/track-jquery-ajax-requests-in-google-analytics/ 172 | */ 173 | if (typeof ga !== "undefined" && ga !== null) { 174 | $(document).ajaxSend(function(event, xhr, settings){ 175 | ga('send', 'pageview', settings.url); 176 | }); 177 | } 178 | ``` 179 | 180 | ### Track JavaScript errors in Google Analytics 181 | 182 | Add this function after `ga` is defined: 183 | 184 | ```js 185 | (function(window){ 186 | var undefined, 187 | link = function (href) { 188 | var a = window.document.createElement('a'); 189 | a.href = href; 190 | return a; 191 | }; 192 | window.onerror = function (message, file, line, column) { 193 | var host = link(file).hostname; 194 | ga('send', { 195 | 'hitType': 'event', 196 | 'eventCategory': (host == window.location.hostname || host == undefined || host == '' ? '' : 'external ') + 'error', 197 | 'eventAction': message, 198 | 'eventLabel': (file + ' LINE: ' + line + (column ? ' COLUMN: ' + column : '')).trim(), 199 | 'nonInteraction': 1 200 | }); 201 | }; 202 | }(window)); 203 | ``` 204 | 205 | ### Track page scroll 206 | 207 | Add this function after `ga` is defined: 208 | 209 | ```js 210 | $(function(){ 211 | var isDuplicateScrollEvent, 212 | scrollTimeStart = new Date, 213 | $window = $(window), 214 | $document = $(document), 215 | scrollPercent; 216 | 217 | $window.scroll(function() { 218 | scrollPercent = Math.round(100 * ($window.height() + $window.scrollTop())/$document.height()); 219 | if (scrollPercent > 90 && !isDuplicateScrollEvent) { //page scrolled to 90% 220 | isDuplicateScrollEvent = 1; 221 | ga('send', 'event', 'scroll', 222 | 'Window: ' + $window.height() + 'px; Document: ' + $document.height() + 'px; Time: ' + Math.round((new Date - scrollTimeStart )/1000,1) + 's' 223 | ); 224 | } 225 | }); 226 | }); 227 | ``` 228 | 229 | ## Internet Explorer 230 | 231 | ### Prompt users to switch to "Desktop Mode" in IE10 Metro 232 | 233 | IE10 does not support plugins, such as Flash, in Metro mode. If 234 | your site requires plugins, you can let users know that via the 235 | `x-ua-compatible` meta element, which will prompt them to switch 236 | to Desktop Mode. 237 | 238 | ```html 239 | <meta http-equiv="x-ua-compatible" content="requiresActiveX=true"> 240 | ``` 241 | 242 | Here's what it looks like alongside H5BP's default `x-ua-compatible` 243 | values: 244 | 245 | ```html 246 | <meta http-equiv="x-ua-compatible" content="ie=edge,requiresActiveX=true"> 247 | ``` 248 | 249 | You can find more information in [Microsoft's IEBlog post about prompting for 250 | plugin use in IE10 Metro 251 | Mode](http://blogs.msdn.com/b/ie/archive/2012/01/31/web-sites-and-a-plug-in-free-web.aspx). 252 | 253 | ### IE Pinned Sites (IE9+) 254 | 255 | Enabling your application for pinning will allow IE9 users to add it to their 256 | Windows Taskbar and Start Menu. This comes with a range of new tools that you 257 | can easily configure with the elements below. See more [documentation on IE9 258 | Pinned Sites](https://msdn.microsoft.com/en-us/library/gg131029.aspx). 259 | 260 | ### Name the Pinned Site for Windows 261 | 262 | Without this rule, Windows will use the page title as the name for your 263 | application. 264 | 265 | ```html 266 | <meta name="application-name" content="Sample Title"> 267 | ``` 268 | 269 | ### Give your Pinned Site a tooltip 270 | 271 | You know — a tooltip. A little textbox that appears when the user holds their 272 | mouse over your Pinned Site's icon. 273 | 274 | ```html 275 | <meta name="msapplication-tooltip" content="A description of what this site does."> 276 | ``` 277 | 278 | ### Set a default page for your Pinned Site 279 | 280 | If the site should go to a specific URL when it is pinned (such as the 281 | homepage), enter it here. One idea is to send it to a special URL so you can 282 | track the number of pinned users, like so: 283 | `http://www.example.com/index.html?pinned=true` 284 | 285 | ```html 286 | <meta name="msapplication-starturl" content="http://www.example.com/index.html?pinned=true"> 287 | ``` 288 | 289 | ### Recolor IE's controls manually for a Pinned Site 290 | 291 | IE9+ will automatically use the overall color of your Pinned Site's favicon to 292 | shade its browser buttons. UNLESS you give it another color here. Only use 293 | named colors (`red`) or hex colors (`#ff0000`). 294 | 295 | ```html 296 | <meta name="msapplication-navbutton-color" content="#ff0000"> 297 | ``` 298 | 299 | ### Manually set the window size of a Pinned Site 300 | 301 | If the site should open at a certain window size once pinned, you can specify 302 | the dimensions here. It only supports static pixel dimensions. 800x600 303 | minimum. 304 | 305 | ```html 306 | <meta name="msapplication-window" content="width=800;height=600"> 307 | ``` 308 | 309 | ### Jump List "Tasks" for Pinned Sites 310 | 311 | Add Jump List Tasks that will appear when the Pinned Site's icon gets a 312 | right-click. Each Task goes to the specified URL, and gets its own mini icon 313 | (essentially a favicon, a 16x16 .ICO). You can add as many of these as you 314 | need. 315 | 316 | ```html 317 | <meta name="msapplication-task" content="name=Task 1;action-uri=http://host/Page1.html;icon-uri=http://host/icon1.ico"> 318 | <meta name="msapplication-task" content="name=Task 2;action-uri=http://microsoft.com/Page2.html;icon-uri=http://host/icon2.ico"> 319 | ``` 320 | 321 | ### (Windows 8) High quality visuals for Pinned Sites 322 | 323 | Windows 8 adds the ability for you to provide a PNG tile image and specify the 324 | tile's background color. [Full details on the IE 325 | blog](http://blogs.msdn.com/b/ie/archive/2012/06/08/high-quality-visuals-for-pinned-sites-in-windows-8.aspx). 326 | 327 | * Create a 144x144 image of your site icon, filling all of the canvas, and 328 | using a transparent background. 329 | * Save this image as a 32-bit PNG and optimize it without reducing 330 | colour-depth. It can be named whatever you want (e.g. `metro-tile.png`). 331 | * To reference the tile and its color, add the HTML `meta` elements described 332 | in the IE Blog post. 333 | 334 | ### (Windows 8) Badges for Pinned Sites 335 | 336 | IE10 will poll an XML document for badge information to display on your app's 337 | tile in the Start screen. The user will be able to receive these badge updates 338 | even when your app isn't actively running. The badge's value can be a number, 339 | or one of a predefined list of glyphs. 340 | 341 | * [Tutorial on IEBlog with link to badge XML schema](http://blogs.msdn.com/b/ie/archive/2012/04/03/pinned-sites-in-windows-8.aspx) 342 | * [Available badge values](https://msdn.microsoft.com/en-us/library/ie/br212849.aspx) 343 | 344 | ```html 345 | <meta name="msapplication-badge" value="frequency=NUMBER_IN_MINUTES;polling-uri=http://www.example.com/path/to/file.xml"> 346 | ``` 347 | 348 | ### Disable link highlighting upon tap in IE10 349 | 350 | Similar to [-webkit-tap-highlight-color](http://davidwalsh.name/mobile-highlight-color) 351 | in iOS Safari. Unlike that CSS property, this is an HTML meta element, and its 352 | value is boolean rather than a color. It's all or nothing. 353 | 354 | ```html 355 | <meta name="msapplication-tap-highlight" content="no" /> 356 | ``` 357 | 358 | You can read about this useful element and more techniques in 359 | [Microsoft's documentation on adapting WebKit-oriented apps for IE10](http://blogs.windows.com/buildingapps/2012/11/15/adapting-your-webkit-optimized-site-for-internet-explorer-10/) 360 | 361 | ## Search 362 | 363 | ### Direct search spiders to your sitemap 364 | 365 | [Learn how to make a sitemap](http://www.sitemaps.org/protocol.html) 366 | 367 | ```html 368 | <link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml"> 369 | ``` 370 | 371 | ### Hide pages from search engines 372 | 373 | According to Heather Champ, former community manager at Flickr, you should not 374 | allow search engines to index your "Contact Us" or "Complaints" page if you 375 | value your sanity. This is an HTML-centric way of achieving that. 376 | 377 | ```html 378 | <meta name="robots" content="noindex"> 379 | ``` 380 | 381 | **_WARNING:_** DO NOT INCLUDE ON PAGES THAT SHOULD APPEAR IN SEARCH ENGINES. 382 | 383 | ### Firefox and IE Search Plugins 384 | 385 | Sites with in-site search functionality should be strongly considered for a 386 | browser search plugin. A "search plugin" is an XML file which defines how your 387 | plugin behaves in the browser. [How to make a browser search 388 | plugin](https://www.google.com/search?ie=UTF-8&q=how+to+make+browser+search+plugin). 389 | 390 | ```html 391 | <link rel="search" title="" type="application/opensearchdescription+xml" href=""> 392 | ``` 393 | 394 | 395 | ## Miscellaneous 396 | 397 | * Use [polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills). 398 | 399 | * Use [Microformats](http://microformats.org/wiki/Main_Page) (via 400 | [microdata](http://microformats.org/wiki/microdata)) for optimum search 401 | results 402 | [visibility](http://googlewebmastercentral.blogspot.com/2009/05/introducing-rich-snippets.html). 403 | 404 | * If you're building a web app you may want [native style momentum scrolling in 405 | iOS 5+](http://www.johanbrook.com/articles/native-style-momentum-scrolling-to-arrive-in-ios-5/) 406 | using `-webkit-overflow-scrolling: touch`. 407 | 408 | * If you want to disable the translation prompt in Chrome or block Google 409 | Translate from translating your web page, use [`<meta name="google" 410 | value="notranslate">`](https://support.google.com/translate/?hl=en#2641276). 411 | To disable translation for a particular section of the web page, add 412 | [`class="notranslate"`](https://support.google.com/translate/?hl=en#2641276). 413 | 414 | * If you want to disable the automatic detection and formatting of possible 415 | phone numbers in Safari on iOS, use [`<meta name="format-detection" 416 | content="telephone=no">`](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html/#//apple_ref/doc/uid/TP40008193-SW5). 417 | 418 | * Avoid development/stage websites "leaking" into SERPs (search engine results 419 | page) by [implementing X-Robots-tag 420 | headers](https://github.com/h5bp/html5-boilerplate/issues/804). 421 | 422 | * Screen readers currently have less-than-stellar support for HTML5 but the JS 423 | script [accessifyhtml5.js](https://github.com/yatil/accessifyhtml5.js) can 424 | help increase accessibility by adding ARIA roles to HTML5 elements. 425 | 426 | 427 | ## News Feeds 428 | 429 | ### RSS 430 | 431 | Have an RSS feed? Link to it here. Want to [learn how to write an RSS feed from 432 | scratch](http://www.rssboard.org/rss-specification)? 433 | 434 | ```html 435 | <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"> 436 | ``` 437 | 438 | ### Atom 439 | 440 | Atom is similar to RSS, and you might prefer to use it instead of or in 441 | addition to it. [See what Atom's all 442 | about](http://www.atomenabled.org/developers/syndication/). 443 | 444 | ```html 445 | <link rel="alternate" type="application/atom+xml" title="Atom" href="/atom.xml"> 446 | ``` 447 | 448 | ### Pingbacks 449 | 450 | Your server may be notified when another site links to yours. The href 451 | attribute should contain the location of your pingback service. 452 | 453 | ```html 454 | <link rel="pingback" href=""> 455 | ``` 456 | 457 | * High-level explanation: https://codex.wordpress.org/Introduction_to_Blogging#Pingbacks 458 | * Step-by-step example case: http://www.hixie.ch/specs/pingback/pingback-1.0#TOC5 459 | * PHP pingback service: https://web.archive.org/web/20131211032834/http://blog.perplexedlabs.com/2009/07/15/xmlrpc-pingbacks-using-php/ 460 | 461 | 462 | 463 | ## Social Networks 464 | 465 | ### Facebook Open Graph data 466 | 467 | You can control the information that Facebook and others display when users 468 | share your site. Below are just the most basic data points you might need. For 469 | specific content types (including "website"), see [Facebook's built-in Open 470 | Graph content 471 | templates](https://developers.facebook.com/docs/opengraph/objects/builtin/). 472 | Take full advantage of Facebook's support for complex data and activity by 473 | following the [Open Graph 474 | tutorial](https://developers.facebook.com/docs/opengraph/tutorial/). 475 | 476 | ```html 477 | <meta property="og:title" content=""> 478 | <meta property="og:description" content=""> 479 | <meta property="og:image" content=""> 480 | ``` 481 | 482 | ### Twitter Cards 483 | 484 | Twitter provides a snippet specification that serves a similar purpose to Open 485 | Graph. In fact, Twitter will use Open Graph when Cards is not available. Note 486 | that, as of this writing, Twitter requires that app developers activate Cards 487 | on a per-domain basis. You can read more about the various snippet formats 488 | and application process in the [official Twitter Cards 489 | documentation](https://dev.twitter.com/docs/cards). 490 | 491 | ```html 492 | <meta name="twitter:card" content="summary"> 493 | <meta name="twitter:site" content="@site_account"> 494 | <meta name="twitter:creator" content="@individual_account"> 495 | <meta name="twitter:url" content="http://www.example.com/path/to/page.html"> 496 | <meta name="twitter:title" content=""> 497 | <meta name="twitter:description" content=""> 498 | <meta name="twitter:image" content="http://www.example.com/path/to/image.jpg"> 499 | ``` 500 | 501 | 502 | ## URLs 503 | 504 | ### Canonical URL 505 | 506 | Signal to search engines and others "Use this URL for this page!" Useful when 507 | parameters after a `#` or `?` is used to control the display state of a page. 508 | `http://www.example.com/cart.html?shopping-cart-open=true` can be indexed as 509 | the cleaner, more accurate `http://www.example.com/cart.html`. 510 | 511 | ```html 512 | <link rel="canonical" href=""> 513 | ``` 514 | 515 | ### Official shortlink 516 | 517 | Signal to the world "This is the shortened URL to use this page!" Poorly 518 | supported at this time. Learn more by reading the [article about shortlinks on 519 | the Microformats wiki](http://microformats.org/wiki/rel-shortlink). 520 | 521 | ```html 522 | <link rel="shortlink" href="h5bp.com"> 523 | ``` 524 | 525 | ### Separate mobile URLs 526 | 527 | If you use separate URLs for desktop and mobile users, you should consider 528 | helping search engine algorithms better understand the configuration on your 529 | web site. 530 | 531 | This can be done by adding the following annotations in your HTML pages: 532 | 533 | * on the desktop page, add the `link rel="alternate"` tag pointing to the 534 | corresponding mobile URL, e.g.: 535 | 536 | `<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page.html" >` 537 | 538 | * on the mobile page, add the `link rel="canonical"` tag pointing to the 539 | corresponding desktop URL, e.g.: 540 | 541 | `<link rel="canonical" href="http://www.example.com/page.html">` 542 | 543 | For more information please see: 544 | 545 | * https://developers.google.com/webmasters/smartphone-sites/details#separateurls 546 | * https://developers.google.com/webmasters/smartphone-sites/feature-phones 547 | 548 | 549 | ## Web Apps 550 | 551 | There are a couple of meta tags that provide information about a web app when 552 | added to the Home Screen on iOS: 553 | 554 | * Adding `apple-mobile-web-app-capable` will make your web app chrome-less and 555 | provide the default iOS app view. You can control the color scheme of the 556 | default view by adding `apple-mobile-web-app-status-bar-style`. 557 | 558 | ```html 559 | <meta name="apple-mobile-web-app-capable" content="yes"> 560 | <meta name="apple-mobile-web-app-status-bar-style" content="black"> 561 | ``` 562 | 563 | * You can use `apple-mobile-web-app-title` to add a specific sites name for the 564 | Home Screen icon. This works since iOS 6. 565 | 566 | ```html 567 | <meta name="apple-mobile-web-app-title" content=""> 568 | ``` 569 | 570 | For further information please read the [official 571 | documentation](https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html) 572 | on Apple's site. 573 | 574 | 575 | ### Apple Touch Icons 576 | 577 | The Apple touch icons can be seen as the favicons of iOS devices. 578 | 579 | The main sizes of the Apple touch icons are: 580 | 581 | * `57×57px` – iPhone with @1x display and iPod Touch 582 | * `72×72px` – iPad and iPad mini with @1x display running iOS ≤ 6 583 | * `76×76px` – iPad and iPad mini with @1x display running iOS ≥ 7 584 | * `114×114px` – iPhone with @2x display running iOS ≤ 6 585 | * `120×120px` – iPhone with @2x and @3x display running iOS ≥ 7 586 | * `144×144px` – iPad and iPad mini with @2x display running iOS ≤ 6 587 | * `152×152px` – iPad and iPad mini with @2x display running iOS 7 588 | * `180×180px` – iPad and iPad mini with @2x display running iOS 8 589 | 590 | Displays meaning: 591 | 592 | * @1x - non-Retina 593 | * @2x - Retina 594 | * @3x - Retina HD 595 | 596 | More information about the displays of iOS devices can be found 597 | [here](https://en.wikipedia.org/wiki/List_of_iOS_devices#Display). 598 | 599 | In most cases, one `180×180px` touch icon named `apple-touch-icon.png` 600 | and including: 601 | 602 | ```html 603 | <link rel="apple-touch-icon" href="apple-touch-icon.png"> 604 | ``` 605 | 606 | in the `<head>` of the page is enough. If you use art-direction and/or 607 | want to have different content for each device, you can add more touch 608 | icons as written above. 609 | 610 | For a more comprehensive overview, please refer to Mathias' [article on Touch 611 | Icons](https://mathiasbynens.be/notes/touch-icons). 612 | 613 | 614 | ### Apple Touch Startup Image 615 | 616 | Apart from that it is possible to add start-up screens for web apps on iOS. This 617 | basically works by defining `apple-touch-startup-image` with an according link 618 | to the image. Since iOS devices have different screen resolutions it is 619 | necessary to add media queries to detect which image to load. Here is an 620 | example for a retina iPhone: 621 | 622 | ```html 623 | <link rel="apple-touch-startup-image" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="img/startup-retina.png"> 624 | ``` 625 | 626 | However, it is possible to detect which start-up image to use with JavaScript. 627 | The Mobile Boilerplate provides a useful function for this. Please see 628 | [helpers.js](https://github.com/h5bp/mobile-boilerplate/blob/v4.1.0/js/helper.js#L336-L383) 629 | for the implementation. 630 | 631 | 632 | ### Chrome Mobile web apps 633 | 634 | Chrome Mobile has a specific meta tag for making apps [installable to the 635 | homescreen](https://developer.chrome.com/multidevice/android/installtohomescreen) 636 | which tries to be a more generic replacement to Apple's proprietary meta tag: 637 | 638 | ```html 639 | <meta name="mobile-web-app-capable" content="yes"> 640 | ``` 641 | 642 | Same applies to the touch icons: 643 | 644 | ```html 645 | <link rel="icon" sizes="192x192" href="highres-icon.png"> 646 | ``` 647 | 648 | ### Theme Color 649 | 650 | You can add the [`theme-color` meta extension](https://github.com/whatwg/meta-theme-color) 651 | in the `<head>` of your pages to suggest the color that browsers and 652 | OSes should use if they customize the display of individual pages in 653 | their UIs with varying colors. 654 | 655 | ```html 656 | <meta name="theme-color" content="#ff69b4"> 657 | ``` 658 | 659 | The `content` attribute extension can take any valid CSS color. 660 | 661 | Currently, the `theme-color` meta extension is supported by [Chrome 39+ 662 | for Android Lollipop](http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android) 663 | and [Firefox OS 2.1+](https://twitter.com/ahmednefzaoui/status/492344698493997057). 664 | -------------------------------------------------------------------------------- /src/.htaccess: -------------------------------------------------------------------------------- 1 | # Apache Server Configs v2.13.0 | MIT License 2 | # https://github.com/h5bp/server-configs-apache 3 | 4 | # (!) Using `.htaccess` files slows down Apache, therefore, if you have 5 | # access to the main server configuration file (which is usually called 6 | # `httpd.conf`), you should add this logic there. 7 | # 8 | # https://httpd.apache.org/docs/current/howto/htaccess.html. 9 | 10 | # ###################################################################### 11 | # # CROSS-ORIGIN # 12 | # ###################################################################### 13 | 14 | # ---------------------------------------------------------------------- 15 | # | Cross-origin requests | 16 | # ---------------------------------------------------------------------- 17 | 18 | # Allow cross-origin requests. 19 | # 20 | # https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS 21 | # http://enable-cors.org/ 22 | # http://www.w3.org/TR/cors/ 23 | 24 | # <IfModule mod_headers.c> 25 | # Header set Access-Control-Allow-Origin "*" 26 | # </IfModule> 27 | 28 | # ---------------------------------------------------------------------- 29 | # | Cross-origin images | 30 | # ---------------------------------------------------------------------- 31 | 32 | # Send the CORS header for images when browsers request it. 33 | # 34 | # https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image 35 | # https://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html 36 | 37 | <IfModule mod_setenvif.c> 38 | <IfModule mod_headers.c> 39 | <FilesMatch "\.(bmp|cur|gif|ico|jpe?g|png|svgz?|webp)$"> 40 | SetEnvIf Origin ":" IS_CORS 41 | Header set Access-Control-Allow-Origin "*" env=IS_CORS 42 | </FilesMatch> 43 | </IfModule> 44 | </IfModule> 45 | 46 | # ---------------------------------------------------------------------- 47 | # | Cross-origin web fonts | 48 | # ---------------------------------------------------------------------- 49 | 50 | # Allow cross-origin access to web fonts. 51 | 52 | <IfModule mod_headers.c> 53 | <FilesMatch "\.(eot|otf|tt[cf]|woff2?)$"> 54 | Header set Access-Control-Allow-Origin "*" 55 | </FilesMatch> 56 | </IfModule> 57 | 58 | # ---------------------------------------------------------------------- 59 | # | Cross-origin resource timing | 60 | # ---------------------------------------------------------------------- 61 | 62 | # Allow cross-origin access to the timing information for all resources. 63 | # 64 | # If a resource isn't served with a `Timing-Allow-Origin` header that 65 | # would allow its timing information to be shared with the document, 66 | # some of the attributes of the `PerformanceResourceTiming` object will 67 | # be set to zero. 68 | # 69 | # http://www.w3.org/TR/resource-timing/ 70 | # http://www.stevesouders.com/blog/2014/08/21/resource-timing-practical-tips/ 71 | 72 | # <IfModule mod_headers.c> 73 | # Header set Timing-Allow-Origin: "*" 74 | # </IfModule> 75 | 76 | 77 | # ###################################################################### 78 | # # ERRORS # 79 | # ###################################################################### 80 | 81 | # ---------------------------------------------------------------------- 82 | # | Custom error messages/pages | 83 | # ---------------------------------------------------------------------- 84 | 85 | # Customize what Apache returns to the client in case of an error. 86 | # https://httpd.apache.org/docs/current/mod/core.html#errordocument 87 | 88 | ErrorDocument 404 /404.html 89 | 90 | # ---------------------------------------------------------------------- 91 | # | Error prevention | 92 | # ---------------------------------------------------------------------- 93 | 94 | # Disable the pattern matching based on filenames. 95 | # 96 | # This setting prevents Apache from returning a 404 error as the result 97 | # of a rewrite when the directory with the same name does not exist. 98 | # 99 | # https://httpd.apache.org/docs/current/content-negotiation.html#multiviews 100 | 101 | Options -MultiViews 102 | 103 | 104 | # ###################################################################### 105 | # # INTERNET EXPLORER # 106 | # ###################################################################### 107 | 108 | # ---------------------------------------------------------------------- 109 | # | Document modes | 110 | # ---------------------------------------------------------------------- 111 | 112 | # Force Internet Explorer 8/9/10 to render pages in the highest mode 113 | # available in the various cases when it may not. 114 | # 115 | # https://hsivonen.fi/doctype/#ie8 116 | # 117 | # (!) Starting with Internet Explorer 11, document modes are deprecated. 118 | # If your business still relies on older web apps and services that were 119 | # designed for older versions of Internet Explorer, you might want to 120 | # consider enabling `Enterprise Mode` throughout your company. 121 | # 122 | # https://msdn.microsoft.com/en-us/library/ie/bg182625.aspx#docmode 123 | # http://blogs.msdn.com/b/ie/archive/2014/04/02/stay-up-to-date-with-enterprise-mode-for-internet-explorer-11.aspx 124 | 125 | <IfModule mod_headers.c> 126 | 127 | Header set X-UA-Compatible "IE=edge" 128 | 129 | # `mod_headers` cannot match based on the content-type, however, 130 | # the `X-UA-Compatible` response header should be send only for 131 | # HTML documents and not for the other resources. 132 | 133 | <FilesMatch "\.(appcache|atom|bbaw|bmp|crx|css|cur|eot|f4[abpv]|flv|geojson|gif|htc|ico|jpe?g|js|json(ld)?|m4[av]|manifest|map|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|topojson|tt[cf]|txt|vcard|vcf|vtt|webapp|web[mp]|woff2?|xloc|xml|xpi)$"> 134 | Header unset X-UA-Compatible 135 | </FilesMatch> 136 | 137 | </IfModule> 138 | 139 | # ---------------------------------------------------------------------- 140 | # | Iframes cookies | 141 | # ---------------------------------------------------------------------- 142 | 143 | # Allow cookies to be set from iframes in Internet Explorer. 144 | # 145 | # https://msdn.microsoft.com/en-us/library/ms537343.aspx 146 | # http://www.w3.org/TR/2000/CR-P3P-20001215/ 147 | 148 | # <IfModule mod_headers.c> 149 | # Header set P3P "policyref=\"/w3c/p3p.xml\", CP=\"IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT\"" 150 | # </IfModule> 151 | 152 | 153 | # ###################################################################### 154 | # # MEDIA TYPES AND CHARACTER ENCODINGS # 155 | # ###################################################################### 156 | 157 | # ---------------------------------------------------------------------- 158 | # | Media types | 159 | # ---------------------------------------------------------------------- 160 | 161 | # Serve resources with the proper media types (f.k.a. MIME types). 162 | # 163 | # https://www.iana.org/assignments/media-types/media-types.xhtml 164 | # https://httpd.apache.org/docs/current/mod/mod_mime.html#addtype 165 | 166 | <IfModule mod_mime.c> 167 | 168 | # Data interchange 169 | 170 | AddType application/atom+xml atom 171 | AddType application/json json map topojson 172 | AddType application/ld+json jsonld 173 | AddType application/rss+xml rss 174 | AddType application/vnd.geo+json geojson 175 | AddType application/xml rdf xml 176 | 177 | 178 | # JavaScript 179 | 180 | # Normalize to standard type. 181 | # https://tools.ietf.org/html/rfc4329#section-7.2 182 | 183 | AddType application/javascript js 184 | 185 | 186 | # Manifest files 187 | 188 | # If you are providing a web application manifest file (see 189 | # the specification: https://w3c.github.io/manifest/), it is 190 | # recommended that you serve it with the `application/manifest+json` 191 | # media type. 192 | # 193 | # Because the web application manifest file doesn't have its 194 | # own unique file extension, you can set its media type either 195 | # by matching: 196 | # 197 | # 1) the exact location of the file (this can be done using a 198 | # directive such as `<Location>`, but it will NOT work in 199 | # the `.htaccess` file, so you will have to do it in the main 200 | # server configuration file or inside of a `<VirtualHost>` 201 | # container) 202 | # 203 | # e.g.: 204 | # 205 | # <Location "/.well-known/manifest.json"> 206 | # AddType application/manifest+json json 207 | # </Location> 208 | # 209 | # 2) the filename (this can be problematic as you will need to 210 | # ensure that you don't have any other file with the same name 211 | # as the one you gave to your web application manifest file) 212 | # 213 | # e.g.: 214 | # 215 | # <Files "manifest.json"> 216 | # AddType application/manifest+json json 217 | # </Files> 218 | 219 | AddType application/x-web-app-manifest+json webapp 220 | AddType text/cache-manifest appcache 221 | 222 | 223 | # Media files 224 | 225 | AddType audio/mp4 f4a f4b m4a 226 | AddType audio/ogg oga ogg opus 227 | AddType image/bmp bmp 228 | AddType image/svg+xml svg svgz 229 | AddType image/webp webp 230 | AddType video/mp4 f4v f4p m4v mp4 231 | AddType video/ogg ogv 232 | AddType video/webm webm 233 | AddType video/x-flv flv 234 | 235 | # Serving `.ico` image files with a different media type 236 | # prevents Internet Explorer from displaying then as images: 237 | # https://github.com/h5bp/html5-boilerplate/commit/37b5fec090d00f38de64b591bcddcb205aadf8ee 238 | 239 | AddType image/x-icon cur ico 240 | 241 | 242 | # Web fonts 243 | 244 | AddType application/font-woff woff 245 | AddType application/font-woff2 woff2 246 | AddType application/vnd.ms-fontobject eot 247 | 248 | # Browsers usually ignore the font media types and simply sniff 249 | # the bytes to figure out the font type. 250 | # https://mimesniff.spec.whatwg.org/#matching-a-font-type-pattern 251 | # 252 | # However, Blink and WebKit based browsers will show a warning 253 | # in the console if the following font types are served with any 254 | # other media types. 255 | 256 | AddType application/x-font-ttf ttc ttf 257 | AddType font/opentype otf 258 | 259 | 260 | # Other 261 | 262 | AddType application/octet-stream safariextz 263 | AddType application/x-bb-appworld bbaw 264 | AddType application/x-chrome-extension crx 265 | AddType application/x-opera-extension oex 266 | AddType application/x-xpinstall xpi 267 | AddType text/vcard vcard vcf 268 | AddType text/vnd.rim.location.xloc xloc 269 | AddType text/vtt vtt 270 | AddType text/x-component htc 271 | 272 | </IfModule> 273 | 274 | # ---------------------------------------------------------------------- 275 | # | Character encodings | 276 | # ---------------------------------------------------------------------- 277 | 278 | # Serve all resources labeled as `text/html` or `text/plain` 279 | # with the media type `charset` parameter set to `UTF-8`. 280 | # 281 | # https://httpd.apache.org/docs/current/mod/core.html#adddefaultcharset 282 | 283 | AddDefaultCharset utf-8 284 | 285 | # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 286 | 287 | # Serve the following file types with the media type `charset` 288 | # parameter set to `UTF-8`. 289 | # 290 | # https://httpd.apache.org/docs/current/mod/mod_mime.html#addcharset 291 | 292 | <IfModule mod_mime.c> 293 | AddCharset utf-8 .atom \ 294 | .bbaw \ 295 | .css \ 296 | .geojson \ 297 | .js \ 298 | .json \ 299 | .jsonld \ 300 | .rdf \ 301 | .rss \ 302 | .topojson \ 303 | .vtt \ 304 | .webapp \ 305 | .xloc \ 306 | .xml 307 | </IfModule> 308 | 309 | 310 | # ###################################################################### 311 | # # REWRITES # 312 | # ###################################################################### 313 | 314 | # ---------------------------------------------------------------------- 315 | # | Rewrite engine | 316 | # ---------------------------------------------------------------------- 317 | 318 | # (1) Turn on the rewrite engine (this is necessary in order for 319 | # the `RewriteRule` directives to work). 320 | # 321 | # https://httpd.apache.org/docs/current/mod/mod_rewrite.html#RewriteEngine 322 | # 323 | # (2) Enable the `FollowSymLinks` option if it isn't already. 324 | # 325 | # https://httpd.apache.org/docs/current/mod/core.html#options 326 | # 327 | # (3) If your web host doesn't allow the `FollowSymlinks` option, 328 | # you need to comment it out or remove it, and then uncomment 329 | # the `Options +SymLinksIfOwnerMatch` line (4), but be aware 330 | # of the performance impact. 331 | # 332 | # https://httpd.apache.org/docs/current/misc/perf-tuning.html#symlinks 333 | # 334 | # (4) Some cloud hosting services will require you set `RewriteBase`. 335 | # 336 | # https://www.rackspace.com/knowledge_center/frequently-asked-question/why-is-modrewrite-not-working-on-my-site 337 | # https://httpd.apache.org/docs/current/mod/mod_rewrite.html#rewritebase 338 | # 339 | # (5) Depending on how your server is set up, you may also need to 340 | # use the `RewriteOptions` directive to enable some options for 341 | # the rewrite engine. 342 | # 343 | # https://httpd.apache.org/docs/current/mod/mod_rewrite.html#rewriteoptions 344 | # 345 | # (6) Set %{ENV:PROTO} variable, to allow rewrites to redirect with the 346 | # appropriate schema automatically (http or https). 347 | 348 | <IfModule mod_rewrite.c> 349 | 350 | # (1) 351 | RewriteEngine On 352 | 353 | # (2) 354 | Options +FollowSymlinks 355 | 356 | # (3) 357 | # Options +SymLinksIfOwnerMatch 358 | 359 | # (4) 360 | # RewriteBase / 361 | 362 | # (5) 363 | # RewriteOptions <options> 364 | 365 | # (6) 366 | RewriteCond %{HTTPS} =on 367 | RewriteRule ^ - [env=proto:https] 368 | RewriteCond %{HTTPS} !=on 369 | RewriteRule ^ - [env=proto:http] 370 | 371 | </IfModule> 372 | 373 | # ---------------------------------------------------------------------- 374 | # | Forcing `https://` | 375 | # ---------------------------------------------------------------------- 376 | 377 | # Redirect from the `http://` to the `https://` version of the URL. 378 | # https://wiki.apache.org/httpd/RewriteHTTPToHTTPS 379 | 380 | # <IfModule mod_rewrite.c> 381 | # RewriteEngine On 382 | # RewriteCond %{HTTPS} !=on 383 | # RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R=301,L] 384 | # </IfModule> 385 | 386 | # ---------------------------------------------------------------------- 387 | # | Suppressing / Forcing the `www.` at the beginning of URLs | 388 | # ---------------------------------------------------------------------- 389 | 390 | # The same content should never be available under two different 391 | # URLs, especially not with and without `www.` at the beginning. 392 | # This can cause SEO problems (duplicate content), and therefore, 393 | # you should choose one of the alternatives and redirect the other 394 | # one. 395 | # 396 | # By default `Option 1` (no `www.`) is activated. 397 | # http://no-www.org/faq.php?q=class_b 398 | # 399 | # If you would prefer to use `Option 2`, just comment out all the 400 | # lines from `Option 1` and uncomment the ones from `Option 2`. 401 | # 402 | # (!) NEVER USE BOTH RULES AT THE SAME TIME! 403 | 404 | # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 405 | 406 | # Option 1: rewrite www.example.com → example.com 407 | 408 | <IfModule mod_rewrite.c> 409 | RewriteEngine On 410 | RewriteCond %{HTTPS} !=on 411 | RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC] 412 | RewriteRule ^ %{ENV:PROTO}://%1%{REQUEST_URI} [R=301,L] 413 | </IfModule> 414 | 415 | # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 416 | 417 | # Option 2: rewrite example.com → www.example.com 418 | # 419 | # Be aware that the following might not be a good idea if you use "real" 420 | # subdomains for certain parts of your website. 421 | 422 | # <IfModule mod_rewrite.c> 423 | # RewriteEngine On 424 | # RewriteCond %{HTTPS} !=on 425 | # RewriteCond %{HTTP_HOST} !^www\. [NC] 426 | # RewriteCond %{SERVER_ADDR} !=127.0.0.1 427 | # RewriteCond %{SERVER_ADDR} !=::1 428 | # RewriteRule ^ %{ENV:PROTO}://www.%{HTTP_HOST}%{REQUEST_URI} [R=301,L] 429 | # </IfModule> 430 | 431 | 432 | # ###################################################################### 433 | # # SECURITY # 434 | # ###################################################################### 435 | 436 | # ---------------------------------------------------------------------- 437 | # | Clickjacking | 438 | # ---------------------------------------------------------------------- 439 | 440 | # Protect website against clickjacking. 441 | # 442 | # The example below sends the `X-Frame-Options` response header with 443 | # the value `DENY`, informing browsers not to display the content of 444 | # the web page in any frame. 445 | # 446 | # This might not be the best setting for everyone. You should read 447 | # about the other two possible values the `X-Frame-Options` header 448 | # field can have: `SAMEORIGIN` and `ALLOW-FROM`. 449 | # https://tools.ietf.org/html/rfc7034#section-2.1. 450 | # 451 | # Keep in mind that while you could send the `X-Frame-Options` header 452 | # for all of your website’s pages, this has the potential downside that 453 | # it forbids even non-malicious framing of your content (e.g.: when 454 | # users visit your website using a Google Image Search results page). 455 | # 456 | # Nonetheless, you should ensure that you send the `X-Frame-Options` 457 | # header for all pages that allow a user to make a state changing 458 | # operation (e.g: pages that contain one-click purchase links, checkout 459 | # or bank-transfer confirmation pages, pages that make permanent 460 | # configuration changes, etc.). 461 | # 462 | # Sending the `X-Frame-Options` header can also protect your website 463 | # against more than just clickjacking attacks: 464 | # https://cure53.de/xfo-clickjacking.pdf. 465 | # 466 | # https://tools.ietf.org/html/rfc7034 467 | # http://blogs.msdn.com/b/ieinternals/archive/2010/03/30/combating-clickjacking-with-x-frame-options.aspx 468 | # https://www.owasp.org/index.php/Clickjacking 469 | 470 | # <IfModule mod_headers.c> 471 | 472 | # Header set X-Frame-Options "DENY" 473 | 474 | # # `mod_headers` cannot match based on the content-type, however, 475 | # # the `X-Frame-Options` response header should be send only for 476 | # # HTML documents and not for the other resources. 477 | 478 | # <FilesMatch "\.(appcache|atom|bbaw|bmp|crx|css|cur|eot|f4[abpv]|flv|geojson|gif|htc|ico|jpe?g|js|json(ld)?|m4[av]|manifest|map|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|topojson|tt[cf]|txt|vcard|vcf|vtt|webapp|web[mp]|woff2?|xloc|xml|xpi)$"> 479 | # Header unset X-Frame-Options 480 | # </FilesMatch> 481 | 482 | # </IfModule> 483 | 484 | # ---------------------------------------------------------------------- 485 | # | Content Security Policy (CSP) | 486 | # ---------------------------------------------------------------------- 487 | 488 | # Mitigate the risk of cross-site scripting and other content-injection 489 | # attacks. 490 | # 491 | # This can be done by setting a `Content Security Policy` which 492 | # whitelists trusted sources of content for your website. 493 | # 494 | # The example header below allows ONLY scripts that are loaded from 495 | # the current website's origin (no inline scripts, no CDN, etc). 496 | # That almost certainly won't work as-is for your website! 497 | # 498 | # To make things easier, you can use an online CSP header generator 499 | # such as: http://cspisawesome.com/. 500 | # 501 | # http://content-security-policy.com/ 502 | # http://www.html5rocks.com/en/tutorials/security/content-security-policy/ 503 | # http://www.w3.org/TR/CSP11/). 504 | 505 | # <IfModule mod_headers.c> 506 | 507 | # Header set Content-Security-Policy "script-src 'self'; object-src 'self'" 508 | 509 | # # `mod_headers` cannot match based on the content-type, however, 510 | # # the `Content-Security-Policy` response header should be send 511 | # # only for HTML documents and not for the other resources. 512 | 513 | # <FilesMatch "\.(appcache|atom|bbaw|bmp|crx|css|cur|eot|f4[abpv]|flv|geojson|gif|htc|ico|jpe?g|js|json(ld)?|m4[av]|manifest|map|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|topojson|tt[cf]|txt|vcard|vcf|vtt|webapp|web[mp]|woff2?|xloc|xml|xpi)$"> 514 | # Header unset Content-Security-Policy 515 | # </FilesMatch> 516 | 517 | # </IfModule> 518 | 519 | # ---------------------------------------------------------------------- 520 | # | File access | 521 | # ---------------------------------------------------------------------- 522 | 523 | # Block access to directories without a default document. 524 | # 525 | # You should leave the following uncommented, as you shouldn't allow 526 | # anyone to surf through every directory on your server (which may 527 | # includes rather private places such as the CMS's directories). 528 | 529 | <IfModule mod_autoindex.c> 530 | Options -Indexes 531 | </IfModule> 532 | 533 | # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 534 | 535 | # Block access to all hidden files and directories with the exception of 536 | # the visible content from within the `/.well-known/` hidden directory. 537 | # 538 | # These types of files usually contain user preferences or the preserved 539 | # state of an utility, and can include rather private places like, for 540 | # example, the `.git` or `.svn` directories. 541 | # 542 | # The `/.well-known/` directory represents the standard (RFC 5785) path 543 | # prefix for "well-known locations" (e.g.: `/.well-known/manifest.json`, 544 | # `/.well-known/keybase.txt`), and therefore, access to its visible 545 | # content should not be blocked. 546 | # 547 | # https://www.mnot.net/blog/2010/04/07/well-known 548 | # https://tools.ietf.org/html/rfc5785 549 | 550 | <IfModule mod_rewrite.c> 551 | RewriteEngine On 552 | RewriteCond %{REQUEST_URI} "!(^|/)\.well-known/([^./]+./?)+$" [NC] 553 | RewriteCond %{SCRIPT_FILENAME} -d [OR] 554 | RewriteCond %{SCRIPT_FILENAME} -f 555 | RewriteRule "(^|/)\." - [F] 556 | </IfModule> 557 | 558 | # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 559 | 560 | # Block access to files that can expose sensitive information. 561 | # 562 | # By default, block access to backup and source files that may be 563 | # left by some text editors and can pose a security risk when anyone 564 | # has access to them. 565 | # 566 | # http://feross.org/cmsploit/ 567 | # 568 | # (!) Update the `<FilesMatch>` regular expression from below to 569 | # include any files that might end up on your production server and 570 | # can expose sensitive information about your website. These files may 571 | # include: configuration files, files that contain metadata about the 572 | # project (e.g.: project dependencies), build scripts, etc.. 573 | 574 | <FilesMatch "(^#.*#|\.(bak|conf|dist|fla|in[ci]|log|psd|sh|sql|sw[op])|~)$"> 575 | 576 | # Apache < 2.3 577 | <IfModule !mod_authz_core.c> 578 | Order allow,deny 579 | Deny from all 580 | Satisfy All 581 | </IfModule> 582 | 583 | # Apache ≥ 2.3 584 | <IfModule mod_authz_core.c> 585 | Require all denied 586 | </IfModule> 587 | 588 | </FilesMatch> 589 | 590 | # ---------------------------------------------------------------------- 591 | # | HTTP Strict Transport Security (HSTS) | 592 | # ---------------------------------------------------------------------- 593 | 594 | # Force client-side SSL redirection. 595 | # 596 | # If a user types `example.com` in their browser, even if the server 597 | # redirects them to the secure version of the website, that still leaves 598 | # a window of opportunity (the initial HTTP connection) for an attacker 599 | # to downgrade or redirect the request. 600 | # 601 | # The following header ensures that browser will ONLY connect to your 602 | # server via HTTPS, regardless of what the users type in the browser's 603 | # address bar. 604 | # 605 | # (!) Remove the `includeSubDomains` optional directive if the website's 606 | # subdomains are not using HTTPS. 607 | # 608 | # http://www.html5rocks.com/en/tutorials/security/transport-layer-security/ 609 | # https://tools.ietf.org/html/draft-ietf-websec-strict-transport-sec-14#section-6.1 610 | # http://blogs.msdn.com/b/ieinternals/archive/2014/08/18/hsts-strict-transport-security-attacks-mitigations-deployment-https.aspx 611 | 612 | # <IfModule mod_headers.c> 613 | # Header always set Strict-Transport-Security "max-age=16070400; includeSubDomains" 614 | # </IfModule> 615 | 616 | # ---------------------------------------------------------------------- 617 | # | Reducing MIME type security risks | 618 | # ---------------------------------------------------------------------- 619 | 620 | # Prevent some browsers from MIME-sniffing the response. 621 | # 622 | # This reduces exposure to drive-by download attacks and cross-origin 623 | # data leaks, and should be left uncommented, especially if the server 624 | # is serving user-uploaded content or content that could potentially be 625 | # treated as executable by the browser. 626 | # 627 | # http://www.slideshare.net/hasegawayosuke/owasp-hasegawa 628 | # http://blogs.msdn.com/b/ie/archive/2008/07/02/ie8-security-part-v-comprehensive-protection.aspx 629 | # https://msdn.microsoft.com/en-us/library/ie/gg622941.aspx 630 | # https://mimesniff.spec.whatwg.org/ 631 | 632 | <IfModule mod_headers.c> 633 | Header set X-Content-Type-Options "nosniff" 634 | </IfModule> 635 | 636 | # ---------------------------------------------------------------------- 637 | # | Reflected Cross-Site Scripting (XSS) attacks | 638 | # ---------------------------------------------------------------------- 639 | 640 | # (1) Try to re-enable the cross-site scripting (XSS) filter built 641 | # into most web browsers. 642 | # 643 | # The filter is usually enabled by default, but in some cases it 644 | # may be disabled by the user. However, in Internet Explorer for 645 | # example, it can be re-enabled just by sending the 646 | # `X-XSS-Protection` header with the value of `1`. 647 | # 648 | # (2) Prevent web browsers from rendering the web page if a potential 649 | # reflected (a.k.a non-persistent) XSS attack is detected by the 650 | # filter. 651 | # 652 | # By default, if the filter is enabled and browsers detect a 653 | # reflected XSS attack, they will attempt to block the attack 654 | # by making the smallest possible modifications to the returned 655 | # web page. 656 | # 657 | # Unfortunately, in some browsers (e.g.: Internet Explorer), 658 | # this default behavior may allow the XSS filter to be exploited, 659 | # thereby, it's better to inform browsers to prevent the rendering 660 | # of the page altogether, instead of attempting to modify it. 661 | # 662 | # https://hackademix.net/2009/11/21/ies-xss-filter-creates-xss-vulnerabilities 663 | # 664 | # (!) Do not rely on the XSS filter to prevent XSS attacks! Ensure that 665 | # you are taking all possible measures to prevent XSS attacks, the 666 | # most obvious being: validating and sanitizing your website's inputs. 667 | # 668 | # http://blogs.msdn.com/b/ie/archive/2008/07/02/ie8-security-part-iv-the-xss-filter.aspx 669 | # http://blogs.msdn.com/b/ieinternals/archive/2011/01/31/controlling-the-internet-explorer-xss-filter-with-the-x-xss-protection-http-header.aspx 670 | # https://www.owasp.org/index.php/Cross-site_Scripting_%28XSS%29 671 | 672 | # <IfModule mod_headers.c> 673 | 674 | # # (1) (2) 675 | # Header set X-XSS-Protection "1; mode=block" 676 | 677 | # # `mod_headers` cannot match based on the content-type, however, 678 | # # the `X-XSS-Protection` response header should be send only for 679 | # # HTML documents and not for the other resources. 680 | 681 | # <FilesMatch "\.(appcache|atom|bbaw|bmp|crx|css|cur|eot|f4[abpv]|flv|geojson|gif|htc|ico|jpe?g|js|json(ld)?|m4[av]|manifest|map|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|topojson|tt[cf]|txt|vcard|vcf|vtt|webapp|web[mp]|woff2?|xloc|xml|xpi)$"> 682 | # Header unset X-XSS-Protection 683 | # </FilesMatch> 684 | 685 | # </IfModule> 686 | 687 | # ---------------------------------------------------------------------- 688 | # | Server-side technology information | 689 | # ---------------------------------------------------------------------- 690 | 691 | # Remove the `X-Powered-By` response header that: 692 | # 693 | # * is set by some frameworks and server-side languages 694 | # (e.g.: ASP.NET, PHP), and its value contains information 695 | # about them (e.g.: their name, version number) 696 | # 697 | # * doesn't provide any value as far as users are concern, 698 | # and in some cases, the information provided by it can 699 | # be used by attackers 700 | # 701 | # (!) If you can, you should disable the `X-Powered-By` header from the 702 | # language / framework level (e.g.: for PHP, you can do that by setting 703 | # `expose_php = off` in `php.ini`) 704 | # 705 | # https://php.net/manual/en/ini.core.php#ini.expose-php 706 | 707 | <IfModule mod_headers.c> 708 | Header unset X-Powered-By 709 | </IfModule> 710 | 711 | # ---------------------------------------------------------------------- 712 | # | Server software information | 713 | # ---------------------------------------------------------------------- 714 | 715 | # Prevent Apache from adding a trailing footer line containing 716 | # information about the server to the server-generated documents 717 | # (e.g.: error messages, directory listings, etc.) 718 | # 719 | # https://httpd.apache.org/docs/current/mod/core.html#serversignature 720 | 721 | ServerSignature Off 722 | 723 | # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 724 | 725 | # Prevent Apache from sending in the `Server` response header its 726 | # exact version number, the description of the generic OS-type or 727 | # information about its compiled-in modules. 728 | # 729 | # (!) The `ServerTokens` directive will only work in the main server 730 | # configuration file, so don't try to enable it in the `.htaccess` file! 731 | # 732 | # https://httpd.apache.org/docs/current/mod/core.html#servertokens 733 | 734 | #ServerTokens Prod 735 | 736 | 737 | # ###################################################################### 738 | # # WEB PERFORMANCE # 739 | # ###################################################################### 740 | 741 | # ---------------------------------------------------------------------- 742 | # | Compression | 743 | # ---------------------------------------------------------------------- 744 | 745 | <IfModule mod_deflate.c> 746 | 747 | # Force compression for mangled `Accept-Encoding` request headers 748 | # https://developer.yahoo.com/blogs/ydn/pushing-beyond-gzipping-25601.html 749 | 750 | <IfModule mod_setenvif.c> 751 | <IfModule mod_headers.c> 752 | SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding 753 | RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding 754 | </IfModule> 755 | </IfModule> 756 | 757 | # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 758 | 759 | # Compress all output labeled with one of the following media types. 760 | # 761 | # (!) For Apache versions below version 2.3.7 you don't need to 762 | # enable `mod_filter` and can remove the `<IfModule mod_filter.c>` 763 | # and `</IfModule>` lines as `AddOutputFilterByType` is still in 764 | # the core directives. 765 | # 766 | # https://httpd.apache.org/docs/current/mod/mod_filter.html#addoutputfilterbytype 767 | 768 | <IfModule mod_filter.c> 769 | AddOutputFilterByType DEFLATE "application/atom+xml" \ 770 | "application/javascript" \ 771 | "application/json" \ 772 | "application/ld+json" \ 773 | "application/manifest+json" \ 774 | "application/rdf+xml" \ 775 | "application/rss+xml" \ 776 | "application/schema+json" \ 777 | "application/vnd.geo+json" \ 778 | "application/vnd.ms-fontobject" \ 779 | "application/x-font-ttf" \ 780 | "application/x-javascript" \ 781 | "application/x-web-app-manifest+json" \ 782 | "application/xhtml+xml" \ 783 | "application/xml" \ 784 | "font/eot" \ 785 | "font/opentype" \ 786 | "image/bmp" \ 787 | "image/svg+xml" \ 788 | "image/vnd.microsoft.icon" \ 789 | "image/x-icon" \ 790 | "text/cache-manifest" \ 791 | "text/css" \ 792 | "text/html" \ 793 | "text/javascript" \ 794 | "text/plain" \ 795 | "text/vcard" \ 796 | "text/vnd.rim.location.xloc" \ 797 | "text/vtt" \ 798 | "text/x-component" \ 799 | "text/x-cross-domain-policy" \ 800 | "text/xml" 801 | 802 | </IfModule> 803 | 804 | # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 805 | 806 | # Map the following filename extensions to the specified 807 | # encoding type in order to make Apache serve the file types 808 | # with the appropriate `Content-Encoding` response header 809 | # (do note that this will NOT make Apache compress them!). 810 | # 811 | # If these files types would be served without an appropriate 812 | # `Content-Enable` response header, client applications (e.g.: 813 | # browsers) wouldn't know that they first need to uncompress 814 | # the response, and thus, wouldn't be able to understand the 815 | # content. 816 | # 817 | # https://httpd.apache.org/docs/current/mod/mod_mime.html#addencoding 818 | 819 | <IfModule mod_mime.c> 820 | AddEncoding gzip svgz 821 | </IfModule> 822 | 823 | </IfModule> 824 | 825 | # ---------------------------------------------------------------------- 826 | # | Content transformation | 827 | # ---------------------------------------------------------------------- 828 | 829 | # Prevent intermediate caches or proxies (e.g.: such as the ones 830 | # used by mobile network providers) from modifying the website's 831 | # content. 832 | # 833 | # https://tools.ietf.org/html/rfc2616#section-14.9.5 834 | # 835 | # (!) If you are using `mod_pagespeed`, please note that setting 836 | # the `Cache-Control: no-transform` response header will prevent 837 | # `PageSpeed` from rewriting `HTML` files, and, if the 838 | # `ModPagespeedDisableRewriteOnNoTransform` directive isn't set 839 | # to `off`, also from rewriting other resources. 840 | # 841 | # https://developers.google.com/speed/pagespeed/module/configuration#notransform 842 | 843 | # <IfModule mod_headers.c> 844 | # Header merge Cache-Control "no-transform" 845 | # </IfModule> 846 | 847 | # ---------------------------------------------------------------------- 848 | # | ETags | 849 | # ---------------------------------------------------------------------- 850 | 851 | # Remove `ETags` as resources are sent with far-future expires headers. 852 | # 853 | # https://developer.yahoo.com/performance/rules.html#etags 854 | # https://tools.ietf.org/html/rfc7232#section-2.3 855 | 856 | # `FileETag None` doesn't work in all cases. 857 | <IfModule mod_headers.c> 858 | Header unset ETag 859 | </IfModule> 860 | 861 | FileETag None 862 | 863 | # ---------------------------------------------------------------------- 864 | # | Expires headers | 865 | # ---------------------------------------------------------------------- 866 | 867 | # Serve resources with far-future expires headers. 868 | # 869 | # (!) If you don't control versioning with filename-based 870 | # cache busting, you should consider lowering the cache times 871 | # to something like one week. 872 | # 873 | # https://httpd.apache.org/docs/current/mod/mod_expires.html 874 | 875 | <IfModule mod_expires.c> 876 | 877 | ExpiresActive on 878 | ExpiresDefault "access plus 1 month" 879 | 880 | # CSS 881 | ExpiresByType text/css "access plus 1 year" 882 | 883 | # Data interchange 884 | ExpiresByType application/atom+xml "access plus 1 hour" 885 | ExpiresByType application/rdf+xml "access plus 1 hour" 886 | ExpiresByType application/rss+xml "access plus 1 hour" 887 | 888 | ExpiresByType application/json "access plus 0 seconds" 889 | ExpiresByType application/ld+json "access plus 0 seconds" 890 | ExpiresByType application/schema+json "access plus 0 seconds" 891 | ExpiresByType application/vnd.geo+json "access plus 0 seconds" 892 | ExpiresByType application/xml "access plus 0 seconds" 893 | ExpiresByType text/xml "access plus 0 seconds" 894 | 895 | # Favicon (cannot be renamed!) and cursor images 896 | ExpiresByType image/vnd.microsoft.icon "access plus 1 week" 897 | ExpiresByType image/x-icon "access plus 1 week" 898 | 899 | # HTML 900 | ExpiresByType text/html "access plus 0 seconds" 901 | 902 | # JavaScript 903 | ExpiresByType application/javascript "access plus 1 year" 904 | ExpiresByType application/x-javascript "access plus 1 year" 905 | ExpiresByType text/javascript "access plus 1 year" 906 | 907 | # Manifest files 908 | ExpiresByType application/manifest+json "access plus 1 year" 909 | 910 | ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds" 911 | ExpiresByType text/cache-manifest "access plus 0 seconds" 912 | 913 | # Media files 914 | ExpiresByType audio/ogg "access plus 1 month" 915 | ExpiresByType image/bmp "access plus 1 month" 916 | ExpiresByType image/gif "access plus 1 month" 917 | ExpiresByType image/jpeg "access plus 1 month" 918 | ExpiresByType image/png "access plus 1 month" 919 | ExpiresByType image/svg+xml "access plus 1 month" 920 | ExpiresByType image/webp "access plus 1 month" 921 | ExpiresByType video/mp4 "access plus 1 month" 922 | ExpiresByType video/ogg "access plus 1 month" 923 | ExpiresByType video/webm "access plus 1 month" 924 | 925 | # Web fonts 926 | 927 | # Embedded OpenType (EOT) 928 | ExpiresByType application/vnd.ms-fontobject "access plus 1 month" 929 | ExpiresByType font/eot "access plus 1 month" 930 | 931 | # OpenType 932 | ExpiresByType font/opentype "access plus 1 month" 933 | 934 | # TrueType 935 | ExpiresByType application/x-font-ttf "access plus 1 month" 936 | 937 | # Web Open Font Format (WOFF) 1.0 938 | ExpiresByType application/font-woff "access plus 1 month" 939 | ExpiresByType application/x-font-woff "access plus 1 month" 940 | ExpiresByType font/woff "access plus 1 month" 941 | 942 | # Web Open Font Format (WOFF) 2.0 943 | ExpiresByType application/font-woff2 "access plus 1 month" 944 | 945 | # Other 946 | ExpiresByType text/x-cross-domain-policy "access plus 1 week" 947 | 948 | </IfModule> 949 | 950 | # ---------------------------------------------------------------------- 951 | # | File concatenation | 952 | # ---------------------------------------------------------------------- 953 | 954 | # Allow concatenation from within specific files. 955 | # 956 | # e.g.: 957 | # 958 | # If you have the following lines in a file called, for 959 | # example, `main.combined.js`: 960 | # 961 | # <!--#include file="js/jquery.js" --> 962 | # <!--#include file="js/jquery.timer.js" --> 963 | # 964 | # Apache will replace those lines with the content of the 965 | # specified files. 966 | 967 | # <IfModule mod_include.c> 968 | # <FilesMatch "\.combined\.js$"> 969 | # Options +Includes 970 | # AddOutputFilterByType INCLUDES application/javascript \ 971 | # application/x-javascript \ 972 | # text/javascript 973 | # SetOutputFilter INCLUDES 974 | # </FilesMatch> 975 | # <FilesMatch "\.combined\.css$"> 976 | # Options +Includes 977 | # AddOutputFilterByType INCLUDES text/css 978 | # SetOutputFilter INCLUDES 979 | # </FilesMatch> 980 | # </IfModule> 981 | 982 | # ---------------------------------------------------------------------- 983 | # | Filename-based cache busting | 984 | # ---------------------------------------------------------------------- 985 | 986 | # If you're not using a build process to manage your filename version 987 | # revving, you might want to consider enabling the following directives 988 | # to route all requests such as `/style.12345.css` to `/style.css`. 989 | # 990 | # To understand why this is important and even a better solution than 991 | # using something like `*.css?v231`, please see: 992 | # http://www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/ 993 | 994 | # <IfModule mod_rewrite.c> 995 | # RewriteEngine On 996 | # RewriteCond %{REQUEST_FILENAME} !-f 997 | # RewriteRule ^(.+)\.(\d+)\.(bmp|css|cur|gif|ico|jpe?g|js|png|svgz?|webp)$ $1.$3 [L] 998 | # </IfModule> 999 | --------------------------------------------------------------------------------