Cum să remediați mici supărări de pe web cu stil [Firefox și Chrome]

Designerii web au o slujbă aproape imposibilă. Trebuie să vină cu un design care să fie pe placul tuturor. Când vorbiți despre un serviciu precum Gmail, folosit de nenumărate milioane de oameni din întreaga lume, puteți renunța la partea „aproape” - este imposibil. Chiar dacă o reproiectare este apreciată de majoritatea oamenilor, vor exista întotdeauna utilizatori cărora nu le place noul look.

Uneori sunt destui utilizatori pentru a forța o companie să retragă, așa cum a făcut recent Google cu butoanele pictogramei Gmail. Dar dacă ai ceva într-adevăr urăsc, iar compania nu o schimbă? Ești blocat cu el pentru totdeauna? Datorită stilurilor de utilizator, puteți rezolva singuri astfel de probleme.

Vă prezentăm Stylish

Elegant este un supliment gratuit disponibil atât pentru Firefox și Crom și vă permite să faceți ceva destul de magic - aplicați propriile stiluri elementelor paginii web. Chiar dacă nu sunteți dezvoltator web și nu ați scris niciodată un pic de CSS în viața dvs., acest lucru este mult mai ușor decât pare. Puteți utiliza Stylish pentru a transforma site-urile web complet (așa cum vă voi arăta în secțiunea următoare), dar și mai important, puteți folosi Stylish pentru a remedia mici supărări în câteva minute.

De exemplu, am avut o problemă cu dimensiunea implicită a fontului în Gmail. Interfața a fost în regulă - nu am vrut să măresc (Ctrl +) cu browserul meu, deoarece acest lucru ar crește dimensiunea tuturor elementelor interfeței și ar fi foarte urât. Voiam doar o modalitate de a face ca fontul mesajului să fie puțin mai mare.

Cu Stylish, a fost foarte simplu și vă voi arăta cum. Dar, înainte de a ne uita la crearea propriilor stiluri de utilizator, să vorbim despre valorificarea muncii altor persoane.

UserStyles.org

Dacă ceva îți iese pe nervi, este cu totul posibil să nu fii singur. UserStyles.org este un site web care permite utilizatorilor să partajeze stilurile pe care le-au creat. Deasupra puteți vedea un stil ( Adăugați etichete la pictogramele barei de instrumente ) recomandat de comentatorul MakeUseOf RandyN ca răspuns la povestea noastră despre butoanele pictogramei Gmail. Acest stil vă permite să păstrați pictogramele, dar să adăugați etichete text - ceva ce Google nu vă permite să faceți.

UserStyles.org este minunat, dar nu este perfect. Unele dintre modele încearcă să facă prea multe (schimbă în totalitate aspectul unui site web), iar altele sunt pentru versiuni vechi ale site-urilor web și sunt acum defecte. Dacă încercați să remediați ceva mic și nu îl găsiți pe UserStyles.org, poate cel mai bun mod de acțiune este să îl faceți singur.

Crearea propriului stil simplu de utilizator

Pentru a vă crea propriul stil de utilizator, trebuie mai întâi să știți ce element al paginii încercați să modificați, apoi ce schimbare doriți să faceți. Deci, pentru a începe, faceți clic dreapta pe orice doriți să schimbați și alegeți Inspectează elementul . Ar trebui să vedeți așa ceva:

Firefox întunecă restul paginii și desenează un cadru foarte clar în jurul elementului selectat. Deasupra acelui element, textul care spune div # 2d6.ii.gt.adP.adO , este o grămadă de clase CSS, împreună cu un ID (partea care începe cu #). Acesta este selectorul care afectează stilarea acestui element. În partea de jos a ecranului există o bară de navigare care vă permite să „ traversează arborele DOM ', sau cu cuvinte mai simple, mergeți în sus și în jos în ierarhia elementelor care duc la elementul pe care l-ați ales.

Numele jocului de aici este să alegeți elementul pe care doriți să-l stilizați și să faceți selecția nu atât de îngustă încât să nu afecteze tot ceea ce doriți să afectați și nici atât de largă încât să încurce alte lucruri.

Am dat clic cu un element mai sus, div.gs , doar pentru că îmi place numele său (pare a fi ceva care nu se va schimba prea curând, dar asta este o presupunere completă din partea mea). Afectează întreaga zonă a mesajului. Odată selectată zona pe care doriți să o stilizați, faceți clic pe Stil butonul din colțul din dreapta jos, pentru a deschide fișierul Reguli pâine:

Știu, la început este înfricoșător. Dar aici puteți vedea diferitele reguli CSS care afectează elementul pe care l-ați selectat și aici puteți face propriile modificări temporare și puteți vedea impactul acestora pe pagină în timp real, fără a o reîncărca. Dar ce ar trebui să schimbi? Apasă pe Proprietăți butonul și debifați Doar stiluri de utilizator :

Aici puteți vedea o listă completă de toate Regulile CSS. Puteți derula în jos lista până când găsiți o regulă care are sens pentru ceea ce aveți nevoie (dimensiunea fontului în cazul nostru) și chiar faceți clic pe semnul întrebării de lângă acesta pentru a deschide o pagină de explicații. Deci, acum știm că vrem să modificăm proprietatea dimensiunii fontului pentru toate elementele div care au o clasă de „ gs '(scris în stenogramă ca div.gs ).

Singura întrebare care rămâne este ce vrem să fie valoarea sa. Pentru aceasta, ne întoarcem la panoul Regulilor și începem să ne jucăm:

40 de pixeli pot fi un pic nebuni, dar ai idee generală. Jucați-vă cu asta și simțiți-vă liber să adăugați orice alte proprietăți, până când obțineți aspectul pe care îl căutați. Asigurați-vă că nu închideți pagina, deoarece modificările dvs. sunt nu salvat oriunde.

Salvarea noului stil

Odată ce ai făcut ca această parte a site-ului să arate exact așa cum vrei, este timpul să o salvezi. Apasă pe Stilat pictogramă din bara de completare și selectați Scrie un stil nou . Elegant ar dori apoi să știe pe ce pagini ar trebui să aplice noul stil - în cazul nostru, alegeți a doua opțiune, mail.google.com . Apoi, veți vedea acest dialog:

L-am completat deja. Evident, am ales un nume și câteva etichete pentru stil. Dar lucrurile adevărate se întâmplă în cadrul codului: Linia 3 era deja acolo - Elegant a pus-o în loc, astfel încât să știe pe ce pagini se aplică stilul. Dar linia 5-7 este a mea. Să le analizăm:

Linia 5: div.gs { - această parte ar trebui să o recunoașteți. Acesta este elementul pe care am decis să-l stilizăm. Dispozitivul de deschidere înseamnă că acum vom scrie câteva reguli CSS. Linia 6: font-size: 20px! important; - aceasta este regula pe care dorim să o schimbăm (dimensiunea fontului), urmată de noua sa definiție (20 pixeli) și apoi de o declarație! Importantă, ceea ce înseamnă că Firefox ar respecta această regulă chiar dacă un element mai apropiat de text încearcă să seteze dimensiunea fontului la ceva diferit. Linia 7:} - închiderea definiției stilului.

Apoi, faceți clic pe Previzualizați și vă minunați de munca dvs.:

Și, în sfârșit, după ce vedeți că funcționează, dați clic Salvați.

Acesta nu este un ghid complet

Știu bine că pentru a păstra acest scurt tutorial în limitele unei singure postări, a trebuit să fac o serie de salturi și salturi. Dacă ai fost confuz pe parcurs, acceptă scuzele mele. CSS este dificil la început, dar nu este atât de complicat odată ce ai reușit - și personalizarea site-urilor web rămâne una dintre cele mai bune modalități de învățare.

Dacă ați fost confuz de ceva, vă rugăm să mă întrebați mai jos și voi face tot posibilul să vă ajut.

cum se deschid fișiere jar cu java windows 10

Acțiune Acțiune Tweet E-mail 5 sfaturi pentru a vă supraîncărca mașinile VirtualBox Linux

V-ați săturat de slaba performanță oferită de mașinile virtuale? Iată ce ar trebui să faceți pentru a vă îmbunătăți performanța VirtualBox.

Citiți în continuare Subiecte asemănătoare

Browsere
Dezvoltare web
Instrumente pentru webmasteri
Mozilla Firefox
Google Chrome
Web design

Despre autor Erez Zukerman(288 articole publicate) Mai multe de la Erez Zukerman

Aboneaza-te la newsletter-ul nostru

Alăturați-vă newsletter-ului pentru sfaturi tehnice, recenzii, cărți electronice gratuite și oferte exclusive!

Faceți clic aici pentru a vă abona