{"id":3069,"date":"2021-10-05T02:37:52","date_gmt":"2021-10-05T00:37:52","guid":{"rendered":"https:\/\/vielhuber.de\/?p=3069"},"modified":"2021-10-07T02:52:00","modified_gmt":"2021-10-07T00:52:00","slug":"container-queries-schon-heute-nutzen","status":"publish","type":"post","link":"https:\/\/vielhuber.de\/blog\/container-queries-schon-heute-nutzen\/","title":{"rendered":"Container Queries schon heute nutzen"},"content":{"rendered":"\n<p>Seitdem es responsives Webdesign gibt, fragen Entwickler nach der M\u00f6glichkeit, DOM-Elemente basierend auf der Ihrer eigentlichen Gr\u00f6\u00dfe und nicht auf der Gr\u00f6\u00dfe des Viewports im Browser (mit Hilfe von <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Media_Queries\/Using_media_queries\" target=\"_blank\" rel=\"noreferrer noopener\">Media Queries<\/a>) zu gestalten. In der Tat sind <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Container_Queries\" target=\"_blank\" rel=\"noreferrer noopener\">Container Queries<\/a> (anfangs Element Queries) wahrscheinlich die am h\u00e4ufigsten geforderte CSS-Funktion, die es in Browsern <a href=\"https:\/\/caniuse.com\/css-container-queries\" target=\"_blank\" rel=\"noreferrer noopener\">immer noch nicht gibt<\/a>.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Es gibt bereits <a href=\"https:\/\/github.com\/WICG\/container-queries\/issues\/12\" target=\"_blank\" rel=\"noreferrer noopener\">viele<\/a>, <a href=\"https:\/\/alistapart.com\/article\/container-queries-once-more-unto-the-breach\/\" target=\"_blank\" rel=\"noreferrer noopener\">viele<\/a>, <a href=\"https:\/\/gist.github.com\/davatron5000\/bbede54cf189bf53e4de\" target=\"_blank\" rel=\"noreferrer noopener\">viele<\/a> Beitr\u00e4ge, in denen genau erkl\u00e4rt wird, warum Container-Queries in CSS schwer zu realisieren sind und warum die Browserhersteller z\u00f6gern, sie zu implementieren. Will man schon jetzt in den Genuss kommen, schafft etwas JavaScript hier Abhilfe:<\/p>\n\n\n\n<p class=\"githubgist\" data-gist-file=\"index.html\">c51c33e1533e68c3f8fd24633700789f<\/p>\n\n\n\n<p>Das Ganze sieht dann wie folgt aus:<\/p>\n\n\n\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"result\" data-slug-hash=\"WNOqrJo\" data-user=\"vielhuber\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/vielhuber\/pen\/WNOqrJo\">\n  <\/a> by David Vielhuber (<a href=\"https:\/\/codepen.io\/vielhuber\">@vielhuber<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<p>\u00dcber die Attribute <strong>breakpoints<\/strong>, <strong>selector<\/strong> und <strong>style<\/strong> lassen sich die unterschiedlichen Breakpoints, der automatische Selektor sowie die Art der hinzugef\u00fcgten Klassen definieren. Hat man das Script im Einsatz, kann man die neu generierten Klassen wie folgt ansprechen:<\/p>\n\n\n\n<p class=\"githubgist\" data-gist-file=\"usage.scss\">c51c33e1533e68c3f8fd24633700789f<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Insbesondere Elemente in Overlays, Popups, Sidebars oder <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Web_Components\/Using_custom_elements\">Custom Elements<\/a> lohnt sich der Einsatz von Container Queries \u2013 auch schon jetzt zum Beispiel mit dem obigen Script.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Seitdem es responsives Webdesign gibt, fragen Entwickler nach der M\u00f6glichkeit, DOM-Elemente basierend auf der Ihrer eigentlichen Gr\u00f6\u00dfe und nicht auf der Gr\u00f6\u00dfe des Viewports im Browser (mit Hilfe von Media Queries) zu gestalten. In der Tat sind Container Queries (anfangs Element Queries) wahrscheinlich die am h\u00e4ufigsten geforderte CSS-Funktion, die es in Browsern immer noch nicht [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"gtbabel_prevent_lngs":"","gtbabel_alt_lng":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-3069","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-blog"},"acf":[],"yoast_head":"<title>Container Queries schon heute nutzen &#060; Vielhuber David<\/title>\n<meta name=\"description\" content=\"Seitdem es responsives Webdesign gibt, fragen Entwickler nach der M\u00f6glichkeit, DOM-Elemente basierend auf der Ihrer eigentlichen Gr\u00f6\u00dfe und nicht au...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/vielhuber.de\/blog\/container-queries-schon-heute-nutzen\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Container Queries schon heute nutzen &#060; Vielhuber David\" \/>\n<meta property=\"og:description\" content=\"Seitdem es responsives Webdesign gibt, fragen Entwickler nach der M\u00f6glichkeit, DOM-Elemente basierend auf der Ihrer eigentlichen Gr\u00f6\u00dfe und nicht auf der\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vielhuber.de\/blog\/container-queries-schon-heute-nutzen\/\" \/>\n<meta property=\"og:site_name\" content=\"Vielhuber David\" \/>\n<meta property=\"article:published_time\" content=\"2021-10-05T00:37:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-10-07T00:52:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"700\" \/>\n\t<meta property=\"og:image:height\" content=\"552\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"David\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@vielhuber\" \/>\n<meta name=\"twitter:site\" content=\"@vielhuber\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"David\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"1\u00a0Minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/container-queries-schon-heute-nutzen\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/container-queries-schon-heute-nutzen\\\/\"},\"author\":{\"name\":\"David\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\"},\"headline\":\"Container Queries schon heute nutzen\",\"datePublished\":\"2021-10-05T00:37:52+00:00\",\"dateModified\":\"2021-10-07T00:52:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/container-queries-schon-heute-nutzen\\\/\"},\"wordCount\":204,\"publisher\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\"},\"articleSection\":[\"Blog\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/container-queries-schon-heute-nutzen\\\/\",\"url\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/container-queries-schon-heute-nutzen\\\/\",\"name\":\"Container Queries schon heute nutzen &#060; Vielhuber David\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#website\"},\"datePublished\":\"2021-10-05T00:37:52+00:00\",\"dateModified\":\"2021-10-07T00:52:00+00:00\",\"description\":\"Seitdem es responsives Webdesign gibt, fragen Entwickler nach der M\u00f6glichkeit, DOM-Elemente basierend auf der Ihrer eigentlichen Gr\u00f6\u00dfe und nicht auf der\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/container-queries-schon-heute-nutzen\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/vielhuber.de\\\/blog\\\/container-queries-schon-heute-nutzen\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/container-queries-schon-heute-nutzen\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/vielhuber.de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Container Queries schon heute nutzen\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#website\",\"url\":\"https:\\\/\\\/vielhuber.de\\\/\",\"name\":\"Vielhuber David\",\"description\":\"Full-Stack Developer\",\"publisher\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/vielhuber.de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\",\"name\":\"David\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\",\"url\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\",\"contentUrl\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\",\"width\":700,\"height\":552,\"caption\":\"David\"},\"logo\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/vielhuber\"]}]}<\/script>","yoast_head_json":{"title":"Container Queries schon heute nutzen &#060; Vielhuber David","description":"Seitdem es responsives Webdesign gibt, fragen Entwickler nach der M\u00f6glichkeit, DOM-Elemente basierend auf der Ihrer eigentlichen Gr\u00f6\u00dfe und nicht au...","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/vielhuber.de\/blog\/container-queries-schon-heute-nutzen\/","og_locale":"de_DE","og_type":"article","og_title":"Container Queries schon heute nutzen &#060; Vielhuber David","og_description":"Seitdem es responsives Webdesign gibt, fragen Entwickler nach der M\u00f6glichkeit, DOM-Elemente basierend auf der Ihrer eigentlichen Gr\u00f6\u00dfe und nicht auf der","og_url":"https:\/\/vielhuber.de\/blog\/container-queries-schon-heute-nutzen\/","og_site_name":"Vielhuber David","article_published_time":"2021-10-05T00:37:52+00:00","article_modified_time":"2021-10-07T00:52:00+00:00","og_image":[{"width":700,"height":552,"url":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","type":"image\/jpeg"}],"author":"David","twitter_card":"summary_large_image","twitter_creator":"@vielhuber","twitter_site":"@vielhuber","twitter_misc":{"Verfasst von":"David","Gesch\u00e4tzte Lesezeit":"1\u00a0Minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vielhuber.de\/blog\/container-queries-schon-heute-nutzen\/#article","isPartOf":{"@id":"https:\/\/vielhuber.de\/blog\/container-queries-schon-heute-nutzen\/"},"author":{"name":"David","@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef"},"headline":"Container Queries schon heute nutzen","datePublished":"2021-10-05T00:37:52+00:00","dateModified":"2021-10-07T00:52:00+00:00","mainEntityOfPage":{"@id":"https:\/\/vielhuber.de\/blog\/container-queries-schon-heute-nutzen\/"},"wordCount":204,"publisher":{"@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef"},"articleSection":["Blog"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/vielhuber.de\/blog\/container-queries-schon-heute-nutzen\/","url":"https:\/\/vielhuber.de\/blog\/container-queries-schon-heute-nutzen\/","name":"Container Queries schon heute nutzen &#060; Vielhuber David","isPartOf":{"@id":"https:\/\/vielhuber.de\/#website"},"datePublished":"2021-10-05T00:37:52+00:00","dateModified":"2021-10-07T00:52:00+00:00","description":"Seitdem es responsives Webdesign gibt, fragen Entwickler nach der M\u00f6glichkeit, DOM-Elemente basierend auf der Ihrer eigentlichen Gr\u00f6\u00dfe und nicht auf der","breadcrumb":{"@id":"https:\/\/vielhuber.de\/blog\/container-queries-schon-heute-nutzen\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vielhuber.de\/blog\/container-queries-schon-heute-nutzen\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/vielhuber.de\/blog\/container-queries-schon-heute-nutzen\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/vielhuber.de\/"},{"@type":"ListItem","position":2,"name":"Container Queries schon heute nutzen"}]},{"@type":"WebSite","@id":"https:\/\/vielhuber.de\/#website","url":"https:\/\/vielhuber.de\/","name":"Vielhuber David","description":"Full-Stack Developer","publisher":{"@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/vielhuber.de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":["Person","Organization"],"@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef","name":"David","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","url":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","contentUrl":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","width":700,"height":552,"caption":"David"},"logo":{"@id":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg"},"sameAs":["https:\/\/x.com\/vielhuber"]}]}},"_links":{"self":[{"href":"https:\/\/vielhuber.de\/ja\/wp-json\/wp\/v2\/posts\/3069","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vielhuber.de\/ja\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vielhuber.de\/ja\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vielhuber.de\/ja\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vielhuber.de\/ja\/wp-json\/wp\/v2\/comments?post=3069"}],"version-history":[{"count":9,"href":"https:\/\/vielhuber.de\/ja\/wp-json\/wp\/v2\/posts\/3069\/revisions"}],"predecessor-version":[{"id":3083,"href":"https:\/\/vielhuber.de\/ja\/wp-json\/wp\/v2\/posts\/3069\/revisions\/3083"}],"wp:attachment":[{"href":"https:\/\/vielhuber.de\/ja\/wp-json\/wp\/v2\/media?parent=3069"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vielhuber.de\/ja\/wp-json\/wp\/v2\/categories?post=3069"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vielhuber.de\/ja\/wp-json\/wp\/v2\/tags?post=3069"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}