Jak naprawić drobne niedogodności w sieci za pomocą stylowego [Firefox i Chrome]

Jak naprawić drobne niedogodności w sieci za pomocą stylowego [Firefox i Chrome]

Projektanci stron internetowych mają prawie niewykonalną pracę. Muszą wymyślić jeden projekt, który zadowoli wszystkich. Mówiąc o usłudze takiej jak Gmail, z której korzystają niezliczone miliony ludzi na całym świecie, można naprawdę porzucić „prawie” część – to po prostu niemożliwe. Nawet jeśli przeprojektowanie spodoba się większości ludzi, zawsze znajdą się użytkownicy, którym naprawdę nie spodoba się nowy wygląd.





Czasami tych użytkowników jest wystarczająco dużo, aby zmusić firmę do wycofania się, tak jak ostatnio zrobił to Google z przyciskami ikon Gmaila. Ale co, jeśli jest coś, co? naprawdę nienawidzę, a firma nie zmienia tego z powrotem? Czy utknąłeś z tym na zawsze? Dzięki stylom użytkownika możesz sam rozwiązać takie problemy.



Przedstawiamy stylowe

Stylowy jest darmowym dodatkiem dostępnym zarówno dla Firefox oraz Chrom i pozwala zrobić coś magicznego — zastosować własne style do elementów strony internetowej. Nawet jeśli nie jesteś programistą stron internetowych i nigdy w życiu nie napisałeś trochę CSS, jest to o wiele łatwiejsze niż się wydaje. Możesz użyć Stylish, aby całkowicie przekształcić strony internetowe (jak pokażę w następnej sekcji), ale co ważniejsze, możesz użyć Stylish, aby naprawić małe niedogodności w kilka minut.





Na przykład miałem problem z domyślnym rozmiarem czcionki w Gmailu. Interfejs był w porządku – nie chciałem powiększać (Ctrl +) w przeglądarce, ponieważ zwiększyłoby to rozmiar wszystkich elementów interfejsu i byłoby naprawdę brzydkie. Chciałem tylko, aby czcionka wiadomości była nieco większa.

W przypadku Stylu było to naprawdę proste, a pokażę Ci, jak to zrobić. Ale zanim przyjrzymy się tworzeniu własnych stylów użytkownika, porozmawiajmy o wykorzystaniu pracy innych osób.



UserStyles.org

Jeśli coś ci denerwuje, jest całkiem możliwe, że nie jesteś sam. UserStyles.org to strona internetowa, która pozwala użytkownikom dzielić się stworzonymi przez siebie stylami. Powyżej możesz zobaczyć styl ( Dodaj etykiety do ikon paska narzędzi ) rekomendowany przez komentatora MakeUseOf RandyN w odpowiedzi na naszą historię o przyciskach ikon Gmaila. Ten styl pozwala zachować ikony, ale dodawać etykiety tekstowe – coś, czego Google nie pozwoli ci zrobić.

UserStyles.org jest świetny, ale nie jest doskonały. Niektóre projekty próbują zrobić zbyt wiele (całkowicie zmienić wygląd strony), a niektóre są przeznaczone dla starych wersji stron internetowych i są teraz zepsute. Jeśli próbujesz naprawić coś małego i nie możesz tego znaleźć na UserStyles.org, być może najlepszym sposobem działania jest zrobienie tego samemu.



Tworzenie własnego prostego stylu użytkownika

Aby stworzyć własny styl użytkownika, najpierw musisz wiedzieć, jaki element strony chcesz zmienić, a następnie jaką zmianę chcesz wprowadzić. Aby rozpocząć, kliknij prawym przyciskiem myszy to, co chcesz zmienić, i wybierz Sprawdź element . Powinieneś zobaczyć coś takiego:

Firefox przyciemnia resztę strony i rysuje bardzo wyraźną ramkę wokół wybranego elementu. Nad tym elementem tekst, który mówi div#2d6.ii.gt.adPadO , to zestaw klas CSS, wraz z jednym identyfikatorem (część, która zaczyna się od #). To jest selektor, który wpływa na stylizację tego elementu. U dołu ekranu znajduje się pasek nawigacyjny, który pozwala „ przemierzać drzewo DOM ' lub prościej, poruszaj się w górę i w dół w hierarchii elementów prowadzących do wybranego elementu.



Nazwa gry polega na tym, aby wybrać element, który chcesz stylizować, i nie wybierać tak wąskiego, aby nie wpłynęło na wszystko, na co chcesz wpłynąć, ani tak szerokiego, aby zepsuć inne rzeczy.

kliknąłem jeden element wyżej, div.gs , tylko dlatego, że podoba mi się jego nazwa (wygląda na to, że nie zmieni się zbyt szybko, ale to z mojej strony kompletne zgadywanie). Wpływa na cały obszar wiadomości. Po wybraniu obszaru, który chcesz stylizować, kliknij Styl w prawym dolnym rogu, aby otworzyć Zasady chleb:

Wiem, na początku to przerażające. Ale w tym miejscu widzisz różne reguły CSS, które wpływają na wybrany element, i tutaj możesz wprowadzać własne tymczasowe modyfikacje i obserwować ich wpływ na stronę w czasie rzeczywistym, bez jej ponownego ładowania. Ale co powinieneś zmienić? Kliknij Nieruchomości przycisk i odznacz Tylko style użytkownika :

Tutaj możesz zobaczyć pełną listę wszystko Reguły CSS. Możesz przewijać listę, aż znajdziesz regułę, która ma sens dla tego, czego potrzebujesz (w naszym przypadku rozmiaru czcionki), a nawet kliknij znak zapytania obok niej, aby otworzyć stronę z wyjaśnieniem. Teraz wiemy, że chcemy poprawić właściwość font-size dla wszystkich elementów div, które mają klasę ' gs ' (napisane w skrócie jako div.gs ).

Pozostaje tylko pytanie, jaka jest jego wartość. W tym celu wracamy do okienka Reguły i zaczynamy się bawić:

40 pikseli może być trochę szalone, ale masz ogólny pomysł. Pobaw się tym i dodaj dowolne inne właściwości, aż uzyskasz pożądany wygląd. Pamiętaj, aby nie zamykać strony, ponieważ zmiany są nie zapisane w dowolnym miejscu.

Zapisywanie nowego stylu

Gdy już ta część witryny będzie wyglądać tak, jak chcesz, nadszedł czas, aby ją zapisać. Kliknij Elegancki ikonę na pasku dodatków i wybierz Napisz nowy styl . Stylowy chciałby wtedy wiedzieć, na jakich stronach powinien zastosować nowy styl – w naszym przypadku wybierz drugą opcję, mail.google.com . Następnie zobaczysz to okno dialogowe:

Już go wypełniłem. Oczywiście wybrałem nazwę i kilka tagów dla stylu. Ale prawdziwe rzeczy dzieją się w kodzie: Linia 3 już tam była – Styl umieścił go na miejscu, aby wiedział, na których stronach stosuje się styl. Ale wiersze 5-7 są moje. Przeanalizujmy je:

Linia 5: div.gs { – tę część powinieneś rozpoznać. To jest element, który postanowiliśmy wystylizować. Nawias otwierający oznacza, że ​​napiszemy teraz kilka reguł CSS.Wiersz 6: rozmiar czcionki: 20px !ważne; – to reguła, którą chcemy zmienić (rozmiar czcionki), następnie jej nowa definicja (20 pikseli), a następnie deklaracja !ważne, co oznacza, że ​​Firefox będzie przestrzegał tej zasady, nawet jeśli element bliższy tekstowi spróbuje ustawić rozmiar czcionki na coś innego.Linia 7: } – zamykanie definicji stylu.

Następnie kliknij Podgląd i podziwiaj swoją pracę:

I na koniec, gdy zobaczysz, że to działa, kliknij Zapisać.

To nie jest kompletny przewodnik

Doskonale zdaję sobie sprawę, że aby ten krótki samouczek mieścił się w granicach jednego postu, musiałem wykonać kilka skoków i skoków. Jeśli po drodze byłeś zdezorientowany, przyjmij moje przeprosiny. CSS jest początkowo trudny, ale nie jest tak skomplikowany, gdy już go opanujesz – a lokalne dostosowywanie stron internetowych pozostaje jednym z najlepszych sposobów na naukę.

Jeśli byłeś zdezorientowany, zapytaj mnie poniżej, a postaram się pomóc.

jak zwiększyć pamięć RAM na laptopie
Udział Udział Ćwierkać E-mail 5 wskazówek, jak doładować swoje maszyny VirtualBox Linux

Masz dość słabej wydajności oferowanej przez maszyny wirtualne? Oto, co powinieneś zrobić, aby zwiększyć wydajność VirtualBox.

Czytaj dalej Powiązane tematy
  • Przeglądarki
  • Tworzenie stron internetowych
  • Narzędzia dla webmasterów
  • Mozilla Firefox
  • Google Chrome
  • Projektowanie stron
O autorze Erez Zukerman(288 opublikowanych artykułów) Więcej od Ereza Zukermana

Zapisz się do naszego newslettera

Dołącz do naszego newslettera, aby otrzymywać porady techniczne, recenzje, bezpłatne e-booki i ekskluzywne oferty!

Kliknij tutaj, aby zasubskrybować