Mozilla meddelade för en stund sedan att det har förbättrat CSS Nätet Inspektör av Firefox integrerade utvecklingsverktyg avsevärt.
Den nya funktionaliteten har lagts till i Firefox Nightly, banbrytande utveckling versionen av webbläsaren Firefox, som får nya funktioner först innan de flyttar till Beta och sedan till den Stabila versioner av webbläsare.
CSS-Grid Layout är en metod för att dela upp en webbsida i regioner, och att definiera relationer mellan olika element på sidan. Namnet grid kommer från layouten är karakteristisk för att anpassa delar i kolumner och rader.
Medan liknande bord, CSS Nätet erbjuder fördelar såsom möjlighet att överlagra element eller använda lager.
Mozilla förbättrar CSS Nätet Inspektör i Firefox Nightly
Firefox Nightly användare kan öppna Verktyg för Utvecklare av webbläsare du använder F12 genväg. Att använda sig av den nya CSS Rutnät, som de behöver för att öppna Inspektorns Verktyget på en sida som använder CSS-Nätet.
Layouten Panelen listar alla CSS-Grid behållare på den aktiva sidan. Det finns ett överlägg på toppen av det som visualiserar layout, position och lager av varje container.
Firefox utvecklare kan anpassa displayen med hjälp av följande tre inställningar som finns tillgängliga just nu:
- Förlänga linjer i det oändliga.
- Visa siffror på linjer.
- Visa rutnät områden. Här listas de avgränsande områden och tillhörande område namn på varje ruta i rutnätet höger på sidan.
Ett annat visuella element som är nya i Developer-Verktyg är förmågan att hovra med musen över en container för att ha den markeras för dig på sidan. Du måste markera det överlägg nätet först för alternativ till arbete.
En annan ny funktion på Nätet Inspektör gör det möjligt för utvecklare att se var linjerna är för nät som är översatta, skeva, rotera eller skalas.
Mozilla har lagt till en ny Laptop Modell Fastigheter till Nätet Inspektör. Den listar alla egenskaper som påverkar position, storlek och geometri av det valda elementet.
Utvecklare kan du redigera vissa egenskaper, position och höjd/bredd egenskaper direkt dit.
Här är en video som går igenom de nya funktionerna.
Nu är Du: om du är en webbutvecklare, vad är din syn på CSS Omgjorda och funktionerna i Firefox Developer Tools i hänsynen till den?