Mozilla kondigde gewoon een moment geleden dat het verbeterd de CSS Grid Inspector van Firefox geïntegreerde Tools voor Ontwikkelaars aanzienlijk.
De nieuwe functionaliteit is toegevoegd aan Firefox ‘ s nachts, de cutting edge ontwikkeling versie van de Firefox webbrowser dat krijgt nieuwe functies voordat ze migreren naar Beta en dan naar een Stabiele versies van de webbrowser.
CSS Grid Lay-out is een methode voor het verdelen van een webpagina in regio ‘ s en het definiëren van de relaties van elementen op de pagina. De naam grid komt van de lay-out is kenmerkend voor het uitlijnen van elementen in kolommen en rijen.
Terwijl soortgelijke tabellen, CSS Grid biedt voordelen, zoals de mogelijkheid om een overlay van elementen of de lagen gebruiken.
Mozilla verbetert CSS Grid Inspecteur in Firefox Nightly
Firefox Nightly gebruikers kunnen de Developer Tools van de browser via de F12-sneltoets. Om gebruik te maken van de nieuwe CSS Grid functionaliteit, ze moeten open de Inspecteur-Tool op een pagina die gebruik maakt van CSS Grid.
De Lay-out van het Deelvenster lijst met alle CSS Grid containers op de actieve pagina. Het omvat een overlay op de top van dat die visualiseert de lay-out, de positie en de laag van elke container.
Firefox-ontwikkelaars kunnen hiermee kunt u de weergave met behulp van de volgende drie instellingen die beschikbaar zijn op dit moment:
- Verlengen rasterlijnen oneindig.
- Getallen weergeven op de lijnen.
- Weergave raster gebieden. Dit geeft een overzicht van de begrensde gebieden en de daarmee samenhangende gebied naam van elke cel rechts op de pagina.
Een ander visueel element dat nieuw is in de Developer Tools is de mogelijkheid om met de muis over een container om het te hebben gemarkeerd op de pagina. Moet u de overlay grid eerste voor de opties om te werken.
Een andere nieuwe functie van de Grid-Inspecteur stelt de ontwikkelaars in staat om te zien waar de rasterlijnen worden voor rasters die zijn vertaald, scheef, roteren of schalen.
Mozilla voegt een nieuwe Box-Model Eigenschappen om het Raster Inspecteur. Het bevat alle eigenschappen die van invloed zijn op de positie, de grootte en de geometrie van het geselecteerde element.
Ontwikkelaars kunnen u een aantal eigenschappen, de positie en de hoogte/breedte-eigenschappen er direct.
Hier is een video die begeleidt u door de nieuwe functionaliteit.
Nu U: als u een web developer, wat is uw mening over de CSS Omgorden en de functionaliteit van de Firefox-Ontwikkelaar Tools wat dat betreft?