Skip to content

Commit 5c95a22

Browse files
samduttonsamdutton
committed
Added imageset and shorcut for srcset
1 parent 9e06379 commit 5c95a22

8 files changed

Lines changed: 176 additions & 3 deletions

File tree

‎imageset/index.html‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<!DOCTYPE html>
2+
3+
<!--
4+
Copyright 2017 Google Inc.
5+
6+
Licensed under the Apache License, Version 2.0 (the "License");
7+
you may not use this file except in compliance with the License.
8+
You may obtain a copy of the License at
9+
10+
http://www.apache.org/licenses/LICENSE-2.0
11+
12+
Unless required by applicable law or agreed to in writing, software
13+
distributed under the License is distributed on an "AS IS" BASIS,
14+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15+
See the License for the specific language governing permissions and
16+
limitations under the License.
17+
-->
18+
19+
<html lang="en">
20+
<head>
21+
22+
<script>
23+
// philipwalton.com/articles/the-google-analytics-setup-i-use-on-every-site-i-build
24+
window.ga = window.ga || function() {
25+
(ga.q = ga.q || []).push(arguments);
26+
};
27+
ga('create', 'UA-33848682-1', 'auto');
28+
ga('set', 'transport', 'beacon');
29+
ga('send', 'pageview');
30+
</script>
31+
<script async src="https://www.google-analytics.com/analytics.js"></script>
32+
33+
<meta charset="utf-8">
34+
<meta name="description" content="Simplest possible examples of HTML, CSS and JavaScript.">
35+
<meta name="author" content="//samdutton.com">
36+
<meta name="viewport" content="width=device-width, initial-scale=1">
37+
<meta itemprop="name" content="simpl.info: simplest possible examples of HTML, CSS and JavaScript">
38+
<meta itemprop="image" content="/images/icons/icon192.png">
39+
<meta id="theme-color" name="theme-color" content="#fff">
40+
41+
<link rel="icon" href="/images/icons/icon192.png">
42+
43+
<base target="_blank">
44+
45+
46+
<title>image-set()</title>
47+
48+
<link rel="stylesheet" href="../css/main.css">
49+
50+
<style>
51+
div#background{
52+
background-image: -webkit-image-set(url(small.jpg) 1x, url(large.jpg) 2x);
53+
background-size: cover;
54+
height: calc((100vw - 32px - 3em) * .5);
55+
margin: 0 0 20px 0;
56+
max-width: 40em;
57+
width: calc(100vw - 32px - 3em);
58+
}
59+
</style>
60+
61+
</head>
62+
63+
<body>
64+
65+
<div id="container">
66+
67+
<h1><a href="../index.html" title="simpl.info home page">simpl.info</a> CSS background image-set()</h1>
68+
69+
<div id="background" aria-label="Lias and Little Puss: two ten week old grey tabby kittens"></div>
70+
71+
<p>In your browser developer tools, change the emulated device pixel ratio and reload the page.</p>
72+
73+
<p>A browser that supports <code>CSS image-set()</code> will choose <a href="small.jpg" title="500px wide image file">small.jpg</a> or <a href="large.jpg" title="1500px wide image file">large.jpg</a>, depending on the device pixel ratio.</p>
74+
75+
<p>
76+
Device pixel ratio: <span id="devicePixelRatio"></span><br>
77+
Viewport width: <span id="viewportWidth"></span>px<br>
78+
Available screen width: <span id="availableWidth"></span>px<br>
79+
</p>
80+
81+
<a href="https://github.com/samdutton/simpl/blob/gh-pages/imageeset" title="View source for this page on GitHub" id="viewSource">View source on GitHub</a>
82+
83+
</div>
84+
85+
<script src="js/main.js"></script>
86+
87+
</body>
88+
</html>

‎imageset/js/main.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/*
2+
Copyright 2017 Google Inc.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
'use strict';
18+
19+
20+
var dpr = document.querySelector('#devicePixelRatio');
21+
var minimumWidth = document.querySelector('#minimumWidth');
22+
var viewportWidth = document.querySelector('#viewportWidth');
23+
var availableWidth = document.querySelector('#availableWidth');
24+
25+
function displayData() {
26+
if (window.devicePixelRatio) {
27+
dpr.textContent = window.devicePixelRatio;
28+
} else {
29+
dpr.textContent = minimumWidth.textContent = 'undefined';
30+
}
31+
32+
viewportWidth.textContent = document.documentElement.clientWidth;
33+
availableWidth.textContent = window.screen.availWidth;
34+
}
35+
36+
window.onresize = displayData;
37+
38+
// in case image already loaded -- is there a better way?
39+
displayData();

‎imageset/large.jpg‎

136 KB
Loading

‎imageset/medium.jpg‎

49.5 KB
Loading

‎imageset/small.jpg‎

24.9 KB
Loading

‎s/t/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,15 +72,15 @@
7272
</div>
7373

7474
<script>
75-
/*eslint-disable */
75+
/* eslint-disable */
7676
function googleTranslateElementInit() {
7777
new google.translate.TranslateElement({pageLanguage: 'en',
7878
layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
7979
gaTrack: true,
8080
gaId: 'UA-33848682-1'},
8181
'google_translate_element');
8282
}
83-
/*eslint-enable */
83+
/* eslint-enable */
8484
</script>
8585

8686
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

‎srcset/index.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
3+
<!--
4+
Copyright 2017 Google Inc.
5+
6+
Licensed under the Apache License, Version 2.0 (the "License");
7+
you may not use this file except in compliance with the License.
8+
You may obtain a copy of the License at
9+
10+
http://www.apache.org/licenses/LICENSE-2.0
11+
12+
Unless required by applicable law or agreed to in writing, software
13+
distributed under the License is distributed on an "AS IS" BASIS,
14+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15+
See the License for the specific language governing permissions and
16+
limitations under the License.
17+
-->
18+
19+
<html lang="en">
20+
<head>
21+
22+
<script>
23+
// philipwalton.com/articles/the-google-analytics-setup-i-use-on-every-site-i-build
24+
window.ga = window.ga || function() {
25+
(ga.q = ga.q || []).push(arguments);
26+
};
27+
ga('create', 'UA-33848682-1', 'auto');
28+
ga('set', 'transport', 'beacon');
29+
ga('send', 'pageview');
30+
</script>
31+
<script async src="https://www.google-analytics.com/analytics.js"></script>
32+
33+
<title>Redirecting...</title>
34+
<link rel="canonical" href="https://simpl.info/srcsetwvalues"/>
35+
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
36+
37+
<script>
38+
location.href='https://simpl.info/srcsetwvalues';
39+
</script>
40+
41+
</head>
42+
43+
<body>
44+
45+
</body>
46+
</html>

‎sw.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const FILES = [
1515
'index.html'
1616
];
1717

18-
const CACHE = 'v2.6';
18+
const CACHE = 'v2.7';
1919

2020
self.addEventListener('install', (event) => {
2121
console.log('Service worker:', event);

0 commit comments

Comments
 (0)