CITguy/moar-elements

Audit unnecessary mixins

CITguy opened this issue · 16 comments

CITguy commented

The purpose of this project should be to:

  1. support experimental features for modern browser development (IE11 and evergreen browsers)
  2. provide convenience mixins to more complex CSS functionality
CITguy commented

opacity is supported by IE9+ and evergreen browsers (caniuse).

  • .opacity() needs removed
  • 👍1
CITguy commented

box-sizing is supported by IE8+ and evergreen browsers (caniuse).

  • .box-sizing() needs removed
  • 👍1
CITguy commented

user-select is still an experimental feature requiring vendor prefixes (caniuse).

  • .user-select()
  • 👍1
CITguy commented

background-clip is supported by IE9+ and evergreen browsers (caniuse).

  • .background-clip() needs removed
  • 👍1
CITguy commented

transform is supported by IE10+ and evergreen browsers (caniuse).

  • .transform() needs removed
  • .rotate() needs updated
  • .scale() needs updated
  • .translate() needs updated
  • 👍1
CITguy commented

box-shadow is supported by IE9+ and evergreen browsers (caniuse).

  • .box-shadow() needs removed
  • .inner-shadow() needs updated
  • .drop-shadow() needs updated
  • 👍1
CITguy commented

animation-duration is supported by IE10+ and evergreen browsers (caniuse).

  • .animation-duration() needs removed
  • 👍1
CITguy commented

Column properties are supported by IE10+ and evergreen browsers (caniuse).

  • .columns() needs updated
  • .column-width() needs removed
  • .column-count() needs removed
  • .column-gap() needs removed
  • .column-rule-color() needs removed
  • .column-rule-style() needs removed
  • .column-rule-width() needs removed
  • 👍1
CITguy commented

Border radius properties are supported by IE9+ and evergreen browsers (caniuse).

  • .border-radius() needs removed
  • .border-top-left-radius() needs removed
  • .border-top-right-radius() needs removed
  • .border-bottom-left-radius() needs removed
  • .border-bottom-right-radius() needs removed
  • 👍1
CITguy commented

Transition properties are supported by IE10+ and evergreen browsers (caniuse).

  • .transition-property() needs removed
  • .transition-timing-function() needs removed
  • .transition-delay() needs removed
  • .transition-duration() needs removed
  • .transition() needs removed
  • 👍1
CITguy commented

.sticky() needs updated to include the standard and -webkit- prefixes only. All other prefixes are unnecessary. (caniuse)

  • IE does not support the sticky value in any form (a mixin can't fix this).
  • Edge 16+ supports the standard value.
  • Firefox 32+ supports the standard value.
  • Chrome 56+ supports the standard value.
  • Safari 6+ requires the -webkit- prefix on the value (position: -webkit-sticky;)
  • Opera 42+ supports the standard value.
.sticky() {
  position: -webkit-sticky;
  position: sticky;
}
  • 👍1
CITguy commented

.appearance() needs updated to include standard, -moz-, and -webkit- prefixes only. All other prefixes are unnecessary (caniuse).

  • IE does not support the property in any form (a mixin can't fix this).
  • Edge supports the standard property.
  • Firefox requires the -moz- prefix.
  • Chrome, Safari, and Opera require the -webkit- prefix.
.appearance(...) {
  -webkit-appearance: @arguments;
  -moz-appearance: @arguments;
  appearance: @arguments;
}
  • 👍1
CITguy commented

CSS gradients are supported by IE10+ and evergreen browsers (caniuse).

  • .gradient() needs removed
  • .bw-gradient() needs removed
  • 👍1
CITguy commented

Text shadows are supported by IE10+ and evergreen browsers (caniuse).

  • .glow() needs updated
  • 👍1
CITguy commented

::selection is still an experimental pseudo-element (caniuse).

  • .selection() needs updated to separate ::selection and ::-moz-selection into two distinct blocks
  • 👍1
CITguy commented

Flexbox properties are supported by IE11+ and evergreen browsers (caniuse).

  • flexbox.less needs removed
  • 👍1