{"id":16872,"date":"2012-04-29T12:48:25","date_gmt":"2012-04-29T19:48:25","guid":{"rendered":"http:\/\/css-tricks.com\/?p=16872"},"modified":"2012-04-29T12:48:25","modified_gmt":"2012-04-29T19:48:25","slug":"conditional-content-via-css-media-queries","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/conditional-content-via-css-media-queries\/","title":{"rendered":"Conditional Content via CSS Media Queries"},"content":{"rendered":"<p>Jeremy Keith has a great article on his journey to allowing JavaScript to load in content based on the currently active media query. This allows you to keep media queries only in the CSS (DRY!). <\/p>\n<p>The article was sans-demo, so <a href=\"https:\/\/css-tricks.com\/examples\/ConditionalCSS\/\">I made one<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Jeremy Keith has a great article on his journey to allowing JavaScript to load in content based on the currently [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[17],"tags":[],"class_list":["post-16872","post","type-post","status-publish","format-standard","hentry","category-links"],"acf":{"link_source":"","link_url":"","link_icon":null,"show_toc":"No"},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":340967,"url":"https:\/\/css-tricks.com\/a-cornucopia-of-container-queries\/","url_meta":{"origin":16872,"position":0},"title":"A Cornucopia of Container Queries","author":"Geoff Graham","date":"June 9, 2021","format":false,"excerpt":"I don't know about y'all, but my feeds have been flooded with articles about CSS Container Queries these past few weeks. The buzz about container queries actually started back in December after Miriam Suzanne posted a proposal (picking up on David Baron's proposal) but it was news in a late-March\u2026","rel":"","context":"In &quot;Articles&quot;","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/container-collage.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/container-collage.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/container-collage.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/container-collage.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/container-collage.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":334168,"url":"https:\/\/css-tricks.com\/nested-media-queries\/","url_meta":{"origin":16872,"position":1},"title":"Nested Media Queries","author":"Chris Coyier","date":"February 9, 2021","format":false,"excerpt":"We don't have \"regular\" nesting in CSS. Maybe this becomes a thing someday, or something like it. That would be cool, although that pre-spec doesn't mention anything about media queries. I'd hope we get that right out of the gate if we ever do get native CSS nesting. In fact,\u2026","rel":"","context":"In &quot;Articles&quot;","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/nested-css-media-queries.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/nested-css-media-queries.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/nested-css-media-queries.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/nested-css-media-queries.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/nested-css-media-queries.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":319966,"url":"https:\/\/css-tricks.com\/working-with-javascript-media-queries\/","url_meta":{"origin":16872,"position":2},"title":"Working with JavaScript Media Queries","author":"Marko Ilic","date":"September 7, 2020","format":false,"excerpt":"What\u2019s the first thing that comes to mind when you think of media queries? Maybe something in a CSS file that looks like this: body { \u00a0 background-color: plum; } \u2028 @media (min-width: 768px) { \u00a0 body { \u00a0 \u00a0 background-color: tomato; \u00a0 } } CSS media queries are a\u2026","rel":"","context":"In &quot;Articles&quot;","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/image-47.png?fit=924%2C338&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/image-47.png?fit=924%2C338&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/image-47.png?fit=924%2C338&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/image-47.png?fit=924%2C338&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":360385,"url":"https:\/\/css-tricks.com\/css-based-fingerprinting\/","url_meta":{"origin":16872,"position":3},"title":"CSS-Based Fingerprinting","author":"Chris Coyier","date":"January 3, 2022","format":false,"excerpt":"Fingerprinting is bad. It's a term that refers to building up enough metadata about a user that you can essentially figure out who they are. JavaScript has access to all sorts of fingerprinting possibilities, which then combined with the IP address that the server has access to, means fingerprinting is\u2026","rel":"","context":"In &quot;Articles&quot;","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/fingerprint-gradient.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/fingerprint-gradient.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/fingerprint-gradient.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/fingerprint-gradient.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/fingerprint-gradient.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":154502,"url":"https:\/\/css-tricks.com\/conditional-media-query-mixins\/","url_meta":{"origin":16872,"position":4},"title":"Conditional Media Query Mixins","author":"Chris Coyier","date":"October 30, 2013","format":false,"excerpt":"Using a @mixin in Sass for your media queries is useful for a variety of reasons. The most important of which is probably the cognitive ease of having the properties and values you are changing right next to the originals. But another reason is that you then gain the ability\u2026","rel":"","context":"In &quot;Articles&quot;","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":351276,"url":"https:\/\/css-tricks.com\/can-we-have-custom-media-queries-please\/","url_meta":{"origin":16872,"position":5},"title":"Can we have custom media queries, please?","author":"Chris Coyier","date":"September 7, 2021","format":false,"excerpt":"Stefan Judis notes that there is a spec for custom media queries, but seemingly no momentum on it at the moment. That lack of movement is unfortunate, as it's almost guaranteed front-end developers all over would start using it as soon as it's ready. I know I would, as I\u2026","rel":"","context":"In &quot;Links&quot;","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/guide-media-queries.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/guide-media-queries.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/guide-media-queries.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/guide-media-queries.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/guide-media-queries.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/16872","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=16872"}],"version-history":[{"count":1,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/16872\/revisions"}],"predecessor-version":[{"id":16873,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/16872\/revisions\/16873"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=16872"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=16872"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=16872"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}