Mozilla annonsert bare for en stund siden for at det har forbedret CSS-Grid Inspector av Firefox er integrert Verktøy for utviklere betydelig.
Den nye funksjoner har blitt lagt til Firefox hver Kveld, cutting edge utvikling versjon av Firefox nettleseren som får nye funksjoner først, før de vandrer til Beta og deretter til Stabile versjoner av nettleseren.
CSS-Grid Layout er en metode for å dele en internett side i regioner, og definere relasjoner av elementer på siden. Navnet grid kommer fra oppsettet er karakteristisk for å justere elementer i kolonner og rader.
Mens tilsvarende tabeller, CSS Rutenett byr på fordeler som for eksempel muligheten for å legge elementer eller bruke lag.
Mozilla forbedrer CSS Rutenett Inspektør i Firefox Nattlig
Firefox Nattlig brukere kan åpne Verktøy for utviklere av nettleseren du bruker F12 snarvei. Å gjøre bruk av den nye CSS-Grid-funksjonalitet, de trenger å åpne Inspektør Verktøyet på en side som bruker CSS Rutenett.
Layout-Panelet viser alle CSS-Grid beholdere på den aktive siden. Det inkluderer et overlegg på toppen av det som visualiserer layout, posisjon og lag i hver beholder.
Firefox-utviklerne kan tilpasse visningen ved hjelp av følgende tre innstillinger som er tilgjengelige akkurat nå:
- Utvide rutenettet linjer uendelig.
- Vise tall på linjene.
- Vise rutenett områder. Dette viser byksende områder og tilhørende navn på område av hver celle i rutenettet til høyre på siden.
Et annet visuelt element som er nytt i den Utvikler Verktøy er muligheten til å hold musen over en hvilken som helst beholder til å ha det markert for deg på siden. Du må velg overlegget nettet først for valg til arbeid.
En annen ny funksjon i nettet Inspektør lar utviklere å se hvor rutenett linjer er for nett som er oversatt, skråstilt, rotert eller skaleres.
Mozilla har lagt til en ny Boks Modell Egenskaper til nettet Inspektør som godt. Det viser alle egenskapene som påvirker posisjon, størrelse og geometri av det valgte elementet.
Utviklere kan redigere noen egenskaper, posisjon og høyde/bredde-egenskaper direkte dit.
Her er en video som tar deg gjennom den nye funksjonaliteten.
Nå er Du: hvis du er en webutvikler, hva er din ta på CSS Binde og funksjonalitet av Firefox Verktøy for utviklere i forhold til det?