Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
daniellehmann
4,738 Points"[...] Because the CSS we wrote in the media query won't be loaded or parsed by mobile devices [..]"
Howdy,
you say: " [...] Because the CSS we wrote in the media query won't be loaded or parsed by mobile devices [...]"
This are two different things.
I think we all agree the fact that the best would be the css in the media query won't be loaded like the pictures in the picture element - but how does it work? Are there any documentation about it?
I mean I can not imagine that the browser loads a css file only partially?
Nonetheless it´s a good thing if it is not parsed by the mobile devices, because of loading speed in the critical first second.
thanks
3 Answers
christofer serrano
2,983 PointsI understand that this issue is browser dependent. newer versions of mobile browsers actually wont load media queries (including images or larger files) if the media query parameters are not meet. this give even more value to the mobile first approach.
Ted Sumner
Courses Plus Student 17,967 PointsThis is my guess as to the answer to your question. I think I am right, however, because CSS is not a back end language.
The entire CSS file is downloaded onto the platform and parsing begins at the top. As the parsing hits a media query that excludes the device, it skips parsing the code within the query.
CSS does not, in itself, contain large pictures or other files. It tells the browser to get and use the picture. So if the portion of the code that tells the browser to render a large image is skipped, that image is not downloaded. Thus, I think they are using some sloppy language. What is really happening is that the CSS is not parsing and the files in that code is not loaded.
If you design desktop first, the large file is downloaded to the device, then the later media query tells it not to use the file that it just downloaded.
Again, this is just an educated guess based on how I understand the logic of the language.
Rachelle Wood
15,362 PointsThis is another educated guess: you design with a mobile-first approach because mobile phones are not generally as fast as desktop computers for many reasons of which network browsing is one (4G internet browsing vs home internet cable connection for example). Thus, you want to make your page appear to load faster on mobile devices since more and more people are using these tools to browse on the go and desktop computers are losing some ground to them. If you have to load a heavy CSS file that puts desktops first and mobile devices last (i.e. with media queries designed for smaller screens at the end), that contributes to slowing down the apparent or perceived load speed on the mobile device. In other words, I think you are correct in questioning the premise that the mobile browser drops parsing of part of the CSS file. I doubt that too, but there may very well be a perceived difference in load speeds to the user. Here is an interesting link: https://www.igvita.com/2012/06/14/debunking-responsive-css-performance-myths/