Kovalsky, ну так в топике ничего не объясняется. Просто у человека та же проблема. И cave у меня не работает, даже установится не может. Может потому что проект заброшен 5 лет назад... В общем тупик.
Kovalsky, я не большой спец в английском, но мне кажется тут описана другая логика работы:
critical extract берет в html-файл, смотрит какие css файлы к нему подключены, формирует на их основе критичный css, вставляет его инлайн, и формирует код, который подключенные css файлы загружает асинхронно.
Из самих изначально подключенных css файлов critical extract никакие правила не удаляет.
Kovalsky, в каком месте extract решает задачу? он просто формирует критичный css и все. А задача не сформировать критичный css, а создать из main.css файл, в котором не будет правил, которые есть в критичном css. Впрочем возможно я не так им пользуюсь. Дайте пожалуйста строчку для консоли, которая по вашему решает вопрос.
Бегло ознакомился. Там говориться об инструментах удаляющих неиспользуемый css. Но у меня весь css используется. Просто правила дублируются в двух файлах. Мне нужно такой инструмент, который сравнит 2 файла и из большого удалит те правила, что уже есть в меньшем.
Возможно я не смог донести суть вопроса...
main.css содержит:
a{}
b{]
При загрузке на первой странице есть только блоки b. А блоки а находяться внизу страницы, до них надо скролить.
После формирования критического css получаем в critical.css: b{}
Теперь нужен инструмент, который сравнит main.css и critical.css и сформирует результирующий файл, в котором есть все правила из main.css, за исключением тех, что есть в cricital.css, т.е.: a{}
Stalker_RED, две строчки - это абстракция, надеюсь вы понимаете. Я уже сам написал. Но мой код довольно топорный. Нашел и готовое решение, около 1Кб, но понять его пока не могу.
1. Ну это пока только в хроме. И потом забить на все не обновленные хромы - это не вариант.
2. Не знаю как детектировать видимую область. Я не особо специалист в js.
3. Почитаем, просто хотелось быстрого решения.
olya_097, пустой img случайно в коде оказался. он не нужен. 90%, a не 100% потому что иначе кусок бэкграунда будет вылезать в углу слева внизу. flex можете задать, дробные значения вполне можно. Подробнее погуглите flex-grow.
Чтобы было несколько "в ряд", нужно добавить .parent {overflow: hidden;}
