Fanfan's Blog

Better than ever

0%

Something about setting responsive layout on IE

Posted on Edited on Disqus:

Recently, we are doing the so-called first big project, and one among those horrible nightmares is that we need to get our website support IE, well the good thing is that we only need to support one of these versions. This damn thing took me almost 3 days to eventually get a relatively - at least for now - good solution.

In the beginning, I got lost in those tricks or hacks or using extra style-sheet old tricks and ended up with using Conditional Style Sheets which worked for IE 9. But bad news is I had to use float layout for the whole page to get a similar result, which is quite unacceptable. Besides, how to transpile JavaScript so that let it work on IE is another story.

So continue Google and YouTube, the next try is to use @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /* IE10+ CSS styles go here */ } this trick, but here comes another problem, that is I cannot nest media query inside of it, or maybe I just don't know how to do that.

Then come to stage 3, kinda final solution at least for this project, that is to use feature query and combind it with media query, plus use some tricks to target IE 11 because IE 11 is acting just like a child who has no idea what to do or where to go, you just need to assign everything for him.

And! Sass rocks! I have no idea I can do so many unbellievable things with it. Sass function, loop thing is soooo cool! Really should spend some time on it.

Talk is cheap, show me the code.

This is just for IE's responsive layout

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
$elements: 12;

@for $i from 1 to $elements {
  .product-container> :nth-child(#{$i }) {
    -ms-grid-row: $i + $i -1 !important;
  }
}

/* Width between 650px - 975px 2 */
@media screen and (max-width: 975px) and (min-width: 650px) {
  .product-container {
    -ms-grid-columns: 300px 2em 300px;
    margin: auto;
  }

  $elements: 12;

  @for $i from 1 to $elements {
    .product-container> :nth-child(#{$i*2 - 1}) {
      -ms-grid-row: $i !important;
      -ms-grid-column: 1 !important;
    }

    .product-container> :nth-child(#{$i*2}) {
      -ms-grid-row: $i !important;
      -ms-grid-column: 3 !important;
    }
  }
}

/* Width between 976px - 1280px 3 */
@media screen and (max-width: 1360px) and (min-width: 976px) {
  .product-container {
    -ms-grid-columns: 300px 2rem 300px 2rem 300px;
    margin: auto;
  }

  $elements: 12;

  @for $i from 0 to $elements {

    /* 1/4/7/10/.. */
    .product-container> :nth-child(#{$i*3 + 1}) {
      -ms-grid-row: $i + 1 !important;
      -ms-grid-column: 1 !important;
    }

    /* 2/5/8/11/... */
    .product-container> :nth-child(#{$i*3 + 2}) {
      -ms-grid-row: $i + 1 !important;
      -ms-grid-column: 3 !important;
    }

    /* 3/6/9/12/... */
    .product-container> :nth-child(#{$i*3 + 3}) {
      -ms-grid-row: $i + 1 !important;
      -ms-grid-column: 5 !important;
    }
  }
}

/* When screen\'s width > 1280, 4 col */
@media screen and (min-width: 1360px) {
  .product-container {
    -ms-grid-columns: 300px 3rem 300px 3rem 300px 3rem 300px; //control max-width of each card
    margin: auto;
  }

  $elements: 12;

  @for $i from 0 to $elements {
    .product-container> :nth-child(#{$i*4 + 1}) {
      -ms-grid-row: $i + 1 !important;
      -ms-grid-column: 1 !important;
    }

    .product-container> :nth-child(#{$i*4 + 2}) {
      -ms-grid-row: $i + 1 !important;
      -ms-grid-column: 3 !important;
    }

    .product-container> :nth-child(#{$i*4 + 3}) {
      -ms-grid-row: $i + 1 !important;
      -ms-grid-column: 5 !important;
    }

    .product-container> :nth-child(#{$i*4 + 4}) {
      -ms-grid-row: $i + 1 !important;
      -ms-grid-column: 7 !important;
    }
  }
}

Feature queries and media queries can be nested

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@supports (display: grid) {
  .product-container {
    display: grid;
    grid-row-gap: 2em;
    justify-items: center;
    grid-template-columns: 300px;

    @media screen and (min-width: 680px) {
      grid-template-columns: repeat(2, 300px);
      grid-column-gap: calc((100vw - 680px) / 2);
    }

    @media screen and (min-width: 1012px) {
      grid-template-columns: repeat(3, 300px);
      grid-column-gap: calc((100vw - 964px) / 3);
    }

    @media screen and (min-width: 1321px) {
      grid-template-columns: repeat(4, 300px);
      grid-column-gap: 20px;
    }
  }
}

Feature query is quite flexable

You can put a feature query whenever and whereever you need

1
2
3
4
5
6
7
.grid-box {
    margin-bottom: 20px;

    @supports (display: grid) {
      margin-bottom: 0;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#p-main {
  overflow: visible;
  /* mobile */
  margin-top: 110px;

  @media screen and (min-width: 800px) {
    margin-top: 80px;
  }

  @supports(display: grid) {
    // margin-top: 350px;

    @media screen and (min-width: 800px) {
      // margin-top: 400px;
    }
  }
}

And whenever you need, you can always use this feature query to target IE 11 to set some specific style setting as you like.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@media all and (-ms-high-contrast:none) {

  /* IE11 */
  *::-ms-backdrop,
  #p-main {
    margin-bottom: 100px;
  }

  .wrapper {
    margin-bottom: 80px !important;
  }

  // Hide scroll bar on x-axis, just for IE
  .single-product-page__body {
    -ms-overflow-x: hidden;
    -ms-overflow-style: none;
  }
}