I am curious if it is possible to modify some CSS when viewed in a different browser.
For instance, I have this CSS for a flexbox div:
.wdFlex {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-moz-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
-webkit-box-align: center;
-moz-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
This CSS works well in many browsers like Chrome, Safari, Firefox, and IE10+, but not in IE9 which does not support flexbox. I want to experiment with flexbox while ensuring IE9 compatibility. Is there a way to achieve this without creating a separate CSS file for IE9?
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
Is there a way to adjust the CSS specifically for IE9 within the main CSS file, similar to replacing the flexbox properties with something else for IE9 compatibility?
.wdFlex {
display: inline-block;
}
I hope my question makes sense :)
Thank you in advance.