Sass-mixins

Deskrypcja.

Helpful links for weird cases:

IE

For breaking too long strings into multiple lines, instead of word-break: break-word it's better to use word-wrap: break-word. IE supports it.

When setting background-attachment: fixed the image is 'jumping' in IE's, here's the fix

IE9

Box-shadow not displayed in table

IE10

When using transform in keyframes, make sure to add all the values, even if they equal 0.

@keyframes close-notice
  0%
    +transform(translateX(-50%)) - DON'T
    +transform(translateY(0) translateX(-50%)) - DO
  100%
    +transform(translateY(-200%) translateX(-50%))

Flexbox cheatsheet

When justify-content: space-between is set, it won't work on inline (span) child elements, those need to be block.

FireFox

lol

It might happen that the fonticons are jagged/broken under Windows. In that case just pick the icons from Icomoon once again.

The placeholder text looks a bit different in Firefox, to keep it consistent add opacity: 1 to it.

Safari

When creating a gradient that should go to transparent, instead of $color-transparent it's mandatory to set it as rgba, or Safari will render it as black.

background: linear-gradient(to right, $color-white 25%, rgba($color-white, 0) 65%)

Good hack for Safari >= 9

@supports (-webkit-flow-into: break)

CSS hacks

Tooltip line break with 


Nice collection of hacks