├── LICENSE ├── README.md └── _hacks.scss /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) [year] [fullname] 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Browser Hack Mixins for Sass 2 | ### Apply your CSS to a specific browser 3 | 4 | [![deprecated](http://badges.github.io/stability-badges/dist/deprecated.svg)](http://github.com/badges/stability-badges) 5 | 6 | 7 | 8 | ## Requirements 9 | - Sass 3.3+ 10 | 11 | ## How To Use 12 | 13 | 1. Import `_hacks.scss` file to your SCSS code : `@import "hacks";` 14 | 2. Use the mixin you want: 15 | - `@include [Mixin_Name]( 'selector', (property: value) )` 16 | - For example: 17 | ``` 18 | @include only_ie9( '.my_element', (color: red)) 19 | ``` 20 | Or: 21 | ``` 22 | @include only_ff28_above( '.my_element', ( 23 | background-color: green, 24 | display: flex, 25 | margin: 2em, 26 | )) 27 | ``` 28 | 29 | ## List of Mixins 30 | 1. Firefox CSS Hacks 31 | - only_ff 32 | - only_ff2 33 | - only_ff2_above 34 | - only_ff3_above 35 | - only_ff6_above 36 | - only_ff16_above 37 | - only_ff21_above 38 | - only_ff24_above 39 | - only_ff25_above 40 | - only_ff26_above 41 | - only_ff27_above 42 | - only_ff28_above 43 | - only_ff30_above 44 | 2. Webkit CSS Hacks 45 | - only_webkit 46 | - only_chrome 47 | - only_safari 48 | - only_safari9 49 | - only_ios 50 | - only_safari_no_ios 51 | - only_opera9_safari2 52 | 3. Opera CSS Hacks 53 | - only_opera 54 | - only_opera11 55 | 4. Internet Explorer CSS Hacks 56 | - only_edge 57 | - only_ie6 58 | - only_ie7 59 | - only_ie7_below 60 | - only_ie8 61 | - only_ie8_below 62 | - only_ie9 63 | - only_ie9_below 64 | - only_ie10_above 65 | - only_ie11 66 | - only_ie11_above 67 | - no_ie6 68 | - only_ie9_saf4_above 69 | 5. Other CSS Hacks 70 | - no_ie_safari6 71 | -------------------------------------------------------------------------------- /_hacks.scss: -------------------------------------------------------------------------------- 1 | 2 | /* ----------------------------------- // 3 | // CSS Hacks Mixins for Sass 4 | // ----------------------------------- // 5 | 6 | How to use: 7 | 8 | @include [Mixin_Name]( 'selector', (property: value) ) 9 | 10 | Example: 11 | 12 | @include only_ie9( '.my_element', (color: red) ) 13 | @include only_ff28_above( '.my_element', ( 14 | background-color: green, 15 | display: flex, 16 | margin: 2em, 17 | )) 18 | 19 | Tips: 20 | - Use firefox mixins before IE mixins. Sometimes Firefox wants to precess the IE css but it can't and skips it's own CSS! 21 | 22 | // ----------------------------------- // 23 | 24 | List of Mixins: 25 | 26 | only_ff 27 | only_ff2 28 | only_ff2_above 29 | only_ff3_above 30 | only_ff6_above 31 | only_ff16_above 32 | only_ff21_above 33 | only_ff24_above 34 | only_ff25_above 35 | only_ff26_above 36 | only_ff27_above 37 | only_ff28_above 38 | only_ff30_above 39 | only_webkit 40 | only_chrome 41 | only_safari 42 | only_safari9 43 | only_ios 44 | only_safari_no_ios 45 | only_opera9_safari2 46 | only_opera 47 | only_opera11 48 | only_edge 49 | only_ie6 50 | only_ie7 51 | only_ie7_below 52 | only_ie8 53 | only_ie8_below 54 | only_ie9 55 | only_ie9_below 56 | only_ie10_above 57 | only_ie11 58 | only_ie11_above 59 | no_ie6 60 | only_ie9_saf4_above 61 | no_ie_safari6 62 | 63 | // ----------------------------------- */ 64 | 65 | 66 | /* ----------------------------------- // 67 | // Firefox CSS Hacks 68 | // ----------------------------------- */ 69 | 70 | 71 | /*--- Only Firefox ---*/ 72 | @mixin only_ff($selector, $map){ 73 | @-moz-document url-prefix() { 74 | #{$selector} { 75 | @each $property, $value in ($map) { 76 | #{$property}: $value; 77 | } 78 | } 79 | } 80 | } 81 | 82 | /*--- Only Firefox 1.5 and Firefox 2 ---*/ 83 | @mixin only_ff2($selector, $map){ 84 | body:empty #{$selector} { 85 | @each $property, $value in ($map) { 86 | #{$property}: $value; 87 | } 88 | } 89 | } 90 | 91 | /*--- Only Firefox ≥ 2 ---*/ 92 | @mixin only_ff2_above($selector, $map){ 93 | @at-root{ 94 | body:last-child & #{$selector} , x:-moz-any-link, x:default{ 95 | @each $property, $value in ($map) { 96 | #{$property}: $value; 97 | } 98 | } 99 | } 100 | } 101 | 102 | /*--- Only Firefox ≥ 3 ---*/ 103 | @mixin only_ff3_above($selector, $map){ 104 | @at-root{ 105 | & #{$selector} , x:-moz-any-link, x:default{ 106 | @each $property, $value in ($map) { 107 | #{$property}: $value; 108 | } 109 | } 110 | } 111 | } 112 | 113 | /*--- Only Firefox ≥ 6 ---*/ 114 | @mixin only_ff6_above($selector, $map){ 115 | _::-moz-progress-bar, body:last-child #{$selector} { 116 | @each $property, $value in ($map) { 117 | #{$property}: $value; 118 | } 119 | } 120 | } 121 | 122 | /*--- Only Firefox ≥ 16 ---*/ 123 | @mixin only_ff16_above($selector, $map){ 124 | @supports (-moz-appearance:meterbar){ 125 | #{$selector} { 126 | @each $property, $value in ($map) { 127 | #{$property}: $value; 128 | } 129 | } 130 | } 131 | } 132 | 133 | /*--- Only Firefox ≥ 21 ---*/ 134 | @mixin only_ff21_above($selector, $map){ 135 | _::-moz-range-track, body:last-child #{$selector} { 136 | @each $property, $value in ($map) { 137 | #{$property}: $value; 138 | } 139 | } 140 | } 141 | 142 | /*--- Only Firefox ≥ 24 ---*/ 143 | @mixin only_ff24_above($selector, $map){ 144 | @supports (-moz-appearance:meterbar) and (cursor:zoom-in){ 145 | #{$selector} { 146 | @each $property, $value in ($map) { 147 | #{$property}: $value; 148 | } 149 | } 150 | } 151 | } 152 | 153 | /*--- Only Firefox ≥ 25 ---*/ 154 | @mixin only_ff25_above($selector, $map){ 155 | @supports (-moz-appearance:meterbar) and (background-attachment:local){ 156 | #{$selector} { 157 | @each $property, $value in ($map) { 158 | #{$property}: $value; 159 | } 160 | } 161 | } 162 | } 163 | 164 | /*--- Only Firefox ≥ 26 ---*/ 165 | @mixin only_ff26_above($selector, $map){ 166 | @supports (-moz-appearance:meterbar) and (image-orientation:90deg){ 167 | #{$selector} { 168 | @each $property, $value in ($map) { 169 | #{$property}: $value; 170 | } 171 | } 172 | } 173 | } 174 | 175 | /*--- Only Firefox ≥ 27 ---*/ 176 | @mixin only_ff27_above($selector, $map){ 177 | @supports (-moz-appearance:meterbar) and (all:initial){ 178 | #{$selector} { 179 | @each $property, $value in ($map) { 180 | #{$property}: $value; 181 | } 182 | } 183 | } 184 | } 185 | 186 | /*--- Only Firefox ≥ 28 ---*/ 187 | @mixin only_ff28_above($selector, $map){ 188 | @supports (-moz-appearance:meterbar) and (list-style-type:japanese-formal){ 189 | #{$selector} { 190 | @each $property, $value in ($map) { 191 | #{$property}: $value; 192 | } 193 | } 194 | } 195 | } 196 | 197 | /*--- Only Firefox ≥ 30 ---*/ 198 | @mixin only_ff30_above($selector, $map){ 199 | @supports (-moz-appearance:meterbar) and (background-blend-mode:difference,normal){ 200 | #{$selector} { 201 | @each $property, $value in ($map) { 202 | #{$property}: $value; 203 | } 204 | } 205 | } 206 | } 207 | 208 | 209 | 210 | /* ----------------------------------- // 211 | // Webkit CSS Hacks 212 | // ----------------------------------- */ 213 | 214 | 215 | /*--- Only Webkit (Chrome, Safari, Opera ≥ 14) ---*/ 216 | @mixin only_webkit($selector, $map){ 217 | .selector:not(*:root) { 218 | #{$selector} { 219 | @each $property, $value in ($map) { 220 | #{$property}: $value; 221 | } 222 | } 223 | } 224 | } 225 | 226 | /*--- Only Chrome 28+, Opera ≥ 14 ---*/ 227 | @mixin only_chrome($selector, $map){ 228 | @media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { 229 | #{$selector} { 230 | @each $property, $value in ($map) { 231 | #{$property}: $value; 232 | } 233 | } 234 | } 235 | } 236 | 237 | /*--- Only Safari ≥ 6.1 ---*/ 238 | // Dark magic, Don't touch 239 | @function sf_func1($selector, $property) { 240 | @return '@media screen and(min-color-index:0)and(-webkit-min-device-pixel-ratio:0){@media{'+& $selector+'{'+$property; 241 | } 242 | @function sf_func2($value) { 243 | @return $value+'}}}'; 244 | } 245 | @mixin only_safari($selector, $map){ 246 | @at-root{ 247 | @each $property, $value in ($map) { 248 | #{sf_func1($selector, $property)}: #{sf_func2($value)}; 249 | } 250 | } 251 | } 252 | 253 | /*--- Only Safari ≥ 9 ---*/ 254 | @mixin only_safari9($selector, $map){ 255 | @supports (overflow:-webkit-marquee) and (justify-content:inherit){ 256 | #{$selector} { 257 | @each $property, $value in ($map) { 258 | #{$property}: $value; 259 | } 260 | } 261 | } 262 | } 263 | 264 | /*--- Only iOS Safari ≥ 9 ---*/ 265 | @mixin only_ios($selector, $map){ 266 | @supports (-webkit-text-size-adjust:none) and (not (-ms-accelerator:true)) and (not (-moz-appearance:none)){ 267 | #{$selector} { 268 | @each $property, $value in ($map) { 269 | #{$property}: $value; 270 | } 271 | } 272 | } 273 | } 274 | /*--- Only Safari ≥ 9 (Non iOS) ---*/ 275 | @mixin only_safari_no_ios($selector, $map){ 276 | _:-webkit-full-screen:not(:root:root),#{$selector} { 277 | @each $property, $value in ($map) { 278 | #{$property}: $value; 279 | } 280 | } 281 | } 282 | 283 | /*--- Only Opera ≤ 9.27, Safari ≤ 2 ---*/ 284 | @mixin only_opera9_safari2($selector, $map){ 285 | #{'html:first-child '} #{$selector} { 286 | @each $property, $value in ($map) { 287 | #{$property}: $value; 288 | } 289 | } 290 | } 291 | 292 | 293 | 294 | /* ----------------------------------- // 295 | // Opera CSS Hacks 296 | // ----------------------------------- */ 297 | 298 | 299 | /*--- Only Opera ≥ 9.5 ---*/ 300 | @mixin only_opera($selector, $map){ 301 | _:-o-prefocus, body:last-child #{$selector} { 302 | @each $property, $value in ($map) { 303 | #{$property}: $value; 304 | } 305 | } 306 | } 307 | 308 | /*--- Only Opera ≤ 11 ---*/ 309 | @mixin only_opera11($selector, $map){ 310 | @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){ 311 | #{$selector} { 312 | @each $property, $value in ($map) { 313 | #{$property}: $value; 314 | } 315 | } 316 | } 317 | } 318 | 319 | /* ----------------------------------- // 320 | // Edge CSS Hacks 321 | // ----------------------------------- */ 322 | 323 | @mixin only_edge($selector, $map){ 324 | @supports (-ms-accelerator:true) { 325 | #{$selector} { 326 | @each $property, $value in ($map) { 327 | #{$property}: $value; 328 | } 329 | } 330 | } 331 | } 332 | 333 | /* ----------------------------------- // 334 | // Internet Explorer CSS Hacks 335 | // ----------------------------------- */ 336 | 337 | /*--- Only IE ≤ 6 ---*/ 338 | @mixin only_ie6($selector, $map){ 339 | #{$selector} { 340 | #{'* html '} { 341 | @each $property, $value in ($map) { 342 | #{$property}: $value; 343 | } 344 | } 345 | } 346 | } 347 | 348 | /*--- Only IE7 ---*/ 349 | @mixin only_ie7($selector, $map){ 350 | #{$selector} { 351 | #{'*+html '} { 352 | @each $property, $value in ($map) { 353 | #{$property}: $value; 354 | } 355 | } 356 | } 357 | } 358 | 359 | /*--- Only IE ≤ 7 ---*/ 360 | @mixin only_ie7_below($selector, $map){ 361 | #{$selector} { 362 | #{'*'} { 363 | @each $property, $value in ($map) { 364 | #{$property}: $value; 365 | } 366 | } 367 | } 368 | } 369 | 370 | /*--- Only IE8 ---*/ 371 | @mixin only_ie8($selector, $map){ 372 | #{$selector} { 373 | @each $property, $value in ($map) { 374 | #{$property}: $value+\0#{'/'}; 375 | } 376 | } 377 | } 378 | 379 | /*--- Only IE ≤ 8 ---*/ 380 | @mixin only_ie8_below($selector, $map){ 381 | #{$selector} { 382 | @each $property, $value in ($map) { 383 | #{$property}: $value+#{\9}; 384 | } 385 | } 386 | } 387 | 388 | /*--- Only IE9 ---*/ 389 | @mixin only_ie9($selector, $map){ 390 | #{$selector} { 391 | @each $property, $value in ($map) { 392 | #{$property}: $value#{\0/IE9}; 393 | } 394 | } 395 | } 396 | 397 | /*--- Only IE ≤ 9 ---*/ 398 | @mixin only_ie9_below($selector, $map){ 399 | html[lang=\en] #{$selector} { 400 | @each $property, $value in ($map) { 401 | #{$property}: $value; 402 | } 403 | } 404 | } 405 | 406 | /*--- Only IE10 ---*/ 407 | @mixin only_ie10_above($selector, $map){ 408 | @media all and (-ms-high-contrast:none){ 409 | *::-ms-backdrop, #{$selector} { 410 | @each $property, $value in ($map) { 411 | #{$property}: $value; 412 | } 413 | } 414 | } 415 | } 416 | 417 | /*--- Only IE ≤ 11 ---*/ 418 | @mixin only_ie11($selector, $map){ 419 | @media all and (-ms-high-contrast:none){ 420 | *::-ms-backdrop, #{$selector} { 421 | @each $property, $value in ($map) { 422 | #{$property}: $value+\0; 423 | } 424 | } 425 | } 426 | } 427 | 428 | /*--- Only IE ≥ 11 ---*/ 429 | @mixin only_ie11_above($selector, $map){ 430 | #{'_:-ms-fullscreen, :root '} #{$selector} { 431 | @each $property, $value in ($map) { 432 | #{$property}: $value; 433 | } 434 | } 435 | } 436 | 437 | /*--- Anything but IE6 ---*/ 438 | @mixin no_ie6($selector, $map){ 439 | #{'html>body '} #{$selector} { 440 | @each $property, $value in ($map) { 441 | #{$property}: $value; 442 | } 443 | } 444 | } 445 | 446 | /*--- Only IE ≥ 9, safari4, android ≥ 2.3 ---*/ 447 | @mixin only_ie9_saf4_above($selector, $map){ 448 | @media screen and (min-width:0\0) { 449 | #{$selector} { 450 | @each $property, $value in ($map) { 451 | #{$property}: $value; 452 | } 453 | } 454 | } 455 | } 456 | 457 | /* ----------------------------------- // 458 | // Other CSS Hacks 459 | // ----------------------------------- */ 460 | 461 | /*--- Everything but IE and Safari ≤ 6 ---*/ 462 | @mixin no_ie_safari6($selector, $map){ 463 | @media screen { 464 | @media (min-width: 0px) { 465 | #{$selector} { 466 | @each $property, $value in ($map) { 467 | #{$property}: $value; 468 | } 469 | } 470 | } 471 | } 472 | } 473 | 474 | 475 | 476 | 477 | 478 | --------------------------------------------------------------------------------