[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"9_t0YFtO844PW3-iCfPxRTbw8yv0-2zzu2bChZFenjo":3,"btz8hO-MXSFLpybqvfjYVBre4OvrEJO1wFySe3Zmv-s":49,"pw_BnGaB7dZrGqEQM6XOH40zW-oGbj0yxQ0grPsh73s":75,"zzfs3_wUixMAwGdEuteiXuMapJvZqVYAfxzwzqQ-DRU":202,"_apollo:default":244},{"menu":4},{"__typename":5,"id":6,"name":7,"items":8},"Menu","nuxt-main-menu","Nuxt Hauptmenü",[9,24,29,34,39,44],{"__typename":10,"id":11,"title":12,"description":13,"url":14,"langcode":15,"internal":20,"expanded":21,"attributes":22},"MenuItem","9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1","Blog",null,"/know-how",{"__typename":16,"id":17,"name":18,"direction":19},"Language","de","German","ltr",true,false,{"__typename":23,"class":13},"MenuItemAttributes",{"__typename":10,"id":25,"title":26,"description":13,"url":27,"langcode":15,"internal":20,"expanded":21,"attributes":28},"1c7a5430-8a42-4b24-9544-252adabc2f4c","Projekte","/projekte",{"__typename":23,"class":13},{"__typename":10,"id":30,"title":31,"description":13,"url":32,"langcode":15,"internal":20,"expanded":21,"attributes":33},"9c4feedc-79e4-4fbf-b68c-065f33ebfe4c","Sparring","/workshop-ux-sparring-fuer-unternehmen",{"__typename":23,"class":13},{"__typename":10,"id":35,"title":36,"description":13,"url":37,"langcode":15,"internal":20,"expanded":21,"attributes":38},"3b77a27b-272a-489f-843e-53e23ed07741","Trainings","/liechtenecker-ux-academy",{"__typename":23,"class":13},{"__typename":10,"id":40,"title":41,"description":13,"url":42,"langcode":15,"internal":20,"expanded":21,"attributes":43},"ce0bb82b-e1ee-4036-be95-f693a62e9f4a","Über uns","/about",{"__typename":23,"class":13},{"__typename":10,"id":45,"title":46,"description":13,"url":47,"langcode":15,"internal":20,"expanded":21,"attributes":48},"04a19381-81a9-4694-8653-182d8855d2b5","Kontakt","/kontakt",{"__typename":23,"class":13},{"menu":50},{"__typename":5,"id":51,"name":52,"items":53},"footer","Fußzeile",[54,60,65,70],{"__typename":10,"id":55,"title":56,"description":13,"url":57,"langcode":58,"internal":20,"expanded":21,"attributes":59},"e2873307-b50a-4aab-b6b2-1950fd99c72e","Impressum","/impressum",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":23,"class":13},{"__typename":10,"id":61,"title":62,"description":13,"url":63,"langcode":58,"internal":20,"expanded":21,"attributes":64},"2cd9b7c9-142a-4ea3-b898-a0952c54a195","Datenschutz","/datenschutz",{"__typename":23,"class":13},{"__typename":10,"id":66,"title":67,"description":13,"url":68,"langcode":58,"internal":20,"expanded":21,"attributes":69},"a5effba3-5a8c-4125-8d78-0cdba09824db","AGB","/agb",{"__typename":23,"class":13},{"__typename":10,"id":71,"title":72,"description":13,"url":73,"langcode":58,"internal":21,"expanded":21,"attributes":74},"114bf071-bdbb-44cf-85c1-69e9d9e0777d","Newsletter","https://liechtenecker.at/newsletter-subscribe",{"__typename":23,"class":13},{"route":76},{"__typename":77,"entity":78},"RouteInternal",{"__typename":79,"id":80,"title":81,"changed":82,"created":88,"langcode":91,"path":92,"promote":21,"status":20,"sticky":21,"metatag":93,"postCategory":113,"postContentElements":13,"evergreen":13,"tags":138,"postWpBody":172,"wpHeaderImage":13,"wpHeaderImageOld":175,"wpHeaderImageOldSmall":187,"wpOgImage":13,"wpPromotedTeaserImage":13,"wpShareDescription":13,"wpShareTitle":13,"wpTeaserText":13,"wpYoastHead":195,"author":196},"NodeWpPost","816","Dreh den Swag auf - Eine Geschichte über den Style des Webs",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},"DateTime",1554794680,"UTC","+00:00","2019-04-09T07:24:40+00:00",{"__typename":83,"timestamp":89,"timezone":85,"offset":86,"time":90},1531219065,"2018-07-10T10:37:45+00:00",{"__typename":16,"id":17,"name":18,"direction":19},"/blog/der-style-des-webs",[94,101,108],{"__typename":95,"tag":96,"attributes":97},"MetaTagValue","meta",{"__typename":98,"name":99,"content":100},"MetaTagValueAttributes","title","Dreh den Swag auf - Eine Geschichte über den Style des Webs | Liechtenecker UX Design Studio",{"__typename":102,"tag":103,"attributes":104},"MetaTagLink","link",{"__typename":105,"href":106,"hreflang":13,"rel":107,"media":13,"sizes":13,"type":13},"MetaTagLinkAttributes","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/blog/der-style-des-webs","canonical",{"__typename":109,"tag":96,"attributes":110},"MetaTagProperty",{"__typename":111,"property":112,"content":81},"MetaTagPropertyAttributes","og:title",{"__typename":114,"id":115,"name":116,"path":117,"status":20,"weight":118,"description":119,"langcode":123,"changed":124,"metatag":127},"TermCategories","7","Technologie","/kategorie/technologie",0,{"__typename":120,"processed":121,"format":122},"Text","Development Themen sowie zukünftige Technologien, mit denen wir uns auseinandersetzen. ","wp_html",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":83,"timestamp":125,"timezone":85,"offset":86,"time":126},1713772777,"2024-04-22T07:59:37+00:00",[128,131,135],{"__typename":95,"tag":96,"attributes":129},{"__typename":98,"name":99,"content":130},"Technologie | Liechtenecker UX Design Studio",{"__typename":95,"tag":96,"attributes":132},{"__typename":98,"name":133,"content":134},"description","Development Themen sowie zukünftige Technologien, mit denen wir uns auseinandersetzen.",{"__typename":102,"tag":103,"attributes":136},{"__typename":105,"href":137,"hreflang":13,"rel":107,"media":13,"sizes":13,"type":13},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/kategorie/technologie",[139,144,148,152,156,160,164,168],{"__typename":140,"id":141,"name":142,"path":143,"weight":118},"TermTags","49","Acid-Test","/tag/acid-test",{"__typename":140,"id":145,"name":146,"path":147,"weight":118},"295","CSS","/tag/css",{"__typename":140,"id":149,"name":150,"path":151,"weight":118},"588","History","/tag/history",{"__typename":140,"id":153,"name":154,"path":155,"weight":118},"658","Internet","/tag/internet",{"__typename":140,"id":157,"name":158,"path":159,"weight":118},"659","Internet Explorer","/tag/internet-explorer",{"__typename":140,"id":161,"name":162,"path":163,"weight":118},"1319","Throwback","/tag/throwback",{"__typename":140,"id":165,"name":166,"path":167,"weight":118},"1475","Web","/tag/web",{"__typename":140,"id":169,"name":170,"path":171,"weight":118},"1588","World Wide Web","/tag/world-wide-web",{"__typename":173,"processed":174,"format":122,"summary":13},"TextSummary","\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Als ich in meiner Kindheit mein erstes Tasten-Handy bekommen habe, gab es eine goldene Regel: Alles was du machst, drück niemals auf den ominösen \u003C/span>\u003Ci>\u003Cspan style=\"font-weight: 400;\">Internet-Button\u003C/span>\u003C/i>\u003Cspan style=\"font-weight: 400;\">. Falls man trotzdem einmal versehentlich drauf drückte, versuchte man hektisch aus diesem\u003C/span>\u003Ci>\u003Cspan style=\"font-weight: 400;\"> World Wide Web Ding \u003C/span>\u003C/i>\u003Cspan style=\"font-weight: 400;\">wieder rauszukommen, um nicht mit Kosten vom Mobilfunkanbieter überschüttet zu werden. Ich bin noch nicht der Älteste, und an dieser Stelle werden sich viele von euch denken: Internet am Handy? Ich konnte nicht mal mit dem Festnetz telefonieren und zugleich im Web surfen. Oder: Der Junge hatte ein Handy in seiner Kindheit, WTF?\u003C/span>\u003C/p>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Ja, diese technische Entwicklung geht wirklich verdammt schnell dahin (erfreulicherweise).\u003C/span>\u003C/p>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Ich wollte ursprünglich einen technisch-orientierten Artikel über CSS schreiben. Einen Einblick in coole moderne Features, einen Ausblick über zukünftige Standards oder über die Art und Weise wie man CSS-Code in großen Projekten möglichst performant und sauber schreiben kann. Aber bevor wir tief in die Materie eintauchen, möchte ich euch auch in die Basics einweihen. \u003C/span>\u003C/p>\n\u003Ch2>Das Internet\u003C/h2>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Die Anfänge des Internets sind schon in den frühen 1960er Jahren zu finden. Das Verteidigungsministerium der Vereinigten Staaten war eine führende Kraft in der Entwicklung des Internets und arbeitete mit dem Ziel, Forschungsinstitute und Universitäten zu vernetzen um so die damals begrenzten Rechenleistungen optimal auszunutzen. Für den privaten Gebrauch und für die Öffentlichkeit war dieses Projekt aber keineswegs gedacht. Wir schreiben erst das Jahr 1989 und befinden uns nicht mehr in Amerika sondern in Europa, als die Idee des World Wide Webs aufkam. Dokumente, weltweit verteilt auf verschiedensten Computern gelagert, sollten ortsunabhängig über einen Web-Browser für jedermann und jederzeit abrufbar sein. 1991 wurde dieses World Wide Web Projekt öffentlich und weltweit verfügbar. Die Geburtsstunde für Webseiten und das Surfen, wie wir es heute kennen. Vater dieser Idee war Tim Berners-Lee und geforscht wurde in CERN. Einem Ort, der berühmt ist für seinen riesigen Teilchenbeschleuniger. Einem Ort, an dem nach dem Aufbau der Materie geforscht wird. Einem Ort, an dem das Entstehen des Urknalls untersucht und nachgestellt wird. Wusste Tim Berners-Lee damals schon, dass seine Idee des World Wide Webs auch ein kleiner Urknall war?\u003C/span>\u003C/p>\n\u003Ch2>World Wide Web. You click, we do the rest!\u003C/h2>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Das Web dürfte sich nicht wegen seiner Marketingkampagne durchgesetzt haben. Die drei Säulen von Tim Berner-Lees Konzept sind auch noch heute essentiell:\u003C/span>\u003C/p>\n\u003Cul>\n\u003Cli style=\"font-weight: 400;\">\u003Cspan style=\"font-weight: 400;\">HTTP – das Protokoll zur Kommunikation zwischen Web-Browser und Web-Server\u003C/span>\u003C/li>\n\u003Cli style=\"font-weight: 400;\">\u003Cspan style=\"font-weight: 400;\">HTML – die Markup-Sprache zum Gliedern und Strukturieren von Inhalten\u003C/span>\u003C/li>\n\u003Cli style=\"font-weight: 400;\">\u003Cspan style=\"font-weight: 400;\">URL – das Konzept zum Identifizieren und Lokalisieren von Ressourcen im Netzwerk.\u003C/span>\u003C/li>\n\u003C/ul>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Eine eindeutige Bezeichnung, ein Standard für die Kommunikation zwischen Computern und eine unkomplizierte Markup-Sprache für den Inhalt – und das Ganze für jedermann verwendbar und nicht patentiert. Das Grundrezept für unser geliebtes Web. Lasst uns jetzt zur Würze kommen.\u003C/span>\u003C/p>\n\u003Cblockquote>\n\u003Cp>Sorry, you’re screwed.\u003Cbr>\nMarc Andreesen\u003C/p>\n\u003C/blockquote>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">\u003Ca href=\"http://info.cern.ch/hypertext/WWW/TheProject.html\" target=\"_blank\" rel=\"noopener noreferrer\">Die allererste Webseite\u003C/a> der Weltgeschichte ist noch immer online\u003C/span>\u003Cspan style=\"font-weight: 400;\">. Die Seiten im WWW waren sehr simpel aufgebaut. Überschriften, Texte, Listen und Links zu anderen Seiten. Keine Schnörkel, keine Farben, keine Schriftarten, keine Animationen, keine Positionierungen – nur Inhalt, straight forward. Als Leute mit Faible zu Visualität (aka. Designer) dann das Web für sich entdeckten, kamen bald Aufrufe: Wir wollen unsere Überschriften in unterschiedlichen Farben und hier und da Abstände. Die Entwickler lehnten solche Anfragen strikt ab, und meinten, Styling wäre technisch nicht annähernd möglich im Web. HTML unterstütze nur eine gewisse Auswahl an Standard-Elemente, welche optisch immer gleich aussahen und nicht modifizierbar waren. Marc Andreesen war zu dieser Zeit Entwickler von Mosaic (einer der ersten von der Masse genutzten Web-Browser) und wurde später Co-Founder von Netscape (Netscape Navigator löste Mosaic als Standard-Browser ab). Er meinte zu diesen Styling-Wünschen:\u003C/span>\u003C/p>\n\u003Ca href=\"/sites/default/files/styles/full_width/public/wp-migration/wordpress-media-image/2018/07/qoute-2-1.png?itok=ayrtlpkB\" data-rel=\"lightbox-gallery-fveDv9Cx\" data-rl_title data-rl_caption title class=\"js-image-link\">\u003Cdiv alt=\"Marc Andreesen\" data-entity-type=\"media\" data-entity-uuid=\"98f79aaa-d94a-4a73-96a4-d5297e11e0d3\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2018/07/qoute-2-1.png.webp?itok=rP8BNhdh 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2018/07/qoute-2-1.png.webp?itok=Lsud5SWS 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"1440\" height=\"382\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2018/07/qoute-2-1.png.webp?itok=0COAB0qB 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2018/07/qoute-2-1.png.webp?itok=m9P5R7Tr 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"1024\" height=\"272\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2018/07/qoute-2-1.png.webp?itok=4OdfPSrz 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2018/07/qoute-2-1.png.webp?itok=UybJ7mEw 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"198\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2018/07/qoute-2-1.png.webp?itok=qm-Klz9C 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2018/07/qoute-2-1.png.webp?itok=tnA2ZeWc 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"127\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2018/07/qoute-2-1.png.webp?itok=Al43tsKt 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2018/07/qoute-2-1.png.webp?itok=sBQmB6r- 2x\" type=\"image/webp\" width=\"1620\" height=\"430\">\n                  \u003Cimg loading=\"lazy\" width=\"3240\" height=\"860\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2018/07/qoute-2-1.png.jpg?itok=sBQmB6r-\" alt=\"Marc Andreesen\" title=\"marc-andreesen-statemant\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003C/a>\u003Cp>\u003Cbr>\n\u003Cspan style=\"font-weight: 400;\">Eine Nachricht aus dem frühen 1994. \u003Ca href=\"http://1997.webhistory.org/www.lists/www-talk.1994q1/0648.html\" target=\"_blank\" rel=\"noopener noreferrer\">Hier im Original\u003C/a> nachzulesen.\u003C/span>\u003C/p>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Marc kannte sein Handwerk ziemlich gut. Er hat immerhin zwei große Web-Browser mitentwickelt. Aber mit einem behielt er unrecht: Das Web wurde optisch gestaltbar.\u003C/span>\u003C/p>\n\u003Ch2>CSS – Cascading Style Sheets\u003C/h2>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Hier kommt CSS ins Spiel, und unsere heutige Hauptfigur: Hakon Wium Lie.\u003C/span>\u003C/p>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Anno 1994 und das World Wide Web vervielfacht seine Nutzerzahlen. Die Forderungen nach Styling werden immer lauter. Mosaic, der weitverbreiteste Browser zu dieser Zeit (auf welchem später auch der Internet Explorer von Microsoft basierte), unterstützte bereits die Darstellung von Bildern. So begannen Designer dieses Feature zum Stylen von Webseiten zu verwenden. Überschriften und Textteile wurden zu Grafiken. Mit Photoshop wurden diese Grafiken gestylt. Adobe boomte. Designer konnten ihre Seiten genau nach ihren Wünschen zusammenbauen. Mit Bildern im Web kommen wir Entwickler aber zu einer fatalen Gefahr: Wir kennen den Inhalt der Website nicht. Texte verpackt als Grafik kann ein Webbrowser nicht lesen. Eine Suche im Web wäre damit nicht möglich gewesen. Screenreader für Sehbehinderte würden damit nicht funktionieren. Und natürlich würde der Traffic und die Ladezeiten extrem nach oben schnellen. Bilder benötigen enorm mehr Ladezeit als simpler Text.\u003C/span>\u003C/p>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Daraufhin mussten die Entwickler in CERN reagieren. Hakon Wium Lie wusste, der Mensch orientiert sich stark nach optischen Merkmalen. Die Erfolgsstory mit einem grafischen User Interface kennen wir ja schon von Apple. Man musste den Designern also eine Möglichkeit bieten, das Web nach ihren Wünschen zu gestalten. HTML war nur für die Strukturierung, für den Aufbau und für die Gliederung von Inhalten zuständig. Es wurde eine andere Möglichkeit benötigt, um optische Gestaltungs-Anweisungen für eine Seite hinzuzufügen. Spät in 1994 stellte Hakon seine Idee vor: CHSS (Cascading HTML Style Sheets). Mithilfe von Selektoren können gezielt Elemente aus dem HTML ausgewählt werden und mit verschiedenen Eigenschaften optisch gestylt werden. Da CHSS aber getrennt zu HTML laufen sollte und eine eigene Sprache werden sollte, wurde das H schnell entfernt – CSS. Nachdem Microsoft und Netscape zusagten, ihre neuen Browser mit CSS-Standards-Unterstützung zu bauen, wurde CSS (CSS1) 1996 ins World Wide Web Consortium (abgek. W3C) aufgenommen. Das W3C ist eine Vereinigung für die Standardisierung von Techniken im World Wide Web – geführt übrigens von Tim Berners-Lee. Mit der Aufnahme in dieses Gremium und der Zusage der Unterstützung damaliger Browser war der erfolgreiche Weg für die Zukunft von CSS geebnet.\u003C/span>\u003C/p>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Anfangs nur ausgestattet mit ganz einfachen Befehlen wie Schriftfarbe, Schriftgröße, Schriftstil, Hintergründe oder Umrandungen wuchs CSS mit den Jahren immer weiter an. Heutzutage können wir mit CSS Elemente animieren, Übergänge einfügen, komplexe Formen nachbauen, Webseiten für alle Displaygrößen gestalten (mehr dazu \u003Ca href=\"/responsive-webdesign-die-basics/\" target=\"_blank\" rel=\"noopener noreferrer\">hier\u003C/a>) oder für unterschiedliche Endgeräte verschieden Styles anbieten (Notebooks, Touch-Geräte, Projektoren, Fernseher, etc). CSS-Präprozessoren fügen Features wie Schleifen, Variablen, Funktionen oder vieles anderes hinzu. Die Möglichkeiten in CSS werden immer vielfältiger. Zukünftige CSS Versionen werden noch performanter und spezifischere Selektoren inkludieren. Komplexe Grids werden agiler und können einfacher aufgebaut werden. Randinfo: Der aktuelle Standard ist CSS3. There will be no CSS4! Die Weiterentwicklung und Versionierung wird auf Module aufgeteilt, um einen schnelleren Fortschritt zu sichern. Bei Interesse: Details \u003Ca href=\"https://www.xanthir.com/b4Ko0\" target=\"_blank\" rel=\"noopener noreferrer\">hier\u003C/a>.\u003C/span>\u003C/p>\n\u003Ch2>Das Dilemma mit den Browsern\u003C/h2>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Entwickler verfolgt das Problem noch heute. Die Browserunterstützung: Verschiedene Browser stellen Webseiten nicht immer gleich dar, und so ergeben sich Fehler im Layout. In den frühen Zeiten von CSS war die Browserunterstützung miserabel. Obwohl viele Browser-Entwickler ihre Unterstützung von W3C CSS (CSS1) Standards ankündigten, war die tatsächliche Kompatibilität der Features sehr gering. Gleiche Befehle wurden in unterschiedlichen Browser verschieden dargestellt, und einige Browser konnten manche Befehle gar nicht rendern. Keine optimale Lösung.\u003C/span>\u003C/p>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Der Acid Test wurde entwickelt: Eine Test-Webseite zur Überprüfung der Unterstützung von CSS Standards konform dem W3C’s. Wenn diese Test-Webseite im Browser korrekt dargestellt wird, unterstützt der Browser alle CSS-Standards. Ziel davon war ein einheitliches Aussehen von Webseiten in verschiedenen Web-Browsern. Sehr wenige Browser absolvierten diesen Test erfolgreich. Webentwickler hatten es extrem schwer. Die Browser wiesen unterschiedliche Fehler in der Darstellung des Layouts einer Webseite auf. Für Webentwickler war es fast unmöglich, ein einheitliches optisches Layout für verschieden Browser zu erschaffen. Die Web-Community fing an, verstärkt nach Browser mit Unterstützung des Acid-Tests zu fordern. Es war ein langwieriger und mühsamer Prozess, aber diese Community schaffte es schließlich, dass Microsoft und Co ihre Browser konform aller CSS-Standards baute, und den Acid-Test bestand.\u003C/span>\u003C/p>\n\u003Ch2>Ein kurzer Einblick wie diese Acid Tests aussehen\u003C/h2>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">2005 wurde der Acid2-Test entwickelt. IE6 und IE7 fielen gnadenlos durch. IE8 schaffte es dann 2009 (als letzter wichtiger Browser!) den Acid2-Test korrekt darzustellen. Zurzeit aktuell ist der \u003Ca href=\"http://acid3.acidtests.org/\" target=\"_blank\" rel=\"noopener noreferrer\">Acid3-Test\u003C/a>\u003C/span>\u003Cspan style=\"font-weight: 400;\">. Der Acid4 Test ist in Entwicklung und wird sich auf moderne CSS-Befehle und SVGs fokussieren.\u003C/span>\u003C/p>\n\u003Cp>In den folgenden Grafiken seht ihr den Acid2-Test von drei verschiedenen Browser-Generationen: IE6, durchgefallen. IE7, durchgefallen, aber anders halt. IE8, bravourös alles richtig dargestellt. CSS2.1 wurde vollständig unterstützt.\u003Cbr>\n\u003C/p>\u003Cdiv id=\"attachment_11841\" style=\"width: 810px\" class=\"wp-caption alignnone\">\u003Ca href=\"/sites/default/files/styles/full_width/public/wp-migration/wordpress-media-image/2018/07/acid-ie6-1.png?itok=yYkQYITW\" data-rel=\"lightbox-gallery-fveDv9Cx\" data-rl_title data-rl_caption=\"Acid2-Test IE6\" title class=\"js-image-link\">\u003Cdiv alt=\"IE6\" data-entity-type=\"media\" data-entity-uuid=\"00456e07-1ead-45e7-a24c-1af5b39c67f5\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2018/07/acid-ie6-1.png.webp?itok=Fxcfk1Uf 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2018/07/acid-ie6-1.png.webp?itok=hiS-oEvu 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"800\" height=\"600\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2018/07/acid-ie6-1.png.webp?itok=PhK0INhU 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2018/07/acid-ie6-1.png.webp?itok=r7hS2I1z 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"800\" height=\"600\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2018/07/acid-ie6-1.png.webp?itok=-RwMQuiM 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2018/07/acid-ie6-1.png.webp?itok=GYoB4A95 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"559\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2018/07/acid-ie6-1.png.webp?itok=nI_CFcCZ 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2018/07/acid-ie6-1.png.webp?itok=CpDjb2EG 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"360\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2018/07/acid-ie6-1.png.webp?itok=eRXLuQvq 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2018/07/acid-ie6-1.png.webp?itok=cc8nMlss 2x\" type=\"image/webp\" width=\"800\" height=\"600\">\n                  \u003Cimg loading=\"lazy\" width=\"800\" height=\"600\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2018/07/acid-ie6-1.png.jpg?itok=cc8nMlss\" alt=\"IE6\" title=\"Acid2-IE6\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003C/a>\u003Cp id=\"caption-attachment-11841\" class=\"wp-caption-text\">Acid2-Test im IE6\u003C/p>\u003C/div>\u003Cbr>\n\u003Cdiv id=\"attachment_11840\" style=\"width: 810px\" class=\"wp-caption alignnone\">\u003Ca href=\"/sites/default/files/styles/full_width/public/wp-migration/wordpress-media-image/2018/07/acid-ie7-1.png?itok=NSX8_TZx\" data-rel=\"lightbox-gallery-fveDv9Cx\" data-rl_title data-rl_caption=\"Acid2-Test IE7\" title class=\"js-image-link\">\u003Cdiv alt=\"IE7\" data-entity-type=\"media\" data-entity-uuid=\"925bb69d-c967-4f1c-92e6-17bca4375eda\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2018/07/acid-ie7-1.png.webp?itok=5VXoGg-8 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2018/07/acid-ie7-1.png.webp?itok=RMxeKNkr 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"800\" height=\"600\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2018/07/acid-ie7-1.png.webp?itok=kChg_frY 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2018/07/acid-ie7-1.png.webp?itok=WyVkP9OV 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"800\" height=\"600\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2018/07/acid-ie7-1.png.webp?itok=YSnW5ZxR 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2018/07/acid-ie7-1.png.webp?itok=YuqWUQE5 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"559\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2018/07/acid-ie7-1.png.webp?itok=hx5h9T-9 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2018/07/acid-ie7-1.png.webp?itok=PMm6ugwb 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"360\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2018/07/acid-ie7-1.png.webp?itok=R84np6pd 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2018/07/acid-ie7-1.png.webp?itok=YTm11QX1 2x\" type=\"image/webp\" width=\"800\" height=\"600\">\n                  \u003Cimg loading=\"lazy\" width=\"800\" height=\"600\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2018/07/acid-ie7-1.png.jpg?itok=YTm11QX1\" alt=\"IE7\" title=\"acid2-ie7\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003C/a>\u003Cp id=\"caption-attachment-11840\" class=\"wp-caption-text\">Acid2-Test im IE7\u003C/p>\u003C/div>\u003Cbr>\n\u003Cdiv id=\"attachment_11842\" style=\"width: 810px\" class=\"wp-caption alignnone\">\u003Ca href=\"/sites/default/files/styles/full_width/public/wp-migration/wordpress-media-image/2018/07/acid-ie8-1.png?itok=HWksR5mz\" data-rel=\"lightbox-gallery-fveDv9Cx\" data-rl_title data-rl_caption=\"Acid2-Test im IE8\" title class=\"js-image-link\">\u003Cdiv alt=\"IE8\" data-entity-type=\"media\" data-entity-uuid=\"a1c3c7ba-6391-44ea-b503-d32f4f0c8898\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2018/07/acid-ie8-1.png.webp?itok=CZKJhUT9 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2018/07/acid-ie8-1.png.webp?itok=-jboycF_ 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"800\" height=\"600\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2018/07/acid-ie8-1.png.webp?itok=lMB6NCTE 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2018/07/acid-ie8-1.png.webp?itok=hEl7Kpk1 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"800\" height=\"600\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2018/07/acid-ie8-1.png.webp?itok=6kZ0eEMj 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2018/07/acid-ie8-1.png.webp?itok=NNGBkTe0 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"559\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2018/07/acid-ie8-1.png.webp?itok=4p_0YHcQ 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2018/07/acid-ie8-1.png.webp?itok=wJlVGg6z 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"360\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2018/07/acid-ie8-1.png.webp?itok=sS_g-E5p 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2018/07/acid-ie8-1.png.webp?itok=D5mjrTNd 2x\" type=\"image/webp\" width=\"800\" height=\"600\">\n                  \u003Cimg loading=\"lazy\" width=\"800\" height=\"600\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2018/07/acid-ie8-1.png.jpg?itok=D5mjrTNd\" alt=\"IE8\" title=\"Acid2 IE8\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003C/a>\u003Cp id=\"caption-attachment-11842\" class=\"wp-caption-text\">Acid2-Test im IE8\u003C/p>\u003C/div>\n\u003Ch2>Epilog\u003C/h2>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">CSS: Eine tragende Säule im Gerüst des World Wide Web, die vielleicht viel mehr zum großen Triumphzuges des Webs beigetragen hat, als manche vermuten. Wohin wäre die Reise eines Webs gegangen, ohne Möglichkeiten für Styling? Wohin wäre die Reise eines Webs gegangen, voller Bilder, mit dementsprechend extrem langen Ladezeiten, und ohne jegliche Filter- und Suchfunktionen?\u003C/span>\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n",{"__typename":176,"id":177,"excludeFromScreenreader":13,"mediaImage":178,"name":183,"path":186,"status":20},"MediaImage","1227",{"__typename":179,"url":180,"width":181,"height":182,"alt":183,"title":183,"size":184,"mime":185},"Image","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/wp-migration/wordpress-media-image/2018/07/blog-big-4.jpg",1920,500,"Die Geschichte des Webs",103644,"image/jpeg","/media/1227/edit",{"__typename":176,"id":188,"excludeFromScreenreader":13,"mediaImage":189,"name":183,"path":194,"status":20},"1228",{"__typename":179,"url":190,"width":191,"height":192,"alt":183,"title":183,"size":193,"mime":185},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/wp-migration/wordpress-media-image/2018/07/blog-small-4.jpg",922,519,92083,"/media/1228/edit","\u003C!-- This site is optimized with the Yoast SEO plugin v15.7 - https://yoast.com/wordpress/plugins/seo/ -->\n\u003Cmeta name=\"description\" content=\"Ein Rückblick auf die Entstehung des Internets, des World Wide Webs und von Cascading Style Sheets. Wie wichtig ist CSS wirklich für unser Web? Und welche Auswirkungen hätte ein Web ohne CSS auf uns?\" />\n\u003Cmeta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" />\n\u003Clink rel=\"canonical\" href=\"https://legacy.liechtenecker.dev/blog/der-style-des-webs/\" />\n\u003Cmeta property=\"og:locale\" content=\"de_DE\" />\n\u003Cmeta property=\"og:type\" content=\"article\" />\n\u003Cmeta property=\"og:title\" content=\"Dreh den Swag auf - Eine Geschichte über den Style des Webs - Liechtenecker\" />\n\u003Cmeta property=\"og:description\" content=\"Ein Rückblick auf die Entstehung des Internets, des World Wide Webs und von Cascading Style Sheets. Wie wichtig ist CSS wirklich für unser Web? Und welche Auswirkungen hätte ein Web ohne CSS auf uns?\" />\n\u003Cmeta property=\"og:url\" content=\"https://legacy.liechtenecker.dev/blog/der-style-des-webs/\" />\n\u003Cmeta property=\"og:site_name\" content=\"Liechtenecker\" />\n\u003Cmeta property=\"article:published_time\" content=\"2018-07-10T12:37:45+00:00\" />\n\u003Cmeta property=\"article:modified_time\" content=\"2019-04-09T09:24:40+00:00\" />\n\u003Cmeta property=\"og:image\" content=\"https://legacy.liechtenecker.dev/wp-content/uploads/2018/07/qoute-2-1-1024x272.png\" />\n\u003Cmeta name=\"twitter:card\" content=\"summary_large_image\" />\n\u003Cmeta name=\"twitter:label1\" content=\"Geschätzte Lesezeit\">\n\t\u003Cmeta name=\"twitter:data1\" content=\"8 Minuten\">\n\u003Cscript type=\"application/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https://legacy.liechtenecker.dev/#website\",\"url\":\"https://legacy.liechtenecker.dev/\",\"name\":\"Liechtenecker\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https://legacy.liechtenecker.dev/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"ImageObject\",\"@id\":\"https://legacy.liechtenecker.dev/blog/der-style-des-webs/#primaryimage\",\"inLanguage\":\"de-DE\",\"url\":\"https://legacy.liechtenecker.dev/wp-content/uploads/2018/07/qoute-2-1.png\",\"width\":3512,\"height\":932},{\"@type\":\"WebPage\",\"@id\":\"https://legacy.liechtenecker.dev/blog/der-style-des-webs/#webpage\",\"url\":\"https://legacy.liechtenecker.dev/blog/der-style-des-webs/\",\"name\":\"Dreh den Swag auf - Eine Geschichte \\u00fcber den Style des Webs - Liechtenecker\",\"isPartOf\":{\"@id\":\"https://legacy.liechtenecker.dev/#website\"},\"primaryImageOfPage\":{\"@id\":\"https://legacy.liechtenecker.dev/blog/der-style-des-webs/#primaryimage\"},\"datePublished\":\"2018-07-10T12:37:45+00:00\",\"dateModified\":\"2019-04-09T09:24:40+00:00\",\"author\":{\"@id\":\"https://legacy.liechtenecker.dev/#/schema/person/75ed6ebea3f085adaae10aef7dd048dc\"},\"description\":\"Ein R\\u00fcckblick auf die Entstehung des Internets, des World Wide Webs und von Cascading Style Sheets. Wie wichtig ist CSS wirklich f\\u00fcr unser Web? Und welche Auswirkungen h\\u00e4tte ein Web ohne CSS auf uns?\",\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https://legacy.liechtenecker.dev/blog/der-style-des-webs/\"]}]},{\"@type\":\"Person\",\"@id\":\"https://legacy.liechtenecker.dev/#/schema/person/75ed6ebea3f085adaae10aef7dd048dc\",\"name\":\"Christof\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https://legacy.liechtenecker.dev/#personlogo\",\"inLanguage\":\"de-DE\",\"url\":\"https://secure.gravatar.com/avatar/917123011dcdb8b85a4f25a00ea88c8c?s=96&d=mm&r=g\",\"caption\":\"Christof\"}}]}\u003C/script>\n\u003C!-- / Yoast SEO plugin. -->",{"__typename":197,"id":198,"myRole":199,"name":200,"nickname":201},"User","3","Quoten-Kärntner","c-thalmann","Christof",{"latestKnowhow":203},[204,219,232],{"__typename":79,"id":205,"title":206,"path":207,"wpTeaserText":208,"wpPromotedTeaserImage":13,"wpHeaderImage":209},"1619","Behind the scenes: Ein Barrierefreiheits-Audit","/blog/behind-scenes-ein-barrierefreiheits-audit","”Entspricht unsere Website den gesetzlichen Anforderungen und wenn nicht, was genau müssen wir ändern?”\r\nDiese Frage lieben wir. Echt! Und so sieht unsere Antwort aus.",{"__typename":176,"id":210,"excludeFromScreenreader":13,"mediaImage":211,"name":217,"path":218,"status":20},"3364",{"__typename":179,"url":212,"width":213,"height":214,"alt":215,"title":13,"size":216,"mime":185},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-04/Headerbilder%20Blogartikel%20Behind%20the%20scene%20Accessibility%20Audit.jpg",2880,1300,"Headline mit Sujet: Tastatur mit Symbolen für Barrierefreiheit im Fokus auf hellem  Hintergrund",838204,"Headerbilder Blogartikel Behind the scene Accessibility Audit.jpg","/media/3364/edit",{"__typename":79,"id":220,"title":221,"path":222,"wpTeaserText":223,"wpPromotedTeaserImage":13,"wpHeaderImage":224},"1616","Agentic KI trifft Design-System: Wie unser Presentation Maker entstand.","/blog/agentic-ki-trifft-design-system-wie-unser-presentation-maker-entstand","Nein, wir wollen euch jetzt nicht erzählen, was KI alles kann. Aber wir möchten euch zeigen, wie wir mit KI umgehen. \r\n",{"__typename":176,"id":225,"excludeFromScreenreader":13,"mediaImage":226,"name":230,"path":231,"status":20},"3355",{"__typename":179,"url":227,"width":213,"height":214,"alt":228,"title":13,"size":229,"mime":185},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-03/BLOG_Presentation%20Tool_TITEL-2880x1300px_1.jpg","Lukas und Daniel  arbeiten an Computern im Büro.",2621988,"BLOG_Presentation Tool_TITEL-2880x1300px.jpg","/media/3355/edit",{"__typename":79,"id":233,"title":234,"path":235,"wpTeaserText":13,"wpPromotedTeaserImage":13,"wpHeaderImage":236},"1606","UI Trends 2026","/blog/ui-trends-2026",{"__typename":176,"id":237,"excludeFromScreenreader":21,"mediaImage":238,"name":242,"path":243,"status":20},"3303",{"__typename":179,"url":239,"width":213,"height":214,"alt":240,"title":13,"size":241,"mime":185},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-01/BLOG_Trendbericht%202026.jpg","UI Trends 2026, gelber Hintergrund, schwarze Schrift.",4700748,"BLOG_Trendbericht 2026.jpg","/media/3303/edit",{"Language:de":245,"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1":246,"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c":250,"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c":253,"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741":256,"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a":259,"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5":262,"Menu:nuxt-main-menu":265,"ROOT_QUERY":279,"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e":295,"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195":298,"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db":301,"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d":304,"Menu:footer":307,"TermCategories:7":317,"TermTags:49":328,"TermTags:295":329,"TermTags:588":330,"TermTags:658":331,"TermTags:659":332,"TermTags:1319":333,"TermTags:1475":334,"TermTags:1588":335,"MediaImage:1227":336,"MediaImage:1228":338,"User:3":340,"NodeWpPost:816":341,"MediaImage:3364":378,"NodeWpPost:1619":380,"MediaImage:3355":383,"NodeWpPost:1616":385,"MediaImage:3303":388,"NodeWpPost:1606":390},["null","__typename",16,"id",17,"name",18,"direction",19],["null","__typename",10,"id",11,"title",12,"description",13,"url",14,"langcode",247,"internal",20,"expanded",21,"attributes",249],{"__ref":248},"Language:de",["null","__typename",23,"class",13],["null","__typename",10,"id",25,"title",26,"description",13,"url",27,"langcode",251,"internal",20,"expanded",21,"attributes",252],{"__ref":248},["null","__typename",23,"class",13],["null","__typename",10,"id",30,"title",31,"description",13,"url",32,"langcode",254,"internal",20,"expanded",21,"attributes",255],{"__ref":248},["null","__typename",23,"class",13],["null","__typename",10,"id",35,"title",36,"description",13,"url",37,"langcode",257,"internal",20,"expanded",21,"attributes",258],{"__ref":248},["null","__typename",23,"class",13],["null","__typename",10,"id",40,"title",41,"description",13,"url",42,"langcode",260,"internal",20,"expanded",21,"attributes",261],{"__ref":248},["null","__typename",23,"class",13],["null","__typename",10,"id",45,"title",46,"description",13,"url",47,"langcode",263,"internal",20,"expanded",21,"attributes",264],{"__ref":248},["null","__typename",23,"class",13],["null","__typename",5,"id",6,"name",7,"items",266],[267,269,271,273,275,277],{"__ref":268},"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1",{"__ref":270},"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c",{"__ref":272},"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c",{"__ref":274},"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741",{"__ref":276},"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a",{"__ref":278},"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5",["null","__typename",280,"menu({\"name\":\"NUXT_MAIN_MENU\"})",281,"menu({\"name\":\"FOOTER\"})",283,"route({\"path\":\"/blog/der-style-des-webs\"})",285,"latestKnowhow({\"excludeId\":\"816\",\"limit\":3})",288],"Query",{"__ref":282},"Menu:nuxt-main-menu",{"__ref":284},"Menu:footer",["null","__typename",77,"entity",286],{"__ref":287},"NodeWpPost:816",[289,291,293],{"__ref":290},"NodeWpPost:1619",{"__ref":292},"NodeWpPost:1616",{"__ref":294},"NodeWpPost:1606",["null","__typename",10,"id",55,"title",56,"description",13,"url",57,"langcode",296,"internal",20,"expanded",21,"attributes",297],{"__ref":248},["null","__typename",23,"class",13],["null","__typename",10,"id",61,"title",62,"description",13,"url",63,"langcode",299,"internal",20,"expanded",21,"attributes",300],{"__ref":248},["null","__typename",23,"class",13],["null","__typename",10,"id",66,"title",67,"description",13,"url",68,"langcode",302,"internal",20,"expanded",21,"attributes",303],{"__ref":248},["null","__typename",23,"class",13],["null","__typename",10,"id",71,"title",72,"description",13,"url",73,"langcode",305,"internal",21,"expanded",21,"attributes",306],{"__ref":248},["null","__typename",23,"class",13],["null","__typename",5,"id",51,"name",52,"items",308],[309,311,313,315],{"__ref":310},"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e",{"__ref":312},"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195",{"__ref":314},"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db",{"__ref":316},"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d",["null","__typename",114,"id",115,"name",116,"path",117,"status",20,"weight",118,"description",318,"langcode",319,"changed",320,"metatag",321],["null","__typename",120,"processed",121,"format",122],{"__ref":248},["null","__typename",83,"timestamp",125,"timezone",85,"offset",86,"time",126],[322,324,326],["null","__typename",95,"tag",96,"attributes",323],["null","__typename",98,"name",99,"content",130],["null","__typename",95,"tag",96,"attributes",325],["null","__typename",98,"name",133,"content",134],["null","__typename",102,"tag",103,"attributes",327],["null","__typename",105,"href",137,"hreflang",13,"rel",107,"media",13,"sizes",13,"type",13],["null","__typename",140,"id",141,"name",142,"path",143,"weight",118],["null","__typename",140,"id",145,"name",146,"path",147,"weight",118],["null","__typename",140,"id",149,"name",150,"path",151,"weight",118],["null","__typename",140,"id",153,"name",154,"path",155,"weight",118],["null","__typename",140,"id",157,"name",158,"path",159,"weight",118],["null","__typename",140,"id",161,"name",162,"path",163,"weight",118],["null","__typename",140,"id",165,"name",166,"path",167,"weight",118],["null","__typename",140,"id",169,"name",170,"path",171,"weight",118],["null","__typename",176,"id",177,"excludeFromScreenreader",13,"mediaImage",337,"name",183,"path",186,"status",20],["null","__typename",179,"url",180,"width",181,"height",182,"alt",183,"title",183,"size",184,"mime",185],["null","__typename",176,"id",188,"excludeFromScreenreader",13,"mediaImage",339,"name",183,"path",194,"status",20],["null","__typename",179,"url",190,"width",191,"height",192,"alt",183,"title",183,"size",193,"mime",185],["null","__typename",197,"id",198,"myRole",199,"name",200,"nickname",201],["null","__typename",79,"id",80,"title",81,"changed",342,"created",343,"langcode",344,"path",92,"promote",21,"status",20,"sticky",21,"metatag",345,"category",352,"contentElements",13,"evergreen",13,"tags",354,"wpBody",371,"wpHeaderImage",13,"wpHeaderImageOld",372,"wpHeaderImageOldSmall",374,"wpOgImage",13,"wpPromotedTeaserImage",13,"wpShareDescription",13,"wpShareTitle",13,"wpTeaserText",13,"wpYoastHead",195,"author",376],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],["null","__typename",83,"timestamp",89,"timezone",85,"offset",86,"time",90],{"__ref":248},[346,348,350],["null","__typename",95,"tag",96,"attributes",347],["null","__typename",98,"name",99,"content",100],["null","__typename",102,"tag",103,"attributes",349],["null","__typename",105,"href",106,"hreflang",13,"rel",107,"media",13,"sizes",13,"type",13],["null","__typename",109,"tag",96,"attributes",351],["null","__typename",111,"property",112,"content",81],{"__ref":353},"TermCategories:7",[355,357,359,361,363,365,367,369],{"__ref":356},"TermTags:49",{"__ref":358},"TermTags:295",{"__ref":360},"TermTags:588",{"__ref":362},"TermTags:658",{"__ref":364},"TermTags:659",{"__ref":366},"TermTags:1319",{"__ref":368},"TermTags:1475",{"__ref":370},"TermTags:1588",["null","__typename",173,"processed",174,"format",122,"summary",13],{"__ref":373},"MediaImage:1227",{"__ref":375},"MediaImage:1228",{"__ref":377},"User:3",["null","__typename",176,"id",210,"excludeFromScreenreader",13,"mediaImage",379,"name",217,"path",218,"status",20],["null","__typename",179,"url",212,"width",213,"height",214,"alt",215,"title",13,"size",216,"mime",185],["null","__typename",79,"id",205,"title",206,"path",207,"wpTeaserText",208,"wpPromotedTeaserImage",13,"wpHeaderImage",381],{"__ref":382},"MediaImage:3364",["null","__typename",176,"id",225,"excludeFromScreenreader",13,"mediaImage",384,"name",230,"path",231,"status",20],["null","__typename",179,"url",227,"width",213,"height",214,"alt",228,"title",13,"size",229,"mime",185],["null","__typename",79,"id",220,"title",221,"path",222,"wpTeaserText",223,"wpPromotedTeaserImage",13,"wpHeaderImage",386],{"__ref":387},"MediaImage:3355",["null","__typename",176,"id",237,"excludeFromScreenreader",21,"mediaImage",389,"name",242,"path",243,"status",20],["null","__typename",179,"url",239,"width",213,"height",214,"alt",240,"title",13,"size",241,"mime",185],["null","__typename",79,"id",233,"title",234,"path",235,"wpTeaserText",13,"wpPromotedTeaserImage",13,"wpHeaderImage",391],{"__ref":392},"MediaImage:3303"]