{"id":1908,"date":"2017-03-14T16:24:38","date_gmt":"2017-03-14T15:24:38","guid":{"rendered":"https:\/\/www.clickstorm.de\/blog\/?p=1908"},"modified":"2025-08-05T16:38:55","modified_gmt":"2025-08-05T14:38:55","slug":"7-nuetzliche-css-tipps","status":"publish","type":"post","link":"https:\/\/www.clickstorm.de\/blog\/7-nuetzliche-css-tipps\/","title":{"rendered":"7 n\u00fctzliche CSS-Tipps"},"content":{"rendered":"<p>Ob Webshop, umfangreiche Webseite oder kleiner Blog &#8211; eines haben sie alle gemeinsam: CSS\u00a0ist\u00a0f\u00fcr den Look des Auftrittes zust\u00e4ndig. Daher geh\u00f6rt das Entwickeln von CSS-Templates immer zur Web-Entwicklung dazu. Denn erst CSS bringt das statische Design in &#8222;Webform&#8220;.<\/p>\n<p>Entwickler sollten CSS beherrschen wie eine zweite Muttersprache, damit die Entwicklung der CSS-Templates qualitativ hochwertig und effektiv umgesetzt werden kann. Um mit den st\u00e4ndigen Weiterentwicklungen der Auszeichnungssprache mitzuhalten, \u00f6ffnen wir in diesem Blog-Beitrag unsere Trickkiste und stellen 7\u00a0CSS-Tipps vor.<\/p>\n<h2>vw, vh, vmin &amp; vmax<\/h2>\n<p>Die &#8222;Neuen&#8220; unter den L\u00e4ngenma\u00dfen bieten\u00a0gerade f\u00fcr responsive Templates viel Flexibilit\u00e4t. Die L\u00e4ngenma\u00dfe spiegeln die Ma\u00dfe des aufrufenden Bildschirms wieder. Gerade die Einheit vh bringt daher viel Erleichterung, da die H\u00f6he \u00fcber %-Angaben nur eingeschr\u00e4nkt auf den aufrufenden Nutzer angewendet werden kann. Dadurch kann z.B. eine Box exakt auf die H\u00f6he und Breite des aufrufenden Displays angepasst werden. Aber auch flexible Schriftgr\u00f6\u00dfen sind damit m\u00f6glich. Die <a href=\"http:\/\/caniuse.com\/#feat=viewport-units\" target=\"_blank\" rel=\"noopener\">Browser-Unterst\u00fctzung<\/a> ist in allen aktuellen Browsern gegeben. Nur der Internet Explorer und der Edge-Browser unterst\u00fctzen diese Einheiten nur partiell.<\/p>\n<p>N\u00e4here\u00a0Informationen und Anwendungsbeispiele\u00a0zum Thema <a href=\"https:\/\/www.clickstorm.de\/blog\/immer-schoen-flexibel-bleiben\/\" target=\"_blank\" rel=\"noopener\">vw und vh<\/a>.<\/p>\n<h2>calc()<\/h2>\n<p>CSS kann mit der Funktion calc() rechnen &#8211; schon lange.\u00a0Alle Browser unterst\u00fctzen diese CSS-Funktion mittlerweile (<a href=\"http:\/\/caniuse.com\/#feat=calc\" target=\"_blank\" rel=\"noopener\">Can I use calc()<\/a>). Doch gerade in Verbindung mit den L\u00e4ngenma\u00dfen vh und vw er\u00f6ffnet diese Funktion dem Entwickler neue M\u00f6glichkeiten. Mit calc() k\u00f6nnen flexible Ma\u00dfe wie % oder vh mit statischen Ma\u00dfen wie px verrechnet werden.<\/p>\n<p>Ein\u00a0kleines Beispiel:<\/p>\n<p>Eine responsive Webseite nimmt immer 100% der Bildschirmbreite (100vw) ein. Es gibt eine gro\u00dfe linke Inhaltsspalte und eine schmalere rechte Spalte. Dabei hat\u00a0die rechte Spalte eine feste Breite von 280px, die linke gro\u00dfe Spalte soll sich entsprechend anpassen. Mit calc() ist es kein Problem die entsprechende Breite f\u00fcr die linke Spalte zu berechnen:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.container-left {\r\n    width: calc(100vw - 280px);\r\n}\r\n\r\n.container-right\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0width:\u00a0280px;\r\n}<\/pre>\n<p>Addition (+), Substraktion (-), Division (\/) und Multiplikation (*) sind m\u00f6glich.<\/p>\n<h2>@supports<\/h2>\n<p>Neue CSS-Eigenschaften wie &#8222;Transitions&#8220; oder &#8222;Flexbox&#8220; k\u00f6nnen nie ohne Einschr\u00e4nkungen direkt angewendet werden. Es ben\u00f6tigt immer eine gewisse Zeit, bis alle Browser die neuen Eigenschaften auch unterst\u00fctzen und darstellen k\u00f6nnen. Einige Browser sind damit schneller, Andere brauchen etwas mehr Zeit. Daher m\u00fcssen neuere CSS-Eigenschaften oft mit Fallback eingesetzt werden. D.h. es muss definiert werden, was passieren soll, wenn ein Browser die neue eingesetzte CSS-Eigenschaft nicht unterst\u00fctzt.<\/p>\n<p>Dazu kann die Regel @supports verwendet werden. Alle Browser (au\u00dfer der Internet Explorer) unterst\u00fctzen diese Regel (<a href=\"http:\/\/caniuse.com\/#feat=css-featurequeries\" target=\"_blank\" rel=\"noopener\">Can I use @supports<\/a>). So wird vor dem Einsatz einer &#8222;kritischen&#8220; CSS-Eigenschaft erst abgefragt, ob diese \u00fcberhaupt unterst\u00fctzt wird.\u00a0Ebenso kann auch @supports not eingesetzt werden. Auch umfangreiche Abfragen sind mit &#8222;and&#8220; und &#8222;or&#8220; m\u00f6glich.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">@supports (hyphens: auto) {\r\n    body {\r\n        hyphens: auto;\r\n    }\r\n}\r\n\r\n@supports\u00a0((transition-property:\u00a0color)\u00a0or (animation-name:\u00a0foo))\u00a0\r\n          and (transform:\u00a0rotate(10deg))\u00a0{\r\n    \/\/\u00a0...\r\n}<\/pre>\n<p>Durch diese CSS-Regel kann der\u00a0Einsatz von umfangreichen JavaScript-Bibliotheken wie &#8222;Modernizr&#8220; entfallen.<\/p>\n<h2>Kombinatoren &amp; Attributselektoren<\/h2>\n<p>Wer die Kombinatoren und Attributselektoren von CSS kennt, spart in der Entwicklung von CSS-Templates viel Zeit. Die Syntax ist einfach aber erweitert die M\u00f6glichkeiten der Entwicklung ungemein. Eine \u00dcbersicht:<\/p>\n<p>N\u00fctzliche Kombinatoren:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">p &gt; a {\r\n    \/\/ steuert alle Kindelemente (a-Tags) erster Ebene des p-Tags an\r\n}\r\n\r\np + a {\r\n    \/\/ steuert das direkte Nachbarelement (a-Tag) des p-Tags an\r\n}\r\n\r\np ~ a {\r\n    \/\/ steuert alle folgenden Geschwisterelemente gleicher Ebene (a-Tags) des p-Tags an\r\n}<\/pre>\n<p>N\u00fctzliche Attributselektoren:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">input[type=\"email\"] {\r\n    \/\/ steuert nur E-Mail-Inputfelder an\r\n}\r\n\r\nimg[title~=\"clickstorm\"] {\r\n    \/\/ steuert alle img-Tags an, die im title-Attribut die mit Leerzeichen getrennte Zeichenkette \"clickstorm\" enthalten\r\n}\r\n\r\na[href^=\"https:\/\/\"]\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\/\/\u00a0steuert\u00a0alle\u00a0a-Tags\u00a0an,\u00a0die\u00a0zu einer URL beginnend mit \"https:\/\/\" verweisen\r\n}\r\n\r\na[href$=\".pdf\"]\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\/\/\u00a0steuert\u00a0alle\u00a0a-Tags\u00a0an,\u00a0die\u00a0zu\u00a0einer\u00a0URL\u00a0endend\u00a0mit\u00a0\".pdf\"\u00a0verweisen\r\n}\r\n\r\na[href*=\"clickstorm.de\"]\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\/\/\u00a0steuert\u00a0alle\u00a0a-Tags\u00a0an,\u00a0die\u00a0die Zeichenkette \"clickstorm.de\" enthalten\r\n}<\/pre>\n<p>Es lohnt sich einen Blick auf\u00a0die <a href=\"https:\/\/wiki.selfhtml.org\/wiki\/CSS\/Selektoren\" target=\"_blank\" rel=\"noopener\">vollst\u00e4ndige Selektoren-\u00dcbersicht<\/a> zu werfen.<\/p>\n<h2>:target<\/h2>\n<p>Die Pseudoklasse :target wird gesetzt, wenn ein bestimmter Bereich der Webseite mit einem Ankerlink (z.B. #details) angesprochen wurde. So kann das CSS je nach aufgerufenem Anker anders aufgebaut werden. Das macht z.B. Bilder-Gallerien oder mobile Navigationen ohne JavaScript m\u00f6glich.<\/p>\n<p>HTML:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;a href=\"#mobile-nav\"&gt;Link \u00f6ffnet mobiles Men\u00fc&lt;\/a&gt;\r\n\r\n&lt;div id=\"mobile-nav\"&gt;\r\n    &lt;!-- Mobiles Men\u00fc --&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>CSS:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">#mobile-nav {\r\n    display: none;\r\n}\r\n\r\n#mobile-nav:target {\r\n    display: block;\r\n}<\/pre>\n<p>Wird auf den Link geklickt, wird der URL der Anker #mobile-nav hinzugef\u00fcgt. Das CSS sorgt dann daf\u00fcr, dass das mobile Men\u00fc ge\u00f6ffnet wird, wenn der Anker aufgerufen wurde.<\/p>\n<p>Die Pseudoklasse :target ist in allen Browsern <a href=\"http:\/\/caniuse.com\/#feat=css-sel3\" target=\"_blank\" rel=\"noopener\">unterst\u00fctzt<\/a>.<\/p>\n<h2>Syntax der Pseudoelemente<\/h2>\n<p>CSS stellt einige <a href=\"https:\/\/developer.mozilla.org\/de\/docs\/Web\/CSS\/Pseudo-elements\" target=\"_blank\" rel=\"noopener\">Pseudoelemente<\/a>\u00a0(nicht verwechseln mit Pseudoklassen) zur Verf\u00fcgung. Dabei werden die Pseudoelemente ::before und ::after sehr h\u00e4ufig eingesetzt. Bei der Entwicklung f\u00e4llt auf, dass es zwei Schreibweisen gibt: mit einem vorangestellten Doppelpunkt (:) oder mit zweien (::). Dabei ist die Regelung klar: der einfache Doppelpunkt ist eine veraltete Schreibweise von CSS Level 1 und 2. Diese wird zwar ebenfalls von allen Browser unterst\u00fctzt, allerdings nur aus Gr\u00fcnden der Abw\u00e4rtskompatibilit\u00e4t.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">a::before {\r\n    content: \"&gt; \";\r\n}<\/pre>\n<p>Wer also moderne CSS3-Templates entwickelt, sollte die Schreibweise mit doppeltem Doppelpunkt nutzen.<\/p>\n<h2>Flexbox<\/h2>\n<p>Lang ersehnt wird nun das flexible Box-Layout Flexbox von allen Browsern mehr oder weniger gut <a href=\"http:\/\/caniuse.com\/#feat=flexbox\" target=\"_blank\" rel=\"noopener\">unterst\u00fctzt<\/a>. Es kann somit mittlerweile gut\u00a0in Kundenprojekten angewendet werden.\u00a0Mittels Flexbox lassen sich mit wenigen Handgriffen Spalten in unterschiedlichsten Anordnungen darstellen. Flexbox bietet somit mit einem \u00fcberschaubaren Vokabular gro\u00dfe Flexibilit\u00e4t mit wenigen Zeilen Code.<\/p>\n<p>Wir haben bereits im letzten Jahr einen ausf\u00fchrlichen Beitrag \u00fcber den <a href=\"https:\/\/www.clickstorm.de\/blog\/flexbox-der-traum-aller-entwicklerinnen\/\" target=\"_blank\" rel=\"noopener\">Einsatz von Flexbox<\/a> verfasst. Hier erhalten Sie einen guten \u00dcberblick \u00fcber den Einsatz, die Vorteile und M\u00f6glichkeiten.<\/p>\n<h2>Fazit<\/h2>\n<p>Wer in der CSS-Entwicklung auf dem Laufenden bleibt, kann Zeit und Code sparen. Das macht zum einen die Template-Entwicklung effektiver, h\u00e4lt den Quellcode \u00fcbersichtlicher und spart durch k\u00fcrzeren Quellcode im Endeffekt Ladezeit.\u00a0Zudem bringen neue Entwicklungen auch immer neue Funktionen mit, die ausgefallenere Webdesigns erm\u00f6glichen.<\/p>\n<p>Sie suchen noch einen Partner f\u00fcr moderne CSS-Entwicklung? <a href=\"https:\/\/www.clickstorm.de\/kontakt\/\" target=\"_blank\" rel=\"noopener\">Sprechen Sie uns an<\/a>.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Um die Entwicklung der CSS-Templates qualitativ hochwertig und effektiv umsetzen zu k\u00f6nnen, sollten Entwickler CSS beherrschen wie eine zweite Muttersprache. Wir \u00f6ffnen unsere Trickkiste.<\/p>\n","protected":false},"author":8,"featured_media":1931,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[137],"tags":[92,67,26,66],"class_list":["post-1908","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend","tag-css","tag-css3","tag-responsive","tag-webdesign"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>7 n\u00fctzliche CSS-Tipps f\u00fcr moderne Template-Entwicklung | clickstorm.de<\/title>\n<meta name=\"description\" content=\"Um die Entwicklung der CSS-Templates qualitativ hochwertig und effektiv umsetzen zu k\u00f6nnen, sollten Entwickler CSS beherrschen wie eine zweite Muttersprache\" \/>\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\/7-nuetzliche-css-tipps\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"7 n\u00fctzliche CSS-Tipps f\u00fcr moderne Template-Entwicklung | clickstorm.de\" \/>\n<meta property=\"og:description\" content=\"Um die Entwicklung der CSS-Templates qualitativ hochwertig und effektiv umsetzen zu k\u00f6nnen, sollten Entwickler CSS beherrschen wie eine zweite Muttersprache\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.clickstorm.de\/blog\/7-nuetzliche-css-tipps\/\" \/>\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=\"2017-03-14T15:24:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-05T14:38:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/03\/7-css-tricks-schatzkiste_teaser-01.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=\"Angela\" \/>\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=\"Angela\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"5\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/7-nuetzliche-css-tipps\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/7-nuetzliche-css-tipps\\\/\"},\"author\":{\"name\":\"Angela\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/person\\\/ba487d63eccacea4839c77536f9dd569\"},\"headline\":\"7 n\u00fctzliche CSS-Tipps\",\"datePublished\":\"2017-03-14T15:24:38+00:00\",\"dateModified\":\"2025-08-05T14:38:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/7-nuetzliche-css-tipps\\\/\"},\"wordCount\":847,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/7-nuetzliche-css-tipps\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/03\\\/7-css-tricks-schatzkiste_teaser-01.jpg\",\"keywords\":[\"CSS\",\"CSS3\",\"Responsive\",\"Webdesign\"],\"articleSection\":[\"Frontend\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/7-nuetzliche-css-tipps\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/7-nuetzliche-css-tipps\\\/\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/7-nuetzliche-css-tipps\\\/\",\"name\":\"7 n\u00fctzliche CSS-Tipps f\u00fcr moderne Template-Entwicklung | clickstorm.de\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/7-nuetzliche-css-tipps\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/7-nuetzliche-css-tipps\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/03\\\/7-css-tricks-schatzkiste_teaser-01.jpg\",\"datePublished\":\"2017-03-14T15:24:38+00:00\",\"dateModified\":\"2025-08-05T14:38:55+00:00\",\"description\":\"Um die Entwicklung der CSS-Templates qualitativ hochwertig und effektiv umsetzen zu k\u00f6nnen, sollten Entwickler CSS beherrschen wie eine zweite Muttersprache\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/7-nuetzliche-css-tipps\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/7-nuetzliche-css-tipps\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/7-nuetzliche-css-tipps\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/03\\\/7-css-tricks-schatzkiste_teaser-01.jpg\",\"contentUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/03\\\/7-css-tricks-schatzkiste_teaser-01.jpg\",\"width\":1170,\"height\":577,\"caption\":\"7 CSS Tricks \\\/ Tipps, Schatzkiste\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/7-nuetzliche-css-tipps\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"7 n\u00fctzliche CSS-Tipps\"}]},{\"@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\\\/ba487d63eccacea4839c77536f9dd569\",\"name\":\"Angela\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7a410dd158504ccaf4003dcfc3e8458caf513e73b06ddbfee2b0a7cdc0fa6456?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7a410dd158504ccaf4003dcfc3e8458caf513e73b06ddbfee2b0a7cdc0fa6456?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7a410dd158504ccaf4003dcfc3e8458caf513e73b06ddbfee2b0a7cdc0fa6456?s=96&d=mm&r=g\",\"caption\":\"Angela\"},\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/author\\\/angela\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"7 n\u00fctzliche CSS-Tipps f\u00fcr moderne Template-Entwicklung | clickstorm.de","description":"Um die Entwicklung der CSS-Templates qualitativ hochwertig und effektiv umsetzen zu k\u00f6nnen, sollten Entwickler CSS beherrschen wie eine zweite Muttersprache","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\/7-nuetzliche-css-tipps\/","og_locale":"de_DE","og_type":"article","og_title":"7 n\u00fctzliche CSS-Tipps f\u00fcr moderne Template-Entwicklung | clickstorm.de","og_description":"Um die Entwicklung der CSS-Templates qualitativ hochwertig und effektiv umsetzen zu k\u00f6nnen, sollten Entwickler CSS beherrschen wie eine zweite Muttersprache","og_url":"https:\/\/www.clickstorm.de\/blog\/7-nuetzliche-css-tipps\/","og_site_name":"clickstorm Blog","article_publisher":"https:\/\/de-de.facebook.com\/clickstorm\/","article_published_time":"2017-03-14T15:24:38+00:00","article_modified_time":"2025-08-05T14:38:55+00:00","og_image":[{"width":1170,"height":577,"url":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/03\/7-css-tricks-schatzkiste_teaser-01.jpg","type":"image\/jpeg"}],"author":"Angela","twitter_card":"summary_large_image","twitter_creator":"@clickstorm_gmbh","twitter_site":"@clickstorm_gmbh","twitter_misc":{"Verfasst von":"Angela","Gesch\u00e4tzte Lesezeit":"5\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.clickstorm.de\/blog\/7-nuetzliche-css-tipps\/#article","isPartOf":{"@id":"https:\/\/www.clickstorm.de\/blog\/7-nuetzliche-css-tipps\/"},"author":{"name":"Angela","@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/person\/ba487d63eccacea4839c77536f9dd569"},"headline":"7 n\u00fctzliche CSS-Tipps","datePublished":"2017-03-14T15:24:38+00:00","dateModified":"2025-08-05T14:38:55+00:00","mainEntityOfPage":{"@id":"https:\/\/www.clickstorm.de\/blog\/7-nuetzliche-css-tipps\/"},"wordCount":847,"commentCount":0,"publisher":{"@id":"https:\/\/www.clickstorm.de\/blog\/#organization"},"image":{"@id":"https:\/\/www.clickstorm.de\/blog\/7-nuetzliche-css-tipps\/#primaryimage"},"thumbnailUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/03\/7-css-tricks-schatzkiste_teaser-01.jpg","keywords":["CSS","CSS3","Responsive","Webdesign"],"articleSection":["Frontend"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.clickstorm.de\/blog\/7-nuetzliche-css-tipps\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.clickstorm.de\/blog\/7-nuetzliche-css-tipps\/","url":"https:\/\/www.clickstorm.de\/blog\/7-nuetzliche-css-tipps\/","name":"7 n\u00fctzliche CSS-Tipps f\u00fcr moderne Template-Entwicklung | clickstorm.de","isPartOf":{"@id":"https:\/\/www.clickstorm.de\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.clickstorm.de\/blog\/7-nuetzliche-css-tipps\/#primaryimage"},"image":{"@id":"https:\/\/www.clickstorm.de\/blog\/7-nuetzliche-css-tipps\/#primaryimage"},"thumbnailUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/03\/7-css-tricks-schatzkiste_teaser-01.jpg","datePublished":"2017-03-14T15:24:38+00:00","dateModified":"2025-08-05T14:38:55+00:00","description":"Um die Entwicklung der CSS-Templates qualitativ hochwertig und effektiv umsetzen zu k\u00f6nnen, sollten Entwickler CSS beherrschen wie eine zweite Muttersprache","breadcrumb":{"@id":"https:\/\/www.clickstorm.de\/blog\/7-nuetzliche-css-tipps\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.clickstorm.de\/blog\/7-nuetzliche-css-tipps\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.clickstorm.de\/blog\/7-nuetzliche-css-tipps\/#primaryimage","url":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/03\/7-css-tricks-schatzkiste_teaser-01.jpg","contentUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/03\/7-css-tricks-schatzkiste_teaser-01.jpg","width":1170,"height":577,"caption":"7 CSS Tricks \/ Tipps, Schatzkiste"},{"@type":"BreadcrumbList","@id":"https:\/\/www.clickstorm.de\/blog\/7-nuetzliche-css-tipps\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.clickstorm.de\/blog\/"},{"@type":"ListItem","position":2,"name":"7 n\u00fctzliche CSS-Tipps"}]},{"@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\/ba487d63eccacea4839c77536f9dd569","name":"Angela","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/7a410dd158504ccaf4003dcfc3e8458caf513e73b06ddbfee2b0a7cdc0fa6456?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/7a410dd158504ccaf4003dcfc3e8458caf513e73b06ddbfee2b0a7cdc0fa6456?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7a410dd158504ccaf4003dcfc3e8458caf513e73b06ddbfee2b0a7cdc0fa6456?s=96&d=mm&r=g","caption":"Angela"},"url":"https:\/\/www.clickstorm.de\/blog\/author\/angela\/"}]}},"_links":{"self":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts\/1908","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\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/comments?post=1908"}],"version-history":[{"count":20,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts\/1908\/revisions"}],"predecessor-version":[{"id":6391,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts\/1908\/revisions\/6391"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/media\/1931"}],"wp:attachment":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/media?parent=1908"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/categories?post=1908"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/tags?post=1908"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}