SASS Partials, Flexbox / CSS GRID and IE

HTML & CSS
1

Hey Sitepointers,
I have Flexbox and CSS Grid layouts for the same HTML stored in two different SASS Partials, and an old school float layout for old school renegade browsers. I want the Grid layout to run for most browsers and Flexbox to run for IE and Edge.

I’ve seen this used in CSS to check for Grid support:

@supports (grid-area: auto) {
  
/*  Grid Stuff  */

}

So my questions are:

  1. How is the above code implemented with SASS?
  2. Is there something like this for Flexbox & SASS?
  3. How do I then arrange the Partials? Does the order they are imported matter?

Thanks for any help!

:grin:

2

I know nothing about sass, but @supports can be used with any css property.
Though for the most part it’s not needed as browsers that don’t support a particular property will simply ignore it, so you can often get away with preceding a newer property with a fall-back. As a simple example:-

.cards {
    display: inline-block;
    display: flex;
}

So old browsers will set display to inline-block and ignore flex. Newer ones will overrite inline-block with flex.

You would generally use @supports to set properties that are supported in all browsers, but which will only apply when using the new property.
A contrived example:-

.cards {
   display: inline-block;  /*will be used by old browsers*/
   display: flex;   /*will be ignored by old browsers*/
   width: 33%;   /*will be used by old browsers and new ones*/
   flex-basis: 20em;   /*will be used by new browsers*/
}
@supports (flex-basis: 20em) {  /* but we don't want to use the % width, we want flex-basis to control the width */
   .cards {
      width: auto; /* we unset the width where flex-basis can be used */
   }
}

My point being that saying:-

.cards { display: inline-block ;}

@supports (display:flex) {
   .cards { display: flex; }
}

…is a waste of time, as old browser will ignore an unsupported property anyway.

3 Likes
3

Thanks Sam!
Your answer got me thinking and helped me figure out the answers to my questions with a solution that seems to work in modern browsers! (note, I dont care about older versions of IE…)

Question 1.

 /* style applied to all browsers; makes text more visible in my tests */
/* I just used some simple H2s to test with */
body
    color: white
    

//   -------  Microsoft Edge styles  (tested on Version: 40.15063.674.0)
@supports (-ms-ime-align: auto)
  body
      background-color: gray


//   -------  IE 10 & 11 styles
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active)
    body
        background: blue


//   -------  Styles for Modern Browsers 
@supports (grid-area:auto)
    body
        background: orangered

Question 2.
For my usecase, I want to use Flexbox to target IE and Edge only, so I will place my Flexbox styles inside of the IE and Edge codes. All other browsers will get CSS Grid styles.

Question 3.
My solution works whether the SASS is complied from the same SASS stylesheet or from a partial!

1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.