Så här fixar du små irritationer på webben med snygga [Firefox och Chrome]

Så här fixar du små irritationer på webben med snygga [Firefox och Chrome]

Webbdesigners har ett nästan omöjligt jobb. De måste komma med en design som tillfredsställer alla. När du pratar om en tjänst som Gmail, som används av otaliga miljoner människor över hela världen, kan du verkligen släppa den 'nästan' delen - det är bara omöjligt. Även om en redesign är omtyckt av de flesta kommer det alltid att finnas användare som verkligen inte gillar det nya utseendet.





Ibland finns det tillräckligt med dessa användare för att tvinga ett företag att gå tillbaka, som Google nyligen gjorde med Gmail -ikonknapparna. Men tänk om det är något du verkligen hatar, och företaget ändrar inte tillbaka det? Har du fastnat för alltid? Tack vare användarstilar kan du själv åtgärda sådana problem.



Vi presenterar Stylish

Stylish är ett gratis tillägg tillgängligt både för Firefox och Krom , och det låter dig göra något ganska magiskt - tillämpa dina egna stilar på webbsidans element. Även om du inte är en webbutvecklare och du aldrig har skrivit lite CSS i ditt liv är det mycket lättare än det låter. Du kan använda Stylish för att omvandla webbplatser helt (som jag visar dig i nästa avsnitt), men ännu viktigare kan du använda Stylish för att fixa små irritationer på några minuter.





Jag hade till exempel ett problem med standardteckensnittstorleken i Gmail. Gränssnittet var bra - jag ville inte zooma in (Ctrl +) med min webbläsare, eftersom det skulle öka storleken på alla gränssnittselement och bli riktigt ful. Jag ville bara ha ett sätt att göra meddelandefonten något större.

Med Stylish var det riktigt enkelt, och jag ska visa dig hur. Men innan vi tittar på att skapa dina egna användarstilar, låt oss prata om att utnyttja andras arbete.



UserStyles.org

Om något går på nerverna är det fullt möjligt att du inte är ensam. UserStyles.org är en webbplats som låter användare dela stilar de har skapat. Ovan kan du se en stil ( Lägg till etiketter i verktygsfältets ikoner ) rekommenderas av MakeUseOf -kommentaren RandyN som svar på vår berättelse om Gmail -ikonknapparna. Med den här stilen kan du behålla ikonerna, men lägga till textetiketter - något Google inte låter dig göra.

UserStyles.org är bra, men det är inte perfekt. Några av mönstren försöker göra för mycket (ändra utseendet på en webbplats helt), och vissa är för gamla versioner av webbplatser och är nu trasiga. Om du försöker fixa något litet och inte hittar det på UserStyles.org, kanske är din bästa åtgärd att göra det på egen hand.



Skapa din egen enkla användarstil

För att skapa din egen användarstil måste du först veta vilket element på sidan du försöker ändra och sedan vilken ändring du vill göra. Så, för att komma igång, högerklicka på vad du vill ändra och välj Inspektera elementet . Du borde se något så här:

Firefox mörknar resten av sidan och ritar en mycket tydlig ram runt det element du har valt. Ovanför det elementet, texten som säger div#2d6.ii.gt.adP.adO , är ett gäng CSS -klasser, tillsammans med ett ID (delen som börjar med #). Detta är väljaren som påverkar stylingen för detta element. Längst ner på skärmen finns ett navigeringsfält som låter dig korsa DOM -trädet ', eller med enklare ord, gå upp och ner i hierarkin av element som leder till det element du har valt.



Spelets namn här är att välja det element du vill styla och göra valet inte så smalt att det inte kommer att påverka allt du vill påverka, inte heller så brett att det skulle förstöra andra saker.

Jag klickade ett element högre, div.gs , bara för att jag gillar namnet (verkar som något som inte kommer att förändras för tidigt, men det är en fullständig gissning från min sida). Det påverkar hela meddelandeområdet. När det område du vill styla är markerat klickar du på Stil -knappen i det nedre högra hörnet för att öppna Regler bröd:

Jag vet, det är läskigt först. Men det är här du ser de olika CSS-reglerna som påverkar det element du valde, och det är här du kan göra dina egna tillfälliga ändringar och se deras inverkan på sidan i realtid utan att ladda om den. Men vad ska du ändra? Klicka på Egenskaper knappen och avmarkera Endast användarstilar :

Här kan du se en fullständig lista över Allt CSS -regler. Du kan rulla nedåt i listan tills du hittar en regel som är vettig för vad du behöver (teckenstorlek i vårt fall), och till och med klicka på frågetecknet bredvid det för att öppna en förklaringssida. Så nu vet vi att vi vill justera egenskapen font-size för alla div-element som har en klass ' gs '(skrivet i stenografi som div.gs ).

Den enda frågan som återstår är vad vi vill att dess värde ska vara. För det går vi tillbaka till rutan Regler och börjar leka:

40 pixlar kan vara lite galna, men du förstår den allmänna idén. Lek med det här, och lägg gärna till andra egenskaper tills du får det utseende du var ute efter. Var noga med att inte stänga sidan, eftersom dina ändringar är det inte sparad var som helst.

Spara din nya stil

När du har fått den här delen av webbplatsen att se ut precis som du vill ha den, är det dags att spara den. Klicka på Snygg ikonen i tilläggsfältet och välj Skriv ny stil . Snygg skulle då vilja veta på vilka sidor den ska använda den nya stilen - i vårt fall, välj det andra alternativet, mail.google.com . Därefter ser du den här dialogrutan:

Jag har redan fyllt den. Självklart valde jag ett namn och några taggar för stilen. Men de verkliga grejerna händer inom koden: Linje 3 var redan där - Snygg satte den på plats så att den vet på vilka sidor stilen gäller. Men rad 5-7 är mina. Låt oss analysera dem:

Rad 5: div.gs { - den här delen bör du känna igen. Detta är elementet vi har bestämt oss för att styla. Öppningsstödet betyder att vi nu ska skriva några CSS -regler. Rad 6: typsnitt: 20px! viktigt; -det är den regel vi vill ändra (teckenstorlek), följt av dess nya definition (20 pixlar), och sedan av en! Viktig deklaration, vilket innebär att Firefox skulle följa denna regel även om ett element närmare texten försöker ställa in teckenstorleken till något annat. Linje 7:} - stänga stildefinitionen.

Klicka sedan på Förhandsgranska och förundras över ditt arbete:

Och slutligen, när du ser att det fungerar, klicka Spara.

Detta är inte en komplett guide

Jag är väl medveten om att för att hålla den här korta handledningen inom gränserna för ett enda inlägg har jag fått göra ett antal hopp och hopp. Om du var förvirrad på vägen, vänligen acceptera min ursäkt. CSS är svårt till en början, men det är inte så komplicerat när du väl har koll på det - och att anpassa webbplatser lokalt är fortfarande ett av de bästa sätten att lära sig.

Om du var förvirrad av något, fråga mig nedan så ska jag göra mitt bästa för att hjälpa.

Windows 7 vs Windows 10 prestanda 2018
Dela med sig Dela med sig Tweet E-post 5 tips för att ladda dina VirtualBox Linux -maskiner

Trött på den dåliga prestanda som erbjuds av virtuella maskiner? Här är vad du bör göra för att öka din VirtualBox -prestanda.

Läs Nästa Relaterade ämnen
  • Webbläsare
  • Webbutveckling
  • Verktyg för webbansvariga
  • Mozilla Firefox
  • Google Chrome
  • Webbdesign
Om författaren Erez Zukerman(288 artiklar publicerade) Mer från Erez Zukerman

Prenumerera på vårt nyhetsbrev

Gå med i vårt nyhetsbrev för tekniska tips, recensioner, gratis e -böcker och exklusiva erbjudanden!

Klicka här för att prenumerera