Можно ли каким-то инструментом выдрать часть css из страницы, который необходим для отображения видимой части.
Например у меня вверху страницы один h1, внизу текст (пользователь его не видет). Подключается css, который делает h1 зеленым и текст разрисовывает мильен цветами. Хочется инструмент, который мне скажет, что на видимой части используется только h1 стили.
Пример надуманный, но все же...
Возможно такое?
Что-то меня никто не понимает, попробую еще раз объяснить.
html:
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Test</h1>
<div>test</div>
</body>
style.css:
h1 {
color: green;
margin-botton: 10000px;
}
div {
color: red;
font-size: 10px;
<!-- и еще 1 000 000 свойств -->
}
В итоге на странице мы увидем Заголовок Test и где-то внизу test
Как я хочу что бы было:
<head>
<style>
h1 {
color: green;
margin-botton: 10000px;
}
</style>
</head>
<body>
<h1>Test</h1>
<div>test</div>
</body>
<link rel="stylesheet" href="style.css">
То есть выноси стили h1 в head, что бы при загрузке не ждать пока скачаются стили для div
Внимание вопрос: есть ли инструмент, который мне скажет, что на h1 подключены стили?
Простой
Средний