{"id":5869,"date":"2024-03-22T10:40:32","date_gmt":"2024-03-22T09:40:32","guid":{"rendered":"https:\/\/www.clickstorm.de\/blog\/?p=5869"},"modified":"2024-04-17T10:28:43","modified_gmt":"2024-04-17T08:28:43","slug":"css-container-queries","status":"publish","type":"post","link":"https:\/\/www.clickstorm.de\/blog\/css-container-queries\/","title":{"rendered":"CSS Container Queries: Dein Gamechanger im Responsive Design"},"content":{"rendered":"<p>Willkommen in der neuen \u00c4ra des Responsive Designs, gepr\u00e4gt durch die Einf\u00fchrung von CSS Container Queries. Diese technologische Neuerung revolutioniert die Art und Weise, wie wir als Agentur Websites und Anwendungen gestalten. Stell dir vor, das Design deiner Website passt sich perfekt an den jeweiligen Container an und nicht nur an die Gr\u00f6\u00dfe des Bildschirms. Das erm\u00f6glicht eine bisher unerreichte Flexibilit\u00e4t und Pr\u00e4zision in unseren Projekten.<\/p>\n<h2>Ein tieferer Einblick in Container Queries<\/h2>\n<p>Container Queries erlauben es uns, Styles spezifisch auf Elemente anzuwenden, die sich auf die Gr\u00f6\u00dfe ihres umgebenen Containers beziehen. Das markiert einen wichtigen Fortschritt gegen\u00fcber den traditionellen Media Queries, die sich auf die gesamte Bildschirmbreite des Ger\u00e4ts beziehen.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-5874 size-full aligncenter\" src=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2024\/03\/css-container-queries.png\" alt=\"Css Container Queries beziehen sich auf die Breite des Containers, nicht auf die Breite des Browser-Fensters\" width=\"1240\" height=\"788\" srcset=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2024\/03\/css-container-queries.png 1240w, https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2024\/03\/css-container-queries-300x191.png 300w, https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2024\/03\/css-container-queries-1024x651.png 1024w, https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2024\/03\/css-container-queries-768x488.png 768w\" sizes=\"auto, (max-width: 1240px) 100vw, 1240px\" \/><\/p>\n<p>Mehr dazu erf\u00e4hrst du im folgenden Video:<\/p>\n<div class=\"privacy-container js-privacy-msg-video\"><img decoding=\"async\" class=\"privacy-text-image\" src=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/plugins\/clickstorm-embed\/images\/comment-alt-exclamation.svg\" alt=\"Info Icon\"><\/p>\n<p class=\"privacy-text\">Dieses Video wird \u00fcber eine externe Plattform (YouTube) gehostet. Das Laden bedarf der Zustimmung unserer <a class=\"privacy-text-link\" href=\"https:\/\/www.clickstorm.de\/blog\/datenschutz\/\" target=\"_blank\">Datenschutzbestimmungen.<\/a><\/p>\n<p><a class=\"btn btn-primary btn-cookie js-cookie-open-modal\" data-cs-cookie-anchor=\"externalMedia\" href=\"#\">Einstellung vornehmen<\/a><\/div>\n<div class=\"iframe\"><iframe class=\"js-iframe-privacy-video\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen src=\"\" data-src=\"https:\/\/www.youtube-nocookie.com\/embed\/sPB0L58JXp0\"><\/iframe><\/div>\n<h2>Die offizielle Anerkennung und Browser-Unterst\u00fctzung<\/h2>\n<p>Die Welt des Webstandards bewegt sich schnell, und Container Queries sind auf dem besten Weg, ein neuer Standard zu werden. Aktuell sind sie in diesem <a href=\"https:\/\/www.w3.org\/TR\/css-contain-3\/\" target=\"_blank\" rel=\"noopener\">Entwurf<\/a> vom W3C aus dem August 2022 n\u00e4her beschrieben. Alle modernen Web-Browser (Chrome, Firefox und Edge) unterst\u00fctzen Container Queries. Safari unterst\u00fctzt diese ab Version 16. Heute am 22.03.2024 sind das somit \u00fcber 90% der Browser. Mehr dazu unter <a href=\"https:\/\/caniuse.com\/css-container-queries\" target=\"_blank\" rel=\"noopener\">CanIUse<\/a>.<\/p>\n<p>Um sicherzustellen, dass unsere Projekte immer auf dem neuesten Stand sind, halten wir uns stets \u00fcber die neuesten Entwicklungen beim World Wide Web Consortium (W3C) und die Unterst\u00fctzung durch die verschiedenen Browser auf dem Laufenden.<\/p>\n<h2>Anwendungsf\u00e4lle f\u00fcr Container Queries<\/h2>\n<p>Indem wir Container Queries nutzen, k\u00f6nnen wir Karten, Widgets und andere Komponenten so gestalten, dass sie sich nahtlos in das umgebende Design einf\u00fcgen, unabh\u00e4ngig von der Gr\u00f6\u00dfe ihres Containers. Das erm\u00f6glicht uns, ein koh\u00e4rentes und ansprechendes Benutzererlebnis \u00fcber alle Teile einer Website oder Anwendung hinweg zu gew\u00e4hrleisten.<\/p>\n<h3>1. Anpassung der Spaltenanzahl in einem Grid-Layout<\/h3>\n<p>Stell dir vor, du hast ein Produkt-Grid auf einer E-Commerce-Seite. Mit Container Queries kannst du die Anzahl der Spalten basierend auf der Gr\u00f6\u00dfe des Grid-Containers und nicht auf der gesamten Fensterbreite anpassen. So sorgst du daf\u00fcr, dass deine Produkte immer optimal pr\u00e4sentiert werden.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.product-grid {\r\n  container-type: inline-size;\r\n}\r\n\r\n@container (min-width: 500px) {\r\n  .product-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(2, 1fr);\r\n    gap: 20px;\r\n  }\r\n}\r\n\r\n@container (min-width: 800px) {\r\n  .product-grid {\r\n    grid-template-columns: repeat(3, 1fr);\r\n  }\r\n}<\/pre>\n<p>&nbsp;<\/p>\n<h3>2. Dynamische Textgr\u00f6\u00dfen<\/h3>\n<p>Ein Textblock soll sich nicht nur in der Gr\u00f6\u00dfe anpassen, je nachdem wie viel Platz zur Verf\u00fcgung steht, sondern auch in der Textgr\u00f6\u00dfe, um Lesbarkeit zu gew\u00e4hrleisten.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.text-block\u00a0{\r\n\u00a0\u00a0container-type:\u00a0inline-size;\r\n}\r\n\r\n@container\u00a0(min-width:\u00a0600px)\u00a0{\r\n\u00a0\u00a0.text\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0font-size:\u00a01.2rem;\u00a0\/*\u00a0Gr\u00f6\u00dferer\u00a0Text\u00a0f\u00fcr\u00a0gr\u00f6\u00dfere\u00a0Container\u00a0*\/\r\n\u00a0\u00a0}\r\n}\r\n\r\n@container\u00a0(max-width:\u00a0599px)\u00a0{\r\n\u00a0\u00a0.text\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0font-size:\u00a01rem;\u00a0\/*\u00a0Standard\u00a0Textgr\u00f6\u00dfe\u00a0f\u00fcr\u00a0kleinere\u00a0Container\u00a0*\/\r\n\u00a0\u00a0}\r\n}\r\n<\/pre>\n<h3>3. Responsive Navigation<\/h3>\n<p>Eine Navigation, die sich an den verf\u00fcgbaren Platz anpasst, kann das Benutzererlebnis deutlich verbessern. Mit Container Queries kannst du bestimmen, ob ein vollst\u00e4ndiges Men\u00fc, ein kompaktes Men\u00fc oder ein Hamburger-Men\u00fc angezeigt wird, basierend auf der Breite des Navigationscontainers.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.nav-container {\r\n  container-type: inline-size;\r\n}\r\n\r\n@container (max-width: 600px) {\r\n  .nav-menu {\r\n    display: none;\r\n  }\r\n  .nav-hamburger {\r\n    display: block;\r\n  }\r\n}\r\n\r\n@container (min-width: 601px) {\r\n  .nav-menu {\r\n    display: flex;\r\n  }\r\n  .nav-hamburger {\r\n    display: none;\r\n  }\r\n}<\/pre>\n<p>&nbsp;<\/p>\n<h2>Zusammenfassung<\/h2>\n<p>CSS Container Queries bieten uns eine m\u00e4chtige neue M\u00f6glichkeit, <a href=\"https:\/\/www.clickstorm.de\/blog\/alles-responsive\/\">Responsive Design<\/a> auf eine Weise zu gestalten, die sowohl flexibler als auch pr\u00e4ziser ist als je zuvor. Sie erm\u00f6glichen uns, als Agentur, innovative L\u00f6sungen zu entwickeln, die den spezifischen Anforderungen und Zielen unserer Kunden gerecht werden. Wir freuen uns darauf, diese Technologie in zuk\u00fcnftigen Projekten einzusetzen, um beeindruckende, ma\u00dfgeschneiderte Erfahrungen zu schaffen.<\/p>\n<p>Wenn du mehr \u00fcber moderne Webentwicklungstechniken erfahren oder deine Skills erweitern m\u00f6chtest, bist du bei uns genau richtig. Schau bei unseren <a href=\"https:\/\/www.clickstorm.de\/jobs\/\">Stellenangeboten<\/a> vorbei oder nimm <a href=\"https:\/\/www.clickstorm.de\/kontakt\/\">Kontakt<\/a> zu uns auf. Wir sind immer auf der Suche nach talentierten Entwicklern, die unser Team verst\u00e4rken m\u00f6chten.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Willkommen in der neuen \u00c4ra des Responsive Designs, gepr\u00e4gt durch die Einf\u00fchrung von CSS Container Queries. Diese technologische Neuerung revolutioniert die Art und Weise, wie wir als Agentur Websites und [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":5882,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[137],"tags":[92,67,45,27,66],"class_list":["post-5869","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend","tag-css","tag-css3","tag-entwicklung","tag-mobile-websites","tag-webdesign"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS Container Queries: Dein Gamechanger im Responsive Design - clickstorm Blog<\/title>\n<meta name=\"description\" content=\"Entdecke, wie CSS Container Queries das Responsive Design transformieren. Erfahre wie du sie f\u00fcr deine Webprojekte nutzen kannst.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.clickstorm.de\/blog\/css-container-queries\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Container Queries: Dein Gamechanger im Responsive Design - clickstorm Blog\" \/>\n<meta property=\"og:description\" content=\"Entdecke, wie CSS Container Queries das Responsive Design transformieren. Erfahre wie du sie f\u00fcr deine Webprojekte nutzen kannst.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.clickstorm.de\/blog\/css-container-queries\/\" \/>\n<meta property=\"og:site_name\" content=\"clickstorm Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/de-de.facebook.com\/clickstorm\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-22T09:40:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-17T08:28:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2024\/03\/dalle-create-a-visually-appealing-header-image-for-a-blog-post-about-CSS-Container-Queries.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1170\" \/>\n\t<meta property=\"og:image:height\" content=\"577\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Marc\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@clickstorm_gmbh\" \/>\n<meta name=\"twitter:site\" content=\"@clickstorm_gmbh\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marc\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"4\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/css-container-queries\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/css-container-queries\\\/\"},\"author\":{\"name\":\"Marc\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/person\\\/594fb824a2f049d33b2a1b4406bfc86b\"},\"headline\":\"CSS Container Queries: Dein Gamechanger im Responsive Design\",\"datePublished\":\"2024-03-22T09:40:32+00:00\",\"dateModified\":\"2024-04-17T08:28:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/css-container-queries\\\/\"},\"wordCount\":556,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/css-container-queries\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/03\\\/dalle-create-a-visually-appealing-header-image-for-a-blog-post-about-CSS-Container-Queries.jpg\",\"keywords\":[\"CSS\",\"CSS3\",\"Entwicklung\",\"Mobile Websites\",\"Webdesign\"],\"articleSection\":[\"Frontend\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/css-container-queries\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/css-container-queries\\\/\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/css-container-queries\\\/\",\"name\":\"CSS Container Queries: Dein Gamechanger im Responsive Design - clickstorm Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/css-container-queries\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/css-container-queries\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/03\\\/dalle-create-a-visually-appealing-header-image-for-a-blog-post-about-CSS-Container-Queries.jpg\",\"datePublished\":\"2024-03-22T09:40:32+00:00\",\"dateModified\":\"2024-04-17T08:28:43+00:00\",\"description\":\"Entdecke, wie CSS Container Queries das Responsive Design transformieren. Erfahre wie du sie f\u00fcr deine Webprojekte nutzen kannst.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/css-container-queries\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/css-container-queries\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/css-container-queries\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/03\\\/dalle-create-a-visually-appealing-header-image-for-a-blog-post-about-CSS-Container-Queries.jpg\",\"contentUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/03\\\/dalle-create-a-visually-appealing-header-image-for-a-blog-post-about-CSS-Container-Queries.jpg\",\"width\":1170,\"height\":577,\"caption\":\"CSS Container Queries - Containerschiff\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/css-container-queries\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Container Queries: Dein Gamechanger im Responsive Design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/\",\"name\":\"clickstorm Blog\",\"description\":\"Neuigkeiten rund um Webentwicklung\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#organization\",\"name\":\"clickstorm GmbH\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/11\\\/logo.svg\",\"contentUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/11\\\/logo.svg\",\"caption\":\"clickstorm GmbH\"},\"image\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/de-de.facebook.com\\\/clickstorm\\\/\",\"https:\\\/\\\/x.com\\\/clickstorm_gmbh\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCEaU1eUbug6OiI4uU6vA-cA\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/person\\\/594fb824a2f049d33b2a1b4406bfc86b\",\"name\":\"Marc\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/85b6c585f298a873f9f4be166b9fbba00a9ad2482b92863d227e5d227136d135?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/85b6c585f298a873f9f4be166b9fbba00a9ad2482b92863d227e5d227136d135?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/85b6c585f298a873f9f4be166b9fbba00a9ad2482b92863d227e5d227136d135?s=96&d=mm&r=g\",\"caption\":\"Marc\"},\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/author\\\/marc\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Container Queries: Dein Gamechanger im Responsive Design - clickstorm Blog","description":"Entdecke, wie CSS Container Queries das Responsive Design transformieren. Erfahre wie du sie f\u00fcr deine Webprojekte nutzen kannst.","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:\/\/www.clickstorm.de\/blog\/css-container-queries\/","og_locale":"de_DE","og_type":"article","og_title":"CSS Container Queries: Dein Gamechanger im Responsive Design - clickstorm Blog","og_description":"Entdecke, wie CSS Container Queries das Responsive Design transformieren. Erfahre wie du sie f\u00fcr deine Webprojekte nutzen kannst.","og_url":"https:\/\/www.clickstorm.de\/blog\/css-container-queries\/","og_site_name":"clickstorm Blog","article_publisher":"https:\/\/de-de.facebook.com\/clickstorm\/","article_published_time":"2024-03-22T09:40:32+00:00","article_modified_time":"2024-04-17T08:28:43+00:00","og_image":[{"width":1170,"height":577,"url":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2024\/03\/dalle-create-a-visually-appealing-header-image-for-a-blog-post-about-CSS-Container-Queries.jpg","type":"image\/jpeg"}],"author":"Marc","twitter_card":"summary_large_image","twitter_creator":"@clickstorm_gmbh","twitter_site":"@clickstorm_gmbh","twitter_misc":{"Verfasst von":"Marc","Gesch\u00e4tzte Lesezeit":"4\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.clickstorm.de\/blog\/css-container-queries\/#article","isPartOf":{"@id":"https:\/\/www.clickstorm.de\/blog\/css-container-queries\/"},"author":{"name":"Marc","@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/person\/594fb824a2f049d33b2a1b4406bfc86b"},"headline":"CSS Container Queries: Dein Gamechanger im Responsive Design","datePublished":"2024-03-22T09:40:32+00:00","dateModified":"2024-04-17T08:28:43+00:00","mainEntityOfPage":{"@id":"https:\/\/www.clickstorm.de\/blog\/css-container-queries\/"},"wordCount":556,"commentCount":0,"publisher":{"@id":"https:\/\/www.clickstorm.de\/blog\/#organization"},"image":{"@id":"https:\/\/www.clickstorm.de\/blog\/css-container-queries\/#primaryimage"},"thumbnailUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2024\/03\/dalle-create-a-visually-appealing-header-image-for-a-blog-post-about-CSS-Container-Queries.jpg","keywords":["CSS","CSS3","Entwicklung","Mobile Websites","Webdesign"],"articleSection":["Frontend"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.clickstorm.de\/blog\/css-container-queries\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.clickstorm.de\/blog\/css-container-queries\/","url":"https:\/\/www.clickstorm.de\/blog\/css-container-queries\/","name":"CSS Container Queries: Dein Gamechanger im Responsive Design - clickstorm Blog","isPartOf":{"@id":"https:\/\/www.clickstorm.de\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.clickstorm.de\/blog\/css-container-queries\/#primaryimage"},"image":{"@id":"https:\/\/www.clickstorm.de\/blog\/css-container-queries\/#primaryimage"},"thumbnailUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2024\/03\/dalle-create-a-visually-appealing-header-image-for-a-blog-post-about-CSS-Container-Queries.jpg","datePublished":"2024-03-22T09:40:32+00:00","dateModified":"2024-04-17T08:28:43+00:00","description":"Entdecke, wie CSS Container Queries das Responsive Design transformieren. Erfahre wie du sie f\u00fcr deine Webprojekte nutzen kannst.","breadcrumb":{"@id":"https:\/\/www.clickstorm.de\/blog\/css-container-queries\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.clickstorm.de\/blog\/css-container-queries\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.clickstorm.de\/blog\/css-container-queries\/#primaryimage","url":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2024\/03\/dalle-create-a-visually-appealing-header-image-for-a-blog-post-about-CSS-Container-Queries.jpg","contentUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2024\/03\/dalle-create-a-visually-appealing-header-image-for-a-blog-post-about-CSS-Container-Queries.jpg","width":1170,"height":577,"caption":"CSS Container Queries - Containerschiff"},{"@type":"BreadcrumbList","@id":"https:\/\/www.clickstorm.de\/blog\/css-container-queries\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.clickstorm.de\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS Container Queries: Dein Gamechanger im Responsive Design"}]},{"@type":"WebSite","@id":"https:\/\/www.clickstorm.de\/blog\/#website","url":"https:\/\/www.clickstorm.de\/blog\/","name":"clickstorm Blog","description":"Neuigkeiten rund um Webentwicklung","publisher":{"@id":"https:\/\/www.clickstorm.de\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.clickstorm.de\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.clickstorm.de\/blog\/#organization","name":"clickstorm GmbH","url":"https:\/\/www.clickstorm.de\/blog\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/11\/logo.svg","contentUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/11\/logo.svg","caption":"clickstorm GmbH"},"image":{"@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/de-de.facebook.com\/clickstorm\/","https:\/\/x.com\/clickstorm_gmbh","https:\/\/www.youtube.com\/channel\/UCEaU1eUbug6OiI4uU6vA-cA"]},{"@type":"Person","@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/person\/594fb824a2f049d33b2a1b4406bfc86b","name":"Marc","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/85b6c585f298a873f9f4be166b9fbba00a9ad2482b92863d227e5d227136d135?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/85b6c585f298a873f9f4be166b9fbba00a9ad2482b92863d227e5d227136d135?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/85b6c585f298a873f9f4be166b9fbba00a9ad2482b92863d227e5d227136d135?s=96&d=mm&r=g","caption":"Marc"},"url":"https:\/\/www.clickstorm.de\/blog\/author\/marc\/"}]}},"_links":{"self":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts\/5869","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/comments?post=5869"}],"version-history":[{"count":11,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts\/5869\/revisions"}],"predecessor-version":[{"id":5888,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts\/5869\/revisions\/5888"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/media\/5882"}],"wp:attachment":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/media?parent=5869"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/categories?post=5869"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/tags?post=5869"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}