search

soflyy / oxygen-bugs-and-features

Bug Reports & Feature Requests for Oxygen
https://oxygenbuilder.com/
315 stars 29 forks source link

Theory for remove unused css #783

Open wpsumo opened 4 years ago

wpsumo commented 4 years ago

Describe the feature you'd like to see included in Oxygen. Load / remove css or js if the request is from a mobile device Load / remove css or js if the request is from a tablet device Load / remove css or js if the request is from a desktop device

Extract media queries and load as specific files and only load on tablet and mobile where used.

What are the use cases for this feature? A way to remove unused css and only load it once needed.

alexanderkladov commented 4 years ago

That's potentially dangerous to page design integrity.. For example, the new iPadOS has 2 new features: Slide Over and Split View. Split View will display a page in 1/3, 1/2 or 2/3 width of the screen. While Slide Over will display the page in a popup window the size of a mobile screen. In both scenarios, the request is still coming from an iPadOS. But you'd still need to have both Tablet & Mobile CSS, because you the page can be displayed in a mobile-width popup, at 1/3 width, at 1/2 width, at 2/3 width or at full width of the screen + the iPad can be in portrait or landscape mode, so the widths of each one of those can vary based on orientation. Microsoft Surface will do the same thing. And I am sure most modern Android tablets too. On top of that, iPads & a lot of other handhelds come in large variety of sizes, many of which are wide enough to display Desktop specific CSS.

So my bet would be to just serve all CSS styles to all devices. You just can't know 100% what width the page will be displayed at these days.. Just focus on streamlining your CSS. Internet is fast enough these days to load a few extra KBs of data at no cost.

switchupcb commented 1 year ago

I agree with @alexanderkladov that this enhancement should not be implemented as it is a suboptimal approach to removing Unused CSS: Devices can change their screen size at any point, so "unused CSS" won't always remain unused.

You can use media queries on stylesheets to improve the performance of CSS load time, so that a device loads the most relevant CSS first: This approach is described in https://github.com/soflyy/oxygen-bugs-and-features/issues/3407.