Ainult Kontuuride Režiim lisab värvikoodiga ääriste kontuurid igale HTML elemendile veebilehel, andes sulle koheselt röntgenivaate lehe paigutuse struktuurist. Vaata täpselt, kus iga div, sektsioon, päis, lõik ja nupp asub — koos nende padding'i, ääriste ja sisestuse suhetega.
Lehe paigutuse mõistmine on sageli esimene samm CSS probleemide silumises. Kas see lisaruum on põhjustatud paddingust või margin'ist? Kas element on oodatust laiem piiramata lapse tõttu? Kas kaks elementi kattuvad konfliktsete positsioonide tõttu? Ainult Kontuuride Režiim vastab nendele küsimustele koheselt, joonistades värvilised äärised iga elemendi ümber lehel. Erinevalt brauseri DevToolsist (mis tõstab esile ainult ühe elemendi korraga), see tööriist kontuurib kõike samaaegselt — andes sulle täieliku pildi. Iga HTML elemendi tüüp saab eraldi värvi: päised on sinised, nav elemendid on kollased, põhisisu on roheline, lõigud on roosad, nupud on tsüaanid jne. Värvikood teeb struktuuriliste mustrite märkamise ja elementide tuvastamise lihtsaks ühe pilguga ilma DOMi lugemata.
Lülita kontuurid igale elemendile sisse ühe klõpsuga — pole konfiguratsiooni, pole seadete paneeli. Klõpsa korra, et näha kõiki ääriseid, klõpsa uuesti nende eemaldamiseks. Kiireim viis paigutuse struktuuri visualiseerimiseks mis tahes veebilehel.
Erinevad HTML elemendid saavad erinevad kontuuri värvid kohese visuaalse tuvastamise jaoks. Päised sinises, navigatsioon kollases, põhisisu rohelises, pealkirjad lillas, lõigud roosas, nupud tsüaanis, divid hallides. Saad tuvastada elementide tüüpe ilma DOMi lugemata.
Kontuurid teevad nähtamatud CSS probleemid nähtavaks. Märka ootamatuid margin'eid, mis loovad tühja ruumi, padding'ut, mis surub elemente oodatust laiemaks, ülevoolu, mis põhjustab horisontaalseid kerimisriba, või kokkukukkunud elemente, mis võtavad nullkõrgust. Iga kasti piir muutub nähtavaks.
Sisestatud kontuurid paljastavad DOMi vanem-laps struktuuri. Vaata, kui sügavale on elemendid sisestatud, milline konteiner ümbritseb millist sisu ja kus jooksevad iga sisestuse taseme piirid. Hindamatu väärtusega keeruliste grid ja flex paigutuste mõistmiseks.
Aktiveeri mis tahes veebilehel — sinu enda projektidel, klientide saitidel, konkurentide lehtedel või disainireferentsidel. Kontuurid rakendatakse CSS süstimise kaudu ja need ei muuda DOMi struktuuri ega mõjuta JavaScripti käitumist.
Kontuurid joonistatakse CSS outline (mitte border) abil, mis tähendab, et need ei lisa elemendi box model'i mõõtmetele. Lehe paigutus jääb täpselt samaks — kontuurid on puhtalt visuaalsed ega põhjusta reflow'd.
Ainult Kontuuride Režiim covers the following, organized by category:
htmlbodyheaderfootermainsectionarticleasidenavh1–h6 headingsp paragraphsspana linksblockquoteprecodebuttoninputtextareaselectformlabeldivul / ol / litable / tr / tdfiguredetailsSee salapärane lünk sektsioonide vahel? Lülita kontuurid sisse ja näed kohe, kas selle põhjustab alumise elemendi margin, vanemkonteineri padding või tühi div, mille olemasolust sa ei teadnudki. Mis võtab DevTools-is minuteid, võtab Kontuuride Režiimiga sekundeid.
Muuda brauseri akna suurust kontuuride lubatud olekus, et jälgida, kuidas paigutus murdepunktide vahel ümber kujuneb. Vaata, millised elemendid virnastuvad, millised üle voolavad ja kus muutub grid või flexbox struktuur — kõik ühe pilguga.
Liiga palju sisestatud divide? Ebavajalikke ümbriselemente? Kontuuride Režiim teeb üleliigse sisestuse visuaalselt ilmselgeks — kui näed 5+ kontsentrilist kontuuri lihtsa sisu ümber, saab markup'i lihtsustada. Suurepärane frontend PR-ide koodi ülevaateks.
Luba kontuurid oma kodulehel, seejärel alalehel. Kas neil on sama paigutuse struktuur? Kas margin'id ja sektsioonide laiused on järjepidevad? Kontuurid teevad struktuurilise järjepidevuse (või selle puudumise) koheselt nähtavaks.
Näita õpilastele, kuidas HTML elemendid loovad kaste, kuidas box model töötab padding'i ja margin'idega ning kuidas sisestus loob lehe hierarhia. Kontuuride Režiim muudab abstraktsed kontseptsioonid nähtavateks, interaktiivseteks demonstratsioonideks.
Ava DevSuite Pro hõljuv dokk ja klõpsa Ainult Kontuuride Režiimi ikoonil. Koheselt saab iga HTML element lehel värvilise kontuuri.
Iga elemendi tüübil on eraldi värv. Sinine struktuurielementidele (header, footer, section), roheline põhisisu aladele, lilla pealkirjadele, roosa lõikudele, tsüaan nuppudele ja sisenditele, kollane navigatsioonile ja hall üldistele divide ja spanidele.
Otsi ootamatuid lünki (põhjustatud margin'idest), oma konteinerist välja ulatuvaid elemente (ülevool), asümmeetrilist vahet (ebajärjekindel padding) või sügavalt sisestatud ümbriseid (ebavajalik divide sisestus). Kõik muutuvad koheselt nähtavaks.
Kasuta Kontuuride Režiimi lähtepunktina, seejärel lülitu CSS Inspektorisse, et kontrollida konkreetseid väärtusi tuvastatud elementidel, või Mõõda Distantsi, et kontrollida täpseid vahesid kontuuritud elementide vahel.
Klõpsa Kontuuride Režiimi ikoonil uuesti, et eemaldada kõik kontuurid ja naasta tavalise lehevaate juurde. Pole vaja koristada — see on puhas lülitus.
Paigaldage DevSuite Pro tasuta ja avage 39+ arendustööriista oma brauserile.