{"id":2277,"date":"2017-06-23T10:20:23","date_gmt":"2017-06-23T08:20:23","guid":{"rendered":"http:\/\/blog.mozilla.org\/press-de\/?p=2277"},"modified":"2017-06-23T10:20:23","modified_gmt":"2017-06-23T08:20:23","slug":"firefox-nightly-css-grid-inspector-mit-starken-neuen-funktionen","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/press-de\/2017\/06\/23\/firefox-nightly-css-grid-inspector-mit-starken-neuen-funktionen\/","title":{"rendered":"Firefox Nightly: CSS Grid Inspector mit starken neuen Funktionen"},"content":{"rendered":"<p><em>Ein Beitrag von <a href=\"https:\/\/hacks.mozilla.org\/author\/gluongmozilla-com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Gabriel Luong<\/a> und <a href=\"https:\/\/hacks.mozilla.org\/author\/ddrivermozilla-com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Dustin Driver<\/a>, zuerst ver\u00f6ffentlicht auf dem <a href=\"https:\/\/hacks.mozilla.org\/2017\/06\/new-css-grid-layout-panel-in-firefox-nightly\/\" target=\"_blank\" rel=\"noopener noreferrer\">Mozilla Hacks Blog<\/a><\/em><\/p>\n<p>CSS Grid revolutioniert das Web Design: Es ist ein flexibler und <a href=\"https:\/\/www.youtube.com\/watch?v=16enLRDbOyY\" target=\"_blank\" rel=\"noopener noreferrer\">einfacher Design-Standard<\/a>, der \u00fcber alle Browser- und Ger\u00e4tegrenzen hinweg angewendet werden kann. Daher \u00fcberrascht es kaum, dass die Begeisterung unter Designern und Entwicklern kontinuierlich w\u00e4chst \u2013 und wir bilden da keine Ausnahme. Aus diesem Grund haben wir intensiv am Layout-Panel der Firefox Tools f\u00fcr Webentwickler gearbeitet, um mit leistungsstarken Verbesserungen am CSS Grid Inspector und am Box-Modell aufwarten zu k\u00f6nnen. Diese brandneuen Entwicklungen sind ab sofort in <a href=\"https:\/\/www.mozilla.org\/de\/firefox\/channel\/desktop\/?utm_source=hacks&amp;utm_campaign=layout_panel#nightly\" target=\"_blank\" rel=\"noopener noreferrer\">Firefox Nightly<\/a> verf\u00fcgbar.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/EinJPX86XCE\" width=\"500\" height=\"281\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p><strong>Verbesserung am Layout-Panel<\/strong><\/p>\n<p>Das neue Layout-Panel listet alle verf\u00fcgbaren CSS Grid Container auf einer Seite auf und gibt eine Gitter\u00fcberlagerung aus, mit deren Hilfe es einfacher ist, das Raster zu visualisieren. Nun kann individuell festgelegt werden, welche Informationen auf der \u00dcberlagerung angezeigt werden, darunter auch die Zeilennummern und Abmessungen des Rasters.<\/p>\n<p><a href=\"http:\/\/blog.mozilla.org\/press-de\/files\/2017\/06\/css-grid-post-1b.gif\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-2283\" src=\"http:\/\/blog.mozilla.org\/press-de\/files\/2017\/06\/css-grid-post-1b.gif\" alt=\"\" width=\"900\" height=\"660\" \/><\/a>Das ist vor allem f\u00fcr diejenigen Nutzer praktisch, die CSS Grid und alle Funktionen gerade erst kennenlernen.<\/p>\n<p>In der Seitenleiste kann jetzt au\u00dferdem ein interaktives Konturraster angezeigt werden. Per Mausbewegung \u00fcber die Konturen lassen sich Teile des Rasters auf der ge\u00f6ffneten Seite hervorheben und verschiedene Informationen anzeigen, wie etwa Gr\u00f6\u00dfe, Bereich oder Position.<\/p>\n<p><a href=\"http:\/\/blog.mozilla.org\/press-de\/files\/2017\/06\/css-grid-post-2c.gif\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-2284\" src=\"http:\/\/blog.mozilla.org\/press-de\/files\/2017\/06\/css-grid-post-2c.gif\" alt=\"\" width=\"900\" height=\"729\" \/><\/a>Mithilfe der neuen Einstellung \u201aRasterbereiche anzeigen\u2018 lassen sich die Anzeigebereiche sowie deren Bezeichnungen f\u00fcr jede Rasterzelle ausgeben. Diese Funktion ist inspiriert vom <a href=\"https:\/\/codepen.io\/anthonydugois\/full\/RpYBmy\" target=\"_blank\" rel=\"noopener noreferrer\">CSS Grid Template Builder<\/a>, der von <a href=\"http:\/\/anthonydugois.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Anthony Dugois<\/a> entwickelt wurde.<\/p>\n<p><a href=\"http:\/\/blog.mozilla.org\/press-de\/files\/2017\/06\/gss-grid-area.gif\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-2285\" src=\"http:\/\/blog.mozilla.org\/press-de\/files\/2017\/06\/gss-grid-area.gif\" alt=\"\" width=\"900\" height=\"640\" \/><\/a>Au\u00dferdem kann der Grid Inspector jetzt Ver\u00e4nderungen, die am Grid Container vorgenommen werden, darstellen. Hierdurch k\u00f6nnen Entwickler ganz genau sehen, wo sich ihre Rasterlinien auf einer Seite befinden. Das gilt f\u00fcr jedes Raster, das umgewandelt, gekippt, gedreht oder in der Gr\u00f6\u00dfe ver\u00e4ndert wird.<\/p>\n<p><a href=\"http:\/\/blog.mozilla.org\/press-de\/files\/2017\/06\/css-grid-transform.gif\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-2281\" src=\"http:\/\/blog.mozilla.org\/press-de\/files\/2017\/06\/css-grid-transform.gif\" alt=\"\" width=\"900\" height=\"639\" \/><\/a><strong>Besserer Zugriff auf das Box-Modell<\/strong><\/p>\n<p>Ab sofort gibt es die M\u00f6glichkeit, bestimmte Eigenschaften anzeigen zu lassen, die sich auf das Box-Modell eines ausgew\u00e4hlten Elements auswirken. Zus\u00e4tzlich werden die verschiedenen Au\u00dfenkanten sichtbar gemacht und k\u00f6nnen direkt in ihrer Position und ihren Ma\u00dfen angepasst werden. Kleine \u00c4nderungen lassen sich so schnell, einfach und in Echtzeit umsetzen.<\/p>\n<p><a href=\"http:\/\/blog.mozilla.org\/press-de\/files\/2017\/06\/css-grid-post-3b.gif\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-2282\" src=\"http:\/\/blog.mozilla.org\/press-de\/files\/2017\/06\/css-grid-post-3b.gif\" alt=\"\" width=\"900\" height=\"727\" \/><\/a>Wie immer m\u00f6chten wir gern wissen, welche Verbesserungen unseren Nutzern besonders gefallen und wie wir die Firefox Tools f\u00fcr Webentwickler weiter verbessern k\u00f6nnen. Besuchen Sie uns bei <a href=\"https:\/\/discourse.mozilla-community.org\/c\/devtools?utm_source=hacks&amp;utm_campaign=layout_panel&amp;utm_content=discourse\" target=\"_blank\" rel=\"noopener noreferrer\">Discourse <\/a>oder unter <a href=\"https:\/\/twitter.com\/FirefoxDevTools?utm_source=hacks&amp;utm_campaign=layout_panel&amp;utm_content=twitter\" target=\"_blank\" rel=\"noopener noreferrer\">@firefoxdevtools<\/a> bei Twitter.<\/p>\n<p><strong>Ein Dankesch\u00f6n an die Community<\/strong><\/p>\n<p>Viele Menschen haben zur Integration des CSS Layout Panel in Nightly beigetragen, darunter vor allem das Firefox Developer Tools und das Developer Relations Team.<\/p>\n<p>Dar\u00fcber hinaus haben wir unheimlich viel Unterst\u00fctzung von den tollen Leuten aus der Community sowie von Teilnehmern verschiedener Programme &#8211; wie\u00a0<a href=\"http:\/\/ucosp.ca\/\" target=\"_blank\" rel=\"noopener noreferrer\">Undergraduate Capstone Open Source Projects<\/a> (UCOSP) und <a href=\"https:\/\/developers.google.com\/open-source\/gsoc\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google Summer of Code<\/a> (GSoC) &#8211; bekommen. Wir bedanken uns ganz herzlich bei allen, die einen Beitrag zu dieser Release geleistet haben, darunter:<\/p>\n<p><a href=\"https:\/\/tigleym.github.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Micah Tigley<\/a> \u2013 Informatikstudentin an der <a href=\"https:\/\/www.uleth.ca\/\" target=\"_blank\" rel=\"noopener noreferrer\">University of Lethbridge<\/a>, <a href=\"http:\/\/ucosp.ca\/\" target=\"_blank\" rel=\"noopener noreferrer\">UCOSP<\/a>&#8211; (Wintersemester 2017) und <a href=\"https:\/\/developers.google.com\/open-source\/gsoc\/\">GSoC<\/a>-Studentin (Sommersemester 2017). Micah hat das interaktive Konturraster M\u00f6glichkeit, Rasterbereiche anzeigen zu lassen, hinzugef\u00fcgt.<\/p>\n<p><a href=\"http:\/\/alexlockhart.ca\/\" target=\"_blank\" rel=\"noopener noreferrer\">Alex Lockhart<\/a> &#8211; Student an der <a href=\"https:\/\/www.dal.ca\/\" target=\"_blank\" rel=\"noopener noreferrer\">Dalhousie University<\/a> und <a href=\"http:\/\/ucosp.ca\/\" target=\"_blank\" rel=\"noopener noreferrer\">UCOSP<\/a>-Student (Wintersemester 2017). Alex hat mit den Box-Modell-Eigenschaften und Positionsinformationen einen Beitrag zum Box-Modell-Panel geleistet.<\/p>\n<p><a href=\"https:\/\/github.com\/roddicks\" target=\"_blank\" rel=\"noopener noreferrer\">Sheldon Roddick<\/a> &#8211; Student an der <a href=\"http:\/\/www.tru.ca\/\" target=\"_blank\" rel=\"noopener noreferrer\">Thompson Rivers University<\/a> und <a href=\"http:\/\/ucosp.ca\/\" target=\"_blank\" rel=\"noopener noreferrer\">UCOSP<\/a>-Student (Wintersemester 2017). Sheldon hat die Option hinzugef\u00fcgt, die Breite und H\u00f6he im Box-Modell zu ver\u00e4ndern.<\/p>\n<p>Wenn auch Sie sich gern an der Weiterentwicklung der Firefox Tools f\u00fcr Webentwickler beteiligen m\u00f6chten, schauen Sie doch mal bei <a href=\"https:\/\/github.com\/devtools-html\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub<\/a>, bei <a href=\"https:\/\/devtools-html-slack.herokuapp.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Slack<\/a> oder unter #devtools auf rc.mozilla.com vorbei. Hier finden Sie alle Informationen um loszulegen.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ein Beitrag von Gabriel Luong und Dustin Driver, zuerst ver\u00f6ffentlicht auf dem Mozilla Hacks Blog CSS Grid revolutioniert das Web Design: Es ist ein flexibler und einfacher Design-Standard, der \u00fcber &hellip; <a class=\"go\" href=\"https:\/\/blog.mozilla.org\/press-de\/2017\/06\/23\/firefox-nightly-css-grid-inspector-mit-starken-neuen-funktionen\/\">Mehr lesen<\/a><\/p>\n","protected":false},"author":495,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[30,766,5],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/press-de\/wp-json\/wp\/v2\/posts\/2277"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/press-de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/press-de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/press-de\/wp-json\/wp\/v2\/users\/495"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/press-de\/wp-json\/wp\/v2\/comments?post=2277"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/press-de\/wp-json\/wp\/v2\/posts\/2277\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/press-de\/wp-json\/wp\/v2\/media?parent=2277"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/press-de\/wp-json\/wp\/v2\/categories?post=2277"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/press-de\/wp-json\/wp\/v2\/tags?post=2277"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}