Why does this compressed css code stop working?

Question

Why does this compressed css code stop working?

Navigation

#1 by (4 votes)

1

Why do some codes stop working when compressed? As the example below. I used this site .

Normal Code and working:

.radio-1:checked ~ .star-item-1:before,
.radio-1:focus ~ .star-item-1:before, .radio-2:checked ~ .star-item-1:before,
.radio-2:focus ~ .star-item-1:before, .radio-2:checked ~ .star-item-2:before,
.radio-2:focus ~ .star-item-2:before, .radio-3:checked ~ .star-item-1:before,
.radio-3:focus ~ .star-item-1:before, .radio-3:checked ~ .star-item-2:before,
.radio-3:focus ~ .star-item-2:before, .radio-3:checked ~ .star-item-3:before,
.radio-3:focus ~ .star-item-3:before, .radio-4:checked ~ .star-item-1:before,
.radio-4:focus ~ .star-item-1:before, .radio-4:checked ~ .star-item-2:before,
.radio-4:focus ~ .star-item-2:before, .radio-4:checked ~ .star-item-3:before,
.radio-4:focus ~ .star-item-3:before, .radio-4:checked ~ .star-item-4:before,
.radio-4:focus ~ .star-item-4:before, .radio-5:checked ~ .star-item-1:before,
.radio-5:focus ~ .star-item-1:before, .radio-5:checked ~ .star-item-2:before,
.radio-5:focus ~ .star-item-2:before, .radio-5:checked ~ .star-item-3:before,
.radio-5:focus ~ .star-item-3:before, .radio-5:checked ~ .star-item-4:before,
.radio-5:focus ~ .star-item-4:before, .radio-5:checked ~ .star-item-5:before,
.radio-5:focus ~ .star-item-5:before, .star-item:hover:before, .star:hover .star-item:before {
  color: #FFE000;
}
.star-item:before, .star-item:hover ~ .star-item:before {
  color: #CCC;
}

.star-item {
  font: "0/0" a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.radio {
  position: absolute;
  top: -999999em;
  left: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.star {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  pointer-events: none;
  font-size:2.7em;
  /* max-width: 5em; */
}

.star-item {
  cursor: pointer;
  display: inline-block;
  pointer-events: initial;
  width: 1em;
  height: 1em;
  overflow: hidden;
  line-height: 100%;

}
.star-item:before {
  -webkit-transition: color 200ms;
  transition: color 200ms;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  will-change: color;
  content: '05';
}

.star:dir(rtl) .star-item, .star.rtl .star-item {
  direction: rtl;
}

<div class="star">
              <input name="rating" id="star-1" value="1" type="radio" class="radio radio-1"/>
              <input name="rating" id="star-2" value="2" type="radio" class="radio radio-2"/>
              <input name="rating" id="star-3" value="3" type="radio" class="radio radio-3"/>
              <input name="rating" id="star-4" value="4" type="radio" class="radio radio-4"/>
              <input name="rating" id="star-5" value="5" type="radio" class="radio radio-5"/>
              <label for="star-1" class="star-item star-item-1">1 stars</label>
              <label for="star-2" class="star-item star-item-2">2 stars</label>
              <label for="star-3" class="star-item star-item-3">3 stars</label>
              <label for="star-4" class="star-item star-item-4">4 stars</label>
              <label for="star-5" class="star-item star-item-5">5 stars</label>
            </div>

And here's the same code with the compressed css:

.radio-1:checked ~ .star-item-1:before,.radio-1:focus ~ .star-item-1:before,.radio-2:checked ~ .star-item-1:before,.radio-2:focus ~ .star-item-1:before,.radio-2:checked ~ .star-item-2:before,.radio-2:focus ~ .star-item-2:before,.radio-3:checked ~ .star-item-1:before,.radio-3:focus ~ .star-item-1:before,.radio-3:checked ~ .star-item-2:before,.radio-3:focus ~ .star-item-2:before,.radio-3:checked ~ .star-item-3:before,.radio-3:focus ~ .star-item-3:before,.radio-4:checked ~ .star-item-1:before,.radio-4:focus ~ .star-item-1:before,.radio-4:checked ~ .star-item-2:before,.radio-4:focus ~ .star-item-2:before,.radio-4:checked ~ .star-item-3:before,.radio-4:focus ~ .star-item-3:before,.radio-4:checked ~ .star-item-4:before,.radio-4:focus ~ .star-item-4:before,.radio-5:checked ~ .star-item-1:before,.radio-5:focus ~ .star-item-1:before,.radio-5:checked ~ .star-item-2:before,.radio-5:focus ~ .star-item-2:before,.radio-5:checked ~ .star-item-3:before,.radio-5:focus ~ .star-item-3:before,.radio-5:checked ~ .star-item-4:before,.radio-5:focus ~ .star-item-4:before,.radio-5:checked ~ .star-item-5:before,.radio-5:focus ~ .star-item-5:before,.star-item:hover:before,.star:hover .star-item:before{color:#FFE000}.star-item:before,.star-item:hover ~ .star-item:before{color:#CCC}.star-item{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.radio{position:absolute;top:-999999em;left:auto;width:1px;height:1px;overflow:hidden}.star{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;pointer-events:none;font-size:2.7em}.star-item{cursor:pointer;display:inline-block;pointer-events:initial;width:1em;height:1em;overflow:hidden;line-height:100%}.star-item:before{-webkit-transition:color 200ms;transition:color 200ms;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);will-change:color;content:'05'}.star:dir(rtl) .star-item,.star.rtl .star-item{direction:rtl}

<div class="star">
              <input name="rating" id="star-1" value="1" type="radio" class="radio radio-1"/>
              <input name="rating" id="star-2" value="2" type="radio" class="radio radio-2"/>
              <input name="rating" id="star-3" value="3" type="radio" class="radio radio-3"/>
              <input name="rating" id="star-4" value="4" type="radio" class="radio radio-4"/>
              <input name="rating" id="star-5" value="5" type="radio" class="radio radio-5"/>
              <label for="star-1" class="star-item star-item-1">1 stars</label>
              <label for="star-2" class="star-item star-item-2">2 stars</label>
              <label for="star-3" class="star-item star-item-3">3 stars</label>
              <label for="star-4" class="star-item star-item-4">4 stars</label>
              <label for="star-5" class="star-item star-item-5">5 stars</label>
            </div>

html css

asked by anonymous 11.01.2017 / 22:23

1 answer

Data type not defined in PHP [closed] Left Join with multiple fields from the same table

score 4 · Accepted Answer

The problem is that the applied compression criterion moved where it should not.

This:

font:"0/0" a

was improperly converted to

font:0/0 a

Breaking the whole set.

See your code by removing all unnecessary breaks and spaces, running even shorter than the original (but keeping the quotation marks):

.radio-1:checked~.star-item-1:before,.radio-1:focus~.star-item-1:before,.radio-2:checked~.star-item-1:before,.radio-2:focus~.star-item-1:before,.radio-2:checked~.star-item-2:before,.radio-2:focus~.star-item-2:before,.radio-3:checked~.star-item-1:before,.radio-3:focus~.star-item-1:before,.radio-3:checked~.star-item-2:before,.radio-3:focus~.star-item-2:before,.radio-3:checked~.star-item-3:before,.radio-3:focus~.star-item-3:before,.radio-4:checked~.star-item-1:before,.radio-4:focus~.star-item-1:before,.radio-4:checked~.star-item-2:before,.radio-4:focus~.star-item-2:before,.radio-4:checked~.star-item-3:before,.radio-4:focus~.star-item-3:before,.radio-4:checked~.star-item-4:before,.radio-4:focus~.star-item-4:before,.radio-5:checked~.star-item-1:before,.radio-5:focus~.star-item-1:before,.radio-5:checked~.star-item-2:before,.radio-5:focus~.star-item-2:before,.radio-5:checked~.star-item-3:before,.radio-5:focus~.star-item-3:before,.radio-5:checked~.star-item-4:before,.radio-5:focus~.star-item-4:before,.radio-5:checked~.star-item-5:before,.radio-5:focus~.star-item-5:before,.star-item:hover:before,.star:hover .star-item:before{color:#FFE000}.star-item:before,.star-item:hover~.star-item:before{color:#CCC}.star-item{font:"0/0" a;color:transparent;text-shadow:none;background-color:transparent;border:0}.radio{position:absolute;top:-999999em;left:auto;width:1px;height:1px;overflow:hidden}.star{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;pointer-events:none;font-size:2.7em;/* max-width:5em;*/}.star-item{cursor:pointer;display:inline-block;pointer-events:initial;width:1em;height:1em;overflow:hidden;line-height:100%}.star-item:before{-webkit-transition:color 200ms;transition:color 200ms;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);will-change:color;content:'05'}.star:dir(rtl) .star-item,.star.rtl .star-item{direction:rtl}

<div class="star">
              <input name="rating" id="star-1" value="1" type="radio" class="radio radio-1"/>
              <input name="rating" id="star-2" value="2" type="radio" class="radio radio-2"/>
              <input name="rating" id="star-3" value="3" type="radio" class="radio radio-3"/>
              <input name="rating" id="star-4" value="4" type="radio" class="radio radio-4"/>
              <input name="rating" id="star-5" value="5" type="radio" class="radio radio-5"/>
              <label for="star-1" class="star-item star-item-1">1 stars</label>
              <label for="star-2" class="star-item star-item-2">2 stars</label>
              <label for="star-3" class="star-item star-item-3">3 stars</label>
              <label for="star-4" class="star-item star-item-4">4 stars</label>
              <label for="star-5" class="star-item star-item-5">5 stars</label>
            </div>

Now, you need to see if it even pays to compress this way. If you serve the code with gzip (depends on server configuration), often the gain is so small in the end that it does not pay.