Can be reduced to:

@media screen and (min-width:767px){.icon-next{height:20px;width:20px}}

As specified in §4.1.8 of CSS2.1, and later also in §2 of CSS Syntax Module Level 3, semicolons are separators, not terminators. Hence, semicolons at the end of blocks may be removed. E.g.:

h1 {
  font-family: Helvetica;
  font-style: normal;
}

h1 {
  font-family: Helvetica;
  font-style: normal
}

Whenever using absolute units, we may replace them for an equivalent shorter dimension. This also works on media queries:

@media (min-width: 768px) {
  .horizontal dt {
    width: 160px;
  }

@media (min-width: 8in) {
  .horizontal dt {
    width: 10pc;
  }

Since the beginning of CSS (see §6.1), zero <length> values can be written without units. Following a discussion, the specification was updated in 2016 to allow also zero <angle> values to be written without units.

Keep in mind these are the only two dimension types that accept 0 as a value. In other words, zero values of type <frequency>, <resolution>, or <time> should not be stripped of their units.

padding:   0px;
transform: skew(0deg);

padding:   0;
transform: skew(0);

To normalize a number, what is done is

1. Remove any leading zeros

2. Remove any trailing zeros

3. Remove the positive number sign (+)

In the following cases explained below, quotations characters may be removed.

CSS2 prefixed both pseudo-classes and pseudo-elements with a single colon. To distinguish between the two, CSS2.1 changed the convention for pseudo-elements, prefixing them with two colons. However, since most browsers still support the old notation, the following pseudo-elements:

::after
::before
::first-line
::first-letter

:after
:before
:first-line
:first-letter

In several places either a <percentage>, or another data type inhabited by 0 can be used (such as <number>, or <length>). In these cases, it is usually—though not always—possible to drop the percentage sign, and have it mean the same.

@keyframes a {
  0% { margin: 0% }
  100% { margin: 20%}
}

@keyframes a {
  0% { margin: 0 }
  100% { margin: 20%}
}

Known exceptions to this are height and max-height, where 0 and %0 mean different things, so Hasmin doesn’t apply the replacement in those cases.

There are many different equivalent ways to denote colors, so we look for the shortest. For example, the following values:

rgb(238, 130, 238)
rgba(238, 130, 238, 1)
hsl(200, 100%, 1%)
hsla(200, 100%, 1%, 0.5)
mediumSpringGreen
transparent
#ffccdd

violet
violet
#000305
#00030580
#00fa9a
#0000
#fcd

Examples of this are converting these:

perspective-origin: 0% 50%;
perspective-origin: 50% 0%;
background-position: left 0% top 0%;
background-position: right 0% center;

perspective-origin: 0;
perspective-origin: top;
background-position: 0 0;
background-position: 100%;

Whenever a <repeat-style> value is used, such as in the background-repeat and background properties, the following conversions can be applied:

The An+B microsyntax is used by some functional pseudo classes, such as :nth-child(). Some examples of changes that may be done with the <an+b\> data type are:

:nth-child(even)
:nth-last-child(2n+1)
:nth-last-of-type(+1n+0)
:nth-of-type(-1n-0)
:nth-child(0n+0)

:nth-child(2n)
:nth-last-child(odd)
:nth-last-of-type(n)
:nth-of-type(-n)
:nth-child(0)

This data type is used in the box-shadow property and defined in 7.3 of CSS Backgrounds and Borders Level 3. In it, the 3rd and 4th <length> values are optional and zero by default. Thus:

box-shadow: 3px 3px 0 3px red;
box-shadow: red 3px 3px 3px 0;
box-shadow: inset 2px 2px 0 0;
box-shadow: 1px 1px 0 inset;

box-shadow: 3px 3px 0 3px red;
box-shadow: red 3px 3px 3px;
box-shadow: inset 2px 2px;
box-shadow: 1px 1px inset;

Every transform function has associated a 4x4 matrix. Hasmin finds the shortests equivalent function able to represent a given matrix. For example, the following functions:

translate(0)
matrix(1,0,0,0,0,0)
matrix(1,0,0,1,35,0)
scale3d(0,1,1)

skew(0)
scaleY(1)
translate(35px)
scaleX(0)

A list of <transform-function\> can be multiplied (that is, their corresponding 4x4 matrices are multiplied), to look for a shorter equivalent representation, e.g.:

translate(10px) skew(45deg) scaleX(5)
skew(45deg) translate(100%) scaleX(5) scaleX(2)

matrix(5,0,1,1,10,0)
skew(45deg) translate(100%) scale(10)

Also, since matrix multiplication isn’t conmutative, skew(45deg) and scale(10) can’t be multiplied, since that would change the original transform.

Something like:

border-radius: 1px 2px 1px 2px / 1px 1px 1px 1px;

border-radius: 1px 2px / 1px;

Some simple examples of the four functions are:

inset(1px 1px round 4px / 4px)
circle(closest-side at center)
ellipse(10px 10px at left bottom)
polygon(nonzero, 10px 10px)

inset(1px round 4px)
circle()
ellipse(10px 10px at 0 100%)
polygon(10px 10px)

For some more examples, check the test suite.

Given the following:

.class {
  line-height: inherit;
  box-sizing: border-box;
  border-collapse: separate;
}

.class {
  line-height: unset;
  box-sizing: unset;
  border-collapse: initial;
}

1. The line-height property inherits, therefore unset equals inherit.

2. For box-sizing, the value border-box is its initial value. It could be replaced for initial, but box-sizing doesn’t inherit, so unset is synonymous to initial for this property, and shorter.

3. Lastly, separate is the initial value of border-collapse, so it can just be replaced for initial which is shorter. Note that since this property inherits, unset can’t be used because that would mean inherit, not initial.

Hasmin has information about almost every property (save some of the latest experimental ones), i.e. if it inherits, what its initial value is, etc.

Hasmin can convert escaped characters into their unicode equivalents, e.g.:

content: "\7121";
content: '\0610F';
content: "\005473";

content: "無";
content: '意';
content: "味";

The @import rule is followed by either a <url>, or <string> (see §2 of Cascading and Inheritance Level 4). That means that whenever a url() value is found, the function notation may be removed in favor of the bare <string>, e.g.

@import url("landscape.css");
@import url(narrow.css);

@import "landscape.css";
@import "narrow.css";

Double negations are simplified, e.g.:

@supports not (not (display: flex)){/* */}

@supports (display: flex){/* */}

The all media type is the default one and may be omitted. Thus, the following rules are equivalent:

@media all {/*..*/}
@media {/*..*/}

@media all and (min-width: 500px) {/*..*/}
@media (min-width: 500px) {/*..*/}

@media (min-width:500px),all and (min-device-pixel-ratio:0){/*..*/}
@media (min-width:500px),(min-device-pixel-ratio:0){/*..*/}