Merge pull request #2074 from h5bp/v7.0

v7.0 Docs Update

Author: roblarsen

README.md

@@ -57,16 +57,15 @@ Choose one of the following options:
 * Chrome *(latest 2)*
 * Edge *(latest 2)*
 * Firefox *(latest 2)*
-* Internet Explorer 9+
+* Internet Explorer 11
 * Opera *(latest 2)*
 * Safari *(latest 2)*
 
 *This doesn't mean that HTML5 Boilerplate cannot be used in older browsers,
 just that we'll ensure compatibility with the ones mentioned above.*
 
-If you need legacy browser support you
-can use [HTML5 Boilerplate v4](https://github.com/h5bp/html5-boilerplate/tree/v4) (IE 6+, Firefox 3.6+, Safari 4+),
-or [HTML5 Boilerplate v5](https://github.com/h5bp/html5-boilerplate/tree/v5.0.0) (IE8+). They are no longer actively developed.
+If you need legacy browser support you can use [HTML5 Boilerplate v6](https://github.com/h5bp/html5-boilerplate/releases/tag/6.1.0) (IE9/IE10)
+or [HTML5 Boilerplate v5](https://github.com/h5bp/html5-boilerplate/releases/tag/5.3.0) (IE 8). They are no longer actively developed.
 
 
 ## Documentation

dist/doc/css.md

@@ -132,8 +132,8 @@ process, as well as make the printed pages easier to read.
 At printing time, these styles will:
 
 * strip all background colors, change the font color to black, and remove the
-  `text-shadow` — done in order to [help save printer ink and speed up the
-  printing process](http://www.sanbeiji.com/archives/953)
+  `text-shadow` — done in order to help save printer ink and speed up the
+  printing process
 * underline and expand links to include the URL — done in order to allow users
   to know where to refer to<br>
   (exceptions to this are: the links that are

dist/doc/extend.md

@@ -18,14 +18,14 @@ not everything fits with everyone's needs.
 * [Social Networks](#social-networks)
 * [URLs](#urls)
 * [Web Apps](#web-apps)
-
+* [security.txt](#security.txt)
 
 ## App Stores
 
 ### Smart App Banners in iOS 6+ Safari
 
 Stop bothering everyone with gross modals advertising your entry in the
-App Store. Including the following [meta tag](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html) will unobtrusively give the user the option to download your iOS app,or open it with some data about the user's current state on the website.
+App Store. Including the following [meta tag](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html) will unobtrusively give the user the option to download your iOS app, or open it with some data about the user's current state on the website.
 
 ```html
 <meta name="apple-itunes-app" content="app-id=APP_ID,app-argument=SOME_TEXT">
@@ -214,12 +214,12 @@ $(function(){
 
 ## Internet Explorer
 
-### IE Pinned Sites (IE9+)
+### IE Pinned Sites
 
-Enabling your application for pinning will allow IE9 users to add it to their
+Enabling your application for pinning will allow IE users to add it to their
 Windows Taskbar and Start Menu. This comes with a range of new tools that you
-can easily configure with the elements below. See more [documentation on IE9
-Pinned Sites](https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/).
+can easily configure with the elements below. See more [documentation on IE 
+Pinned Sites](https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/samples/gg491731(v%3dvs.85)).
 
 ### Name the Pinned Site for Windows
 
@@ -252,7 +252,7 @@ track the number of pinned users, like so:
 
 ### Recolor IE's controls manually for a Pinned Site
 
-IE9+ will automatically use the overall color of your Pinned Site's favicon to
+IE will automatically use the overall color of your Pinned Site's favicon to
 shade its browser buttons. UNLESS you give it another color here. Only use
 named colors (`red`) or hex colors (`#ff0000`).
 
@@ -297,7 +297,7 @@ blog](https://blogs.msdn.microsoft.com/ie/2012/06/08/high-quality-visuals-for-pi
 
 ### (Windows 8) Badges for Pinned Sites
 
-IE10 will poll an XML document for badge information to display on your app's
+IE will poll an XML document for badge information to display on your app's
 tile in the Start screen. The user will be able to receive these badge updates
 even when your app isn't actively running. The badge's value can be a number,
 or one of a predefined list of glyphs.
@@ -373,7 +373,7 @@ plugin](https://www.google.com/search?ie=UTF-8&q=how+to+make+browser+search+plug
   [visibility](https://webmasters.googleblog.com/2009/05/introducing-rich-snippets.html).
 
 * If you're building a web app you may want [native style momentum scrolling in
-  iOS 5+](http://www.johanbrook.com/articles/native-style-momentum-scrolling-to-arrive-in-ios-5/)
+  iOS 5+](https://www.johanbrook.com/writings/native-style-momentum-scrolling-to-arrive-in-ios-5/)
   using `-webkit-overflow-scrolling: touch`.
 
 * If you want to disable the translation prompt in Chrome or block Google
@@ -460,12 +460,10 @@ registration to Facebook).
 ### Twitter Cards
 
 Twitter provides a snippet specification that serves a similar purpose to Open
-Graph. In fact, Twitter will use Open Graph when Cards is not available. Note
-that, as of this writing, Twitter requires that app developers activate Cards
-on a per-domain basis. You can read more about the various snippet formats
-and application process in the [official Twitter Cards
-documentation](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards), and you can validate
-your markup with the [Card validator](https://cards-dev.twitter.com/validator)
+Graph. In fact, Twitter will use Open Graph when Cards is not available. You 
+can read more about the various snippet formats and application process in the 
+[official Twitter Cards documentation](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards), 
+and you can validate your markup with the [Card validator](https://cards-dev.twitter.com/validator)
 (needs registration to Twitter).
 
 ```html
@@ -487,7 +485,7 @@ of [schema.org's microdata vocabulary](https://schema.org/), which
 covers many other schemas that can describe the content of your pages
 to search engines. For this reason, this metadata is more generic for
 SEO, notably for Google's search-engine, although this vocabulary is
-also used by Microsoft, Pinterest or Yandex.
+also used by Microsoft, Pinterest and Yandex.
 
 You can validate your markup with the [Structured Data Testing
 Tool](https://developers.google.com/structured-data/testing-tool/).
@@ -518,16 +516,6 @@ the cleaner, more accurate `https://www.example.com/cart.html`.
 <link rel="canonical" href="">
 ```
 
-### Official shortlink
-
-Signal to the world "This is the shortened URL to use this page!" Poorly
-supported at this time. Learn more by reading the [article about shortlinks on
-the Microformats wiki](http://microformats.org/wiki/rel-shortlink).
-
-```html
-<link rel="shortlink" href="h5bp.com">
-```
-
 ### Separate mobile URLs
 
 If you use separate URLs for desktop and mobile users, you should consider
@@ -579,39 +567,17 @@ on Apple's site.
 
 ### Apple Touch Icons
 
-The Apple touch icons can be seen as the favicons of iOS devices.
-
-The main sizes of the Apple touch icons are:
-
-* `57×57px` – iPhone with @1x display and iPod Touch
-* `72×72px` – iPad and iPad mini with @1x display running iOS ≤ 6
-* `76×76px` – iPad and iPad mini with @1x display running iOS ≥ 7
-* `114×114px` – iPhone with @2x display running iOS ≤ 6
-* `120×120px` – iPhone with @2x and @3x display running iOS ≥ 7
-* `144×144px` – iPad and iPad mini with @2x display running iOS ≤ 6
-* `152×152px` – iPad and iPad mini with @2x display running iOS 7
-* `180×180px` – iPad and iPad mini with @2x display running iOS 8
-
-Displays meaning:
+Apple touch icons are used as icons when a user adds your webapp to the home 
+screen of aniOS devices.
 
-* @1x - non-Retina
-* @2x - Retina
-* @3x - Retina HD
-
-More information about the displays of iOS devices can be found
-[here](https://en.wikipedia.org/wiki/List_of_iOS_devices#Display).
-
-In most cases, one `180×180px` touch icon named `icon.png`
-and including:
+Though the dimensions of the icon can vary between iOS devices and versions 
+one `180×180px` touch icon named `icon.png` and including the following in 
+the `<head>` of the page is enough:
 
 ```html
 <link rel="apple-touch-icon" href="icon.png">
 ```
 
-in the `<head>` of the page is enough. If you use art-direction and/or
-want to have different content for each device, you can add more touch
-icons as written above.
-
 For a more comprehensive overview, please refer to Mathias' [article on Touch
 Icons](https://mathiasbynens.be/notes/touch-icons).
 
@@ -620,19 +586,14 @@ Icons](https://mathiasbynens.be/notes/touch-icons).
 
 Apart from that it is possible to add start-up screens for web apps on iOS. This
 basically works by defining `apple-touch-startup-image` with an according link
-to the image. Since iOS devices have different screen resolutions it is
+to the image. Since iOS devices have different screen resolutions it maybe
 necessary to add media queries to detect which image to load. Here is an
-example for a retina iPhone:
+example for an iPhone:
 
 ```html
-<link rel="apple-touch-startup-image" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="img/startup-retina.png">
+<link rel="apple-touch-startup-image" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="img/startup.png">
 ```
 
-However, it is possible to detect which start-up image to use with JavaScript.
-The Mobile Boilerplate provides a useful function for this. Please see
-[helpers.js](https://github.com/h5bp/mobile-boilerplate/blob/v4.1.0/js/helper.js#L336-L383)
-for the implementation.
-
 
 ### Chrome Mobile web apps
 
@@ -665,3 +626,15 @@ The `content` attribute extension can take any valid CSS color.
 
 Currently, the `theme-color` meta extension is supported by [Chrome 39+
 for Android Lollipop](https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android).
+
+
+## security.txt
+
+When security risks in web services are discovered by users they often lack the
+channels to disclose them properly. As a result, security issues may be left unreported. 
+
+Security.txt defines a standard to help organizations define the process for 
+users to disclose security vulnerabilities securely. Include a text
+file on your server at `.well-known/security.txt` with the relevant contact details.
+
+Check [https://securitytxt.org/](https://securitytxt.org/) for more details.

dist/doc/faq.md

@@ -30,14 +30,9 @@ reinforces that scripts at the bottom are the right move. (Usually I
 concatenate and minify all my scripts into one .js file — the GA snippet being
 the suffix.)
 
-### How can I integrate [Bootstrap](https://getbootstrap.com/) with HTML5 Boilerplate?
-
-Here's Nicolas Gallagher writing about how [HTML5 Boilerplate and Bootstrap complement each
-other](https://www.quora.com/Is-Bootstrap-a-complement-or-an-alternative-to-HTML5-Boilerplate-or-viceversa/answer/Nicolas-Gallagher).
-
 ### Do I need to upgrade my site each time a new version of HTML5 Boilerplate is released?
 
-No, same as you don't normally replace the foundation of a house once it
+No, just as you don't normally replace the foundation of a house once it
 was built. However, there is nothing stopping you from trying to work in the
 latest changes, but you'll have to assess the costs/benefits of doing so.
 

dist/doc/html.md

@@ -32,71 +32,12 @@ attribute in the `<html>` as in this example:
 
 ### The order of the `<title>` and `<meta>` tags
 
-The order in which the `<title>` and the `<meta>` tags are specified is
-important because:
-
-1) the charset declaration (`<meta charset="utf-8">`):
-
-   * must be included completely within the [first 1024 bytes of the
-     document](https://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset)
-
-   * should be specified as early as possible (before any content that could
-     be controlled by an attacker, such as a `<title>` element) in order to
-     avoid a potential [encoding-related security
-     issue](https://code.google.com/p/doctype-mirror/wiki/ArticleUtf7) in
-     Internet Explorer
-
-2) the meta tag for compatibility mode
-   (`<meta http-equiv="x-ua-compatible" content="ie=edge">`):
-
-   * [needs to be included before all other tags except for the `<title>` and
-     the other `<meta>`
-     tags](https://msdn.microsoft.com/en-us/library/cc288325.aspx)
-
-
-### `x-ua-compatible`
-
-Internet Explorer 8/9/10 support [document compatibility
-modes](https://msdn.microsoft.com/en-us/library/cc288325.aspx) that affect the
-way webpages are interpreted and displayed. Because of this, even if your site's
-visitor is using, let's say, Internet Explorer 9, it's possible that IE will not
-use the latest rendering engine, and instead, decide to render your page using
-the Internet Explorer 5.5 rendering engine.
-
-Specifying the `x-ua-compatible` meta tag:
-
-```html
-<meta http-equiv="x-ua-compatible" content="ie=edge">
-```
-
-or sending the page with the following HTTP response header
-
-```
-X-UA-Compatible: IE=edge
-```
-
-will force Internet Explorer 8/9/10 to render the webpage in the highest
-available mode in [the various cases when it may
-not](https://hsivonen.fi/doctype/#ie8), and therefore, ensure that anyone
-browsing your site is treated to the best possible user experience that
-browser can offer.
-
-If possible, we recommend that you remove the `meta` tag and send only the
-HTTP response header as the `meta` tag will not always work if your site is
-served on a non-standard port, as Internet Explorer's preference option
-`Display intranet sites in Compatibility View` is checked by default.
-
-If you are using Apache as your webserver, including the
-[`.htaccess`](https://github.com/h5bp/server-configs-apache) file takes care of
-the HTTP header. If you are using a different server, check out our [other
-server config](https://github.com/h5bp/server-configs).
-
-Starting with Internet Explorer 11, [document modes are
-deprecated](https://msdn.microsoft.com/library/bg182625.aspx#docmode).
-If your business still relies on older web apps and services that were
-designed for older versions of Internet Explorer, you might want to consider
-enabling [Enterprise Mode](https://blogs.msdn.microsoft.com/ie/2014/04/02/stay-up-to-date-with-enterprise-mode-for-internet-explorer-11/) throughout your company.
-
+The charset declaration (`<meta charset="utf-8">`) must be included completely 
+within the [first 1024 bytes of the document](https://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset)
+and should be specified as early as possible (before any content that could
+be controlled by an attacker, such as a `<title>` element) in order to avoid a 
+potential [encoding-related security issue](https://code.google.com/archive/p/doctype-mirror/wikis/ArticleUtf7.wiki)
+in Internet Explorer
 
 ## Meta Description
 
@@ -108,20 +49,27 @@ shown in the search results.
 <meta name="description" content="This is a description">
 ```
 
+Google's [Create good meta descriptions](https://support.google.com/webmasters/answer/35624?hl=en#meta-descriptions)
+documentation has useful tips on creating an effective description.
 
 ## Mobile Viewport
 
 There are a few different options that you can use with the [`viewport` meta
 tag](https://docs.google.com/present/view?id=dkx3qtm_22dxsrgcf4 "Viewport and
 Media Queries - The Complete Idiot's Guide"). You can find out more in [the
-Apple developer docs](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html).
+MDN Web Docs](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag).
 HTML5 Boilerplate comes with a simple setup that strikes a good balance for general use cases.
 
 ```html
-<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 ```
 
+If you want to take advantage of edge-to-edge displays of iPhone X/XS/XR you can do
+so with additional viewport parameters. [Check the WebKit blog](https://webkit.org/blog/7929/designing-websites-for-iphone-x/) 
+for details.
+
 ## Web App Manifest
+
 HTML5 Boilerplate includes a simple web app manifest file. 
 
 The web app manifest is a simple JSON file that allows you to control how your 
@@ -156,8 +104,8 @@ web app development.
 ### Browser Upgrade Prompt
 
 The main content area of the boilerplate includes a prompt to install an up to
-date browser for users of IE 8 and lower. If you intended to support IE 8, then you
-should remove the snippet of code.
+date browser for users of IE 9 and lower. If you intended to support IE, then you
+should edit or remove the snippet of code.
 
 ## Modernizr
 
@@ -176,7 +124,7 @@ Starting with version 3 Modernizr can be customized using the [modernizr-config.
 
 If you need to include [polyfills](https://remysharp.com/2010/10/08/what-is-a-polyfill)
 in your project, you must make sure those load before any other JavaScript. If you're
-using some polyfill CDN service, like [cdn.polyfill.io](https://cdn.polyfill.io/),
+using a polyfill CDN service, like [cdn.polyfill.io](https://cdn.polyfill.io/),
 just put it before the other scripts in the bottom of the page:
 
 ```html

dist/doc/misc.md

@@ -147,9 +147,9 @@ the website.
 
 The provided file contains three sections:
 
-  * `TEAM` - this is intented to list the group of people responsible for the website
+  * `TEAM` - this is intended to list the group of people responsible for the website
   * `THANKS` - this is intended to list the group of people that have contributed
-  to the webste
+  to the website
   * `TECHNOLOGY COLOPHON` - the section lists technologies used to make the website
 
 For more information about `humans.txt`, please see: http://humanstxt.org/
@@ -170,4 +170,4 @@ By default, the file points to 2 placeholder tile images:
 Notice that IE11 uses the same images when adding a site to the `favorites`.
 
 For more in-depth information about the `browserconfig.xml` file, please
-see [MSDN](https://msdn.microsoft.com/library/dn320426.aspx).
+see [MSDN](https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/dn320426(v=vs.85)).

dist/doc/usage.md

@@ -92,7 +92,7 @@ A helpful custom 404 to get you started.
 This file contains all settings regarding custom tiles for IE11 and Edge.
 
 For more info on this topic, please refer to
-[MSDN](https://msdn.microsoft.com/library/dn455106.aspx).
+[Microsoft's Docs](https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/dn320426(v=vs.85)).
 
 ### .editorconfig