Mozilla annoncerede for blot et øjeblik siden, at det har forbedret CSS Grid Inspektør af Firefox ‘ s integrerede udviklingsværktøjer betydeligt.
De nye funktioner er blevet tilføjet til Firefox Nightly, den banebrydende udvikling version af Firefox web-browser, som får nye funktioner først, før de vandrer til Beta-og derefter til Stabile versioner af internetbrowseren.
CSS Grid Layout, er en metode til at inddele en webside i regioner, og definere relationer af elementer på siden. Navnet nettet kommer fra layout, er karakteristiske for at bringe elementer ind i kolonner og rækker.
Mens ligner tabeller, CSS Grid tilbyder fordele, såsom evnen til at overlejre elementer eller bruge lag.
Mozilla forbedrer CSS Grid Inspektør i Firefox Nightly
Firefox Nightly brugere kan åbne udviklerværktøjer af browseren ved hjælp F12 genvej. For at gøre brug af den nye CSS Grid funktionalitet, de har brug for at åbne Inspektør Værktøj på en side, der bruger CSS Grid.
Panelet Layout lister alle CSS Grid containere på den aktive side. Det omfatter en overlay-på toppen af det, der visualiserer layout, position og lag af hver container.
Firefox udviklerne kan tilpasse skærmen ved hjælp af følgende tre indstillinger, der er tilgængelige lige nu:
- Udvide gitterlinjer uendeligt.
- Vise tal på strækninger.
- Vis gitter områder. Dette viser de omgivende områder og de tilknyttede område navn af hver grid celle til højre på siden.
Et andet visuelt element, der er nyt i de Udvikler Værktøjer er evnen til at lade musen svæve over en beholder til at have det fremhævet for dig på den side. Du er nødt til at vælge den overlay grid første til muligheder for at arbejde.
En anden ny funktion i Nettet Inspektøren giver udviklere mulighed for at se, hvor gitterlinjer er for gitre, der er oversat, skæv, roteres, eller størrelsen ændres.
Mozilla har tilføjet en ny Box Model Ejendomme til Nettet Inspektør, som godt. Det viser alle de egenskaber, der påvirker den position, størrelse og geometrien af det valgte element.
Udviklere kan redigere nogle egenskaber, position og højde/bredde-egenskaber direkte der.
Her er en video, som guider dig igennem den nye funktionalitet.
Nu skal Du: hvis du er en web-udvikler, hvad er dit bud på, CSS Binde og funktionaliteten af Firefox Udvikler Værktøjer i forhold til det?