Outline Only Mode dodaje obrube u boji svakom HTML elementu na web stranici, pružajući vam trenutni pregled strukturnog izgleda stranice. Pogledajte točno gdje se nalazi svaki div, section, header, paragraf i button — uključujući njihov padding, margine i odnose ugniježđivanja.
Razumijevanje izgleda stranice često je prvi korak u otklanjanju CSS problema. Uzrokuje li taj dodatni prazan prostor padding ili margin? Je li element širi od očekivanog zbog neograničenog podređenog elementa? Preklapaju li se dva elementa zbog sukobljenih position vrijednosti? Outline Only Mode odgovara na ova pitanja trenutno, crtajući obojene obrube oko svakog elementa na stranici. Za razliku od browser DevTools (koji naglašava samo jedan element istovremeno), ovaj alat ocrtava sve odjednom — dajući vam cjelokupnu sliku. Svaka vrsta HTML elementa dobiva posebnu boju: zaglavlja su plava, nav elementi su žuti, glavni sadržaj je zelen, paragrafi su ružičasti, buttons su tirkizni i tako dalje. Kodiranje bojama olakšava uočavanje strukturnih uzoraka i prepoznavanje elemenata na prvi pogled bez čitanja DOM-a.
Uključite outline na svakom elementu jednim klikom — bez konfiguracije, bez ploče s postavkama. Kliknite jednom da vidite sve obrube, kliknite ponovno da ih uklonite. Najbrži način za vizualizaciju strukture izgleda na bilo kojoj web stranici.
Različiti HTML elementi dobivaju različite boje outline-a za trenutno vizualno prepoznavanje. Zaglavlja u plavoj, navigacija u žutoj, glavni sadržaj u zelenoj, naslovi u ljubičastoj, paragrafi u ružičastoj, buttons u tirkiznoj, divovi u sivoj. Možete prepoznati vrste elemenata bez čitanja DOM-a.
Outline-i čine nevidljive CSS probleme vidljivima. Uočite neočekivane margin-e koji stvaraju prazan prostor, padding koji gura elemente šire od očekivanog, overflow koji uzrokuje horizontalne trake za pomicanje ili skupljene elemente koji zauzimaju nultu visinu. Svaka granica kutije postaje vidljiva.
Ugniježđeni outline-i otkrivaju roditeljsko-dječju strukturu DOM-a. Pogledajte koliko su duboko elementi ugniježđeni, koji kontejner omotava koji sadržaj i gdje padaju granice svake razine ugniježđivanja. Neprocjenjivo za razumijevanje složenih grid i flex izgleda.
Aktivirajte na bilo kojoj web stranici — vlastitim projektima, stranicama klijenata, stranicama konkurenata ili dizajnerskim referencama. Outline-i se primjenjuju putem CSS injekcije i ne mijenjaju strukturu DOM-a niti utječu na JavaScript ponašanje.
Outline-i se crtaju pomoću CSS outline (ne border), što znači da ne dodaju dimenzijama box modela elementa. Izgled stranice ostaje točno kakav je bio — outline-i su isključivo vizualni i ne uzrokuju nikakav reflow.
Način obrisa covers the following, organized by category:
htmlbodyheaderfootermainsectionarticleasidenavh1–h6 headingsp paragraphsspana linksblockquoteprecodebuttoninputtextareaselectformlabeldivul / ol / litable / tr / tdfiguredetailsTaj tajanstveni razmak između sekcija? Uključite outline-e i odmah ćete vidjeti je li uzrokovan margin-om na donjem elementu, padding-om na roditeljskom kontejneru ili praznim divom za koji niste znali da postoji. Ono što traje minute u DevTools-u, s Outline Mode-om traje sekunde.
Promijenite veličinu prozora preglednika s uključenim outline-ima da pratite kako se izgled prilagođava na različitim breakpoint-ovima. Pogledajte koji elementi se složaju, koji prelaze granice i gdje se mijenja grid ili flexbox struktura — sve na prvi pogled.
Previše ugniježđenih divova? Nepotrebni omotački elementi? Outline Mode čini prekomjerno ugniježđivanje vizualno očiglednim — ako vidite 5+ koncentričnih outline-a oko jednostavnog sadržaja, oznake bi se mogle pojednostaviti. Odlično za pregled koda frontend PR-ova.
Omogućite outline-e na svojoj početnoj stranici, a zatim na podstranici. Dijele li istu strukturu izgleda? Jesu li margine i širine sekcija dosljedne? Outline-i čine strukturnu dosljednost (ili nedosljednost) odmah vidljivom.
Pokažite studentima kako HTML elementi stvaraju kutije, kako box model radi s padding-om i margin-ima i kako ugniježđivanje stvara hijerarhiju stranice. Outline Mode pretvara apstraktne koncepte u vidljive, interaktivne demonstracije.
Otvorite plutajući dock DevSuite Pro i kliknite ikonu Outline Only Mode. Odmah, svaki HTML element na stranici dobiva obojen outline obrub.
Svaka vrsta elementa ima posebnu boju. Plava za strukturne elemente (header, footer, section), zelena za područja glavnog sadržaja, ljubičasta za naslove, ružičasta za paragrafe, tirkizna za buttons i inputs, žuta za navigaciju i siva za generičke divove i span-ove.
Potražite neočekivane praznine (uzrokovane margin-ima), elemente koji se protežu izvan svojih kontejnera (overflow), asimetričan razmak (nedosljedan padding) ili duboko ugniježđene omotače (nepotrebno ugniježđivanje divova). Sve postaje odmah vidljivo.
Koristite Outline Mode kao polaznu točku, zatim prijeđite na CSS Inspector za provjeru specifičnih vrijednosti na elementima koje ste identificirali, ili Measure Distance za provjeru točnog razmaka između ocrtanih elemenata.
Kliknite ikonu Outline Mode ponovno da uklonite sve outline-e i vratite se na normalni prikaz stranice. Nije potrebno čišćenje — to je čisti toggle.
Instalirajte DevSuite Pro besplatno i otključajte 39+ razvojnih alata za svoj preglednik.