Стиль CSS замедляет работу браузеров - PullRequest
Новая
       21

Стиль CSS замедляет работу браузеров

0 голосов
/ 03 октября 2018

У меня есть таблица стилей (CSS), которая замедляет скорость браузера (рендеринг).Я пытался использовать css-компрессор, но результат тот же, исходный файл весит 1120 байт и сжимает 810 байт, но сжатие файла по-прежнему замедляет работу браузеров.

Как я могу решить эту проблему?Это мой код CSS: 

 .logo {
position: fixed;
top: 20px;
left: 36%;
z-index: 4000;
}

@font-face {
    font-family: DaZPlayer;
    src: url(DaZPlayer.ttf);
}

.logo b{
font-family: 'DaZPlayer';
font-size: 4.3rem;
color: #fff;
text-shadow: 0 -40px 300px, 0 0 2px, 0 0 1em #f4f4f4, 0 0 0.5em #f4f4f4, 0 0 0.1em #f4f4f4, 0 10px 3px #000;
}

@media all and (max-width: 1067px){
  .logo b{
    font-size: 3.5rem;
  }
}

@media all and (max-width: 920px){
  .logo b{
    font-size: 3rem;
  }
}

@media all and (max-width: 664px){
  .logo b{
    font-size: 1.9rem;
  }
}

@media all and (max-width: 400px){
  .logo b{
    font-size: 1.5rem;
  }
}


.logo b span{
animation: blink linear infinite 2s;
}
@keyframes blink {
78% {
  color: inherit;
  text-shadow: inherit;
}
79%{
   color: #333;
}
80% {
  text-shadow: none;
}
81% {
  color: inherit;
  text-shadow: inherit;
}
82% {
  color: #333;
  text-shadow: none;
}
83% {
  color: inherit;
  text-shadow: inherit;
}
92% {
  color: #333;
  text-shadow: none;
}
92.5% {
  color: inherit;
  text-shadow: inherit;
}
}

если бы кто-то мог мне помочь, я был бы благодарен, с уважением, DiX.

Ответы [ 2 ]

0 голосов
/ 03 октября 2018

Вы пытались использовать препроцессор для этого?Вы можете использовать CSS minifier .Еще один указатель, используйте Google Page Insights, и он точно скажет вам, что вам нужно сделать.

0 голосов
/ 03 октября 2018

Вы уже пытались минимизировать это?Вот ваш код минимизирован.

.logo{position:fixed;top:20px;left:36%;z-index:4000}@font-face{font-family:DaZPlayer;src:url(DaZPlayer.ttf)}.logo b{font-family:DaZPlayer;font-size:4.3rem;color:#fff;text-shadow:0 -40px 300px,0 0 2px,0 0 1em #f4f4f4,0 0 .5em #f4f4f4,0 0 .1em #f4f4f4,0 10px 3px #000}@media all and (max-width:1067px){.logo b{font-size:3.5rem}}@media all and (max-width:920px){.logo b{font-size:3rem}}@media all and (max-width:664px){.logo b{font-size:1.9rem}}@media all and (max-width:400px){.logo b{font-size:1.5rem}}.logo b span{animation:blink linear infinite 2s}@keyframes blink{78%,81%,83%,92.5%{color:inherit;text-shadow:inherit}79%{color:#333}80%{text-shadow:none}82%,92%{color:#333;text-shadow:none}}
...