7286

Media Queries to load resource?

Question:

I am wanting to break apart my rather large CSS file into separate, specialised, stylesheets - one for mobile, tablet and desktop. The purpose being I want to reduce the amount of data being downloaded on mobile (why download 600kb css file containing mobile tablet and desktop styles when I can download a 40kb file just for mobile instead?).

<strong>Is there a way to use media queries to load only the required stylesheet?</strong>

I have tried:

@import url(mobile.css) (max-width:599px); @import url(tablet.css) (min-width:600px); @import url(desktop.css) (min-width:1200px);

and

<link rel='stylesheet' media='screen and (max-width: 599px)' href='mobile.css' /> <!-- and again for tablet and desktop -->

but in developer tools I can see that the browser downloads all three css files regardless of which technique I use.

<strong>Is it possible to load only the wanted resource using media queries?</strong>

I am aware of a JS approach using matchMedia but I am looking for a CSS only solution.

<h2>Edit</h2>

Please read the question - I want to load a specific stylesheet based on media query. ALL browsers download ALL stylesheets regardless of media query attribute, which defeats the point in having a mobile-only stylesheet! <strong>How do I download ONLY the stylesheet I want based on media query?</strong>

Answer1:

If you make this, your site will not be responsive. Responsive said that design adapts to resolutions, not only devices, and when a desktop screen has a 600 px width you must to show tablet version, no? The best way to reduce the files is minifying all your css in one file in production version, and in dev version you have got all splitted css

Answer2:

Try doing it within the HTML, for example:

<link rel="stylesheet" media="only screen and (handheld)" href="example.css" />

<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries" rel="nofollow">source</a> I can't see why this would not work with a (min-width: 1200px)` (for instance).

Normally though css for small screens would be very small, with the small screen using most of the styling in the desktop version, with a few elements hidden and some resized.

Recommend

  • how to add semantic ui in a rails app?
  • NetBeans doesn't see style.css [duplicate]
  • ASP.NET, C# How to Pass a StringQuery to a custom SQL Command
  • How to add regEx in angular filter
  • TSQL Rolling Average of Time Groupings
  • Cypher - matching two different possible paths and return both
  • MySQL performance when updating row with FK
  • C# program and C++ DLL compiled for 32-bit system crash on 64-bit system
  • RxJava debounce by arbitrary value
  • Eliminate partial duplicate rows from result set
  • Does Mobilefirst provide a provision to access web services directly?
  • D3 get axis values on zoom event
  • Adjust width of select element according to selected option's width
  • Loading .coffee files via a view in Rails
  • C: Incompatible pointer type initializing
  • Create DicomImage from scratch using Dcmtk
  • Custom validator control occupying space even though display set to dynamic
  • JSON response opens as a file, but I can't access it with JavaScript
  • Jquery UI tool tip close icon
  • Change multiple background-images with jQuery
  • java.lang.NoClassDefFoundError: com.parse.Parse$Configuration$Builder on below Lollipop versions
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • Change an a tag attribute in JavaScript based on screen width
  • How to show dropdown in excel using jrxml (jasper api)?
  • How to get next/previous record number?
  • Why winpcap requires both .lib and .dll to run?
  • Return words with double consecutive letters
  • Circular dependency while pushing http interceptor
  • Python: how to group similar lists together in a list of lists?
  • AngularJs get employee from factory
  • Codeigniter doesn't let me update entry, because some fields must be unique
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • How to set the response of a form post action to a iframe source?
  • How get height of the a view with gone visibility and height defined as wrap_content in xml?
  • Change div Background jquery
  • apache spark aggregate function using min value
  • python draw pie shapes with colour filled
  • Does armcc optimizes non-volatile variables with -O0?
  • Busy indicator not showing up in wpf window [duplicate]
  • How to load view controller without button in storyboard?