Il tuo sito avrebbe un aspetto migliore se il logo fosse spostato di cinque pixel a destra o avesse uno sfondo blu? Aggiungere un bordo o delle ombre alle immagini nei tuoi post in primo piano le farebbe risaltare di più? I browser moderni come Firefox sono dotati di strumenti per sviluppatori Web che ti consentono di ispezionare il funzionamento interno di un sito e apportare modifiche in tempo reale, guardando i risultati in tempo reale.
In questo tutorial imparerai come utilizzare gli strumenti per sviluppatori Web di Firefox per modificare in tempo reale qualsiasi sito.
Nota: Questo tutorial si applica alla maggior parte dei browser, inclusi Chrome, Opera e Safari.
Scopri gli strumenti per sviluppatori Web
Gli strumenti per sviluppatori Web di Firefox sono un set completo di strumenti, dalla visualizzazione di tutti gli elementi DOM alla possibilità di misurarne la velocità. Per questo tutorial sono necessari solo gli strumenti “Inspector” e “Style Editor”.
Avvia Firefox e visita qualsiasi tuo sito. Dal menu hamburger di Firefox (in alto a destra per impostazione predefinita), scegli “Web Developer -> Style Editor” o premi il tasto Cambio + F7 combinazione sulla tastiera.
Il pannello Web Developer di Firefox apparirà su un lato della sua finestra, di solito nella parte inferiore. Puoi modificarne la posizione facendo clic sul pulsante con tre puntini in alto a destra del pannello e scegliendo “Aggancia a destra / sinistra” o “Finestra separata”.
Nota: Questo tutorial non mostra come codificare HTML e CSS. Puoi imparare le basi qui.
Ispezionare l’elemento
Per poter influenzare l’aspetto di un elemento, devi essere in grado di identificarlo. Fare clic sul primo pulsante sulla sua barra degli strumenti o premere Ctrl + Cambio + C sulla tastiera per abilitare la modalità di selezione degli elementi.
Muovi il mouse sul sito per vedere i diversi elementi della pagina web evidenziati. Accanto a loro vedrai il loro identificatore principale fluttuare in un pop-up.
Quando fai clic su un elemento, verrà selezionato nella scheda Impostazioni degli Strumenti per sviluppatori.
Quando trovi l’elemento che desideri modificare, fai clic con il pulsante destro del mouse sulla sua voce nell’Inspector Strumenti per sviluppatori e seleziona dalla finestra popup che appare – “Copia -> Selettore CSS”.
Inizia la tua modifica dal vivo
Con il selettore CSS del tuo elemento copiato negli appunti, torna alla scheda Editor di stile nella finestra Strumenti per sviluppatori. Fai clic sul pulsante “+” in alto a sinistra per “Crea e aggiungi un nuovo foglio di stile al documento”.
Incolla il tuo selettore CSS all’interno del nuovo foglio di stile vuoto. Aggiungi uno spazio, seguito da una serie di parentesi graffe aperte e chiuse.
In CSS, l’aspetto di un elemento viene definito prima “mirandolo” utilizzando un identificatore come quel selettore CSS, quindi aggiungendo alcune regole che influenzano il suo aspetto, raggruppate all’interno di parentesi graffe. Tutto ciò che si trova tra le parentesi graffe di apertura e chiusura influisce sull ‘”elemento target”.
Ad esempio, se aggiungi la regola di seguito:
display: none;
Ciò nasconderà alla vista l’elemento in cui viene utilizzato. È probabilmente il modo più semplice per sapere che stai mirando all’elemento corretto sulla tua pagina. Se scompare, era effettivamente quello che desideri e puoi eliminare questa regola per provarne altre. Se non è scomparso, è ora di tornare all’Inspector e selezionare qualcosa di diverso.
Non ti mostreremo come codificare CSS qui, ma puoi giocare con alcune delle regole popolari come:
border: 2px solid rgba(255,0,0,0.5); color: #333; font-size:20px;
Noterai che l’elemento del sito cambia man mano che aggiungi regole al foglio di stile CSS.
Come nota di chiusura, ricorda che non viene salvato nulla. Se ti piace l’aspetto delle tue modifiche, copia il tuo codice da qualche parte – in un file TXT o nella tua applicazione preferita per prendere appunti – in modo che tu o un designer / sviluppatore potrete aggiungerlo al foglio di stile del vostro sito per rendere permanenti le modifiche. Se hai bisogno di conoscere i CSS, dai un’occhiata ad alcuni giochi online per aiutarti a padroneggiare l’abilità.
Relazionato:
