{"id":3142,"date":"2019-12-22T14:15:50","date_gmt":"2019-12-22T14:15:50","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3142"},"modified":"2023-02-12T03:07:58","modified_gmt":"2023-02-12T03:07:58","slug":"css-tutorial-nested-media-queries","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/css-tutorial-nested-media-queries\/","title":{"rendered":"CSS Tutorial &#8211; Nested Media Queries"},"content":{"rendered":"<p><span style=\"color: #ef3207;\"><a style=\"color: #ef3207;\" href=\"https:\/\/rengga.dev\/\" target=\"_blank\" rel=\"noopener\"><strong>Rengga Dev<\/strong><\/a> <\/span>&#8211; We don\u2019t have \u201cregular\u201d nesting in CSS. Maybe\u00a0<a href=\"http:\/\/tabatkins.github.io\/specs\/css-nesting\/\" rel=\"noopener\">this<\/a>\u00a0becomes a thing someday, or something like it. That would be cool, although that pre-spec doesn\u2019t mention anything about media queries. I\u2019d hope we get that right out of the gate if we ever do get native CSS nesting. In fact, I\u2019d trade it for selector nesting in a heartbeat. I\u2019d say that\u2019s the most useful thing a CSS preprocessor like Sass does today.<\/p>\n<p>But I\u2019ve digressed before I even began.\u00a0<a href=\"https:\/\/www.bram.us\/2021\/01\/11\/nested-media-queries\/\" rel=\"noopener\">You\u00a0<em>can<\/em>\u00a0nest media queries<\/a>\u00a0in\u00a0<a href=\"https:\/\/www.w3.org\/TR\/css-conditional-3\/\" rel=\"noopener\">native CSS<\/a>, as long as you\u2019re doing it from the root. It\u2019s funny to see in native CSS, but it works!<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">@media screen {\r\n  @media (min-width: 1px) {\r\n    @media (min-height: 1px) {\r\n      @media (max-width: 9999px) {\r\n        @media (max-height: 9999px) {\r\n          body {\r\n            background: red;\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Rengga Dev &#8211; We don\u2019t have \u201cregular\u201d nesting in CSS. Maybe\u00a0this\u00a0becomes a <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/css-tutorial-nested-media-queries\/\" title=\"CSS Tutorial &#8211; Nested Media Queries\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3179,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,2],"tags":[268,197,306,103,227],"newstopic":[],"class_list":{"0":"post-3142","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html-css","8":"category-web-design","9":"tag-css-grid","10":"tag-css-tutorial","11":"tag-nested-media-queries","12":"tag-web-design","13":"tag-web-designer"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3142","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=3142"}],"version-history":[{"count":1,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3142\/revisions"}],"predecessor-version":[{"id":3143,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3142\/revisions\/3143"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3179"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=3142"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=3142"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=3142"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=3142"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}