Why does this compressed css code stop working?

Asked

Viewed 44 times

1

Why do some codes fail to work when being compressed? As is the example below. I used this website.

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: '\2605';
}

.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 the same code but with the compress 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:'\2605'}.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 compressing

  • Console returns some error?

  • I’m trying to find the error. But this CSS gives me the impression of a little redundant, maybe you can reduce repetitions

  • No errors on console

1 answer

4


The problem is that the applied compression criterion moved where it shouldn’t.

That one:

font:"0/0" a

was improperly converted to

font:0/0 a

breaking the whole set.

See your code with the removal of all unnecessary breaks and spaces, working even shorter than the original (but keeping the quotes):

.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:'\2605'}.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 really pays to compress that way. If you serve code with gzip (depends on the server configuration), often the gain is so small in the end that it does not compensate.

Browser other questions tagged html css compressing

You are not signed in. Login or sign up in order to post.