Ispeziona facilmente il modello di scatola di un elemento con XRAY

Hai mai desiderato conoscere la dimensione esatta di un determinato elemento in una pagina Web come il padding, il margine, la posizione e così via? Di solito è possibile ottenere le informazioni utilizzando uno strumento di ispezione Web; la maggior parte dei browser ha strumenti integrati per aiutarti a farlo. In alternativa, puoi usare Firebug, che è anche uno strumento web molto popolare. Tuttavia, quando le cose si complicano, forse devi ricorrere a uno strumento come XRAY.

XRAY è uno strumento cross-browser gratuito che ti consente di vedere il modello di box per qualsiasi elemento di una pagina web direttamente nel tuo browser. A differenza di altri strumenti di ispezione web complessi, XRAY si concentra sul fornire informazioni complete sul modello di box dell'elemento.

Iniziare

XRAY è un bookmarklet. Per usarlo, trascina XRAY nella barra dei segnalibri del tuo browser preferito. XRAY è disponibile per i browser IE6 +, Webkit e Mozilla come Safari e Firefox.

Proprio come altri bookmarklets, XRAY non può funzionare se viene applicato il protocollo SSL (HTTPS) .

Ispezionare gli elementi

Per iniziare l'ispezione, apri qualsiasi pagina web che vuoi ispezionare, assicurati che sia completamente caricata e premi il segnalibro XRAY. Avrai una nuova finestra pop-up nel tuo browser. Questa finestra mostrerà tutte le informazioni sull'elemento che hai selezionato.

Usiamo la mia ispezione della homepage di XRAY come esempio. Dire che voglio sapere le informazioni sul modello di scatola del seguente elemento.

Clicco su XRAY nella barra dei segnalibri e seleziono l'elemento. Questo mi dà il nome, l'id, la classe, la gerarchia, la posizione, il padding, il bordo e il margine dell'elemento .

Per chiudere la finestra, premi il pulsante X nell'angolo in alto a destra della finestra o aggiorna la pagina per uscire dallo strumento.

Pensiero finale

Oltre alla sua funzione avanzata di ispezione del modello di box, XRAY non fornisce le informazioni comunemente disponibili in altri strumenti di ispezione web, come lo stile o il DOM . Indipendentemente da ciò, è ancora abbastanza utile e facile da usare strumento per l'uso quotidiano.

IcoFont ti offre oltre 2100 icone gratuite in un unico file di font

Con l'aumento dei caratteri web e dei font CSS incorporabili, oggi è molto più semplice creare da zero siti Web davvero unici.La tendenza più recente sono i font di icone che sono generalmente più piccoli delle immagini, molto più facili da ridimensionare e sono cristallini su tutte le dimensioni dello schermo (inclusa la retina). Puo

(Consigli tecnici e di design)

10 scanner portatili eleganti che puoi acquistare

Molti scanner mobili moderni hanno caratteristiche tradizionalmente presenti sugli scanner di documenti desktop. La differenza è che sono leggeri e facili da portare con te . Con l'ausilio di scanner portatili, chiunque sia in movimento può facilmente gestire biglietti da visita, estratti conto, fatture e qualsiasi altro documento di cui hanno bisogno per digitalizzare.Q

(Consigli tecnici e di design)