Использование кукловода, чтобы привыкнуть к правилам CSS @media - PullRequest
Новая
       40

Использование кукловода, чтобы привыкнуть к правилам CSS @media

0 голосов
/ 25 июня 2019

Я написал небольшое приложение для узлов, которое будет очищать веб-сайт от используемого CSS с использованием puppeteer и Headless Chrome.

Он прекрасно работает, кроме одной вещи: он не получает @media правил? 

const puppeteer = require('puppeteer');
const util = require('util');
const fs = require("fs");

(async () => {
 const browser = await puppeteer.launch();
 const page = await browser.newPage();
 await page.coverage.startCSSCoverage();
 await page.goto('http://localhost');
 await page.setViewport({width  : 320, height : 640});
 const css_coverage = await page.coverage.stopCSSCoverage();
 console.log(util.inspect(css_coverage, { showHidden: false, depth: null }));
 await browser.close();

let final_css_bytes = '';
let total_bytes = 0;
let used_bytes = 0;

for (const entry of css_coverage) {
  final_css_bytes = "";

  total_bytes += entry.text.length;
  for (const range of entry.ranges) {
    used_bytes += range.end - range.start - 1;
    final_css_bytes += entry.text.slice(range.start, range.end) + '\n';
  }

  filename = entry.url.split('/').pop();

  fs.writeFile('./'+filename, final_css_bytes, error => {
    if (error) {
      console.log('Error creating file:', error);
    } else {
      console.log('File saved');
    }
  });
}
})();

Кто-нибудь знает, почему правила @media не включены вокончательный вывод, когда на странице их много?

1 Ответ

1 голос
/ 28 июня 2019

Я считаю, что это поведение самого хрома.Если вы проверили покрытие кода chrome dev tool, используемый css не будет содержать определения для медиа-запросов.Будут доступны только фактические селекторы.

То же самое касается шрифтов и ключевых кадров.Существует даже проблема с хромом для font-face.

Чтобы извлечь CSS, использованный на странице, вы можете проверить что-то вроде minimalcss

...