CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
pidabrow
pidabrow

Reputation: 976

Reduce size of CSS when page has responsive design (e.g. using Bootstrap)

Consider if I have a page with a responsive design. I found that purifyCSS can help with trimming unused CSS rules and I wonder if there ia any way to use this tool to check the CSS usage against responsive design.

As one of parameters I have to pass a html file with content of page - how to do this for such a design?

Upvotes: 0

Views: 158

Answers (1)

Jonathan Lam
Jonathan Lam

Reputation: 17351

I am not familiar with purifyCSS nor Bootstrap, but you can use CSS3 media queries (see the MDN documentation) to only use the CSS necessary for the specific device that is requested.

For example, the following HTML code:

<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="desktop.css" media="@media (min-width: 700px) and (orientation: landscape)">

will always request the main.css styles and only use the desktop.css styles if the screen fits the given media query. (Note that this uses mobile-first responsive design.)

However, like @makshh suggested in the comments, this does not actually remove unused CSS, but it only ignores the unwanted styles. This method also still requests all the stylesheets even if they do not apply, so it does not reduce the amount of CSS given either; this is necessary if the browser size changes and different styles need to apply. For this reason, I don't think you should be looking to remove unnecessary CSS, as this would limit the responsiveness of the design.

Upvotes: 1

Related Questions