{"id":18632,"date":"2020-04-15T16:31:32","date_gmt":"2020-04-15T14:31:32","guid":{"rendered":"https:\/\/www.inovex.de\/blog\/?p=18632"},"modified":"2022-12-02T09:03:20","modified_gmt":"2022-12-02T08:03:20","slug":"css-faq","status":"publish","type":"post","link":"https:\/\/www.inovex.de\/de\/blog\/css-faq\/","title":{"rendered":"CSS: Eure Fragen beantwortet!"},"content":{"rendered":"<p>Bei unserem Lean Coffee zum Thema CSS blieben aus zeitlichen Gr\u00fcnden einige Fragen unbeantwortet. Wir haben sie f\u00fcr euch zusammengetragen und von unseren Expert:innen beantworten lassen.<\/p>\n<p><!--more--><\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\"><\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.inovex.de\/de\/blog\/css-faq\/#Wie-kann-ich-Breakpoint-Werte-als-Variablen-sowohl-fuer-CSS-als-auch-fuer-JavaScript-definieren\" >Wie kann ich (Breakpoint-) Werte als Variablen sowohl f\u00fcr CSS als auch f\u00fcr JavaScript definieren?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.inovex.de\/de\/blog\/css-faq\/#Wann-setze-ich-Flex-ein-und-wann-Grid\" >Wann setze ich Flex ein und wann Grid?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.inovex.de\/de\/blog\/css-faq\/#Ist-eine-Kombination-aus-Component-CSS-Module-und-globalem-indexcss-sinnvoll\" >Ist eine Kombination aus Component-CSS-Module und globalem index.css sinnvoll?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.inovex.de\/de\/blog\/css-faq\/#Was-macht-position-absolute-genau\" >Was macht position: absolute\u00a0genau?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.inovex.de\/de\/blog\/css-faq\/#Wie-ermittle-ich-welche-Browser-von-Nutzer-innen-verwendet-werden-um-CanIUse-nutzen-zu-koennen-und-unnoetige-Fallbacks-zu-vermeiden-vielleicht-off-topic\" >Wie ermittle ich, welche Browser von Nutzer:innen verwendet werden, um CanIUse nutzen zu k\u00f6nnen und unn\u00f6tige Fallbacks zu vermeiden? (vielleicht off-topic?)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.inovex.de\/de\/blog\/css-faq\/#Brauche-ich-in-Angular-Komponenten-noch-BEM\" >Brauche ich in Angular-Komponenten noch BEM?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.inovex.de\/de\/blog\/css-faq\/#Welche-CSS-Selektoren-soll-ich-am-besten-verwenden-Prio-Vielleicht-im-Zusammenhang-mit-Angular\" >Welche CSS-Selektoren soll ich am besten verwenden (Prio)? Vielleicht im Zusammenhang mit Angular.<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.inovex.de\/de\/blog\/css-faq\/#Kann-ich-CSS-Variablen-schon-in-der-Praxis-einsetzen-Gibt-es-Fallbacks-fuer-alte-Browser\" >Kann ich CSS-Variablen schon in der Praxis einsetzen? Gibt es Fallbacks f\u00fcr alte Browser?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.inovex.de\/de\/blog\/css-faq\/#Ich-habe-hier-ein-Design-wie-setze-ich-das-am-besten-um\" >Ich habe hier ein Design, wie setze ich das am besten um?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.inovex.de\/de\/blog\/css-faq\/#Wie-kann-man-von-aussen-Elemente-in-einem-Shadow-DOM-stylen\" >(Wie) kann man von au\u00dfen Elemente in einem Shadow-DOM stylen?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.inovex.de\/de\/blog\/css-faq\/#Less-oder-Sass-Oder-Styled-Components\" >Less oder Sass? Oder Styled-Components?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.inovex.de\/de\/blog\/css-faq\/#Wie-geht-Resize-von-SVG-Grafik-in-Flex-Grid\" >Wie geht Resize von SVG-Grafik in Flex-Grid?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.inovex.de\/de\/blog\/css-faq\/#Was-ist-dein-Lieblings-CSS-Farbname-Warum-ist-hotpink-gerade-so-im-Trend\" >Was ist dein Lieblings-CSS-Farbname? (Warum ist hotpink gerade so im Trend?)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.inovex.de\/de\/blog\/css-faq\/#Wie-stehst-du-dazu-ob-man-heute-fuer-jedes-Layout-immer-flex-verwenden-sollte-Ich-erlebe-unterschiedliche-Philosophien-in-meinem-Team-Ich-persoenliche-implementiere-viele-SpaltenZeilen-Layouts-noch-mit-display-block-width-position-etc-%E2%80%A6\" >Wie stehst du dazu, ob man heute f\u00fcr jedes Layout immer flex verwenden sollte? Ich erlebe unterschiedliche Philosophien in meinem Team. Ich pers\u00f6nliche implementiere viele Spalten\/Zeilen-Layouts noch mit display: block, width, position\u00a0etc \u2026<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Wie-kann-ich-Breakpoint-Werte-als-Variablen-sowohl-fuer-CSS-als-auch-fuer-JavaScript-definieren\"><\/span>Wie kann ich (Breakpoint-) Werte als Variablen sowohl f\u00fcr CSS als auch f\u00fcr JavaScript definieren?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In einem Projekt haben wir daf\u00fcr einen Webpack-Loader geschrieben, der die Variablen aus einer Less-Datei extrahiert und in ein JavaScript-Modul konvertiert. Dieses Modul kann dann im JavaScript verwendet werden. Dieser Ansatz lohnt sich, wenn es h\u00e4ufig \u00c4nderungen an den Variablen gibt oder oft neue hinzukommen. Leider haben wir den Loader bisher nicht als npm-Paket ver\u00f6ffentlicht, im Prinzip besteht er aber nur aus ein paar Zeilen Code:<\/p>\n<pre class=\"lang:js decode:true\">const symbolsParser = require('less-symbols-parser');\r\n\r\nmodule.exports = function lessToJSONLoader(source) {\r\n\r\n  \/\/ this does all the magic\r\n\r\n  const symbols = symbolsParser.parseSymbols(source);\r\n\r\n  \/\/ remove the @ from the variable name\r\n\r\n  const variables = symbols.variables.map(({ name, value }) =&gt; ({\r\n\r\n    name: name.substring(1),\r\n\r\n    value\r\n\r\n  }));\r\n\r\n  return `export default ${JSON.stringify(variables)}`;\r\n\r\n};<\/pre>\n<p>In Sass gibt es die M\u00f6glichkeit, Variablen zu exportieren, die dann \u00fcber einen Webpack-Loader im JavaScript-Code zur Verf\u00fcgung gestellt werden. Ein Artikel bei <a href=\"https:\/\/css-tricks.com\/getting-javascript-to-talk-to-css-and-sass\/#article-header-id-1\">CSS Tricks<\/a> beschreibt, wie es geht. In diesem Artikel wird auch beschrieben, wie CSS-Variablen per JavaScript ausgelesen werden k\u00f6nnen.<\/p>\n<p>Bei kleineren Projekten oder nur wenigen Variablen (und einem disziplinierten Team) ist ein einfacherer Weg m\u00f6glich: Eine Less\/Sass-Datei und eine JavaScript-Datei, in denen jeweils die Variablen (dupliziert) enthalten sind, mit jeweils einem Kommentar der Art:<\/p>\n<pre class=\"lang:less decode:true \">\/\/ These variables are also used in variables.js.\r\n\r\n\/\/ Whenever you change a value here change it there as well.<\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Wann-setze-ich-Flex-ein-und-wann-Grid\"><\/span>Wann setze ich Flex ein und wann Grid?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Wenn man noch den Internet Explorer voll unterst\u00fctzen muss, dann Flex. Der IE unterst\u00fctzt zwar eine alte Version von Grids, die aber so viel weniger kann als was moderne Browser k\u00f6nnen.<\/p>\n<p>Ansonsten gibt es zwei wichtige Unterschiede zwischen Flex und Grid:<\/p>\n<ol>\n<li>Flex ist eindimensional, Grid zweidimensional. Gerade wenn es darum geht, Elemente \u00fcber mehrere Spalten zu strecken, kommt man mit Flex nicht mehr aus.<\/li>\n<li>Flex ist content-first, Grid ist space-first. Bei Flex geht es darum, Elemente zu layouten und mit \u00fcbrigem Raum umzugehen (z.B. Abstand zwischen den Elementen, manche Elemente wachsen lassen). Bei Grid geht es darum, den zur Verf\u00fcgung stehenden Raum aufzuteilen und dann die Elemente darin zu platzieren.<\/li>\n<\/ol>\n<p>Im Grunde sollte man beide Konzepte kennen und beherrschen, um dann anhand der Designvorgaben zu \u00fcberlegen, welches Konzept sinnvoller ist. Zum Erlernen der Grundlagen empfehle ich <a href=\"https:\/\/flexboxfroggy.com\">Flexbox Froggy<\/a> und <a href=\"https:\/\/cssgridgarden.com\">CSS Grid Garden<\/a> oder \u2013 weniger spielerisch \u2013 <a href=\"https:\/\/gridbyexample.com\/\">Grid by Example<\/a>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Ist-eine-Kombination-aus-Component-CSS-Module-und-globalem-indexcss-sinnvoll\"><\/span>Ist eine Kombination aus Component-CSS-Module und globalem index.css sinnvoll?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Ich glaube, es geht gar nicht anders. Nat\u00fcrlich wollen wir CSS komponentenbasiert entwickeln, um die Wartbarkeit zu erh\u00f6hen, aber irgendwie m\u00fcssen diese Komponenten ja zu einer Webseite zusammengesetzt werden. Und daf\u00fcr brauchen wir globales CSS.<\/p>\n<p>Aber in diesem globalen CSS sollen keine Dinge gestylt werden, die zu einer Komponente geh\u00f6ren. Was hinein kann sind Regeln wie\u00a0<span class=\"lang:css decode:true crayon-inline\">* { box-sizing: border-box; }<\/span> oder CSS-Resets oder auch Schriftartendefinitionen. Schriftarten sollten ja nur einmal pro Dokument definiert und geladen werden, die Komponenten k\u00f6nnen dann diese Werte erben.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Was-macht-position-absolute-genau\"><\/span>Was macht position: absolute\u00a0genau?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Spannende Frage. Kurze Antwort: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/CSS\/CSS_layout\/Positioning#Absolute_positioning\">Selbst nachlesen<\/a>. Die lange Antwort ist einen eigenen Blog-Eintrag wert. Vielleicht schreibe ich den mal.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Wie-ermittle-ich-welche-Browser-von-Nutzer-innen-verwendet-werden-um-CanIUse-nutzen-zu-koennen-und-unnoetige-Fallbacks-zu-vermeiden-vielleicht-off-topic\"><\/span>Wie ermittle ich, welche Browser von Nutzer:innen verwendet werden, um CanIUse nutzen zu k\u00f6nnen und unn\u00f6tige Fallbacks zu vermeiden? (vielleicht off-topic?)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Ja, ist etwas off-topic. <a href=\"https:\/\/caniuse.com\">Can I Use<\/a> gibt zu jedem Feature an, wie viel Prozent der verwendeten Browser dieses Feature unterst\u00fctzen. Dabei werden die globalen Daten von <a href=\"http:\/\/gs.statcounter.com\/\">StatCounter<\/a> verwendet. Man kann \u00fcber die Settings auch die Daten eines einzelnen Landes ausw\u00e4hlen, zum Beispiel \u201eGermany\u201c.<\/p>\n<p>Wenn diese Werte noch zu ungenau sind, sollten aus den eigenen Serverlogs die tats\u00e4chlichen Browser der eigenen Nutzer:innen ermittelt werden.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Brauche-ich-in-Angular-Komponenten-noch-BEM\"><\/span>Brauche ich in Angular-Komponenten noch BEM?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><a href=\"https:\/\/en.bem.info\">BEM<\/a> ist ein Konzept f\u00fcr die Benennung und Struktur von Klassen, um wartbares CSS zu schreiben. Als dieses Konzept vor ungef\u00e4hr zehn Jahren Verbreitung gefunden hat, traf es einen Nerv, weil dadurch auf einen Schlag viele Probleme von CSS gel\u00f6st wurden, unter anderem die Selektorh\u00f6lle, die Gefahr unerwarteter Nebeneffekte und die Spezifit\u00e4t.<\/p>\n<p>Im Kontext von Komponenten sorgt die Anwendung von BEM daf\u00fcr, dass nur die Elemente gestylt werden, die man stylen will \u2013 es gibt keine Auswirkungen auf Kindkomponenten und keine Auswirkungen von au\u00dfen auf eine Komponente.<\/p>\n<p>Genau dieses Scoping liefert Angular direkt mit. Auch dort wirkt sich das CSS einer Komponente nicht auf Kindkomponenten aus. Die Frage ist also, ob die Klassennamen innerhalb einer Angular-Komponente nach BEM-Schema benannt werden sollten. Ich tendiere dazu, es nicht zu tun. Statt\u00a0<span class=\"lang:default decode:true crayon-inline \">button__icon<\/span>\u00a0 als Klassennamen des Icons in der Button-Komponente kann ich in Angular den Klassennamen\u00a0<span class=\"lang:default decode:true crayon-inline \">icon<\/span>\u00a0 benutzen, ohne dass etwas verloren geht. Modifier-Klassennamen wie\u00a0<span class=\"lang:default decode:true crayon-inline \">button&#8211;primary<\/span>\u00a0 w\u00fcrde ich nicht einfach durch\u00a0<span class=\"lang:default decode:true crayon-inline \">primary<\/span>\u00a0 ersetzen, weil dann verloren geht, dass es sich hierbei um einen Modifier handelt und nicht um ein Element. F\u00fcr Modifier w\u00fcrde ich ein <span class=\"lang:default decode:true crayon-inline\">has<\/span>&#8211; oder <span class=\"lang:default decode:true crayon-inline\">is<\/span>-Pr\u00e4fix w\u00e4hlen: <span class=\"lang:default decode:true crayon-inline \">is-primary<\/span>\u00a0.<\/p>\n<p>Wenn eine Komponente so komplex ist, dass man dar\u00fcber nachdenkt, ob sich innerhalb nicht doch BEM lohnt, ist das ein Indikator daf\u00fcr, eine eigene Komponente zu extrahieren.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Welche-CSS-Selektoren-soll-ich-am-besten-verwenden-Prio-Vielleicht-im-Zusammenhang-mit-Angular\"><\/span>Welche CSS-Selektoren soll ich am besten verwenden (Prio)? Vielleicht im Zusammenhang mit Angular.<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Nie auf IDs stylen: <span class=\"lang:default decode:true crayon-inline\">#content<\/span>. Die Spezifit\u00e4t einer ID ist so hoch, dass es schwierig wird, diese Styles gegebenenfalls zu \u00fcberschreiben. Im Zweifelsfall kann man dem Element einen Klassennamen mit der ID geben, \u00fcber den man dann stylt: <span class=\"lang:default decode:true crayon-inline \">.content<\/span>\u00a0.<\/p>\n<p>Auf Elementnamen nur f\u00fcr die n\u00f6tigsten Dinge, z.B.\u00a0<span class=\"lang:default decode:true crayon-inline \">html<\/span>\u00a0 oder <span class=\"lang:default decode:true crayon-inline \">body<\/span>\u00a0. Die Gefahr, \u00fcber Elementnamen Elemente zu stylen, bei denen man es doch nicht m\u00f6chte, ist ziemlich gro\u00df.<\/p>\n<p>Das Ideal ist also, auf Klassennamen zu stylen, weil dann der Klassenname ganz gezielt nur auf die Elemente gesetzt werden kann, die gestylt werden sollen. Wenn der Selektor so kurz wie m\u00f6glich gehalten wird, besteht auch weniger die Gefahr, versehentlich Elemente in anderen Kontexten mitzustylen.<\/p>\n<p>Manchmal m\u00f6chte man auch auf Attribut-Selektoren stylen, z.B. <span class=\"lang:default decode:true crayon-inline \">[type=&#8220;email&#8220;]<\/span>\u00a0. Das kann man machen, aber es besteht wieder die Gefahr, Elemente zu stylen, die man vielleicht nicht stylen wollte. Deswegen empfehle ich, Attribut-Selektoren immer in Kombination mit einem Klassennamen zu verwenden.<\/p>\n<p>Im Kontext von Angular ist es durch das Scoping m\u00f6glich, direkt auf Elementnamen zu stylen, aber nicht immer sinnvoll. Mir hat das vor kurzem Probleme bereitet, als ich in eine Angular-Komponente, in der ich das einzige SVG-Icon direkt \u00fcber den Elementnamen gestylt hatte, zwei weitere Icons eingef\u00fcgt habe, die andere Styles brauchten. Darum bin ich auch in Angular dazu \u00fcbergegangen, alles \u00fcber Klassennamen zu stylen.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Kann-ich-CSS-Variablen-schon-in-der-Praxis-einsetzen-Gibt-es-Fallbacks-fuer-alte-Browser\"><\/span>Kann ich CSS-Variablen schon in der Praxis einsetzen? Gibt es Fallbacks f\u00fcr alte Browser?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Ja, man kann CSS-Variablen in der Praxis einsetzen \u2013 wenn man den Internet Explorer nicht voll unterst\u00fctzen muss. Einen Fallback gibt es leider nicht. CSS-Variablen erm\u00f6glichen Dinge, die fr\u00fcher nicht gingen \u2013 auch nicht mit Less- oder Sass-Variablen. Man kann es auch nur in einfachen F\u00e4llen durch JavaScript nachbauen.<\/p>\n<p>Wenn man CSS-Variablen verwenden m\u00f6chte, muss man sich davon verabschieden, dass die Website in allen\/alten Browsern gleich aussieht. Das sollte sie aber auch nicht m\u00fcssen. Wichtig ist, dass die Nutzer:innen die Webseite grundlegend nutzen k\u00f6nnen \u2013 aber sie muss nicht \u00fcberall gleich aussehen.<\/p>\n<p>So sollte man mit semantischem HTML beginnen, dann mit CSS-Basis-Styles wie Typografie, Abst\u00e4nde und Farben erg\u00e4nzen. Danach kann man dann anhand der Browserf\u00e4higkeiten mit weiterem CSS oder JavaScript die Seite versch\u00f6nern oder nutzungsfreundlicher gestalten. Dieser Ansatz entspricht den Konzepten von Progressive Enhancement und Resilient Web Design. Zum Weiterlesen kann ich das Buch <a href=\"https:\/\/resilientwebdesign.com\/\">Resilient Web Design<\/a> von Jeremy Keith sehr empfehlen.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Ich-habe-hier-ein-Design-wie-setze-ich-das-am-besten-um\"><\/span>Ich habe hier ein Design, wie setze ich das am besten um?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Ohne das konkrete Design kann es nur eine unkonkrete Antwort geben:<\/p>\n<ol>\n<li>Mit semantischem HTML beginnen. Welches Markup ist das richtige, wenn es kein CSS und kein JavaScript g\u00e4be?<\/li>\n<li>Dann CSS erg\u00e4nzen, und zwar Mobile first. Als erstes die Seite f\u00fcr z.B. eine Breite von 320 Pixeln umsetzen, dann f\u00fcr die n\u00e4chstgr\u00f6\u00dfere Breite usw.<\/li>\n<li>Zuletzt mit JavaScript die User-Experience verbessern.<\/li>\n<\/ol>\n<p>Wenn man eine Single Page Application hat, die zum Beispiel mit Angular oder React im Browser gerendert wird, hat man nat\u00fcrlich von Anfang an JavaScript zur Verf\u00fcgung und kann das auch nutzen. Trotzdem ist es richtig, mit semantischem HTML zu beginnen. Dadurch hat man die Grundlage f\u00fcr Accessibility geschaffen.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Wie-kann-man-von-aussen-Elemente-in-einem-Shadow-DOM-stylen\"><\/span>(Wie) kann man von au\u00dfen Elemente in einem Shadow-DOM stylen?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Wenn die Web-Component das nicht erm\u00f6glicht: gar nicht \u2013 das ist ja das Konzept des <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Web_Components\/Using_shadow_DOM\">Shadow-DOM<\/a>: Eine Komponente zu haben, die abgekapselt vom \u00c4u\u00dferen ist. Es gibt aber zwei Wege, wie die Web-Component ein Stylen von au\u00dfen erlauben kann:<\/p>\n<ol>\n<li>Sie verwendet intern CSS-Variablen, die von au\u00dfen gesetzt werden k\u00f6nnen.<\/li>\n<li>Sie gibt intern einzelne Elemente \u00fcber das <span class=\"lang:default decode:true crayon-inline\">part<\/span>-Attribut frei. Diese Elemente k\u00f6nnen dann \u00fcber das <span class=\"lang:default decode:true crayon-inline\">::part()<\/span>-Pseudoelement gestylt werden. Mehr dazu bei <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/::part\">MDN<\/a> oder <a href=\"https:\/\/css-tricks.com\/styling-in-the-shadow-dom-with-css-shadow-parts\/\">CSS Tricks<\/a>.<\/li>\n<\/ol>\n<p>Viele HTML-Element werden in Browsern \u00fcber den Shadow-DOM abgebildet, zum Beispiel <span class=\"lang:xhtml decode:true crayon-inline \">&lt;meter&gt;<\/span>\u00a0. Oft erm\u00f6glichen die Browser, die Elemente innerhalb des Shadow-DOMs \u00fcber nicht-standardisierte Pseudoelemente zu stylen, z.B. <span class=\"lang:default decode:true crayon-inline\">::-webkit-meter-bar<\/span>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Less-oder-Sass-Oder-Styled-Components\"><\/span>Less oder Sass? Oder Styled-Components?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><a href=\"https:\/\/lesscss.org\">Less<\/a> und <a href=\"https:\/\/sass-lang.com\">Sass<\/a> sind zwei Erweiterungen von CSS, mit denen man Dinge machen kann, die mit CSS nicht direkt m\u00f6glich sind (oder waren): Modularit\u00e4t, Funktionen, Code-Generierung und mehr. Ob man Less oder Sass verwendet, ist Geschmackssache, beide haben einen \u00e4hnlichen Feature-Umfang. Sass scheint insgesamt beliebter zu sein, ich bevorzuge aber Less (nur deshalb, weil Less in JavaScript geschrieben wurde und ich im ersten Projekt, in dem Sass verwendet wurde, Kompilierfehler hatte \u2013 das hatte ich bei Less noch nie).<\/p>\n<p><a href=\"https:\/\/styled-components.com\/\">Styled-Components<\/a> bieten eine M\u00f6glichkeit, in React CSS im JavaScript zu schreiben. In React\/JSX wird ja eh Logik (JavaScript) und Markup (JSX) in einer Datei geschrieben, weshalb manche Entwickler:innen auch das Styling dort haben wollen.<\/p>\n<p>Als ich vor drei Jahren Styled-Components evaluiert habe, war die Unterst\u00fctzung in IDEs noch sehr schwach: fehlende Code Completion, fehlendes Syntax Highlighting, fehlendes Syntax Checking. Darum haben wir in dem Projekt Less verwendet. Inzwischen ist die IDE-Unterst\u00fctzung wohl besser \u2013 aber in meinem aktuellen Projekt verwenden wir Angular, deswegen habe ich es noch nicht ausprobiert. Das Konzept von Angular, Logik, Markup und Styles in separaten Dateien zu haben, gef\u00e4llt mir pers\u00f6nlich ziemlich gut \u2013 auch wenn JSX schon auch schick ist.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Wie-geht-Resize-von-SVG-Grafik-in-Flex-Grid\"><\/span>Wie geht <a href=\"https:\/\/codepen.io\/Rene-Code\/pen\/XWmWKoN?editors=1100\">Resize von SVG-Grafik in Flex-Grid<\/a>?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><a href=\"https:\/\/codepen.io\/gweax\/pen\/QWjWVoG?editors=1100\">So<\/a>!\u00a0Die Umsetzung entspricht nicht ganz dem, was gew\u00fcnscht war, ist aber sehr nah dran. Ich habe drei Dinge ge\u00e4ndert:<\/p>\n<ol>\n<li>Beim\u00a0<span class=\"lang:default decode:true crayon-inline\">#graphics<\/span>-Element habe ich\u00a0<span class=\"lang:default decode:true crayon-inline \">overflow: hidden<\/span>\u00a0 gesetzt. Dadurch wird die H\u00f6he nicht mehr durch das SVG beeinflusst.<\/li>\n<li>Beim SVG habe ich\u00a0<span class=\"lang:css decode:true crayon-inline \">height: 100%; width: 100%;<\/span>\u00a0 gesetzt. Dadurch f\u00fcllt das SVG-Element das <span class=\"lang:default decode:true crayon-inline\">#graphics<\/span>-Element vollkommen aus (das ist der Punkt, in dem meine L\u00f6sung von der Anforderung abweicht).<\/li>\n<li>Dadurch entsteht aber das Problem, dass das Seitenverh\u00e4ltnis des SVG-Elements nicht mehr dem der Viewbox entspricht (au\u00dfer zuf\u00e4llig). Um jetzt die Viewbox innerhalb des SVG-Elements zu platzieren, habe ich beim SVG das <span class=\"lang:default decode:true crayon-inline\">preserveAspectRatio<\/span>-Attribut gesetzt. Mit dem Wert\u00a0<span class=\"lang:default decode:true crayon-inline \">xMinYMin<\/span>\u00a0 wird die Viewbox oben links ausgerichtet.<\/li>\n<\/ol>\n<p>Eine Anforderung war, dass das SVG-Element selbst im richtigen Seitenverh\u00e4ltnis angezeigt wird und der dunkelgraue Hintergrund des <span class=\"lang:default decode:true crayon-inline\">#graphics<\/span>-Elements sichtbar wird. Das ist leider nicht m\u00f6glich \u2013 kann aber simuliert werden, indem im SVG ein <span class=\"lang:default decode:true crayon-inline\">rect<\/span>-Element mit der Gr\u00f6\u00dfe der Viewbox erg\u00e4nzt wird und die Hintergrundfarbe aus dem CSS entfernt.<\/p>\n<p>Es ist deswegen nicht m\u00f6glich, weil man in CSS das Seitenverh\u00e4ltnis nicht direkt angeben kann. Man kann <a href=\"https:\/\/gweax.de\/blog\/2017\/07\/aspect-ratios-in-css\/\">mit einem Hack die H\u00f6he in Abh\u00e4ngigkeit der Breite setzen<\/a>, aber nicht die Breite in Abh\u00e4ngigkeit der H\u00f6he, was ja aber bei schmalen, hohen Bildschirmen deine Anforderung war.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Was-ist-dein-Lieblings-CSS-Farbname-Warum-ist-hotpink-gerade-so-im-Trend\"><\/span>Was ist dein Lieblings-CSS-Farbname? (Warum ist hotpink gerade so im Trend?)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong><span style=\"color: #ff69b4;\">Hotpink<\/span><\/strong>. Es gibt \u00fcber 200 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/color_value#Color_keywords\">definierte Farbnamen in CSS<\/a>, darunter sehr obskure (schnell: Welcher der folgenden Namen ist kein CSS-Farbname: goldenrod, peru, powderblue oder lavenderblush?). Ich verwende diese Farbnamen nie in Projekten, sondern nur in Code-Beispielen. Daf\u00fcr habe ich mir ein paar Farbnamen gemerkt \u2013 vielmehr merken wollen. Bis auf Hotpink vergesse ich sie aber immer wieder. Meine Lieblingsfarbe ist \u00fcbrigens <strong><span style=\"color: #ffbb00;\">#ffbb00<\/span><\/strong>, aber daf\u00fcr gibt es keinen Farbnamen.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Wie-stehst-du-dazu-ob-man-heute-fuer-jedes-Layout-immer-flex-verwenden-sollte-Ich-erlebe-unterschiedliche-Philosophien-in-meinem-Team-Ich-persoenliche-implementiere-viele-SpaltenZeilen-Layouts-noch-mit-display-block-width-position-etc-%E2%80%A6\"><\/span>Wie stehst du dazu, ob man heute f\u00fcr jedes Layout immer flex verwenden sollte? Ich erlebe unterschiedliche Philosophien in meinem Team. Ich pers\u00f6nliche implementiere viele Spalten\/Zeilen-Layouts noch mit display: block, width, position\u00a0etc \u2026<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Mit Flexbox sind Dinge m\u00f6glich, die man mit\u00a0<span class=\"lang:default decode:true crayon-inline \">display: block<\/span>\u00a0 nicht hinbekommt. Von daher sollte man schon Flexbox beherrschen. Das bedeutet aber nicht, dass man nun alles mit Flexbox umsetzen sollte. Letzte Woche habe ich ein Layout mit Floats umgesetzt, weil das einfacher war als mit Flexbox.<\/p>\n<p>\u00dcbrigens muss man nicht bei Flexbox stehenbleiben. Mit Grids sind noch viel flexiblere Layouts m\u00f6glich. Zum Erlernen der Grundlagen empfehle ich <a href=\"https:\/\/flexboxfroggy.com\">Flexbox Froggy<\/a> und <a href=\"https:\/\/cssgridgarden.com\">CSS Grid Garden<\/a> oder \u2013 weniger spielerisch \u2013 <a href=\"https:\/\/gridbyexample.com\/\">Grid by Example<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bei unserem Lean Coffee zum Thema CSS blieben aus zeitlichen Gr\u00fcnden einige Fragen unbeantwortet. Wir haben sie f\u00fcr euch zusammengetragen und von unseren Expert:innen beantworten lassen.<\/p>\n","protected":false},"author":214,"featured_media":18636,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"ep_exclude_from_search":false,"footnotes":""},"tags":[70],"service":[420],"coauthors":[{"id":214,"display_name":"Matthias Reuter","user_nicename":"mreuter"}],"class_list":["post-18632","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-web","service-apps"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS: Eure Fragen beantwortet! - inovex GmbH<\/title>\n<meta name=\"description\" content=\"Bei unserem Lean Coffee zum Thema CSS blieben aus zeitlichen Gr\u00fcnden einige Fragen unbeantwortet. Wir haben sie f\u00fcr euch zusammengetragen und von unseren Expert:innen beantworten lassen!\" \/>\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.inovex.de\/de\/blog\/css-faq\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS: Eure Fragen beantwortet! - inovex GmbH\" \/>\n<meta property=\"og:description\" content=\"Bei unserem Lean Coffee zum Thema CSS blieben aus zeitlichen Gr\u00fcnden einige Fragen unbeantwortet. Wir haben sie f\u00fcr euch zusammengetragen und von unseren Expert:innen beantworten lassen!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inovex.de\/de\/blog\/css-faq\/\" \/>\n<meta property=\"og:site_name\" content=\"inovex GmbH\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inovexde\" \/>\n<meta property=\"article:published_time\" content=\"2020-04-15T14:31:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-12-02T08:03:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2020\/04\/css-faq.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Matthias Reuter\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2020\/04\/css-faq-1024x576.png\" \/>\n<meta name=\"twitter:creator\" content=\"@inovexgmbh\" \/>\n<meta name=\"twitter:site\" content=\"@inovexgmbh\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Matthias Reuter\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"12\u00a0Minuten\" \/>\n\t<meta name=\"twitter:label3\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data3\" content=\"Matthias Reuter\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/css-faq\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/css-faq\\\/\"},\"author\":{\"name\":\"Matthias Reuter\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#\\\/schema\\\/person\\\/e8781069af1705fa275e43092cf66796\"},\"headline\":\"CSS: Eure Fragen beantwortet!\",\"datePublished\":\"2020-04-15T14:31:32+00:00\",\"dateModified\":\"2022-12-02T08:03:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/css-faq\\\/\"},\"wordCount\":2107,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/css-faq\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/css-faq.png\",\"keywords\":[\"Web\"],\"articleSection\":[\"Applications\",\"General\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/css-faq\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/css-faq\\\/\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/css-faq\\\/\",\"name\":\"CSS: Eure Fragen beantwortet! - inovex GmbH\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/css-faq\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/css-faq\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/css-faq.png\",\"datePublished\":\"2020-04-15T14:31:32+00:00\",\"dateModified\":\"2022-12-02T08:03:20+00:00\",\"description\":\"Bei unserem Lean Coffee zum Thema CSS blieben aus zeitlichen Gr\u00fcnden einige Fragen unbeantwortet. Wir haben sie f\u00fcr euch zusammengetragen und von unseren Expert:innen beantworten lassen!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/css-faq\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/css-faq\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/css-faq\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/css-faq.png\",\"contentUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/css-faq.png\",\"width\":1920,\"height\":1080,\"caption\":\"Titelbild mit CSS 3 Logo\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/css-faq\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS: Eure Fragen beantwortet!\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#website\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/\",\"name\":\"inovex GmbH\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#organization\",\"name\":\"inovex GmbH\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/inovex-logo-16-9-1.png\",\"contentUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/inovex-logo-16-9-1.png\",\"width\":1921,\"height\":1081,\"caption\":\"inovex GmbH\"},\"image\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/inovexde\",\"https:\\\/\\\/x.com\\\/inovexgmbh\",\"https:\\\/\\\/www.instagram.com\\\/inovexlife\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/inovex\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UC7r66GT14hROB_RQsQBAQUQ\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#\\\/schema\\\/person\\\/e8781069af1705fa275e43092cf66796\",\"name\":\"Matthias Reuter\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ace0c82d8a1a29cc63e8bc37b46558e4a432c9327e5f010b6add6faa5b1c095c?s=96&d=retro&r=gb7d7a4603daa6fd5bac67eb01b2b6e3d\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ace0c82d8a1a29cc63e8bc37b46558e4a432c9327e5f010b6add6faa5b1c095c?s=96&d=retro&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ace0c82d8a1a29cc63e8bc37b46558e4a432c9327e5f010b6add6faa5b1c095c?s=96&d=retro&r=g\",\"caption\":\"Matthias Reuter\"},\"url\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/author\\\/mreuter\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS: Eure Fragen beantwortet! - inovex GmbH","description":"Bei unserem Lean Coffee zum Thema CSS blieben aus zeitlichen Gr\u00fcnden einige Fragen unbeantwortet. Wir haben sie f\u00fcr euch zusammengetragen und von unseren Expert:innen beantworten lassen!","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.inovex.de\/de\/blog\/css-faq\/","og_locale":"de_DE","og_type":"article","og_title":"CSS: Eure Fragen beantwortet! - inovex GmbH","og_description":"Bei unserem Lean Coffee zum Thema CSS blieben aus zeitlichen Gr\u00fcnden einige Fragen unbeantwortet. Wir haben sie f\u00fcr euch zusammengetragen und von unseren Expert:innen beantworten lassen!","og_url":"https:\/\/www.inovex.de\/de\/blog\/css-faq\/","og_site_name":"inovex GmbH","article_publisher":"https:\/\/www.facebook.com\/inovexde","article_published_time":"2020-04-15T14:31:32+00:00","article_modified_time":"2022-12-02T08:03:20+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/www.inovex.de\/wp-content\/uploads\/2020\/04\/css-faq.png","type":"image\/png"}],"author":"Matthias Reuter","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.inovex.de\/wp-content\/uploads\/2020\/04\/css-faq-1024x576.png","twitter_creator":"@inovexgmbh","twitter_site":"@inovexgmbh","twitter_misc":{"Verfasst von":"Matthias Reuter","Gesch\u00e4tzte Lesezeit":"12\u00a0Minuten","Written by":"Matthias Reuter"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inovex.de\/de\/blog\/css-faq\/#article","isPartOf":{"@id":"https:\/\/www.inovex.de\/de\/blog\/css-faq\/"},"author":{"name":"Matthias Reuter","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/person\/e8781069af1705fa275e43092cf66796"},"headline":"CSS: Eure Fragen beantwortet!","datePublished":"2020-04-15T14:31:32+00:00","dateModified":"2022-12-02T08:03:20+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inovex.de\/de\/blog\/css-faq\/"},"wordCount":2107,"commentCount":2,"publisher":{"@id":"https:\/\/www.inovex.de\/de\/#organization"},"image":{"@id":"https:\/\/www.inovex.de\/de\/blog\/css-faq\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2020\/04\/css-faq.png","keywords":["Web"],"articleSection":["Applications","General"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inovex.de\/de\/blog\/css-faq\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inovex.de\/de\/blog\/css-faq\/","url":"https:\/\/www.inovex.de\/de\/blog\/css-faq\/","name":"CSS: Eure Fragen beantwortet! - inovex GmbH","isPartOf":{"@id":"https:\/\/www.inovex.de\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inovex.de\/de\/blog\/css-faq\/#primaryimage"},"image":{"@id":"https:\/\/www.inovex.de\/de\/blog\/css-faq\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2020\/04\/css-faq.png","datePublished":"2020-04-15T14:31:32+00:00","dateModified":"2022-12-02T08:03:20+00:00","description":"Bei unserem Lean Coffee zum Thema CSS blieben aus zeitlichen Gr\u00fcnden einige Fragen unbeantwortet. Wir haben sie f\u00fcr euch zusammengetragen und von unseren Expert:innen beantworten lassen!","breadcrumb":{"@id":"https:\/\/www.inovex.de\/de\/blog\/css-faq\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inovex.de\/de\/blog\/css-faq\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.inovex.de\/de\/blog\/css-faq\/#primaryimage","url":"https:\/\/www.inovex.de\/wp-content\/uploads\/2020\/04\/css-faq.png","contentUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2020\/04\/css-faq.png","width":1920,"height":1080,"caption":"Titelbild mit CSS 3 Logo"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inovex.de\/de\/blog\/css-faq\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inovex.de\/de\/"},{"@type":"ListItem","position":2,"name":"CSS: Eure Fragen beantwortet!"}]},{"@type":"WebSite","@id":"https:\/\/www.inovex.de\/de\/#website","url":"https:\/\/www.inovex.de\/de\/","name":"inovex GmbH","description":"","publisher":{"@id":"https:\/\/www.inovex.de\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inovex.de\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.inovex.de\/de\/#organization","name":"inovex GmbH","url":"https:\/\/www.inovex.de\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/logo\/image\/","url":"https:\/\/www.inovex.de\/wp-content\/uploads\/2021\/03\/inovex-logo-16-9-1.png","contentUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2021\/03\/inovex-logo-16-9-1.png","width":1921,"height":1081,"caption":"inovex GmbH"},"image":{"@id":"https:\/\/www.inovex.de\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inovexde","https:\/\/x.com\/inovexgmbh","https:\/\/www.instagram.com\/inovexlife\/","https:\/\/www.linkedin.com\/company\/inovex","https:\/\/www.youtube.com\/channel\/UC7r66GT14hROB_RQsQBAQUQ"]},{"@type":"Person","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/person\/e8781069af1705fa275e43092cf66796","name":"Matthias Reuter","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/ace0c82d8a1a29cc63e8bc37b46558e4a432c9327e5f010b6add6faa5b1c095c?s=96&d=retro&r=gb7d7a4603daa6fd5bac67eb01b2b6e3d","url":"https:\/\/secure.gravatar.com\/avatar\/ace0c82d8a1a29cc63e8bc37b46558e4a432c9327e5f010b6add6faa5b1c095c?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ace0c82d8a1a29cc63e8bc37b46558e4a432c9327e5f010b6add6faa5b1c095c?s=96&d=retro&r=g","caption":"Matthias Reuter"},"url":"https:\/\/www.inovex.de\/de\/blog\/author\/mreuter\/"}]}},"_links":{"self":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/18632","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/users\/214"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/comments?post=18632"}],"version-history":[{"count":1,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/18632\/revisions"}],"predecessor-version":[{"id":37758,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/18632\/revisions\/37758"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/media\/18636"}],"wp:attachment":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/media?parent=18632"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/tags?post=18632"},{"taxonomy":"service","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/service?post=18632"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/coauthors?post=18632"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}