Pixel Ruler

Usa Pixel Ruler per misurare i pixel su qualsiasi pagina web: un righello a schermo per dimensioni e spaziature.

Pixel Ruler mette un righello sullo schermo e ti lascia misurare qualsiasi cosa nel browser. Clicca sull'icona nella barra degli strumenti, trascina il mouse sul layout e leggi la distanza esatta in pixel CSS. Passa sopra un elemento e ottieni larghezza, altezza, padding e le distanze dai blocchi vicini. I numeri coincidono con DevTools, perché l'estensione legge gli stessi pixel CSS che il browser usa per disegnare la pagina. Nessun pannello da aprire, nessuno screenshot da esportare, nessun calcolo a mente. Solo un righello sullo schermo, sopra il sito che stai già guardando. Un solo overlay, niente da alternare: 📏 Tieni premuto e trascina per misurare la distanza tra due punti qualsiasi della pagina. 📏 Punta un elemento e vedi dimensioni, padding e distanze dai suoi vicini. 📏 Rilascia guide verticali e orizzontali e allinea i blocchi su di esse. Hai sempre un righello sullo schermo come riferimento, e un tasto copia il risultato negli appunti insieme al selettore CSS dell'elemento sotto il puntatore. Come iniziare, in tre passaggi: 1. Installa l'estensione e fissala alla barra degli strumenti. 2. Apri la pagina su cui stai lavorando e clicca sull'icona. 3. Trascina, passa sopra, misura — premi Esc due volte quando hai finito. Gli sviluppatori front-end lo usano per confrontare il layout con il mockup. I designer lo usano come righello di pagina quando il file di consegna è ormai superato. I QA aprono un bug con un numero reale invece di «il bottone sembra un po' basso». Chi ha bisogno di una misura al pixel su un sito live la ottiene in due clic. Cosa ti dà questo righello per il web: - la distanza tra due punti qualsiasi, in pixel - larghezza e altezza di qualunque elemento della pagina - padding, margini e spazi tra elementi vicini - le distanze di un elemento dai blocchi che lo circondano - le scale lungo il bordo superiore e sinistro della finestra - tag, classi e selettore CSS dell'elemento misurato - guide riutilizzabili per verificare l'allineamento I comandi da tastiera tengono fermo il puntatore: → Shift blocca la misura sull'asse orizzontale o verticale → Le frecce spostano il punto corrente di esattamente 1 px → Esc cancella la misura in corso, un secondo Esc ti restituisce la pagina → Una scorciatoia copia il risultato negli appunti Installalo una volta e avrai lo stesso righello per pixel che usano gli utenti Windows, Linux e ChromeOS, e lo stesso righello per pixel che usano gli utenti Mac, perché lo strumento vive nel browser, non nel sistema operativo. Non c'è nessun download di righello per pixel da cercare, nessun installer e nessun diritto di amministratore: l'estensione arriva dal Chrome Web Store con un clic. Al lancio è un righello per pixel gratuito, con tutte le funzioni aperte a tutti. Un'app righello per lo schermo che si apre in una finestra separata misura sempre la cosa sbagliata appena la pagina scorre. Questa app righello per pixel viene disegnata dentro la scheda e scorre insieme al contenuto. Questo è un righello per pixel online: funziona sulla pagina live, su un server di staging, sul sito di un cliente, dietro un login. Un righello per pixel da desktop che misura l'immagine ferma di una finestra non può farlo. Devi controllare un'illustrazione o un logo? Usalo come righello per pixel sulle immagini: passa sopra la figura e leggi la sua dimensione renderizzata, che spesso non coincide con quella del file sorgente. Domande e risposte D: Come si misurano i pixel sullo schermo senza aprire DevTools? R: Clicca sull'icona e trascina. L'overlay sta sopra la pagina, quindi misuri quello che vedi davvero, compresi gli stati hover che spariscono quando un pannello ruba il focus. D: Righello schermo pixel, righello pixel, righello px, screen ruler, px ruler, pixelruler — quale di questi è? R: Tutti. Lo strumento è lo stesso, cambia solo la frase cercata. D: Può misurare in centimetri o pollici? R: No. È uno strumento righello per pixel e riporta solo pixel CSS, l'unità che scrivi nel foglio di stile. D: Funziona ovunque? R: Sui siti normali sì. Le pagine di sistema di Chrome, il visualizzatore PDF integrato e l'interno degli iframe cross-origin sono chiusi a ogni estensione, questa compresa. D: Quali dati raccoglie? R: Nessuno. Zero richieste di rete, nessun account, nessuna registrazione. All'installazione non chiede permessi inquietanti e tocca una pagina solo dopo che hai cliccato sull'icona. Le vecchie abitudini sono più lente e meno precise: appoggiare un righello di plastica al vetro dello schermo, o contare i pixel in uno screenshot. Un righello per lo schermo del computer deve stare dentro il browser, ridisegnarsi quando il layout si ricompone e parlare le stesse unità del codice. È esattamente quello che fa questo overlay righello sullo schermo, ed è il motivo per cui un righello per pixel sul sito batte una riga tirata su un'immagine dello schermo incollata in un editor grafico. La scheda è disponibile in 52 lingue, quindi un righello per pixel sul web è a una ricerca di distanza anche nella tua. Installalo, misura i pixel sulla prossima pagina che apri e tieni il righello sullo schermo a un clic di distanza per il resto della giornata.