Demos Back to Docs

Who In The World Uses IE8

49 of 124
A card style container for grids explaining IE 8 usage by region.
Result Full HTML CSS JS
Edit Download

Who In The World Uses IE8?

Source: "I Used The Web For A Day On Internet Explorer 8" by Chris Ashton for Smashing Magazine

Internet Explorer 8 Usage by Region

Per-continent IE8 desktop proportion
February 2018 — January 2019

Internet Explorer 8 Usage by Asian Region

Per-country IE8 desktop proportion
February 2018 — January 2019

Internet Explorer 8 Usage by African Region

Per-country IE8 desktop proportion
February 2018 — January 2019

Full Code

<!DOCTYPE html>
<html class="zg-html">

<head>
  <meta charset="utf-8">
  <title>Who In The World Uses IE8? via Smashing Magazine | ZingGrid</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    .zg-body {
      background: #f7f7f7;
      font-family: 'Lora', serif;
      padding-left: 20px;
      padding-right: 20px;
    }

    .zg-body h1.main {
      font-size: 23px;
      font-weight: normal;
      color: #68798e;
      line-height: 1.5;
      text-align: center;
      padding: 50px 50px 0 50px;
      max-width: 450px;
      margin: 0 auto 20px auto;
    }

    .zg-body p.source {
      color: #68798e;
      line-height: 1.5;
      text-align: center;
      font-style: italic;
      font-size: 13px;
      letter-spacing: .05em;
      max-width: 400px;
      margin: 0 auto 30px auto;
    }

    .zg-body p.source a {
      color: #00aeef;
      text-decoration: none;
    }

    .zg-body .wrapper {
      display: flex;
      justify-content: center;
    }

    zing-grid {
      max-width: 450px;
      font-family: 'Lora', serif;
      color: #52565b;
      border: none;
      background: none;
      opacity: 1;
      --theme-color-primary: #52565b;
    }

    zing-grid.loading {
      opacity: 0;
      transition: opacity .3s ease-out;
    }

    zing-grid.loading * {
      opacity: 0;
    }

    zg-caption {
      padding: 10px 20px;
      background: none;
      border: 1px solid #eeeeee;
      background: #ffffff;
    }

    zg-caption h1 {
      font-size: 15px;
      font-weight: bold;
      color: #68798e;
      margin-bottom: 5px;
    }

    zg-caption p {
      font-size: 12px;
      color: #68798e;
      margin-top: 0;
      line-height: 1.6;
    }

    zg-caption hr {
      border-top: none;
      border-bottom: 1px solid #eeeeee;
      margin: 0;
    }

    zg-body,
    zg-head {
      border: 1px solid #eeeeee;
      border-top: none;
    }

    zg-body {
      background: #ffffff;
    }

    zg-caption {
      border-radius: 10px 10px 0 0;
      -moz-border-radius: 10px 10px 0 0;
      -webkit-border-radius: 10px 10px 0 0;
    }

    zg-head-cell {
      font-size: 12px;
      font-weight: bold;
      color: #68798e;
    }

    zg-column:first-child {
      max-width: 60px;
    }

    zg-column:nth-child(2) {
      background: #f7f7f7;
    }

    zg-pager {
      font-size: 10px;
      border: 1px solid #eeeeee;
      border-top: none;
      border-radius: 0 0 10px 10px;
      -moz-border-radius: 0 0 10px 10px;
      -webkit-border-radius: 0 0 10px 10px;
      background: #ffffff;
    }

    .zg-body .container {
      margin: 20px;
      border-radius: 10px;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.05),
        0 4px 8px 0 rgba(0, 0, 0, 0.09);
      -webkit-box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.05),
        0 4px 8px 0 rgba(0, 0, 0, 0.09);
      -moz-box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.05),
        0 4px 8px 0 rgba(0, 0, 0, 0.09);
      max-width: 450px;
    }

    @media (max-width: 1100px) {
      .zg-body .wrapper {
        display: block;
        justify-content: center;
      }

      .zg-body .container {
        margin: 0 auto 30px auto;
      }
    }

    zing-grid[loading] {
      height: 677px;
    }
  </style>
</head>

<body class="zg-body">

  <link href="https://fonts.googleapis.com/css?family=Lora:400,400i,700" rel="stylesheet">

  <h1 class="main">Who In The World Uses IE8?</h1>
  <p class="source">Source: <strong>"<a href="https://www.smashingmagazine.com/2019/03/web-on-internet-explorer-ie8/" target="_blank" crossorigin>I Used The Web For A Day On Internet Explorer 8</a>"</strong> by <a href="https://www.smashingmagazine.com/author/chrisbashton" target="_blank" crossorigin>Chris Ashton</a> for <a href="https://www.smashingmagazine.com/" target="_blank" crossorigin>Smashing Magazine</a></p>
  <div class="wrapper">
    <div class="container">
      <zing-grid compact sort layout="row" viewport-stop layout-controls="disabled" pager page-size="6" page-size-options="3,6,9" class="loading">
        <zg-caption>
          <h1>Internet Explorer 8 Usage by Region</h1>
          <hr>
          <p>Per-continent IE8 desktop proportion<br> <em>February 2018 — January 2019</em></p>
        </zg-caption>
        <zg-data data='[
            { "Rank": "1", "continent": "Oceania", "Percentage": "0.09%"},
            { "Rank": "2", "continent": "Europe", "Percentage": "0.25%"},
            { "Rank": "3", "continent": "South America", "Percentage": "0.30%"},
            { "Rank": "4", "continent": "North America", "Percentage": "0.35%"},
            { "Rank": "5", "continent": "Africa", "Percentage": "0.48%"},
            { "Rank": "6", "continent": "Asia", "Percentage": "0.50%"}
          ]'></zg-data>
      </zing-grid>
    </div>
    <div class="container">
      <zing-grid compact sort layout="row" viewport-stop layout-controls="disabled" pager page-size="6" page-size-options="3,6,9">
        <zg-caption>
          <h1>Internet Explorer 8 Usage by Asian Region</h1>
          <hr>
          <p>Per-country IE8 desktop proportion<br> <em>February 2018 — January 2019</em></p>
        </zg-caption>
        <zg-data data='[
            { "Rank": "1", "country": "Iran", "Percentage": "3.99%"},
            { "Rank": "2", "country": "China", "Percentage": "1.99%"},
            { "Rank": "3", "country": "North Korea", "Percentage": "1.38%"},
            { "Rank": "4", "country": "Turkmenistan", "Percentage": "1.31%"},
            { "Rank": "5", "country": "Afghanistan", "Percentage": "1.27%"},
            { "Rank": "6", "country": "Cambodia", "Percentage": "1.05%"},
            { "Rank": "7", "country": "Yemen", "Percentage": "0.63%"},
            { "Rank": "8", "country": "Taiwan", "Percentage": "0.62%"},
            { "Rank": "9", "country": "Pakistan", "Percentage": "0.57%"}
          ]'></zg-data>
      </zing-grid>
    </div>
    <div class="container">
      <zing-grid compact sort layout="row" viewport-stop layout-controls="disabled" pager page-size="6" page-size-options="3,6,9">
        <zg-caption>
          <h1>Internet Explorer 8 Usage by African Region</h1>
          <hr>
          <p>Per-country IE8 desktop proportion<br> <em>February 2018 — January 2019</em></p>
        </zg-caption>
        <zg-data data='[
            { "Rank": "1", "country": "Eritrea", "Percentage": "3.24%"},
            { "Rank": "2", "country": "Botswana", "Percentage": "1.37%"},
            { "Rank": "3", "country": "Sudan & South Sudan", "Percentage": "1.33%"},
            { "Rank": "4", "country": "Niger", "Percentage": "1.29%"},
            { "Rank": "5", "country": "Mozambique", "Percentage": "1.19%"},
            { "Rank": "6", "country": "Mauritania", "Percentage": "1.18%"},
            { "Rank": "7", "country": "Guinea", "Percentage": "1.12%"},
            { "Rank": "8", "country": "Democratic Republic of the Congo", "Percentage": "1.07%"},
            { "Rank": "9", "country": "Zambia", "Percentage": "0.94%"}
          ]'></zg-data>
      </zing-grid>
    </div>
  </div>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // Custom loading class for CSS handling
    const zgLoaded = document.querySelector('zing-grid');
    zgLoaded.addEventListener('grid:ready', () => {
      setTimeout(() => zgLoaded.classList.remove('loading'), 0);
    });
  </script>
</body>

</html>
<!DOCTYPE html>
<html class="zg-html">
  <head>
    <meta charset="utf-8">
    <title>Who In The World Uses IE8? via Smashing Magazine | ZingGrid</title>
    <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  </head>
  <body class="zg-body">

    <link href="https://fonts.googleapis.com/css?family=Lora:400,400i,700" rel="stylesheet">

    <h1 class="main">Who In The World Uses IE8?</h1>
    <p class="source">Source: <strong>"<a href="https://www.smashingmagazine.com/2019/03/web-on-internet-explorer-ie8/" target="_blank" crossorigin>I Used The Web For A Day On Internet Explorer 8</a>"</strong> by <a href="https://www.smashingmagazine.com/author/chrisbashton" target="_blank" crossorigin>Chris Ashton</a> for <a href="https://www.smashingmagazine.com/" target="_blank" crossorigin>Smashing Magazine</a></p>
    <div class="wrapper">
      <div class="container">
        <zing-grid
          compact
          sort
          layout="row"
          viewport-stop
          layout-controls="disabled"
          pager
          page-size="6"
          page-size-options="3,6,9"
          class="loading"
        >
          <zg-caption>
            <h1>Internet Explorer 8 Usage by Region</h1>
            <hr>
            <p>Per-continent IE8 desktop proportion<br> <em>February 2018 — January 2019</em></p>
          </zg-caption>
          <zg-data data='[
            { "Rank": "1", "continent": "Oceania", "Percentage": "0.09%"},
            { "Rank": "2", "continent": "Europe", "Percentage": "0.25%"},
            { "Rank": "3", "continent": "South America", "Percentage": "0.30%"},
            { "Rank": "4", "continent": "North America", "Percentage": "0.35%"},
            { "Rank": "5", "continent": "Africa", "Percentage": "0.48%"},
            { "Rank": "6", "continent": "Asia", "Percentage": "0.50%"}
          ]'></zg-data>
        </zing-grid>
      </div>
      <div class="container">
        <zing-grid
          compact
          sort
          layout="row"
          viewport-stop
          layout-controls="disabled"
          pager
          page-size="6"
          page-size-options="3,6,9">
          <zg-caption>
            <h1>Internet Explorer 8 Usage by Asian Region</h1>
            <hr>
            <p>Per-country IE8 desktop proportion<br> <em>February 2018 — January 2019</em></p>
          </zg-caption>
          <zg-data data='[
            { "Rank": "1", "country": "Iran", "Percentage": "3.99%"},
            { "Rank": "2", "country": "China", "Percentage": "1.99%"},
            { "Rank": "3", "country": "North Korea", "Percentage": "1.38%"},
            { "Rank": "4", "country": "Turkmenistan", "Percentage": "1.31%"},
            { "Rank": "5", "country": "Afghanistan", "Percentage": "1.27%"},
            { "Rank": "6", "country": "Cambodia", "Percentage": "1.05%"},
            { "Rank": "7", "country": "Yemen", "Percentage": "0.63%"},
            { "Rank": "8", "country": "Taiwan", "Percentage": "0.62%"},
            { "Rank": "9", "country": "Pakistan", "Percentage": "0.57%"}
          ]'></zg-data>
        </zing-grid>
      </div>
      <div class="container">
        <zing-grid
          compact
          sort
          layout="row"
          viewport-stop
          layout-controls="disabled"
          pager
          page-size="6"
          page-size-options="3,6,9">
          <zg-caption>
            <h1>Internet Explorer 8 Usage by African Region</h1>
            <hr>
            <p>Per-country IE8 desktop proportion<br> <em>February 2018 — January 2019</em></p>
          </zg-caption>
          <zg-data data='[
            { "Rank": "1", "country": "Eritrea", "Percentage": "3.24%"},
            { "Rank": "2", "country": "Botswana", "Percentage": "1.37%"},
            { "Rank": "3", "country": "Sudan & South Sudan", "Percentage": "1.33%"},
            { "Rank": "4", "country": "Niger", "Percentage": "1.29%"},
            { "Rank": "5", "country": "Mozambique", "Percentage": "1.19%"},
            { "Rank": "6", "country": "Mauritania", "Percentage": "1.18%"},
            { "Rank": "7", "country": "Guinea", "Percentage": "1.12%"},
            { "Rank": "8", "country": "Democratic Republic of the Congo", "Percentage": "1.07%"},
            { "Rank": "9", "country": "Zambia", "Percentage": "0.94%"}
          ]'></zg-data>
        </zing-grid>
      </div>
    </div>
  </body>
</html>
.zg-body {
  background:#f7f7f7;
  font-family: 'Lora', serif;
  padding-left: 20px;
  padding-right: 20px;
}

.zg-body h1.main {
  font-size: 23px;
  font-weight: normal;
  color: #68798e;
  line-height: 1.5;
  text-align: center;
  padding: 50px 50px 0 50px;
  max-width: 450px;
  margin: 0 auto 20px auto;
}

.zg-body p.source {
  color: #68798e;
  line-height: 1.5;
  text-align: center;
  font-style: italic;
  font-size: 13px;
  letter-spacing: .05em;
  max-width: 400px;
  margin: 0 auto 30px auto;
}

.zg-body p.source a {
 	color: #00aeef;
  text-decoration: none;
}

.zg-body .wrapper {
  display: flex;
	justify-content: center;
}

zing-grid {
  max-width: 450px;
  font-family: 'Lora', serif;
  color: #52565b;
  border: none;
  background: none;
  opacity: 1;
	--theme-color-primary: #52565b;
}
zing-grid.loading { opacity:0; transition:opacity .3s ease-out; }
zing-grid.loading * { opacity:0; }

zg-caption {
  padding: 10px 20px;
  background: none;
  border: 1px solid #eeeeee;
  background: #ffffff;
}

zg-caption h1 {
  font-size: 15px;
  font-weight: bold;
  color: #68798e;
  margin-bottom: 5px;
}

zg-caption p {
  font-size: 12px;
  color: #68798e;
  margin-top: 0;
  line-height: 1.6;
}

zg-caption hr {
  border-top: none;
  border-bottom: 1px solid #eeeeee;
  margin: 0;
}

zg-body,
zg-head {
  border: 1px solid #eeeeee;
  border-top: none;
}

zg-body {
  background: #ffffff;
}

zg-caption {
  border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  -webkit-border-radius: 10px 10px 0 0;
}

zg-head-cell {
  font-size: 12px;
  font-weight: bold;
  color: #68798e;
}

zg-column:first-child {
	max-width: 60px;
}

zg-column:nth-child(2) {
  background: #f7f7f7;
}

zg-pager {
  font-size: 10px;
  border: 1px solid #eeeeee;
  border-top: none;
  border-radius: 0 0 10px 10px;
  -moz-border-radius: 0 0 10px 10px;
  -webkit-border-radius: 0 0 10px 10px;
  background: #ffffff;
}

.zg-body .container {
  margin: 20px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  box-shadow: 0 8px 25px 0 rgba(0,0,0,0.05),
      0 4px 8px 0 rgba(0,0,0,0.09);
	-webkit-box-shadow: 0 8px 25px 0 rgba(0,0,0,0.05),
      0 4px 8px 0 rgba(0,0,0,0.09);
	-moz-box-shadow: 0 8px 25px 0 rgba(0,0,0,0.05),
      0 4px 8px 0 rgba(0,0,0,0.09);
  max-width: 450px;
}

@media (max-width: 1100px) {
  .zg-body .wrapper {
    display: block;
    justify-content: center;
  }    
  .zg-body .container {
    margin: 0 auto 30px auto;
  }
}
// Custom loading class for CSS handling
const zgLoaded = document.querySelector('zing-grid');
zgLoaded.addEventListener('grid:ready', () => {
  setTimeout(() => zgLoaded.classList.remove('loading'), 0);
});

Related Docs

Interested in this demo? Modify it to your needs in ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!

Edit in Studio

Related Docs

Demo Gallery