CSS Styling based on Internet Explorer
If you need to apply specific styles for different browsers, I have a suggestion:
A straightforward solution is to use this JavaScript library, which allows you to easily set styles for each browser and operating system combination:
BrowserClass.js
By using this library, you will receive a class name on the body tag indicating the current browser name and version, along with the operating system being used.
To get started, include the following file:
<script src="js/browserclass.js"></script>
For instance, on Windows 8.1 with the latest Internet Explorer, you would see:
<body class="ie ie11 win desktop">
In your stylesheet, you can reference it like so:
(with .sass styling)
body.ie
+declare-font-face('Open Sans Light', 'OpenSans-Light-webfont', 200)
Note:
Conditional Comments in IE are only effective up to IE9!
SASS Mixin
Alternatively, if you are utilizing SASS, here is a useful mixin:
// ---------------------
// Font Face Mixin
// ---------------------
=declare-font-face($font-family, $font-filename, $font-weight: normal, $font-style: normal, $font-stretch: normal)
@font-face
font-family: #{$font-family}
src: url("../fonts/#{$font-filename}.eot")
src: url("../fonts/#{$font-filename}.eot?#iefix") format("embedded-opentype"), url("../fonts/#{$font-filename}.svg##{$font-family}") format("svg"), url("../fonts/#{$font-filename}.woff") format("woff"), url("../fonts/#{$font-filename}.ttf") format("truetype")
font-weight: $font-weight
font-style: $font-style
font-stretch: $font-stretch
Usage:
+declare-font-face('Open Sans Light', 'OpenSans-Light-webfont', 200)