'How to Extract Viewport Specific CSS?

I am trying to optimize speed of my existing wesite. I want to remove unused css for each viewport. The website has media-queries in main css. I want to extract / create css file which will contain only those css (selectors /properties) that are used in specific viewport.

I have searched about this but haven't found any perfect solution.

Is there any tool? Webpack etc or doing it manually is the only solution.

Thanks

cssresponsive-designviewportviewport-units


Solution 1:[1]

There are services like https://github.com/uncss/uncss, https://www.purgecss.com/ or https://unused-css.com/

Or you can also use Chrome Dev Tools.

  • Open web inspector
  • Open the command menu. For me it's Command + Shift + p, not sure if it's the same for all operating systems
  • Search for then select 'show coverage'
  • look for the coverage tab. You may need to reload the page to see the results.

Remember that all of these options check just the one page, so don't assume that code not used on one page isn't used on another without checking first.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 David Taiaroa

Related Questions