- We now include ` ga('set','transport','beacon');` in the `index.html` analytics snippet for improved peformance
- Docs updated mentioning why we are using 'analytics.js' rather than 'gtag.js'. Removed link to mathias bynens old blog post as its not so relevant since the async snippet is included in the official Google Develoepr docs. There's a link to Philip Walton's excellent guide to advanced setup.
closes#2102
Per my findings, the need for it as a default was rectified with the release of iOS 9.3, where the viewport no longer shrunk to accommodate overflow, as was introduced in iOS 9.
I've removed link to #404html section of the page, since there is on section for 404 page and in IDE I'm getting "Cannot resolve anchor #404html" warning. I hope that it makes sense.
- Remove unneeded x-ua-compatible - not needed for IE11
- Update many external links
- Fix typos
- Add info for creating a good meta description
- Add link for iPhone X viewport info
- Update browser upgrade prompt
- Remove integrating Bootstrap with H5BP (it was written a longtime ago and I don't think is relevant so much)
- Remove statement that Twitter Cards requires registering a domain
- Remove official shortlink section, it was always very poorly supported
- Made the touch icons sections more consise (no need at all to mention about non-retina iPhones and iOS versions prior to iOS 6 etc)
Yarn is popular these days and H5BP is currently getting 2.4K downloads per month so I think it'd be good to add this here.
I changed the list of options to unnumbered as they aren't steps/instructions so bullets make more sense imho.
Fixes#1913
* Drops node 4
* update node engine to >=6 (#2035)
* syncs changes to spacing across different editorconfigs
* adds eslint with minimally invasive configuration- basically moving from 4 to 2 spaces.
* Update Dev Dependencies
mocha, modernizr, gulp-autoprefixer updates.
The build tests run fine with no changes. The dist CSS is different as the PR from 2025 didn't include changes in the dist dir.
* Update Normalize
This PR solves [issue 1985: macOS - VoiceOver / Chrome announcing visually hidden text out of order](https://github.com/h5bp/html5-boilerplate/issues/1985)
By removing the negative margin, and setting it to `margin: 0;`, the issue is resolved.
Add a SUPPORT file to the .github/ folder directing folks to Stack Overflow if they have a general question about using H5BP. A link to this file will now display when someone opens a new issue which could cut down on new issues being opened unnecessarily. I realise the content in this file could have overlap in the existing ISSUE_TEMPLATE.md file but I think it'd be worth adding.
Chrome Web Store are no longer accepting submissions for web apps (Windows, Mac or Linux) so this section is no longer needed. Users can use W3C Manifest file instead to allow for users to install their webapps.
> As of 21 November 2016, all newly published packaged or hosted apps are restricted to Chrome OS, and are not available to users on Windows, Mac or Linux. Existing apps will continue to be available on all major platforms and will continue to receive updates
REF: https://blog.chromium.org/2016/08/from-chrome-apps-to-web.html
- HTTPS links to example.com (I know it's only an example but good to encourage always using HTTPS for everything)
- Fix Markdown issue with iOS web apps code not displaying.
- Remove section incorrectly stating that 'Screen readers currently have less-than-stellar support for HTML5'. The JavaScript polyfill is largely unnecessary and hasn't been updated for 4 years.
- Rename filename reference for apple-touch-icon to be icon.png to match what is used by H5BP
- Remove the no-longer-exists Firefox OS from list of browsers which support `theme-color` (Firefox browser does not support theme-color at this time)
- Updated file tree with relevant additions, filename changes and
alphabetized
- Mention that browserconfig.xml is relevant for Edge (as well as IE11)
- Remove very old link with favicon.psd. It is deprecated and doesn't
have any of the recent iPhones app sizes.
Visual Studio, BBEdit, WebStorm and others have built-in support for
Editorconfig files so we should change ‘will need to install a plugin’
to ‘may need to install a plugin’.
There's a known issue with NPM where the package-lock.json file is not updated after package.json file is changed. This has been confirmed as a bug by NPM and a fix will be rolling out soon. For the time being I propose we remove this file (particularly as the dependency versions are now out of sync).
REF: https://github.com/npm/npm/issues/16866
Updated archiver, babel-core, del, glob, gulp-load-plugins, gulp-replace, jshint, run-sequence, and travis-after-all to the latest versions. All tests completed without issues and the 'dist' folders output is the same as before so we're all good there.
Chrome currently has a bug (when printing) that results in
::first-letter being vertically misaligned under certain (seemingly
unrelated) conditions. This PR fixes issue by removing the CSS that
causes the issue.
- Update Polyfill CDN to v2 which is the default version (Ref: https://cdn.polyfill.io )
- Switch the JQuery from Google's CDN to Jquery's CDN to match the main index.html
- Update to jQuery 3.2.1.
- Add SRI hash to jQuery link
Yahoo's YSlow is (sadly) no longer actively maintained. The browser extensions don't work anymore and the main repo hasn't been updated for nearly four years. I suggest to remove the http://developer.yahoo.com/yslow/ link.
After Autoprefixer was added a comment explaining that the vendor prefixed
`::-moz-selection` and the default `::selection` can't be combined became
obsolete. I (with the help of @roblarsen) rephrased the comment to be more
general and so that it still makes sense in the dist css file. A stackoverflow
link explains why vendor prefixed selectors can't be combined with other selectors.
Fixes#1953
Fixes#1740 and #1605
- removes the static custom build of modernizr
- moves Modernizr to the bottom
- builds a custom modernizr in gulp
- adds tests for the generated modernizr
use import instead of require
use fat arrow => function instead of function() {} callback
use and let and const instead of var
use template stings instead of string concatenation
Add white-space: nowrap to visuallyhidden class so screenreaders can interpret line feeds correctly.
Add white-space: inherit to the focusable modifier so when focused the content appears as normal.
*:first-line pseudo-selector freezes window with print preview in IE 11
(tested on Windows 7 with IE 11.0.9600.17420 and 11.0.9600.18204,
Windows 8.1 with IE 11.0.9600.16663, Windows 10 with IE 11.63.10586.0)
To reproduce just open: http://demo.html5boilerplate.com/
or /dist/index.html and select Print > Print preview...
Following the lead of Twitter Bootstrap (see: https://github.com/twbs/bootstrap/pull/19000), remove the print media query that sets a max-width of 100% to images. This code was meant to prevent images from being cut off in print, but has a side effect of causing map tiles to disappear when printing medium-to-large maps (e.g., with Google Maps).
For reference, this style was added to H5BP in b2faa1fc3c
With this snippet, modern browsers use `async`, older browsers (i.e.
IE8 & IE9) use `defer`.
IE8 and IE9 lack `async` support but they have a broken implementation
of `defer`. However, the brokenness doesn’t apply in this scenario
since no scripts depend on GA in the way jQuery UI depends on jQuery.
`async` is also not supported by the Android 2.3 browser, but that
browser does have a preload scanner to make up for it.
Once we drop support for IE8 and IE9, the `defer` attribute can be
omitted.
The only downside is that the snippet is not a pure JavaScript
solution anymore, meaning it cannot be moved or concatenated into a
`.js` file. On the other hand, no one seemed to be doing that anyway;
everyone just inlines the snippet into the HTML.
Ref. https://github.com/h5bp/html5-boilerplate/pull/1660#issuecomment-89285678Closes#1696.
In countries where `googleapis.com` is blocked (e.g.: China),
HTML5 Boilerplate is broken out of the box as jQuery will not load
until the request times out.
This commit changes the default jQuery source to use the jQuery CDN
as it is as fast or faster (by some reckoning) than the Google Hosted
Libraries version and is available worldwide.
While the chance of hitting the cache lottery is smaller with the
jQuery CDN (it's not as ubiquitous as Google), that chance is not enough
to override the need to ship working code for everyone in the world.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Fixh5bp/html5-boilerplate#1737Closeh5bp/html5-boilerplate#1739
* Fix broken links and use `https://` where possible.
* Remove the `Servers and Stacks` section (introduced by
h5bp/html5-boilerplate#1572) from the `misc.md` file, as now, since
h5bp/html5-boilerplate#1694 was merged, it brings even less value.
Add `dppx` variant of `min-resolution` to the high resolution media
query as `dppx` is more accurate¹ than `dpi`.
Notes:
* since `dppx` is not supported by all browsers the media query
still needs the `dpi` fallback
* this change removes the `dppx` related warning² from Blink based
browsers (e.g.: Chrome, Opera)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
¹ `dpi` (dots per inch) refers to a defined size of pixels where one
inch is `96px` no matter what, so it does not take into consideration
the physical inches.
² "Consider using 'dppx' units, as in CSS 'dpi' means dots-per-CSS-inch,
not dots-per-physical-inch, so does not correspond to the actual 'dpi'
of a screen. In media query expression: print,
(-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi)"
Fixh5bp/html5-boilerplate#1474Closeh5bp/html5-boilerplate#1691
Remove line regarding the inclusion of the `LICENSE.txt` file in the
`dist/` directory as it does not constitute an important change as far
as end users are concerned.
Change made in order to be more consistent with the overall use of
lowercase in `index.html`.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
From https://msdn.microsoft.com/en-us/library/jj676915.aspx:
"The X-UA-Compatible header isn't case sensitive; however, it must
appear in the header of the webpage (the HEAD section) before all
other elements except for the title element and other meta elements."
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Ref h5bp/html5-boilerplate#1656Closeh5bp/html5-boilerplate#1656Closeh5bp/html5-boilerplate#1668
* Redirect all output from `export $(cat .to_export_back)` to
`/dev/null` in order to prevent `export` from leaking the access
token in the case when, for some odd reason, the `.to_export_back`
file is not created.
* Regenerate the `secure` key based on a new access token.
Updated `usage.md` to include 4 new files included with the project:
* `.editorconfig`
* `tile-wide.png`, `tile.png` and `browserconfig.xml`
Ref 80530d6b46a99d8563ddClose#1647
Use the more configurable form of the `update_dist_directory.sh`
script the has been added in a separate repository.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Note: The `update_dist_directory.sh` was moved into a different
repository in order to:
* be more easily maintained
* allow other projects with similar needs to use it
This change is done in order to ensure that Windows users don't
encounter any newline related issues.
e.g.: Prior to this change, after the build script was run, files
from `node_modules` (having `LF` newlines, and which wouldn't have
be normalized by `git`) would be copied to the `dist/` directory
and would appear to Windows users as if they where changed.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Thanks to @XhmikosR for pointing this out!
Ref http://git-scm.com/docs/gitattributes#_effectshttp://en.wikipedia.org/wiki/NewlineCloseh5bp/html5-boilerplate#1618
While the short links look "nicer" and can be useful (e.g.: stats),
when our site (http://h5bp.com) goes down, it prevents users from
accessing the information they point to.
Closeh5bp/html5-boilerplate#1619
* apple-touch-icon-precomposed.png
before: 3962 B
after: 3959 B
──────────────────────
reduction: 3 B [0.07%]
* tile.png
before: 3495 B
after: 3482 B
──────────────────────
reduction: 13 B [0.37%]
* tile-wide.png
before: 1864 B
after: 1854 B
──────────────────────
reduction: 10 B [0.53%]
Make it even more clear that the `update_dist_directory.sh`
is intended for Travis¹, and not for the user to run it.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
¹ http://docs.travis-ci.com/
While the outdated browser prompt currently links to `browsehappy.com`,
users are free and even encouraged to substitute the link with their own
page or site of preference.
This commit changes the `browsehappy` specific classname with the more
agnostic `browserupgrade` in order to make the link substitution
easier, but more importantly to hint to the users that they don't have
to stick with the currently default provided `browsehappy.com` link.
Ref: h5bp/html5-boilerplate#1582h5bp/html5-boilerplate#1608Closeh5bp/html5-boilerplate#1608
* Update the documentation regarding the Apple touch icons, by
reflecting the recent changes brought by the release of iOS 8 and the
new iPhone 6 and 6 Plus.
Note: The changes do not follow all Apple's iOS Human Interface
Guidelines¹, as in practice, the images used by the different devices
are different² from the ones specified in the Apple documentation.
* Update the `apple-touch-icon-precomposed.png` to be `180×180px` (this
is now the largest image size used by any Apple device running iOS).
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
¹ https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html
² h5bp/html5-boilerplate#1599Closeh5bp/html5-boilerplate#1599.
* `tile.png`:
before: 13743 B
after: 3495 B
──────────────────────
reduction: 10248 B [74.56%]
* `tile-wide.png`
before: 6774 B
after: 1864 B
──────────────────────
reduction: 4910 B [72.48%]
Closeh5bp/html5-boilerplate#1604.
The part about `Cross-domain Ajax and Flash` from the `README.md` file
isn't accurate, as by default:
* the `crossdomain.xml` file doesn't grant a web client — such as Adobe
Flash Player, Adobe Reader, etc. — permission to handle data across
multiple domains
* the Apache server configs, do not allow cross-origin access to all
resources, unless the user enables that behavior
Configure Travis to automatically update the content from the `dist`
directory by executing a script¹ that will regenerate the content from
the `dist` directory and commit any new changes to the `master` branch.
This change will help in the development process by:
* ensuring that the content from the `dist` directory is always
in sync with the rest of the content
* removing the need to execute the build step locally everytime
a change is made (especially in the case of trivial changes,
such as, typos)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
¹ The script (`bin/update_dist_directory.sh`) will only be executed
if the tests pass, and will only run if the changes are made in the
`master` branch.
See also: http://docs.travis-ci.com/user/encryption-keys/Closeh5bp/html5-boilerplate#1593
The pseudo-elements `:before` and `:after` are not targeted by the
universal `*` selector. When the page is printed the CSS properties of
any pseudo-elements will only be overridden if they are being inherited
from their selector. Any styles that have been defined directly on a
pseudo-element are unaffected.
Closes#1585.
The `dist/` directory is added in order to allow even less experienced
users (users that may not want to deal with the build script) to get
the latest changes, namely, what is in the `master` branch, but is not
yet released.
* Move all the H5BP source files into the `src/` directory and remove
all external components that can be fetch via `npm`, namely: the
Apache Server Configs, jQuery, and Normalize.css.
* Add `package.json`, and move to using `npm` for managing dependencies
(for more information about `npm`, see: https://www.npmjs.org/doc/).
* Add `gulp` based build script to allows us to automatically create
the distribution files as well as an archive that can then be attached
to the release - https://github.com/blog/1547-release-your-software
(for more information about gulp, see: http://gulpjs.com/).
* Add other miscellaneous files to help us in our development process:
* `.editorconfig` - to define and maintain consistent coding styles
http://editorconfig.org/
* `.jshintrc` - to specify JSHint configuration options
http://www.jshint.com/docs/
* `.travis.yml` - to specify Travis CI configuration options
http://docs.travis-ci.com/
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
These changes:
* automate some of the tedious work (e.g.: updating the external
components, updating some of the inline content such as version
numbers, etc.)
* will allow us to experiment more (e.g.: allow us to create different
builds of H5BP, builds that can contain different components)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Ref h5bp/html5-boilerplate#1563Closeh5bp/html5-boilerplate#1563
Since some of the users prefer to just modify the placeholder 404
page instead of replacing it with their own, this commit makes it
easier to do that by allowing them to modify the content without
worrying about readjusting the margins.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Note: The different in size compared to the old 404 is negligible:
* old 404:
original size: 1242 B
gzipped size: 574 B
* new 404:
original size: 1274 B
gzipped size: 570 B
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Ref: h5bp/html5-boilerplate#1567.
Close: h5bp/html5-boilerplate#1567.
The addition of the `/.editorconfig` file is made in order to
encourage and help developers and their teams define and maintain
consistent coding styles between their different editors and IDEs.
By default, `/.editorconfig` includes some basic properties that
reflect the coding styles from the files provided by default, but
users can easily change them to better suit their needs.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Since users need to install a editor/IDE plugin in order for the
properties from the `/.editorconfig` to be applied, we were reluctant
to add this file in the past (see: h5bp/html5-boilerplate#1124).
Nowadays however, the EditorConfig project provides plugins for most
of the popular editors/IDEs (see: http://editorconfig.org/#download),
plus, more and more developers are using it.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Ref: http://editorconfig.org/Close: h5bp/html5-boilerplate#1561h5bp/html5-boilerplate#1564
The Google Universal Analytics now supports automatic cookie domain
configuration simply by adding `auto` to the analytics tracker create
method: `ga('create', 'UA-XXXX-Y', 'auto');`.
From https://developers.google.com/analytics/devguides/collection/analyticsjs/domains#auto:
"Automatic Cookie Domain Configuration simplifies cross domain
tracking implementations by automatically writing cookies to the
highest level domain possible when the auto parameter is used.
When used on the domain www.example.co.uk, it will try to write
cookies in the following order:
1. co.uk
2. example.co.uk
3. www.example.co.uk
Analytics.js will fail to write a cookie on co.uk but will succeed
on example.co.uk. Since a cookie was succesfully written on a higher
level domain, www.example.co.uk will be skipped"
So, when this parameter is omitted (as it was prior to this commit),
Google Universal Analytics will default to using `location.hostname`,
which will include the subdomain, preventing websites with multiple
subdomains from being able to automatically track unique users across
those subdomains.
Note: The `auto` parameter is now officially part of the recommended
Google Universal Analytics snippet.
https://developers.google.com/analytics/devguides/collection/analyticsjs/
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Ref: https://developers.google.com/analytics/devguides/collection/analyticsjs/domains#autoClose: h5bp/html5-boilerplate#1562.
Update documentation to include the information from the recent
jQuery team announcement:
"To mitigate the risk of “breaking the web”, the jQuery team
decided back in 2013 that jquery-latest.js could not be
upgraded to the 2.0 branch even though that is technically
the latest version. There would just be too many sites that
would mysteriously stop working with older versions of Internet
Explorer, and many of those sites may not be maintained today.
As jQuery adoption has continued to grow, even that safeguard
seems insufficient to protect against careless use of
http://code.jquery.com/jquery-latest.js. So we have decided to
stop updating this file, as well as the minified copy, keeping
both files at version 1.11.1 forever ...
The Google CDN team has joined us in this effort to prevent
inadvertent web breakage and no longer updates the file at
http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js. That
file will stay locked at version 1.11.1 as well."
(from: http://blog.jquery.com/2014/07/03/dont-use-jquery-latest-js/)
Ref: h5bp/html5-boilerplate#1554
* Make minor updates and improvements.
* Remove `.htaccess` mention as the Apache server configs are no longer
part of the HTML5 Boilerplate core, plus, more information about them
will be included in the `misc.md` file.
Update and improve the `crossdomain.xml` related documentation,
as well as move it into the `misc.md` file.
The move is made in order to be more consistent (we don't have
special pages for any of the other "miscellaneous" files).
* Explain the reason for providing the Google Universal Analytics
snippet by default.
* Make it more clear that users are encouraged to use whatever
tracking solution suits their needs best.
Ref h5bp/html5-boilerplate#1547Closeh5bp/html5-boilerplate#1548
In the past we decided¹ to remove the `lang` attribute due to the fact
that developers were often forgetting to update its value. This change
turned out not to be the best solution because some of the users:
* didn't read the documentation, and thus, they found the absence
of the `lang` attribute confusing, or didn't even knew they had
to add it
* didn't notice the absence of the `lang` attribute, and thus, forgot
to include it (expecting it to be there)
To make things more clearer and to remind users that they need to
specify the primary language of the document, this commit reintroduces
the `lang` attribute, while leaving its value to `""`.
Using `lang=""` has the exact same effect as not specifying the `lang`
attribute at all, in both cases the language being treated as unknown².
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
¹ https://github.com/h5bp/html5-boilerplate/issues/1110
² From WHATWG (http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#attr-lang):
"To determine the language of a node, user agents must look at the
nearest ancestor element (including the element itself if the node
is an element) that has a lang attribute in the XML namespace set
or is an HTML element and has a lang in no namespace attribute set.
That attribute specifies the language of the node (regardless of
its value).
If both the lang attribute in no namespace and the lang attribute
in the XML namespace are set on an element, user agents must use
the lang attribute in the XML namespace, and the lang attribute in
no namespace must be ignored for the purposes of determining the
element's language.
If neither the node nor any of the node's ancestors, including the
root element, have either attribute set, but there is a pragma-set
default language set, then that is the language of the node. If there
is no pragma-set default language set, then language information from
a higher-level protocol (such as HTTP), if any, must be used as the
final fallback language instead. In the absence of any such language
information, and in cases where the higher-level protocol reports
multiple languages, the language of the node is unknown, and the
corresponding language tag is the empty string.
If the resulting value is not a recognized language tag, then it
must be treated as an unknown language having the given language tag,
distinct from all other languages."
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Closeh5bp/html5-boilerplate#1542.
Under UNIX-like OSes, a text file consists of a series of lines, each
of which ends with a `newline` character (`\n`). A file that is not
empty and does not end with a `newline` is therefore considered not to
be a text file.
Because of this, utilities that are supposed to operate on text files
may not cope well with files that don't end with a `newline` (e.g.: they
might ignore the text after the last `newline`).
Adding the `newline` character at the end of the file ensures that users
won't encounter any odd behavior when using it.
Reference/Source: http://unix.stackexchange.com/a/18789.
* tile.png
before: 13767 B
after: 13743 B
──────────────────────
reduction: 24 B [0.17%]
* tile-wide.png
before: 6781 B
after: 6774 B
──────────────────────
reduction: 7 B [0.10%]
By default, starting with IE11 on Windows 8.1, IE will request the
`/browserconfig.xml` file when a user clicks/touches the `pin site`
button (same as Safari for iOS does with the `apple-touch-icons` when
the user touches the `share` button).
Adding the `/browserconfig.xml` file and the tile images:
* reduces the number of 404s, especially as IE11 on Windows 8.1 gets
more market share
* provides a starting point for dealing with Windows tiles
* reminds users about the tile images, so that their website doesn't
end up having as a tile the default IE11 logo, or (if the favicon
is 32×32px or bigger and not `.ico`) the website's favicon
* unlike using `<meta>` tags, offers a way that doesn't increase the
page size
Only two images are provided since:
* `tile.png` (558×558px) - can be used for the `Small`, `Medium`,
and `Large` tiles, being automatically resized where necessary
* `tile-wide.png` (558×270px) - can be used for the `Wide` tile
as, in this case, resizing the 558×558px image would just end up
looking weird
The two images are 558×558px and 558×270px because those are the
recommended image sizes in order for the tiles to look good on a wide
range of devices.
For more in depth information, please refer to the MSDN documentation:
* http://msdn.microsoft.com/en-us/library/ie/dn455106.aspx
* http://msdn.microsoft.com/en-us/library/ie/dn255024.aspxClose#1481.
The addition of `Disallow:` is made in order to be compliant with:
* the `robots.txt` specification (http://www.robotstxt.org/), which
specifies that: "At least one Disallow field needs to be present
in a record"
* what is suggested in the documentation of most of the major search
engines, e.g.:
- Baidu: http://www.baidu.com/search/robots_english.html
- Google: https://developers.google.com/webmasters/control-crawl-index/docs/getting_startedhttp://www.youtube.com/watch?v=P7GY1fE5JQQ
- Yandex: help.yandex.com/webmaster/controlling-robot/robots-txt.xml
Besides the addition specified above, this commit also:
* adds a comment making it clear to everyone that the directives from
the `robots.txt` file allow all content on the site to be crawled
* updates the URL to `www.robotstxt.org`, as `robotstxt.org` doesn't
quite work:
curl -LsS robotstxt.org
curl: (7) Failed connect to robotstxt.org:80; Operation timed out
Close#1487.
* Add note about `precomposed` not being required anymore, as starting
with iOS 7, no special effects are applied to the touch icons.
* Add missing touch icon sizes.
Close#1488
* Link to a more official page for the information regarding Internet
Explorer's "friendly HTTP error pages", namely:
http://blogs.msdn.com/b/ieinternals/archive/2010/08/19/http-error-pages-in-internet-explorer.aspx.
* Remove the indentation for the `<head>` and `<body>` tags in order
to reduce the file size even closer to the 512 bytes limit. This is
particularly helpful when compression is not enabled.
* Stats:
- before:
original size: 1409 B
gzipped size: 580 B
─────────────────────────────
reduction: 829 B [58.8%]
- after:
original size: 1242 B
gzipped size: 580 B
─────────────────────────────
reduction: 662 B [53.3%]
Ref: #1443.
Specifying a default foreground color for the form elements can be
problematic when users (often with visual impairments) use a darker
OS/browser theme. Also, the color set on the form elements is quite
opinionated, so developers tend to change it anyway.
Ref: #1390.
Close: #1390.
Providing a default value (such as `5cm`) for the print margins is
problematic because:
1) in some browsers, it prevents users from customizing the browser
print settings
2) in some contexts (browser/os/printer), the value may be too:
* small, and the margins may collide with all the different
headers/footers (URL, date, etc) that are usually printed
by default
* big, and the margins will just waste the space
Most browsers provide a default non-zero value for the print margins,
so it's better to not specify a value at all, and just let them handle
this themselves.
See also:
* http://www.w3.org/TR/css3-page/#at-page-rule
* https://developer.mozilla.org/en-US/docs/Web/CSS/@pageClose#1477.
* Wrap text at 80 characters.
* Rephrase content from the `Apple Touch Icons` section to limit subject
to only `apple-touch-icon`s (ref: #1486).
* Other improvements.
In extend.md, which is linked as source for 'more details' on the
touch-icons and favicon, this commit clarifies that by default two
icons are enough if one doesn't want to use art-direction.
* Update various links.
* Remove link to the `Node build script` repository as the project is no
longer maintained.
* Better organize the information provided in `extend.md` by rearranging
the sections alphabetically by title, and including a table of content
for faster navigation.
* Replace links to the Apache Server Configs `doc`
directory, as it no longer exists:
4f778c4a22.
* Provide missing links under the `X-UA-Compatible`
section in the `html.md` file.
This class was removed because it doesn't provide enough use
cases within modern web development. Cases are mostly handled
indiviually by developers.
Reference #1472.
Closes#1475.
The snippet provided in the docs about how to prevent the Skype
plugin from formatting numbers on a web pages is outdated and no
longer works.
Nowadays, the Skype plugin makes it more difficult to overwrite
its injected styles (class names include timestamps, e.g.:
`skype_pnh_print_container_1381964168`, `!important` is used, etc.).
Providing a solution for this use case isn't viable. Also, users
that install such a plugin usually expect the behavior.
Close#1454.
Changes:
* simplify the overall design
* remove the Google search functionality as in most cases, it does not
provide much value
* reduce the overall file size while keeping the gzipped size over 512
bytes to prevent IE from displaying its own custom error page (thanks
@mikealmond and @patrickkettner):
http://www.404-error-page.com/404-error-page-too-short-problem-microsoft-ie.shtml
Benefits include:
* small file size (1409 bytes / 580 bytes gzipped), which is particular-
ly useful when users are on a data plan and / or the server is wrongly
configured (e.g.: tries to redirect to a "mobile" version of the web
page and ends up serving a 404 page) or developers forget to provide
certain files (e.g.: /favicon.ico -
http://zoompf.com/blog/2012/04/instagram-and-optimizing-favicons)
* improved performance (less HTTP requests, less memory consumption,
faster rendering, etc.)
* designed to work with all kinds of screen sizes and support IE 6+
Close#1443.
Inform users on how to disable the translation prompt in Chrome or
block Google Translate from translating a web page or any particular
section of the web page.
See also: https://support.google.com/translate/?hl=en#2641276.
Close: #1440.
The reasons behind this decision include the following:
* This project will drop legacy browser support (see #1050), therefore,
the use for conditional classes for IE 8+, becomes much more limited.
* IE 10+ does not support conditional comments:
http://msdn.microsoft.com/en-us/library/ms537512%28v=VS.85%29.aspx.
* Users do and can develop easily without using the conditional
classes, this technique being very limited in scope as no other
browser versions are explicitly target in the same way.
* It fixes the issue that prevents IE from honouring
`<meta http-equiv="X-UA-Compatible" content="IE=edge">` (see: #1187).
This change also removes the related documentation.
Close#1290 and #1187.
Currently we don't use Google Chrome Frame anymore as support for
it will end at the end of the year.
This commit removes references to Chrome Frame within the
documentation. It is related to 2cf1ef7.
Reference #1433.
Make it easier for people to know what version of the `.htaccess`
and `main.css` files they are using and under what license these
are provided, by adding this information within the files.
This is useful primarily when developers only copy these files from
the HTML5 Boilerplate project, forget to update their project's change
log or simply do not use anything similar to a change log.
Fixh5bp/html5-boilerplate#1424.
This commit removes five Apple Touch Icons with different sizes for
the same icon and adds a new icon `apple-touch-icon-precomposed.png`
with a resolution of 152×152px.
Apart from that it adds documentation on how to add more icons if
you need them within your project.
Using only one Apple Touch Icon saves time and is enough in most
cases.
Closes#1367.
Closes#1425.
Use `zopfli-png` with 1000 iterations, `pngout /r` with various block sizes and deflopt.
apple-touch-icon-114x114-precomposed.png | Bin 865 -> 751 bytes
apple-touch-icon-144x144-precomposed.png | Bin 947 -> 939 bytes
apple-touch-icon-57x57-precomposed.png | Bin 495 -> 450 bytes
apple-touch-icon-72x72-precomposed.png | Bin 575 -> 512 bytes
apple-touch-icon-precomposed.png | Bin 495 -> 450 bytes
apple-touch-icon.png | Bin 495 -> 450 bytes
The total difference is -320 bytes.
Closes#1418.
Chrome Frame is not supported anymore and we removed the option in
8fc2650.
This commit removes the documentation about Chrome Frame in the
X-UA-Compatible meta tag docs.
Related to #1396.
* Reflect the recent changes in @necolas's Issue Guidelines:
https://github.com/necolas/issue-guidelines.
* Add note about not opening issues and pull requests regarding the code
in the Apache Server Configs, jQuery, Modernizr and Normalize.css.
This is an optimized version of the official Google Universal Analytics snippet,
based on http://mathiasbynens.be/notes/async-analytics-snippet.
The only difference is that this version still uses
`document.getElementsByTagName('script')[0]` instead of `document.scripts[0]`
for Firefox < 9 support.
Unminified, optimized code:
(function(window, document, script, variableName, scriptElement, firstScript) {
window['GoogleAnalyticsObject'] = variableName;
window[variableName] || (window[variableName] = function() {
(window[variableName].q = window[variableName].q || []).push(arguments)
});
window[variableName].l = +new Date;
scriptElement = document.createElement(script);
firstScript = document.getElementsByTagName(script)[0];
scriptElement.src = '//www.google-analytics.com/analytics.js';
firstScript.parentNode.insertBefore(scriptElement, firstScript)
}(window, document, 'script', 'ga'));
ga('create', 'UA-XXXX-Y');
ga('send', 'pageview');
Minified:
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;e=o.createElement(i);r=o.getElementsByTagName(i)[0];e.src='//www.google-analytics.com/analytics.js';r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));ga('create','UA-XXXX-Y');ga('send','pageview');
Closes#1347 and #1369.
Remove `htaccess.md` and link to the Apache `README.md` in
the `server-configs` repository as the documentation for the
configurations is now officially maintained in that repository.
Adobe have changed the location of the PDF. There is no gaurantee that
it will remain at the new location either. Since we already link to an
Adobe article about the cross-domain policy spec (that links to a PDF)
we don't need to link to both.
These improvements are:
- cache current method in `while`-loop to reduce property look-ups
- use `if` as the conditional assignment in `while`-loop in order to improve performance and readability
Reference: commit 578f377
Closes gh-1229
Move the information on contributing from the bundled documentation to a
new root file - CONTRIBUTING. This is both a more meaningful location
(not part of code documentation) and allows us to take advantage of
GitHub's latest UI changes that prompt people to read a repo's
guidelines before reporting issues or opening pull requests.
Avoid the problem with links in a directory README on github.com. GitHub
displays a directory's README when at the dir level, which results in
incorrect URLs when links are using relative paths. This is causing some
confusion for people who browse to the documentation on GitHub and try
to browse the docs from the automatically displayed README.
This reverts commit dd420ef187.
The commit itself broken all the links in the documentation README when
the README was viewed directly (as intended). This meant people coming
to the documentation from the html5boilerplate.com site, or those
generating HTML from the markdown docs, were not able to view the docs.
The placeholder link styles don't add much value but do introduce
potentially unwanted specificity issues. By specifying `a:visited` it
forces subsequent styles for components (like buttons) to have a greater
specificity than this selector if they are to avoid the color changing
once it has been visited.
A similar problem is also evident if a user builds their link styles
upon the project styles (rather than editing the ones included).
This was also an issue in Normalize.css and was fixed in the same way.
Works with Apache ≥ 2.1 and requires `mod_deflate` and `mod_filter` to
be enabled. However, use of Apache < 2.2 is no longer recommended.
For Apache ≥ 2.1 → 2.3.7, `mod_filter` isn't needed, but requiring it
and using this solution is the best way going forward (plus, it doesn't
introduce other dependencies to other modules like, for example,
`mod_version`).
Fix gh-1012
Ref gh-1173
This approach uses a pseudo-element to force the element's content
downwards without covering the background of the element. The overflow
is hidden. For IE 6/7, fallback to the cruder `text-indent` method.
Known advantages:
* Works in IE6+ (although better in IE8+).
* Replaces any content in IE8+, including inner HTML.
* Nothing new for people to learn. Works just like all "traditional" IR
techniques (unlike NIR, which needs you to add the image using a
pseudo-element's `content` and relies margins for sprite positioning).
* Doesn't draw a large out-of-element box in modern browsers. You can
even mix in something like `font: 10px/1 a` to reduce ce the size of
the "off-screen" box, if you really need to.
* Doesn't have any potential SEO problems from `font-size:0`.
* Doesn't care about any minimum font-size that a browser might have.
* Doesn't have any potential failed-IR problems from inherited styles,
like text being positioned within the element's visible box (i.e., if
you use other properties like `text-stroke`).
Known issues:
* Doesn't work when images are off or fail to load (same as every other
IR technique apart from NIR).
* If the IR'ed element has bottom-padding, then either it needs to be
removed or the height of the pseudo-element needs to be bumped up
(e.g., set to 200%).
* Doesn't avoid the `inline-block` bug in IE 6/7 due to the text-indent
fallback for those browsers.
* Doesn't work on input elements (but they shouldn't be the subject of
IR anyway).
* There is the potential for some final-result differences between
IE 6/7 and modern browsers, but this is already the case with other IR
techniques.
Fix gh-1149
Remove the section on "profiling" which was incomplete and not directly
linked to the code in this project. Also fix the headings so that
they're all of the same level.
Fix gh-1170
This avoids the default template rendering a completely blank page and
makes it easy for people to know straight away that things are
"working".
Fix gh-1165
Thanks to @Kroc for raising this issue and providing extra details. It
has been included in the 'extend' documentation alongside other IE tips.
Close gh-1136
Benefits of disentangling normalize.css from the rest of the project's
CSS:
* Easier to track normalize.css version.
* Easier to update normalize.css.
* Easier to remove normalize.css if the user wants.
* Clearer distinction between normalizing CSS and the additions that
HTML5 Boilerplate provides.
Drawback is the additional HTTP request incurred from the extra
stylesheet referenced in the HTML. However, we already do something
similar for the JS, and anyone serious about performance is going to
employ a build process to concatenate and minify CSS/JS.
Ref gh-1132
Ref gh-1140
Provide a proper, highly permission license, recognized by the OSI, to
remove any potential for ambiguity. Addresses concerns around the
inability to elect to place work in the Public Domain.
Fix gh-1139
Remove all the ignores from `.gitignore`. The default boilerplate
doesn't generate any project-specific files that need to be ignored. All
OS and Editor-generated files should be globally ignored rather than
polluting the local project ignores.
Further information on using git ignore's appropriately can be found in
the miscellaneous part of the bundled docs.
Include all documentation related to the project and its code. This
ensures that docs are available offline and that any future download
will have docs that relevant for the version in use.
This change involves a documentation rewrite to update, simplify,
clarify, and consolidate it.
Reduce the perceived complexity and verbosity of certain files by
stripping unneccessary inline comments.
Relevant documentation may end up in a `doc/` directory such that any
download has an accurate and matching code documentation bundle.
Ref gh-1048
Remove the previous `log()` wrapper method as it changed the reported
line position in logs. Instead, avoid `console` errors in browsers
without `console` by setting its methods to empty functions.
Ref. #1107.
A repository's `.gitignore` should be focused on ignoring files within
the repo that we do not want to be committed. For example, a build
directory.
A global ignore is a better place for ignoring OS-level files, editor
extensions, and files that you are always likely to want ignored (e.g.
zip).
Close#1065Close#1120
First bug is that the "c" is expected by the for loop condition to be
the array, not the string. Second bug is that the new semicolon on
line 36 (after the first anonymous function declaration) separated the
calling parentheses and the return result of the second function, which
was intentionally attached as a parameter to be passed in as "a" to the
first.
- Consistent use of quotes in HTML.
- Consistent use of hex for color values in CSS.
- Multi-line CSS and JS.
- 4 spaces for indentation.
- Always use closing tags.
- Use common DOCTYPE capitalization.
These are steps toward reducing the number of repeat issues we get
around inconsistencies or uncommon patterns; making diffs more readable;
and using common conventions.
Add [OR] to rewrite condition
The first condition checks to see if the request matches a directory and the second condition checks to see if it matches a file. Without the [OR], the condition always fails.
* 'master' of git://github.com/h5bp/html5-boilerplate:
Update .gitignore to include AppleDouble (dot underscore) files
Update .gitignore to include Rubinius's compiled files.
Replace hot pink with a more neutral selection background color: the
default found on OS X.
A number of high-profile sites have failed to customize the hot pink
default that HTML5 Boilerplate used to include. People should be able to
trust the project to include sensible defaults. Keeping hot pink in
there by default breaks the "no surprises" expectation of amateur and
professional developers.
Ref #610
Ref #969
Using appcache is complicated and can have unexpected consequences if
you do not have a good grasp of the spec. The way that this project
suggested using appcache was likely to be problematic.
Ref #1060
New icons designed to be sharper on the pixel grid, with slight light
source variations that are pleasing to the eye in a touch environment.
Also put through ImageAlpha and ImageOptim for added optimization.
Please see
http://dl.dropbox.com/u/2066483/h5bp-icons/docs/comparison.png for
before/after comparison.
The new technique avoids various problems with any text-indent method.
The benefits are:
* No box of any kind is drawn offscreen, so there is no risk of
related performance problems in old iOS devices.
* No need to specify a text-alignment and hide overflow since the text
is crushed to take up no space.
* No need to hide `br` or make all fallback HTML `display:inline`
because unlike the text-indent approaches, this method is not
affected by those scenarios.
* Fewer styles are needed as a result of these improvements.
The function of the new CSS is as follows:
* `font: 0/0 a` is a shorthand property that reduces the font-size and
line-height to 0. The `a` value acts as a font-family. The CSS
validator complains that using `0/0` in the shorthand `font` property
is not valid, but every browser accepts it.
* `text-shadow: none` makes sure than any inherited text shadow is
removed, otherwise it will show over the image.
* `color: transparent` is only really needed in browsers than don't
completely crush the text to the point of being invisible. Safari 4 is
such a browser (but extremely rare). Leaving it in for now in case
there are any mobile browsers that require it. Upon further testing,
it may be possible to remove this declaration.
Some parts of the pre-existing image replacement technique have been
retained. The border and background resets are useful when using IR on
form submit inputs or buttons, as well as when links use default borders
or backgrounds
Close#1005
* 'master' of github.com:h5bp/html5-boilerplate:
2.5 version string in modernizr.
update index for upgraded modernizr.
update modernizr and yepnope to brand new latest.
Whenever a deferred script makes HTML be parsed into the DOM tree
(e.g. when innerHTML, insertAdjacentHTML(), appendChild(),
insertBefore(), replaceChild() etc. are used), IE < 10 may start
looking for more deferred scripts to run, immediately executing
them before the first deferred script has completed.
More information: https://github.com/paulirish/lazyweb-requests/issues/42Close#961
Applying these shared styles to `html` ensures that people can set
their own overrides on `html` later in the CSS. If the starting
styles were on `body`, then setting them on `html` later in the
CSS would not have the intended effect.
Simplify CSS styling the Google Search inputs. Improve the
appearance of the keyword input. Use `body` as wrapper. Add `lang`
attribute to `html`.
Thanks to @sindresorhus for suggestions and improvements in #941
What it also ensures is that the file.js.bypass also still works. This means the script looks for these files within the parent js directory. Also finally these files will actually remain untouched compared to previous versions where they were minified/concatenated but just not included.
This means any js file in any folder not included by default in h5bp will be concatenated and minified and output as a single script-hsa.js file. If you do not want this, make sure to do <folder>/* in file.js.bypass in config/project.properties
Previous version of Respond was known to cause problems in IE8.
It was not necessary for developers who chose to write their CSS
in a 'mobile first' manner. Furthermore, there are some concerns
about the performance penalty Respond imposes upon legacy versions
of IE. If a future version of Respond is shown to be performant
and more reliable, it may be reconsidered for inclusion.
Along with this change is a simplification of the placeholder
Media Queries. Now there is only 1 Media Query example and it is
more clearly labelled as an example. The use of `em` units in the
condition is to reinforce the idea that Media Query breakpoints
should not be device-specific.
Fix#816
Fixes issue with not copying non-optimized .css and .js files into the publish folder. If dev environment is selected, .css and .js aren't minified, thus they aren't copied over with existing "copy" target.
The rule that made .htaccess restrict access to files (.log, .bak,
.sh, ...) was missing an escape sequence on its dot.
As a result, in addition filtering problematic files, it also filtered
some very valid urls. For example:
mysite.com/blog <- satisfies /.log$/ and gets filtered
mysite.com/hit-refresh <- satisfies /.sh$/ and gets filtered
This change modifies .htacces so the dot is interpreted as a literal dot
character, avoiding those issues.
To ensure the dir exists with git, a file is required - but it can be
completely empty.
Since the git ignore file is already in the repo it is not necessary to
not-ignore it - it is already tracked.
Though trivial these !.gitignore files are being understood by some to
mean that they must contain this exact syntax to ensure an empty folder
exists.
Redeclare default font-size using ems (equates to 16px if user
has not altered their prefs). Set a common line-height value to
improve readability in most cases. Should keep people happy.
Ref #723Close#825
The previous font-size and line-height were fairly arbitrary
values taken from the much earlier use of YUI font defaults.
Remove them in favour of developers specifying their own values
based on the typographic requirements of their design.
Over 80% of people polled are not using the qunit testing
provided. Remove it in favour of people using their unit testing
framework of choice.
Ref #808
Previous version was acting more like a changelog. This update
provides a better overview of the project, more useful information,
clearer description of how to get involved, and links to the
various project resources.
Almost all layout bugs that exist in IE8 also exist in 6 & 7, almost all layout bugs in 7 exist in 6. With class names that target versions specifically I end up repeating my selectors for IE6, 7 & 8. This pattern of selectors avoids that. Developers should be more familiar with this behaviour, as this is how it works with the underscore & star hacks.
If a style needs to be applied to IE8 specifically, it could be set on .ltie9 then overridden in .ltie8 - this isn't pretty, but I've never had to target a specific IE in practice, so I'm going on the assumption that it's an edge-case.
Applying *overflow:visible to button/input causes text inputs to
grow to fit their content, even if an explicit, fixed width is
applied. It was originally included to remove excess inner
spacing on buttons and submit/reset/button-type inputs in IE6/7.
Fixing this bug in IE6 requires dropping the fix entirely because
there is no way to avoid it being applied to text inputs. If
there is a need to fix this excess spacing bug in IE6, then it
should be done using a class that is applied to the
necessary elements.
For IE7, the excess spacing fix can be moved into the ruleset
that targets button and submit/reset/button-type inputs. This
prevents text inputs from growing.
by @darktable.
https://github.com/paulirish/html5-boilerplate/pull/705fixes#705.
Squashed commit of the following:
commit 6a77f5ad7e
Author: calvin <calvin@darktable.com>
Date: Tue Aug 16 21:12:10 2011 -0700
adding file.root.script property to default.properties
this allows people to rename script.js and not have to hack through
build.xml to keep everything working.
commit 27011c0a1a
Author: calvin <calvin@darktable.com>
Date: Tue Aug 16 20:51:48 2011 -0700
revert to normal css and js paths
had testing paths in the previous commit.
(and some other merge happiness)
@kevva wins the award for fastest bug report. 118 minutes after a bug was committed,
he reported it in #html5. And then I was a dunce and couldn't identify the fix
and so he provided that too.
Not a trivial bug either.
Best bug reporter ever. :D
--
This is a fix for 2fb6ac3369...bf52178981 (L2R62)
Add whitespace before closing tags of comments surrounding CSS and JS references to maintain consistency with other comments
Signed-off-by: drublic <hans@sa-designz.de>
whitespace .. global code cleanup.. random protip: I use `git gui blame filename.ext` because the git gui has a Blame Previous Commit feature so i can go back beyond the blame commit it found. Useful with commits like this.
* reduce extra code via <isset>
* `manifest` becomes its own ant task now
* html files are populated into the manifest based on ant config
* add manifest attribute to the HTML tag via Ant. So only the config switch is neccessary
* appcache back to disabled by default. toggling it on in config/project.properties is all that's neccessary
manifest:
* use a manifest template from build/config/cache.appcache each time
* the only css we are dropping in is the style.css (SHA'd), no more
* we include all js/mylibs/bypass files and all js/libs/*.min.js files
* change default name of manifest to `cache.appcache` but im gonna change it to `manifest.appcache` next commit ;)
* state of repo temporarily includes a manifest but that will revert soon
other:
* rename libs-concat.js to mylibs-concat.js for logic's sake
* add @defer attribute to concated script
with variables in project.properties for handling manifest file name,
javascripts files names and stylesheets files names
the javascripts files will be replaced by the concatened and minified
version
idem for the stylesheets
with variable in project.properties for handling manifest file name
the javascripts files replaced are those concatened and minified by the
build
idem for the stylesheets
I steal log's apply method instead of reaching all the way into Function.prototype.apply.. timesaver and bytesaver. just really ugly.
And then a nasty ( omg ? ternary : action); as a statement. But hey.. sometimes you feel like a nut.
kirby, plz code review this. :p
tested in Chrome 14.
added 'css-split' task to build.xml and changed style.css back to the main version, with "- h5bp-export: filename - " tags in it to allow automated splitting into root file with @imports and satellite files.
This build converts the @import statement in style.css to tags that are then swapped for the file contents.
It also converts the media types after the import to @media ... {} style tags.
adding css/concat directory with the css files named in the order they should be included.
the build script then concats these files in alphabetical order and replaces their block with the concated file using the same method as the .js swap (looks for the surrounding comments).
We're pulling in http://github.com/necolas/normalize.css/ developed by Nicolas Gallagher along with Jonathan Neal.
normalize.css retains useful browser defaults and includes several common fixes to improve cross-browser (desktop and mobile) styling consistency.
Lots of research has gone into normalize, verifying what are the default user agent styles provided by each browser. We can very specifically change only the ones we need to instead of the bulldozer approach.
Why this is great news:
* Who likes being so damn redudant and declaring: em, i { font-style: italic; }
* By using normalization instead of a reset + building up default styles, we use less styles and save bytes
* Less noise in your dev tools: when debugging, you don't have to trawl through every reset selector to reach the actual style that is causing the issue.
* More details here: http://necolas.github.com/normalize.css/
We're really happy to get user feedback on this, as we think style normalization is a better direction than resetting; and want to make sure you do too. :) Leave a comment here or in the Google Group: http://h5bp.com/groupFixes#412Fixes#500Fixes#534Closes#456
Links #566
http://mathiasbynens.be/notes/safe-css-hacks
We're doing this because that quadruple conditional comment <html> tag definition looks pretty scary and especially when combined with namespace augmenting stuff like Facebook's gross xmlns:fb="http://www.facebook.com/2008/fbml" bullshit.
We are trying to simplify the markup we use in H5BP and a combination of conditional classnames with IE-specific hacks would be much simpler than the markup bloat we currently have.
We'll target IE6 and IE7 specifically with attribute syntax hacks.
http://paulirish.com/2009/browser-specific-css-hacks/
/* CLEAN NO HACKS */
div { color: blue; }
/* HACKS FOR IE */
.oldie div {
color: blue; /* IE 8 and below */
*color: blue; /* IE 7 and below */
_color: blue; /* IE 6 */
}
/* IE6, IE7 - star hack */
.oldie div { *color: blue; }
/* IE8 - winning hack */
.oldie div { color: blue\0/; } /* must be last declaration in the selector's ruleset */
Using these attribute hacks by themselves does not change the selector specificity. If you've worked with a large, long-term codebase, you'll know managing your specificity wisely is critical. Also watch Nicole Sullivan's talks.
It is now #fe57a1, which is Festal (adj): pertaining to or befitting a feast, festival, holiday, or gala occasion.
Party!! Party in your webpage! With Festal!!!!
thx also to lexidecimal.com for putting a name to this damn thing and inspiring david to inspire others.
While I personally prefer developing with an unminified jQuery (as
it makes debugging easier) I understand that most people don't need that.
So the onus is now on more advanced developers to s/.min.js/.js/
Though they're safe with the build script which will switch the refs back to the min.
And everyone else will default to min'd js, regardless of if they use the
build script.
:)
it comes preminified, and we don't need to minify it again
This also updates the html so that the script is not missing if the
unminified scripts are unavailable on the server
This commit requires a change to existing html files :/
Intermediate stages are stored in a new intermediate folder, and only
files that should be published are copied into the publish folder.
Files are not deleted at the beginning of every build, and files that
have already been processed will not be reprocessed unless the source
has changed.
Versioned files are referenced by a SHA-1 hash of the content rather
than a build number. This means that changing your HTML and rebuilding
will not cause your users to redownload the same CSS and Javascript, and
a reverted change may cause users to use a copy that was previously
downloaded. It may be better to use only part of the hash so the HTTP
request is shorter.
Cleaning must be done manually to delete unreferenced files, or you will
eventually fill your publish folder with unreferenced files. AFAIK this
is a very hard problem to solve properly with Ant because there's no
file dependency tree available to show which files are not products of
the current build. It's doable by creating a map from source to publish
and excluding those files while deleting everything from publish, but it
may be better to just delete the publish directory?
console.log statements are no longer commented out. The regular
expression responsible did not work properly if there were parenthesis
inside the console.log, and it put comments into the scripts that had
just been minimized, so they weren't really minimal anymore.
Basically ...
@media screen and (max-width:980px){
was getting minified to
@media screen and(max-width:980px){
Which webkit was rejecting.. So.. now the updated yuicompressor leaves that space in place.
And all is well with the world.
<3z
Also added a jpgcopy task that is used in "text" builds.
Also:
Quieted windows optipng output. More helpful echo's.
Updated to htmlcompressor-0.9.9.jar (1 very minor fix)
Short summary of the jpegtran workaround:
jpegtran doesnt like to overwrite files. It thinks they are already optimized.
So, we exclude JPGs from the copy task at the beginning,
then we copy them over while we chuck them through jpegtran.
Fun.
Fixes#338
On *nix's and Mac OS X display a helpful error message with instructions
and do not fail the build if either optipng or jpegtrans is not
installed or not in the execution path.
1) Production build by default. (like previous version)
2) Main script gets minified correctly (a bug)
3) We were deleting the wrong files (whoops)
4) dir.js.main is now specified (and can be moved around)
5) Did I mention that spaces are always better than tabs because not even tabs people can agree on 2 vs 4 and this causes PROBLEMS gosh damn it. >:|
It is actually only neccessary to force the `none` in IE6+7, but for declarative
consistency we'll give it to everyone.
We've documented the little quirk on both the FAQ and Style wiki pages.
This is related to issue #263.
Testcase before: http://jsfiddle.net/9DtcX/2/ after: http://jsfiddle.net/9DtcX/3/
https://github.com/paulirish/html5-boilerplate/wiki/The-markup see The order of charset, meta tags, and <title>...
Because the boilerplate markup enforces the document structure,
we can intentionally place the charset above the title (and other content)
and avoid the XSS issues that caused the HTML5 spec to specify that
"charset must be in the first 512 bytes".
So even if you throw the xmlns:fb="http://www.facebook.com/2008/fbml" bullshit
into ALL the html tags, and the validator says your document is now invalid
because charset is after the first 512 bytes, we'll.. it's okay. You're still safe.
And so are the kittens.
While Wikipedia would lead you to be believe one thing...
http://en.wikipedia.org/wiki/ICO_(file_format)#MIME_type
... specifically that the vnd.microsoft.icon mime type is correct..
Well that's wrong.
It does work in the address bar, IE can also use an .ico file as an
<img src> in some cases. But it has to be served as image/x-icon
instead.
So thanks a lot wikipedia & jimmy wales' face. Psh.
Thanks a bunch Jonathan Neal. Fixes#219
I added some features to .htaccess (mostly taken from the MODx CMS sample .htaccess file) as well as a little more structure for easier readability.
I tested most of the features myself (as far as possible). The MODx CMS sample .htaccess is also well tested, so these things should work.
Signed-off-by: Michael van Laar <michael@van-laar.de>
"Dave Kirk just added a bunch of stuff but he's not too sharp on Git so i have it in a zip here....
You can download the build directory from http://dl.dropbox.com/u/9273778/build.zip
You can now add multiple stylesheets to the project (defined in the project.properties file) and they will be concatenated into 1 file, with any default stylesheets defined in the default.properties file being added at the end.
Adding new 'pages' (html, php, etc) is handled in the same way and the script should iterate through any files listed here and update the css / javascript references as per the original script
I have also added the ability to define 'environments' for the build process as this fits in with the way I work. The original targets still exist, and run the same functions, however each target now has a prod, test and dev environment too. This has come at a as it requires using the ant-contrib library and due to the way Ant works you can no longer use the depends model, and the sub targets have to be called with antcall.
Here is how the environments work:
* dev (default) - Increases build number, cleans and copies the build and optimises any images if the target originally did
* test - Runs everything that the original target did, however it does not strip the console.log or profiling parts
* prod - Runs everything the original target did
To run it you simply use ant <target> -Denv=<environment>
ant build -Denv=prod
If you don't provide the env variable it will use the development environment, but that would be pretty easy to change to run another environment as default.
Like I say, it could probably still be improved no end but it is getting to the limits of Ant without writing a java library with extra tasks, which I may look at in the future.."
extension is reserved for Ogg audio, while Ogg video is 'ogv'. 'oga' is also
acceptable for Ogg audio. I've updated the .htaccess and mime.types
files to reflect this.
misses several "newer" MIME types such as oga/g/v, webm/p, mp4, fonts,
etc. This file contains all of the MIME type additions made in the
.htaccess file.
Referencing http://www.ibmpressbooks.com/articles/article.aspx?p=519946
default.properties was added
as well as build.properties (now used for overiding values in default.properties). Using the new
buildinfo.properties file which is created dynamically to track the build number and build date.
Also added a few comments and spaces between tasks to make the file easier to read. Changed .gitignore
to ignore the buildinfo file not the build file.
Originally committed at ff3d10eaff
In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
## Our Standards
Examples of behavior that contributes to creating a positive environment include:
* Using welcoming and inclusive language
* Being respectful of differing viewpoints and experiences
* Gracefully accepting constructive criticism
* Focusing on what is best for the community
* Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
* The use of sexualized language or imagery and unwelcome sexual attention or advances
* Trolling, insulting/derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or electronic address, without explicit permission
* Other conduct which could reasonably be considered inappropriate in a professional setting
## Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
## Scope
This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at h5bp@htmlcssjavascript.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [https://contributor-covenant.org/version/1/4][version]
<!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: -->
- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing functionality to change)
## Checklist:
<!--- Go over all the following points, and put an `x` in all the boxes that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! -->
- [ ] My code follows the code style of this project.
- [ ] My change requires a change to the documentation.
- [ ] I have updated the documentation accordingly.
- [ ] I have read the **CONTRIBUTING** document.
- [ ] I have added tests to cover my changes.
- [ ] All new and existing tests passed.
Pull requests should be thought of as a conversation. There will be some back and forth when trying to get code merged into this or any other project. With all but the simplest changes you can and should expect that the maintainers of the project will request changes to your code. Please be aware of that and check in after you open your PR in order to get your code merged in cleanly.
* Update Modernizr to 3.7.1 ([#2121](https://github.com/h5bp/html5-boilerplate/pull/2121))
* Update Analytics docs and snippet ([#2118](https://github.com/h5bp/html5-boilerplate/pull/2118))
* Minor docs updates ([#2115](https://github.com/h5bp/html5-boilerplate/pull/2115))
* Minor devdeps updates ([#2114](https://github.com/h5bp/html5-boilerplate/pull/2114))
* More succinct way of writing the IE conditional statement ([#2113](https://github.com/h5bp/html5-boilerplate/pull/2113))
### 7.0.1 (February 11, 2019)
* Bumps main.css to current version ([#2112](https://github.com/h5bp/html5-boilerplate/pull/2112))
### 7.0.0 (February 8, 2019)
* Drop support for IE9/IE10 (usage of these versions is tiny and Microsoft officially ended support back in 2016. ([#2074](https://github.com/h5bp/html5-boilerplate/pull/2074))
* Move the CSS to a separate repo ([#2066](https://github.com/h5bp/html5-boilerplate/pull/2066))
* Add theme-color meta tag to index.html ([#2074](https://github.com/h5bp/html5-boilerplate/pull/2074))
* Add 'install with yarn' steps to README ([#2063](https://github.com/h5bp/html5-boilerplate/pull/2063))
* Remove instances of `shrink-to-fit=no` ([#2103](https://github.com/h5bp/html5-boilerplate/pull/2103))
* Removes "display": "standalone" from manifest ([#2096](https://github.com/h5bp/html5-boilerplate/pull/2096))
* Big Docs update - Fixed links, removed IE9/IE10 specific info, made touch icons section more concise, add details on security.txt and more tidying up ([#2074](https://github.com/h5bp/html5-boilerplate/pull/2031), [#2065](https://github.com/h5bp/html5-boilerplate/pull/2065), [#2062](https://github.com/h5bp/html5-boilerplate/pull/2062))
### 6.1.0 (May 1, 2018)
* [Update Apache Server Configs to `v3.0.0`.](https://github.com/h5bp/html5-boilerplate/pull/2042)
* Migrate to eslint ([#2037](https://github.com/h5bp/html5-boilerplate/pull/2037))
* Update to jQuery 3.3.1 ([#2018](https://github.com/h5bp/html5-boilerplate/pull/2018))
* Update to Modernizr v3.6 and Normalize v8 ([#2028](https://github.com/h5bp/html5-boilerplate/pull/2028))
* Update Dev Dependencies ([#2032](https://github.com/h5bp/html5-boilerplate/pull/2032)) ([#2017](https://github.com/h5bp/html5-boilerplate/pull/2017)) ([#2010](https://github.com/h5bp/html5-boilerplate/pull/2010)) ([#2009](https://github.com/h5bp/html5-boilerplate/pull/2009))
* Replace 'node-sri' with 'ssri' ([#2031](https://github.com/h5bp/html5-boilerplate/pull/2031))
* Add .babelrc and .prettierrc to .gitattributes ([#2030](https://github.com/h5bp/html5-boilerplate/pull/2030))
This is a set of files that a front-end developer can use to get started on a website, with following included:
1. Cross-browser compatible (IE6, yeah we got that.)
2. HTML5 ready. Use the new tags with certainty.
3. Optimal caching and compression rules for grade-A performance
4. Best practice site configuration defaults
5. Think there's too much? The HTML5 Boilerplate is delete-key friendly. :)
6. Mobile browser optimizations
7. Progressive enhancement graceful degredation ........ yeah yeah we got that
8. IE specific classes for maximum cross-browser control
9. Want to write unit tests but lazy? A full, hooked up test suite is waiting for you.
10. Javascript profiling.. in IE6 and IE7? Sure, no problem.
11. Console.log nerfing so you won't break anyone by mistake.
12. Never go wrong with your doctype or markup!
13. An optimal print stylesheet, performance optimized
14. iOS, Android, Opera Mobile-adaptable markup and CSS skeleton.
15. IE6 pngfix baked in.
16. jQuery, waiting for you
There will be two releases: a documented release, which is exactly what you see here, and a production release, with most of the descriptive comments stripped out.
- Install with [npm](https://www.npmjs.com/): `npm install html5-boilerplate` and pull in what you need from the resulting `node_modules/html5-boilerplate/dist`
- Install with [yarn](https://yarnpkg.com/): `yarn add html5-boilerplate`
## Features
* HTML5 ready. Use the new elements with confidence.
* [`jQuery`](https://jquery.com/) via CDN with [SRI Hash](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity) and a local fallback
* A custom build of [`Modernizr`](https://modernizr.com/) for feature
detection
* [`Apache Server Configs`](https://github.com/h5bp/server-configs-apache)
that, among other, improve the web site's performance and security
* Placeholder CSS Media Queries.
* Useful CSS helper classes.
* Default print styles, performance optimized.
* An optimized version of the Google Universal Analytics snippet.
* Protection against any stray `console` statements causing JavaScript
errors in older browsers.
* "Delete-key friendly." Easy to strip out parts you don't need.
* Extensive inline and accompanying documentation.
## Browser support
* Chrome *(latest 2)*
* Edge *(latest 2)*
* Firefox *(latest 2)*
* 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 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
Take a look at the [documentation table of contents](dist/doc/TOC.md).
This documentation is bundled with the project which makes it
available for offline reading and provides a useful starting point for
any documentation you want to write about your project.
## Contributing
Hundreds of developers have helped to make the HTML5 Boilerplate. Anyone is welcome to [contribute](.github/CONTRIBUTING.md),
however, if you decide to get involved, please take a moment to review
<!-- demo content lovingly lifted from the azbuka project
http://code.google.com/p/azbuka/
and the bluetrip project
http://bluetrip.org/
-->
<h1>Title 01 Heading</h1>
<hr/>
<h3>Level 03 Heading</h3>
<p>Lorem ipsum <em>emphasised text</em> dolor sit amet, <strong>strong text</strong>
consectetur adipisicing elit, <abbrtitle="">abbreviated text</abbr> sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut
<q>quoted text</q> enim ad minim veniam, quis nostrud exercitation <ahref="/">link text</a>
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
<ins>inserted text</ins> irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat <code>code text</code> cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
Suspendisse rhoncus, est ac sollicitudin viverra, leo orci sagittis massa, sed condimentum <acronymtitle="">acronym text</acronym> est tortor a lectus. Curabitur porta feugiat ullamcorper. Integer lacinia mi id odio faucibus eget tincidunt nisl iaculis. Nam adipiscing hendrerit turpis, et porttitor felis sollicitudin et. Donec dictum massa ac neque accumsan tempor. Cras aliquam, ipsum sit amet laoreet hendrerit, purus <del>deleted text</del> sapien convallis dui, et porta leo ipsum ac nunc. Nullam ornare porta dui ac semper. Cras aliquam laoreet hendrerit. Quisque vulputate dolor eget mi porta vel porta nisl pretium. Vivamus non leo magna, quis imperdiet risus. Morbi tempor risus placerat tellus imperdiet fringilla.
</p>
<blockquote>
<p>I am not one who was born in the possession of knowledge; I am one who is fond of antiquity, and earnest in seeking it there.</p>
</blockquote>
<p><cite><ahref="/">Confucius, The Confucian Analects</a></cite>, (551 BC - 479 BC)</p>
<h3>Level 03 Heading</h3>
<p>Extended paragraph. <ahref="">Lorem ipsum</a> dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<ol>
<li>Unus</li>
<li>Duo</li>
<li>Tres</li>
<li>Quattuor</li>
</ol>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.</p>
<h3>Header 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.</p>
<h4>Unordered lists</h4>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipisicing elit</li>
<li>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li>
<li>Ut enim ad minim veniam</li>
</ul>
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit, sed do eiusmod tempor incididunt
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.</p>
<h4>Header 4</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.</p>
<dl>
<dt>Definition list</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Lorem ipsum dolor sit amet</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
</dl>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.</p>
<h4>Ordered list</h4>
<ol>
<li>List item</li>
<li>List item</li>
<li>List item
<ol>
<li>List item level 2</li>
<li>List item level 2
<ol>
<li>List item level 3</li>
<li>List item level 3</li>
</ol>
</li>
</ol>
</li>
</ol>
<h4>Unordered list</h4>
<ul>
<li>List item 01</li>
<li>List item 02</li>
<li>List item 03
<ul>
<li>List item level 2</li>
<li>List item level 2
<ul>
<li>List item level 3</li>
<li>List item level 3</li>
</ul>
</li>
</ul>
</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.</p>
<h4>Tables</h4>
<tablesummary="Jimi Hendrix albums">
<caption>Jimi Hendrix - albums</caption>
<thead>
<tr>
<th>Album</th>
<th>Year</th>
<th>Price</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Album</td>
<td>Year</td>
<td>Price</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Are You Experienced </td>
<td>1967</td>
<td>$10.00</td>
</tr>
<tr>
<td>Axis: Bold as Love</td>
<td>1967</td>
<td>$12.00</td>
</tr>
<tr>
<td>Electric Ladyland</td>
<td>1968</td>
<td>$10.00</td>
</tr>
<tr>
<td>Band of Gypsys</td>
<td>1970</td>
<td>$12.00</td>
</tr>
<tbody>
</table>
<p>
I am <ahref="http://devkick.com/lab/tripoli/sample.php?abc123">the a tag</a> example<br>
I am <abbrtitle="test">the abbr tag</abbr> example<br>
I am <acronym>the acronym tag</acronym> example<br>
I am <b>the b tag</b> example<br>
I am <big>the big tag</big> example<br>
I am <cite>the cite tag</cite> example<br>
I am <code>the code tag</code> example<br>
I am <del>the del tag</del> example<br>
I am <dfn>the dfn tag</dfn> example<br>
I am <em>the em tag</em> example<br>
I am <fontface="verdana">the font tag</font> example<br>
I am <i>the i tag</i> example<br>
I am <ins>the ins tag</ins> example<br>
I am <kbd>the kbd tag</kbd> example<br>
I am <q>the q tag <q>inside</q> a q tag</q> example<br>
I am <s>the s tag</s> example<br>
I am <samp>the samp tag</samp> example<br>
I am <small>the small tag</small> example<br>
I am <span>the span tag</span> example<br>
I am <strike>the strike tag</strike> example<br>
I am <strong>the strong tag</strong> example<br>
I am <sub>the sub tag</sub> example<br>
I am <sup>the sup tag</sup> example<br>
I am <tt>the tt tag</tt> example<br>
I am <var>the var tag</var> example<br>
I am <u>the u tag</u> example
</p>
<h3>What is Lorem Ipsum?</h3>
<p><b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p><strong>This</strong> Lorem Ipsum HTML example is created from the parts of Placeholder Markup with Lorem Ipsum - Jon Tan,
Emastic CSS Framework,
Tripoli CSS Framework and
Baseline CSS Framework .</p>
<address>Address: somewhere, World</address>
<p>
<ahref="#">Link</a><br>
<strong><strong></strong><br>
<del><del> deleted</del><br>
<dfn><dfn> dfn</dfn><br>
<em><em> emphasis</em>
</p>
<pre>
<code><html></code>
<code><head></code>
<code></head></code>
<code><body></code>
<code><div class = "main"><div></code>
<code></body></code>
<code></html></code>
</pre>
<tt><tt>
Pellentesque tempor, dui ut ultrices viverra, neque urna blandit nisi, id accumsan dolor est vitae risus.
</tt>
<hr>
<!-- this following markup from http://bluetrip.org/ -->
Several base styles are included that build upon `Normalize.css`. These
styles:
* provide basic typography settings that improve text readability
* protect against unwanted `text-shadow` during text highlighting
* tweak the default alignment of some elements (e.g.: `img`, `video`,
`fieldset`, `textarea`)
* style the prompt that is displayed to users using an outdated browser
* and more...
These styles are included in [main.css](https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css). See the [main.css](https://github.com/h5bp/main.css) project [documentation](https://github.com/h5bp/main.css/blob/master/README.md#features) for a full discussion of these styles.
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.
You can read about this useful element and more techniques in
[Microsoft's documentation on adapting WebKit-oriented apps for IE10](https://blogs.windows.com/buildingapps/2012/11/15/adapting-your-webkit-optimized-site-for-internet-explorer-10/)
## Search
### Direct search spiders to your sitemap
After creating a [sitemap](https://www.sitemaps.org/protocol.html)
Please consider specifying the language of your content by adding a [value](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) to the `lang`
attribute in the `<html>` as in this example:
```html
<htmlclass="no-js"lang="en">
```
### The order of the `<title>` and `<meta>` tags
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
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
app appears on a device's home screen, what it looks like when it launches
in that context and what happens when it is launched. This allows for much greater
control over the UI of a saved site or web app on a mobile device.
It's linked to from the HTML as follows:
```html
<linkrel="manifest"href="site.webmanifest">
```
Our [site.webmanifest](https://github.com/h5bp/html5-boilerplate/blob/master/src/site.webmanifest) contains a very skeletal "app" definition, just to show the basic usage.
You should fill this file out with [more information about your site or application](https://developer.mozilla.org/en-US/docs/Web/Manifest)
## Favicons and Touch Icon
The shortcut icons should be put in the root directory of your site. `favicon.ico`
is automatically picked up by browsers if it's placed in the root. HTML5
Boilerplate comes with a default set of icons (include favicon and one Apple
Touch Icon) that you can use as a baseline to create your own.
Please refer to the more detailed description in the [Extend section](extend.md)
of these docs.
## The Content Area
The central part of the boilerplate template is pretty much empty. This is
intentional, in order to make the boilerplate suitable for both web page and
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 9 and lower. If you intended to support IE, then you
should edit or remove the snippet of code.
## Modernizr
HTML5 Boilerplate uses a custom build of Modernizr.
[Modernizr](https://modernizr.com/) is a JavaScript library which adds classes to
the `html` element based on the results of feature test and which ensures that
all browsers can make use of HTML5 elements (as it includes the HTML5 Shiv).
This allows you to target parts of your CSS and JavaScript based on the
features supported by a browser.
Starting with version 3 Modernizr can be customized using the [modernizr-config.json](https://github.com/h5bp/html5-boilerplate/blob/master/modernizr-config.json) and the
[Modernizr command line utility](https://www.npmjs.com/package/modernizr-cli).
## What About Polyfills?
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 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:
and, (unlike Google's CDN) is available to China's hundreds of millions of internet users.
For many years we [chose](https://github.com/h5bp/html5-boilerplate/issues/1191)
the Google Hosted version over the jQuery CDN because it was available
over HTTPS (the jQuery CDN was not,) and it offered a better chance of
hitting the cache lottery owing to the popularity of the Google CDN.
The first issue is no longer valid and the second is far outweighed by
being able to serve jQuery to users in China.
While the jQuery CDN is a strong default solution your site or application may
require a different configuration. Testing your site with services like
[WebPageTest](https://www.webpagetest.org/) and browser tools like
[PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) will help you examine the real
world performance of your site and can show where you can optimize your specific
site or application.
### Google Universal Analytics Tracking Code
Finally, an optimized version of the Google Universal Analytics tracking code is
included.
We use `analytics.js` rather than the newer `gtag.js` as
[it's faster and supports tasks and plugins](https://github.com/philipwalton/analyticsjs-boilerplate/issues/19#issuecomment-333714370)
The beacon transport mechanism is used to send all hits [which saves HTTP requests and improves performance](https://philipwalton.com/articles/the-google-analytics-setup-i-use-on-every-site-i-build/#loading-analytics.js).
Google recommends that this script be placed at the top of the page.
Factors to consider: if you place this script at the top of the page, you’ll
be able to count users who don’t fully load the page, and you’ll incur the max
number of simultaneous connections of the browser.
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
<!-- Add your site or application content here -->
styleSheet.addRule('img.'+this.ns+'_sizeFinder','behavior:none; border:none; position:absolute; z-index:-1; top:-10000px; visibility:hidden;');/* large negative top value for avoiding vertical scrollbars for large images, suggested by James O'Brien, http://www.thanatopsic.org/hendrik/ */
setTimeout(function(){/* wouldn't work as intended without setTimeout */
DD_belatedPNG.applyVML(el);
},1);
},
/**
* This is the method to use in a document.
* @param {String} selector - REQUIRED - a CSS selector, such as '#doc .container'
**/
fix:function(selector){
if(!$.browser.ie6)return;// just a doublecheck catch.
varselectors=selector.split(',');/* multiple selectors supported, no need for multiple calls to this anymore */
for(vari=0;i<selectors.length;i++){
this.styleSheet.addRule(selectors[i],'behavior:expression(DD_belatedPNG.fixPng(this))');/* seems to execute the function without adding it to the stylesheet - interesting... */
if(!lib.imgSize[el.vmlBg]){/* determine size of loaded image */
varimg=document.createElement('img');
lib.imgSize[el.vmlBg]=img;
img.className=lib.ns+'_sizeFinder';
img.runtimeStyle.cssText='behavior:none; position:absolute; left:-10000px; top:-10000px; border:none;';/* make sure to set behavior to none to prevent accidental matching of the helper elements! */
/* IE can't figure out what do when the offsetLeft and the clientLeft add up to 1, and the VML ends up getting fuzzy... so we have to push/enlarge things by 1 pixel and then clip off the excess */
c.inArray(c(this).val(),u)>=0});if(!u.length)this.selectedIndex=-1}elsethis.value=r}})}});c.extend({attrFn:{val:true,css:true,html:true,text:true,data:true,width:true,height:true,offset:true},attr:function(a,b,d,f){if(!a||a.nodeType===3||a.nodeType===8)returnw;if(f&&binc.attrFn)returnc(a)[b](d);f=a.nodeType!==1||!c.isXMLDoc(a);vare=d!==w;b=f&&c.props[b]||b;if(a.nodeType===1){varj=$a.test(b);if(bina&&f&&!j){if(e){b==="type"&&ab.test(a.nodeName)&&a.parentNode&&c.error("type property can't be changed");
window.Modernizr=function(i,e,I){functionC(a,b){for(varcina)if(m[a[c]]!==I&&(!b||b(a[c],D)))returntrue}functionr(a,b){varc=a.charAt(0).toUpperCase()+a.substr(1);return!!C([a,"Webkit"+c,"Moz"+c,"O"+c,"ms"+c,"Khtml"+c],b)}functionP(){j[E]=function(a){for(varb=0,c=a.length;b<c;b++)J[a[b]]=!!(a[b]inn);returnJ}("autocomplete autofocus list placeholder max min multiple pattern required step".split(" "));j[Q]=function(a){for(varb=0,c,h=a.length;b<h;b++){n.setAttribute("type",a[b]);if(c=n.type!==
"text"){n.value=K;/tel|search/.test(n.type)||(c=/url|email/.test(n.type)?n.checkValidity&&n.checkValidity()===false:n.value!=K)}L[a[b]]=!!c}returnL}("search tel url email datetime date month week time datetime-local number range color".split(" "))}varj={},s=e.documentElement,D=e.createElement("modernizr"),m=D.style,n=e.createElement("input"),E="input",Q=E+"types",K=":)",M=Object.prototype.toString,y=" -o- -moz- -ms- -webkit- -khtml- ".split(" "),d={},L={},J={},N=[],u=function(){vara={select:"input",
d.canvas=function(){return!!e.createElement("canvas").getContext};d.canvastext=function(){return!!(d.canvas()&&typeofe.createElement("canvas").getContext("2d").fillText=="function")};d.geolocation=function(){return!!navigator.geolocation};d.crosswindowmessaging=function(){return!!i.postMessage};d.websqldatabase=function(){vara=!!i.openDatabase;if(a)try{a=!!openDatabase("testdb","1.0","html5 test db",2E5)}catch(b){a=false}returna};d.indexedDB=function(){return!!i.indexedDB};d.hashchange=function(){returnu("hashchange",
Several base styles are included that build upon `Normalize.css`. These
styles:
* provide basic typography settings that improve text readability
* protect against unwanted `text-shadow` during text highlighting
* tweak the default alignment of some elements (e.g.: `img`, `video`,
`fieldset`, `textarea`)
* style the prompt that is displayed to users using an outdated browser
* and more...
These styles are included in [main.css](https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css). See the [main.css](https://github.com/h5bp/main.css) project [documentation](https://github.com/h5bp/main.css/blob/master/README.md#features) for a full discussion of these styles.
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.
You can read about this useful element and more techniques in
[Microsoft's documentation on adapting WebKit-oriented apps for IE10](https://blogs.windows.com/buildingapps/2012/11/15/adapting-your-webkit-optimized-site-for-internet-explorer-10/)
## Search
### Direct search spiders to your sitemap
After creating a [sitemap](https://www.sitemaps.org/protocol.html)
Please consider specifying the language of your content by adding a [value](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) to the `lang`
attribute in the `<html>` as in this example:
```html
<htmlclass="no-js"lang="en">
```
### The order of the `<title>` and `<meta>` tags
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
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
app appears on a device's home screen, what it looks like when it launches
in that context and what happens when it is launched. This allows for much greater
control over the UI of a saved site or web app on a mobile device.
It's linked to from the HTML as follows:
```html
<linkrel="manifest"href="site.webmanifest">
```
Our [site.webmanifest](https://github.com/h5bp/html5-boilerplate/blob/master/src/site.webmanifest) contains a very skeletal "app" definition, just to show the basic usage.
You should fill this file out with [more information about your site or application](https://developer.mozilla.org/en-US/docs/Web/Manifest)
## Favicons and Touch Icon
The shortcut icons should be put in the root directory of your site. `favicon.ico`
is automatically picked up by browsers if it's placed in the root. HTML5
Boilerplate comes with a default set of icons (include favicon and one Apple
Touch Icon) that you can use as a baseline to create your own.
Please refer to the more detailed description in the [Extend section](extend.md)
of these docs.
## The Content Area
The central part of the boilerplate template is pretty much empty. This is
intentional, in order to make the boilerplate suitable for both web page and
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 9 and lower. If you intended to support IE, then you
should edit or remove the snippet of code.
## Modernizr
HTML5 Boilerplate uses a custom build of Modernizr.
[Modernizr](https://modernizr.com/) is a JavaScript library which adds classes to
the `html` element based on the results of feature test and which ensures that
all browsers can make use of HTML5 elements (as it includes the HTML5 Shiv).
This allows you to target parts of your CSS and JavaScript based on the
features supported by a browser.
Starting with version 3 Modernizr can be customized using the [modernizr-config.json](https://github.com/h5bp/html5-boilerplate/blob/master/modernizr-config.json) and the
[Modernizr command line utility](https://www.npmjs.com/package/modernizr-cli).
## What About Polyfills?
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 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:
and, (unlike Google's CDN) is available to China's hundreds of millions of internet users.
For many years we [chose](https://github.com/h5bp/html5-boilerplate/issues/1191)
the Google Hosted version over the jQuery CDN because it was available
over HTTPS (the jQuery CDN was not,) and it offered a better chance of
hitting the cache lottery owing to the popularity of the Google CDN.
The first issue is no longer valid and the second is far outweighed by
being able to serve jQuery to users in China.
While the jQuery CDN is a strong default solution your site or application may
require a different configuration. Testing your site with services like
[WebPageTest](https://www.webpagetest.org/) and browser tools like
[PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) will help you examine the real
world performance of your site and can show where you can optimize your specific
site or application.
### Google Universal Analytics Tracking Code
Finally, an optimized version of the Google Universal Analytics tracking code is
included.
We use `analytics.js` rather than the newer `gtag.js` as
[it's faster and supports tasks and plugins](https://github.com/philipwalton/analyticsjs-boilerplate/issues/19#issuecomment-333714370)
The beacon transport mechanism is used to send all hits [which saves HTTP requests and improves performance](https://philipwalton.com/articles/the-google-analytics-setup-i-use-on-every-site-i-build/#loading-analytics.js).
Google recommends that this script be placed at the top of the page.
Factors to consider: if you place this script at the top of the page, you’ll
be able to count users who don’t fully load the page, and you’ll incur the max
number of simultaneous connections of the browser.
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
<!-- Add your site or application content here -->
<pid="firstp">See <aid="simon1"href="http://simon.incutio.com/archive/2003/03/25/#getElementsBySelector"rel="bookmark">this blog entry</a> for more information.</p>
<pid="ap">
Here are some links in a normal paragraph: <aid="google"href="http://www.google.com/"title="Google!">Google</a>,
<pid="sndp">Everything inside the red border is inside a div with <code>id="foo"</code>.</p>
<plang="en"id="en">This is a normal link: <aid="yahoo"href="http://www.yahoo.com/"class="blogTest">Yahoo</a></p>
<pid="sap">This link has <code><ahref="#2"id="anchor2">class="blog"</a></code>: <ahref="http://simon.incutio.com/"class="blog link"id="simon">Simon Willison's Weblog</a></p>
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.