1

Porque alguns códigos deixam de funcionar ao ser comprimidos? Como é o exemplo abaixo. Utilizei esse site.

Código Normal e funcionando:

.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>

E aqui o mesmo código porém com o css compresso:

.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>  

3
  • Console retorna algum erro? 11/01/2017 às 21:38
  • Tou tentando achar o erro. Mas esse CSS me dá a impressão de um pouco redundante, talvez dê pra reduzir repetições
    – Largato
    11/01/2017 às 21:39
  • Sem erros no console
    – LocalHost
    11/01/2017 às 21:42

1 Resposta 1

4

O problema é que o critério aplicado de compressão mexeu onde não devia.

Esse:

font:"0/0" a

foi indevidamente convertido para

font:0/0 a

quebrando o conjunto todo.

Veja seu código com a remoção de todas as quebras e espaços desnecessários, funcionando até mais curtinho que o original (mas mantendo as aspas):

.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>  

Agora, precisa ver se compensa mesmo comprimir dessa forma. Se você serve o código com gzip (depende da configuração do servidor), muitas vezes o ganho é tão pequeno no final que não compensa.

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .