Pixel Ruler

Použite Pixel Ruler na meranie pixelov na ľubovoľnej stránke: pravítko na obrazovke pre rozmery a odsadenia.

Pixel Ruler položí pravítko priamo na obrazovku a umožní vám odmerať čokoľvek v prehliadači. Kliknite na ikonu na paneli s nástrojmi, potiahnite myšou cez rozloženie a prečítajte si presnú vzdialenosť v pixeloch CSS. Ukážte na prvok a hneď vidíte jeho šírku, výšku, vnútorné odsadenie a medzery k okolitým blokom. Čísla sedia s DevTools, lebo rozšírenie číta tie isté pixely CSS, ktorými prehliadač stránku kreslí. Žiadny panel, ktorý treba otvoriť, žiadna snímka obrazovky na export, žiadne počítanie z hlavy. Len pravítko na obrazovke, priamo nad webom, na ktorý sa aj tak práve pozeráte. Jedna vrstva, nie je medzi čím prepínať: 📏 Podržte a potiahnite, ak chcete odmerať vzdialenosť medzi ľubovoľnými dvoma bodmi stránky. 📏 Ukážte na prvok a uvidíte jeho rozmery, odsadenie a vzdialenosti k susedom. 📏 Rozmiestnite zvislé a vodorovné vodidlá a zarovnávajte podľa nich bloky. Pravítko máte stále na obrazovke ako oporný bod a jediný kláves skopíruje výsledok do schránky spolu s CSS selektorom prvku pod kurzorom. Ako začať, v troch krokoch: 1. Nainštalujte rozšírenie a pripnite ho na panel s nástrojmi. 2. Otvorte stránku, na ktorej pracujete, a kliknite na ikonu. 3. Ťahajte, ukazujte, merajte — na záver dvakrát stlačte Esc. Front-end vývojári si ním porovnávajú rozloženie s návrhom. Dizajnérom slúži ako pravítko na stránku, keď je odovzdaný súbor už zastaraný. Testeri nahlásia chybu s konkrétnym číslom namiesto "to tlačidlo akoby viselo trochu nízko". Kto potrebuje rýchle meranie v pixeloch na živom webe, má ho na dva kliky. Čo vám toto webové pravítko dá: - vzdialenosť medzi ľubovoľnými dvoma bodmi, v pixeloch - šírku a výšku ktoréhokoľvek prvku na stránke - odsadenie, okraje a medzery medzi susedmi - posuny od prvku k okolitým blokom - stupnice pozdĺž horného a ľavého okraja okna - značku, triedy a CSS selektor prvku, ktorý ste odmerali - opakovane použiteľné vodidlá na kontrolu zarovnania Ovládanie klávesnicou udrží kurzor na mieste: → Shift uzamkne meranie na vodorovnú alebo zvislú os → Šípky posunú aktuálny bod presne o 1 px → Esc zruší aktuálne meranie, druhý Esc vráti stránku → Jedna skratka skopíruje výsledok do schránky Nainštalujete raz a máte to isté pixelové pravítko, aké používajú ľudia na Windows, Linux a ChromeOS, aj to isté pixelové pravítko, aké používajú ľudia na Mac, pretože nástroj býva v prehliadači, nie v operačnom systéme. Nie je čo sťahovať a hľadať, žiadny inštalátor a žiadne práva správcu: rozšírenie príde z Chrome Web Store jedným kliknutím. Na štarte je to bezplatné pixelové pravítko so všetkými funkciami otvorenými pre každého. Pravítko na obrazovku, ktoré sa otvorí v samostatnom okne, začne merať niečo iné hneď, ako sa stránka posunie. Toto pixelové pravítko je vykreslené vo vnútri karty a posúva sa spolu s obsahom. Toto je pixelové pravítko online: funguje na živej stránke, na testovacom serveri, na klientskom webe, aj za prihlásením. Pixelové pravítko na ploche, ktoré meria statický obrázok okna, to nedokáže. Potrebujete skontrolovať ilustráciu alebo logo? Použite ho ako pixelové pravítko na obrázky — ukážte na obrázok a prečítajte si jeho vykreslenú veľkosť, ktorá často nie je veľkosťou zo zdrojového súboru. Otázky a odpovede Ot: Ako odmerať pixely na obrazovke bez otvárania DevTools? Od: Kliknite na ikonu a potiahnite. Vrstva leží nad stránkou, takže meriate to, čo naozaj vidíte, vrátane stavov pri prejdení myšou, ktoré zmiznú, keď fokus prevezme panel. Ot: Pravítko na obrazovku, pixelové pravítko, meranie v px, screen ruler, px ruler, pixelruler — ktoré z toho je toto? Od: Všetky. Nástroj je ten istý, mení sa len vyhľadávaná fráza. Ot: Vie merať v centimetroch alebo palcoch? Od: Nie. Je to pixelové pravítko a uvádza výhradne pixely CSS, teda jednotku, ktorú píšete v štýloch. Ot: Funguje všade? Od: Na bežných weboch áno. Systémové stránky Chrome, vstavaný prehliadač PDF a vnútro iframe z inej domény sú zatvorené pre každé rozšírenie, aj pre toto. Ot: Aké údaje zbiera? Od: Žiadne. Nula sieťových požiadaviek, žiadny účet, žiadna registrácia. Pri inštalácii nepýta nijaké strašidelné povolenia a stránky sa dotkne až potom, čo kliknete na ikonu. Staré zvyky sú pomalšie a menej presné: priložiť plastové pravítko na sklo monitora alebo rátať pixely na snímke obrazovky. Pravítko na prácu na obrazovke počítača musí bývať v prehliadači, prekresliť sa, keď sa rozloženie preskladá, a hovoriť tými istými jednotkami ako kód. Presne to táto vrstva robí, a preto pixelové pravítko pre weby poráža pravítko dokreslené nad snímkou v grafickom editore. Popis je dostupný v 52 jazykoch, takže webové pixelové pravítko je na jedno vyhľadanie aj v tom vašom. Nainštalujte si ho, odmerajte pixely na najbližšej otvorenej stránke a majte pravítko na obrazovke na jeden klik po zvyšok dňa.