Skip to content
Permalink
Newer
Older
100644 663 lines (477 sloc) 23.2 KB
Oct 31, 2016
1
[HTML5 Boilerplate homepage](https://html5boilerplate.com) | [Documentation
2
table of contents](TOC.md)
3
4
# Extend and customise HTML5 Boilerplate
5
6
Here is some useful advice for how you can make your project with HTML5
7
Boilerplate even better. We don't want to include it all by default, as
8
not everything fits with everyone's needs.
9
10
11
* [App Stores](#app-stores)
12
* [DNS prefetching](#dns-prefetching)
13
* [Google Universal Analytics](#google-universal-analytics)
14
* [Internet Explorer](#internet-explorer)
15
* [Miscellaneous](#miscellaneous)
16
* [News Feeds](#news-feeds)
17
* [Search](#search)
18
* [Social Networks](#social-networks)
19
* [URLs](#urls)
20
* [Web Apps](#web-apps)
21
22
23
## App Stores
24
25
### Install a Chrome Web Store app
26
27
Users can install a Chrome app directly from your website, as long as
28
the app and site have been associated via Google's Webmaster Tools.
29
Read more on [Chrome Web Store's Inline Installation
30
docs](https://developer.chrome.com/webstore/inline_installation).
31
32
```html
33
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/APP_ID">
34
```
35
36
### Smart App Banners in iOS 6+ Safari
37
38
Stop bothering everyone with gross modals advertising your entry in the
39
App Store. Include the following [meta tag](https://developer.apple.com/library/IOS/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html#//apple_ref/doc/uid/TP40002051-CH6-SW2)
40
will unintrusively allow the user the option to download your iOS app,
41
or open it with some data about the user's current state on the website.
42
43
```html
44
<meta name="apple-itunes-app" content="app-id=APP_ID,app-argument=SOME_TEXT">
45
```
46
47
## DNS prefetching
48
49
In short, DNS Prefetching is a method of informing the browser of domain names
50
referenced on a site so that the client can resolve the DNS for those hosts,
51
cache them, and when it comes time to use them, have a faster turn around on
52
the request.
53
54
### Implicit prefetches
55
56
There is a lot of prefetching done for you automatically by the browser. When
57
the browser encounters an anchor in your html that does not share the same
58
domain name as the current location the browser requests, from the client OS,
59
the IP address for this new domain. The client first checks its cache and
60
then, lacking a cached copy, makes a request from a DNS server. These requests
61
happen in the background and are not meant to block the rendering of the
62
page.
63
64
The goal of this is that when the foreign IP address is finally needed it will
65
already be in the client cache and will not block the loading of the foreign
66
content. Fewer requests result in faster page load times. The perception of this
67
is increased on a mobile platform where DNS latency can be greater.
68
69
#### Disable implicit prefetching
70
71
```html
72
<meta http-equiv="x-dns-prefetch-control" content="off">
73
```
74
75
Even with X-DNS-Prefetch-Control meta tag (or http header) browsers will still
76
prefetch any explicit dns-prefetch links.
77
78
**_WARNING:_** THIS MAY MAKE YOUR SITE SLOWER IF YOU RELY ON RESOURCES FROM
79
FOREIGN DOMAINS.
80
81
### Explicit prefetches
82
83
Typically the browser only scans the HTML for foreign domains. If you have
84
resources that are outside of your HTML (a javascript request to a remote
85
server or a CDN that hosts content that may not be present on every page of
86
your site, for example) then you can queue up a domain name to be prefetched.
87
88
```html
89
<link rel="dns-prefetch" href="//example.com">
90
<link rel="dns-prefetch" href="https://ajax.googleapis.com">
91
```
92
93
You can use as many of these as you need, but it's best if they are all
94
immediately after the [Meta
95
Charset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#attr-charset)
96
element (which should go right at the top of the `head`), so the browser can
97
act on them ASAP.
98
99
#### Common Prefetch Links
100
101
Amazon S3:
102
103
```html
104
<link rel="dns-prefetch" href="//s3.amazonaws.com">
105
```
106
107
Google APIs:
108
109
```html
110
<link rel="dns-prefetch" href="https://ajax.googleapis.com">
111
```
112
113
Microsoft Ajax Content Delivery Network:
114
115
```html
116
<link rel="dns-prefetch" href="//ajax.microsoft.com">
117
<link rel="dns-prefetch" href="//ajax.aspnetcdn.com">
118
```
119
120
### Further reading about DNS prefetching
121
122
* https://developer.mozilla.org/en-US/docs/Controlling_DNS_prefetching
123
* https://dev.chromium.org/developers/design-documents/dns-prefetching
124
* http://blogs.msdn.com/b/ie/archive/2011/03/17/internet-explorer-9-network-performance-improvements.aspx
125
* http://dayofjs.com/videos/22158462/web-browsers_alex-russel
126
127
128
## Google Universal Analytics
129
130
### More tracking settings
131
132
The [optimized Google Universal Analytics
133
snippet](https://mathiasbynens.be/notes/async-analytics-snippet#universal-analytics)
134
included with HTML5 Boilerplate includes something like this:
135
136
```js
137
ga('create', 'UA-XXXXX-X', 'auto'); ga('send', 'pageview');
138
```
139
140
To customize further, see Google's [Advanced
141
Setup](https://developers.google.com/analytics/devguides/collection/analyticsjs/advanced),
142
[Pageview](https://developers.google.com/analytics/devguides/collection/analyticsjs/pages),
143
and [Event](https://developers.google.com/analytics/devguides/collection/analyticsjs/events) Docs.
144
145
### Anonymize IP addresses
146
147
In some countries, no personal data may be transferred outside jurisdictions
148
that do not have similarly strict laws (i.e. from Germany to outside the EU).
149
Thus a webmaster using the Google Universal Analytics may have to ensure that
150
no personal (trackable) data is transferred to the US. You can do that with
151
[the `ga('set', 'anonymizeIp', true);`
152
parameter](https://developers.google.com/analytics/devguides/collection/analyticsjs/advanced#anonymizeip)
153
before sending any events/pageviews. In use it looks like this:
154
155
```js
156
ga('create', 'UA-XXXXX-X', 'auto');
157
ga('set', 'anonymizeIp', true);
158
ga('send', 'pageview');
159
```
160
161
### Track jQuery AJAX requests in Google Analytics
162
163
An article by @JangoSteve explains how to [track jQuery AJAX requests in Google
164
Analytics](http://www.alfajango.com/blog/track-jquery-ajax-requests-in-google-analytics/).
165
166
Add this to `plugins.js`:
167
168
```js
169
/*
170
* Log all jQuery AJAX requests to Google Analytics
171
* See: http://www.alfajango.com/blog/track-jquery-ajax-requests-in-google-analytics/
172
*/
173
if (typeof ga !== "undefined" && ga !== null) {
174
$(document).ajaxSend(function(event, xhr, settings){
175
ga('send', 'pageview', settings.url);
176
});
177
}
178
```
179
180
### Track JavaScript errors in Google Analytics
181
182
Add this function after `ga` is defined:
183
184
```js
185
(function(window){
186
var undefined,
187
link = function (href) {
188
var a = window.document.createElement('a');
189
a.href = href;
190
return a;
191
};
192
window.onerror = function (message, file, line, column) {
193
var host = link(file).hostname;
194
ga('send', {
195
'hitType': 'event',
196
'eventCategory': (host == window.location.hostname || host == undefined || host == '' ? '' : 'external ') + 'error',
197
'eventAction': message,
198
'eventLabel': (file + ' LINE: ' + line + (column ? ' COLUMN: ' + column : '')).trim(),
199
'nonInteraction': 1
200
});
201
};
202
}(window));
203
```
204
205
### Track page scroll
206
207
Add this function after `ga` is defined:
208
209
```js
210
$(function(){
211
var isDuplicateScrollEvent,
212
scrollTimeStart = new Date,
213
$window = $(window),
214
$document = $(document),
215
scrollPercent;
216
217
$window.scroll(function() {
218
scrollPercent = Math.round(100 * ($window.height() + $window.scrollTop())/$document.height());
219
if (scrollPercent > 90 && !isDuplicateScrollEvent) { //page scrolled to 90%
220
isDuplicateScrollEvent = 1;
221
ga('send', 'event', 'scroll',
222
'Window: ' + $window.height() + 'px; Document: ' + $document.height() + 'px; Time: ' + Math.round((new Date - scrollTimeStart )/1000,1) + 's'
223
);
224
}
225
});
226
});
227
```
228
229
## Internet Explorer
230
231
### Prompt users to switch to "Desktop Mode" in IE10 Metro
232
233
IE10 does not support plugins, such as Flash, in Metro mode. If
234
your site requires plugins, you can let users know that via the
235
`x-ua-compatible` meta element, which will prompt them to switch
236
to Desktop Mode.
237
238
```html
239
<meta http-equiv="x-ua-compatible" content="requiresActiveX=true">
240
```
241
242
Here's what it looks like alongside H5BP's default `x-ua-compatible`
243
values:
244
245
```html
246
<meta http-equiv="x-ua-compatible" content="ie=edge,requiresActiveX=true">
247
```
248
249
You can find more information in [Microsoft's IEBlog post about prompting for
250
plugin use in IE10 Metro
251
Mode](http://blogs.msdn.com/b/ie/archive/2012/01/31/web-sites-and-a-plug-in-free-web.aspx).
252
253
### IE Pinned Sites (IE9+)
254
255
Enabling your application for pinning will allow IE9 users to add it to their
256
Windows Taskbar and Start Menu. This comes with a range of new tools that you
257
can easily configure with the elements below. See more [documentation on IE9
258
Pinned Sites](https://msdn.microsoft.com/en-us/library/gg131029.aspx).
259
260
### Name the Pinned Site for Windows
261
262
Without this rule, Windows will use the page title as the name for your
263
application.
264
265
```html
266
<meta name="application-name" content="Sample Title">
267
```
268
269
### Give your Pinned Site a tooltip
270
271
You know — a tooltip. A little textbox that appears when the user holds their
272
mouse over your Pinned Site's icon.
273
274
```html
275
<meta name="msapplication-tooltip" content="A description of what this site does.">
276
```
277
278
### Set a default page for your Pinned Site
279
280
If the site should go to a specific URL when it is pinned (such as the
281
homepage), enter it here. One idea is to send it to a special URL so you can
282
track the number of pinned users, like so:
283
`http://www.example.com/index.html?pinned=true`
284
285
```html
286
<meta name="msapplication-starturl" content="http://www.example.com/index.html?pinned=true">
287
```
288
289
### Recolor IE's controls manually for a Pinned Site
290
291
IE9+ will automatically use the overall color of your Pinned Site's favicon to
292
shade its browser buttons. UNLESS you give it another color here. Only use
293
named colors (`red`) or hex colors (`#ff0000`).
294
295
```html
296
<meta name="msapplication-navbutton-color" content="#ff0000">
297
```
298
299
### Manually set the window size of a Pinned Site
300
301
If the site should open at a certain window size once pinned, you can specify
302
the dimensions here. It only supports static pixel dimensions. 800x600
303
minimum.
304
305
```html
306
<meta name="msapplication-window" content="width=800;height=600">
307
```
308
309
### Jump List "Tasks" for Pinned Sites
310
311
Add Jump List Tasks that will appear when the Pinned Site's icon gets a
312
right-click. Each Task goes to the specified URL, and gets its own mini icon
313
(essentially a favicon, a 16x16 .ICO). You can add as many of these as you
314
need.
315
316
```html
317
<meta name="msapplication-task" content="name=Task 1;action-uri=http://host/Page1.html;icon-uri=http://host/icon1.ico">
318
<meta name="msapplication-task" content="name=Task 2;action-uri=http://microsoft.com/Page2.html;icon-uri=http://host/icon2.ico">
319
```
320
321
### (Windows 8) High quality visuals for Pinned Sites
322
323
Windows 8 adds the ability for you to provide a PNG tile image and specify the
324
tile's background color. [Full details on the IE
325
blog](http://blogs.msdn.com/b/ie/archive/2012/06/08/high-quality-visuals-for-pinned-sites-in-windows-8.aspx).
326
327
* Create a 144x144 image of your site icon, filling all of the canvas, and
328
using a transparent background.
329
* Save this image as a 32-bit PNG and optimize it without reducing
330
colour-depth. It can be named whatever you want (e.g. `metro-tile.png`).
331
* To reference the tile and its color, add the HTML `meta` elements described
332
in the IE Blog post.
333
334
### (Windows 8) Badges for Pinned Sites
335
336
IE10 will poll an XML document for badge information to display on your app's
337
tile in the Start screen. The user will be able to receive these badge updates
338
even when your app isn't actively running. The badge's value can be a number,
339
or one of a predefined list of glyphs.
340
341
* [Tutorial on IEBlog with link to badge XML schema](http://blogs.msdn.com/b/ie/archive/2012/04/03/pinned-sites-in-windows-8.aspx)
342
* [Available badge values](https://msdn.microsoft.com/en-us/library/ie/br212849.aspx)
343
344
```html
345
<meta name="msapplication-badge" value="frequency=NUMBER_IN_MINUTES;polling-uri=http://www.example.com/path/to/file.xml">
346
```
347
348
### Disable link highlighting upon tap in IE10
349
350
Similar to [-webkit-tap-highlight-color](http://davidwalsh.name/mobile-highlight-color)
351
in iOS Safari. Unlike that CSS property, this is an HTML meta element, and its
352
value is boolean rather than a color. It's all or nothing.
353
354
```html
355
<meta name="msapplication-tap-highlight" content="no" />
356
```
357
358
You can read about this useful element and more techniques in
359
[Microsoft's documentation on adapting WebKit-oriented apps for IE10](https://blogs.windows.com/buildingapps/2012/11/15/adapting-your-webkit-optimized-site-for-internet-explorer-10/)
360
361
## Search
362
363
### Direct search spiders to your sitemap
364
365
[Learn how to make a sitemap](http://www.sitemaps.org/protocol.html)
366
367
```html
368
<link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml">
369
```
370
371
### Hide pages from search engines
372
373
According to Heather Champ, former community manager at Flickr, you should not
374
allow search engines to index your "Contact Us" or "Complaints" page if you
375
value your sanity. This is an HTML-centric way of achieving that.
376
377
```html
378
<meta name="robots" content="noindex">
379
```
380
381
**_WARNING:_** DO NOT INCLUDE ON PAGES THAT SHOULD APPEAR IN SEARCH ENGINES.
382
383
### Firefox and IE Search Plugins
384
385
Sites with in-site search functionality should be strongly considered for a
386
browser search plugin. A "search plugin" is an XML file which defines how your
387
plugin behaves in the browser. [How to make a browser search
388
plugin](https://www.google.com/search?ie=UTF-8&q=how+to+make+browser+search+plugin).
389
390
```html
391
<link rel="search" title="" type="application/opensearchdescription+xml" href="">
392
```
393
394
395
## Miscellaneous
396
397
* Use [polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills).
398
399
* Use [Microformats](http://microformats.org/wiki/Main_Page) (via
400
[microdata](http://microformats.org/wiki/microdata)) for optimum search
401
results
402
[visibility](http://googlewebmastercentral.blogspot.com/2009/05/introducing-rich-snippets.html).
403
404
* If you're building a web app you may want [native style momentum scrolling in
405
iOS 5+](http://www.johanbrook.com/articles/native-style-momentum-scrolling-to-arrive-in-ios-5/)
406
using `-webkit-overflow-scrolling: touch`.
407
408
* If you want to disable the translation prompt in Chrome or block Google
409
Translate from translating your web page, use [`<meta name="google"
410
value="notranslate">`](https://support.google.com/translate/?hl=en#2641276).
411
To disable translation for a particular section of the web page, add
412
[`class="notranslate"`](https://support.google.com/translate/?hl=en#2641276).
413
414
* If you want to disable the automatic detection and formatting of possible
415
phone numbers in Safari on iOS, use [`<meta name="format-detection"
416
content="telephone=no">`](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html/#//apple_ref/doc/uid/TP40008193-SW5).
417
418
* Avoid development/stage websites "leaking" into SERPs (search engine results
419
page) by [implementing X-Robots-tag
420
headers](https://github.com/h5bp/html5-boilerplate/issues/804).
421
422
* Screen readers currently have less-than-stellar support for HTML5 but the JS
423
script [accessifyhtml5.js](https://github.com/yatil/accessifyhtml5.js) can
424
help increase accessibility by adding ARIA roles to HTML5 elements.
425
426
427
## News Feeds
428
429
### RSS
430
431
Have an RSS feed? Link to it here. Want to [learn how to write an RSS feed from
432
scratch](http://www.rssboard.org/rss-specification)?
433
434
```html
435
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml">
436
```
437
438
### Atom
439
440
Atom is similar to RSS, and you might prefer to use it instead of or in
441
addition to it. [See what Atom's all
442
about](http://www.atomenabled.org/developers/syndication/).
443
444
```html
445
<link rel="alternate" type="application/atom+xml" title="Atom" href="/atom.xml">
446
```
447
448
### Pingbacks
449
450
Your server may be notified when another site links to yours. The href
451
attribute should contain the location of your pingback service.
452
453
```html
454
<link rel="pingback" href="">
455
```
456
457
* High-level explanation: https://codex.wordpress.org/Introduction_to_Blogging#Pingbacks
458
* Step-by-step example case: http://www.hixie.ch/specs/pingback/pingback-1.0#TOC5
459
* PHP pingback service: https://web.archive.org/web/20131211032834/http://blog.perplexedlabs.com/2009/07/15/xmlrpc-pingbacks-using-php/
460
461
462
463
## Social Networks
464
465
### Facebook Open Graph data
466
467
You can control the information that Facebook and others display when users
468
share your site. Below are just the most basic data points you might need. For
469
specific content types (including "website"), see [Facebook's built-in Open
470
Graph content
471
templates](https://developers.facebook.com/docs/opengraph/objects/builtin/).
472
Take full advantage of Facebook's support for complex data and activity by
473
following the [Open Graph
474
tutorial](https://developers.facebook.com/docs/opengraph/tutorial/).
475
476
```html
477
<meta property="og:title" content="">
478
<meta property="og:description" content="">
479
<meta property="og:image" content="">
480
```
481
482
### Twitter Cards
483
484
Twitter provides a snippet specification that serves a similar purpose to Open
485
Graph. In fact, Twitter will use Open Graph when Cards is not available. Note
486
that, as of this writing, Twitter requires that app developers activate Cards
487
on a per-domain basis. You can read more about the various snippet formats
488
and application process in the [official Twitter Cards
489
documentation](https://dev.twitter.com/docs/cards).
490
491
```html
492
<meta name="twitter:card" content="summary">
493
<meta name="twitter:site" content="@site_account">
494
<meta name="twitter:creator" content="@individual_account">
495
<meta name="twitter:url" content="http://www.example.com/path/to/page.html">
496
<meta name="twitter:title" content="">
497
<meta name="twitter:description" content="">
498
<meta name="twitter:image" content="http://www.example.com/path/to/image.jpg">
499
```
500
501
502
## URLs
503
504
### Canonical URL
505
506
Signal to search engines and others "Use this URL for this page!" Useful when
507
parameters after a `#` or `?` is used to control the display state of a page.
508
`http://www.example.com/cart.html?shopping-cart-open=true` can be indexed as
509
the cleaner, more accurate `http://www.example.com/cart.html`.
510
511
```html
512
<link rel="canonical" href="">
513
```
514
515
### Official shortlink
516
517
Signal to the world "This is the shortened URL to use this page!" Poorly
518
supported at this time. Learn more by reading the [article about shortlinks on
519
the Microformats wiki](http://microformats.org/wiki/rel-shortlink).
520
521
```html
522
<link rel="shortlink" href="h5bp.com">
523
```
524
525
### Separate mobile URLs
526
527
If you use separate URLs for desktop and mobile users, you should consider
528
helping search engine algorithms better understand the configuration on your
529
web site.
530
531
This can be done by adding the following annotations in your HTML pages:
532
533
* on the desktop page, add the `link rel="alternate"` tag pointing to the
534
corresponding mobile URL, e.g.:
535
536
`<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page.html" >`
537
538
* on the mobile page, add the `link rel="canonical"` tag pointing to the
539
corresponding desktop URL, e.g.:
540
541
`<link rel="canonical" href="http://www.example.com/page.html">`
542
543
For more information please see:
544
545
* https://developers.google.com/webmasters/smartphone-sites/details#separateurls
546
* https://developers.google.com/webmasters/smartphone-sites/feature-phones
547
548
549
## Web Apps
550
551
There are a couple of meta tags that provide information about a web app when
552
added to the Home Screen on iOS:
553
554
* Adding `apple-mobile-web-app-capable` will make your web app chrome-less and
555
provide the default iOS app view. You can control the color scheme of the
556
default view by adding `apple-mobile-web-app-status-bar-style`.
557
558
```html
559
<meta name="apple-mobile-web-app-capable" content="yes">
560
<meta name="apple-mobile-web-app-status-bar-style" content="black">
561
```
562
563
* You can use `apple-mobile-web-app-title` to add a specific sites name for the
564
Home Screen icon. This works since iOS 6.
565
566
```html
567
<meta name="apple-mobile-web-app-title" content="">
568
```
569
570
For further information please read the [official
571
documentation](https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html)
572
on Apple's site.
573
574
575
### Apple Touch Icons
576
577
The Apple touch icons can be seen as the favicons of iOS devices.
578
579
The main sizes of the Apple touch icons are:
580
581
* `57×57px` – iPhone with @1x display and iPod Touch
582
* `72×72px` – iPad and iPad mini with @1x display running iOS ≤ 6
583
* `76×76px` – iPad and iPad mini with @1x display running iOS ≥ 7
584
* `114×114px` – iPhone with @2x display running iOS ≤ 6
585
* `120×120px` – iPhone with @2x and @3x display running iOS ≥ 7
586
* `144×144px` – iPad and iPad mini with @2x display running iOS ≤ 6
587
* `152×152px` – iPad and iPad mini with @2x display running iOS 7
588
* `180×180px` – iPad and iPad mini with @2x display running iOS 8
589
590
Displays meaning:
591
592
* @1x - non-Retina
593
* @2x - Retina
594
* @3x - Retina HD
595
596
More information about the displays of iOS devices can be found
597
[here](https://en.wikipedia.org/wiki/List_of_iOS_devices#Display).
598
599
In most cases, one `180×180px` touch icon named `apple-touch-icon.png`
600
and including:
601
602
```html
603
<link rel="apple-touch-icon" href="apple-touch-icon.png">
604
```
605
606
in the `<head>` of the page is enough. If you use art-direction and/or
607
want to have different content for each device, you can add more touch
608
icons as written above.
609
610
For a more comprehensive overview, please refer to Mathias' [article on Touch
611
Icons](https://mathiasbynens.be/notes/touch-icons).
612
613
614
### Apple Touch Startup Image
615
616
Apart from that it is possible to add start-up screens for web apps on iOS. This
617
basically works by defining `apple-touch-startup-image` with an according link
618
to the image. Since iOS devices have different screen resolutions it is
619
necessary to add media queries to detect which image to load. Here is an
620
example for a retina iPhone:
621
622
```html
623
<link rel="apple-touch-startup-image" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="img/startup-retina.png">
624
```
625
626
However, it is possible to detect which start-up image to use with JavaScript.
627
The Mobile Boilerplate provides a useful function for this. Please see
628
[helpers.js](https://github.com/h5bp/mobile-boilerplate/blob/v4.1.0/js/helper.js#L336-L383)
629
for the implementation.
630
631
632
### Chrome Mobile web apps
633
634
Chrome Mobile has a specific meta tag for making apps [installable to the
635
homescreen](https://developer.chrome.com/multidevice/android/installtohomescreen)
636
which tries to be a more generic replacement to Apple's proprietary meta tag:
637
638
```html
639
<meta name="mobile-web-app-capable" content="yes">
640
```
641
642
Same applies to the touch icons:
643
644
```html
645
<link rel="icon" sizes="192x192" href="highres-icon.png">
646
```
647
648
### Theme Color
649
650
You can add the [`theme-color` meta extension](https://github.com/whatwg/meta-theme-color)
651
in the `<head>` of your pages to suggest the color that browsers and
652
OSes should use if they customize the display of individual pages in
653
their UIs with varying colors.
654
655
```html
656
<meta name="theme-color" content="#ff69b4">
657
```
658
659
The `content` attribute extension can take any valid CSS color.
660
661
Currently, the `theme-color` meta extension is supported by [Chrome 39+
662
for Android Lollipop](http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android)
663
and [Firefox OS 2.1+](https://twitter.com/ahmednefzaoui/status/492344698493997057).
You can’t perform that action at this time.