Zrozumienie CSS dla stylów użytkownika w przeglądarce

13

Chcę wprowadzić konkretną zmianę w wyglądzie określonej witryny w mojej przeglądarce internetowej. Ta strona używa CSS, więc myślę, że powinienem napisać zastąpienie CSS użytkownika (popraw mnie, jeśli to źle).

Moje przeglądarki to Firefox (dla którego myślę, że powinienem coś napisać chrome/userContent.css) i Chrome ( User\ StyleSheets/Custom.css).

Konkretną zmianą, którą chcę wprowadzić, jest usunięcie wzorca tła (ciemnych kropek) na wszystkich stronach /unix// . Ale bardziej ogólnie, naucz mnie łowić ryby: jak dowiedzieć się, który parametr zmienić i jak zapisać tę zmianę w css użytkownika?

— Gilles „SO- przestań być zły”
źródło

15

Mogę rozmawiać tylko z Firefoxem, ponieważ jest to moja główna przeglądarka. Spróbuję zachować ogólne zasady, aby spełnić twoją prośbę „naucz mnie łowić ryby”. W tym celu dołączę dwa przykłady, twój i drugi, który zawiera więcej prawdziwych lekcji. Po pierwsze, otrzymamy narzędzia ułatwiające tworzenie CSS użytkownika.

Zaktualizuj do najnowszej wersji Firefox. Niektóre z najnowszych wersji zostały rozszerzone o narzędzia inspektora witryny, więc będziesz ich potrzebować.
Opcjonalnie: zainstaluj rozszerzenie Firebug, które zapewnia znacznie potężniejsze narzędzia do inspekcji witryny. (osobiście nie używam Firebug do tworzenia CSS użytkownika, ale zamieszczam tutaj wzmiankę ze względu na kompletność)
Zainstaluj rozszerzenie Stylowe . Jest to rozszerzenie zorientowane na CSS użytkownika, które znacznie upraszcza tworzenie CSS użytkownika.

A teraz, żeby coś napisać. Przed kontynuowaniem powinieneś mieć podstawową znajomość HTML i CSS. W3Schools ma przyzwoite samouczki do zapoznania się z podstawową strukturą i składnią HTML i CSS . Ze względu na tę odpowiedź podam wystarczającą ilość informacji, aby, mam nadzieję, pomóc nowicjuszowi na tyle, by osiągnąć przykład.

Przejdź do strony. (w twoim przypadku /unix// )
Kliknij prawym przyciskiem myszy element, którym chcesz manipulować. (w tym przypadku prawie wszędzie na stronie, ponieważ tło wpływa na całą stronę)
Wybierz z menu podręcznego opcję „Sprawdź element”. Korzysta ze zintegrowanych narzędzi inspekcji Firefoksa, nie będę tutaj omawiał Firebug, ale ma podobne panele i funkcje.
Spowoduje to otwarcie paneli u dołu i z boku okna przeglądarki Firefox. Na dole widzisz HTML. Po prawej stronie widać reguły CSS dla wybranego elementu strony (na który klikniesz prawym przyciskiem myszy). Na dole kliknij różne elementy, aby się poruszać. Strona jest uporządkowana w drzewie elementów i można zwinąć lub rozwinąć każdy węzeł w drzewie. Po kliknięciu elementów wybrany element zostanie podświetlony na samej stronie.
Ogólnie rzecz biorąc, w tym momencie będziesz chciał sprawdzić element, którym chcesz manipulować, wraz z jego elementami nadrzędnymi (elementami zawierającymi ten element w drzewie). Zidentyfikuj element, którym będziesz musiał manipulować. Na przykład, jeśli zadzierasz z odpowiedziami na tej stronie, zaczynasz od elementu <p> zawierającego tekst odpowiedzi, ale chcesz uwzględnić wszystkie elementy wokół tekstu, na przykład / strzałki głosowania w dół, informacje o plakacie, linki udostępniania / edycji / flagi itp. W ten sposób nawigujesz w górę o kilka poziomów do znacznika <div> o identyfikatorze „odpowiedź - ####” i klasie "odpowiedź", ponieważ jest to element zawierający wszystkie elementy ozdobne okna odpowiedzi. Kliknij na niego, a zobaczysz, że ta część strony jest podświetlona. (W tym przypadku tło strony będzie znajdować się u góry, w obrębie znacznika <body> . Przewiń w górę HTML i kliknij znacznik <body>.)
Następnie musisz zidentyfikować właściwości CSS tego elementu, którym chcesz manipulować. Spójrz na CSS po prawej stronie i znajdź właściwości, które chcesz zmienić. Osobiście jestem całkiem nowy w CSS, więc w tym momencie często google „css” + nazwa właściwości, aby dowiedzieć się więcej o tej właściwości i jej zachowaniu. Kontynuując mój przykład, w którym patrzymy na odpowiedź SE, powiedzmy, że chcemy zmienić marginesy wokół odpowiedzi. Plik all.css ma właściwość margin ustawioną na 0px, ale wyraźnie jest margines wokół tych elementów. Niektóre googling uczy mnie szukać właściwości dopełniania, ponieważ mogą one również wpływać na marginesy wokół przedmiotu. Rzeczywiście, istnieją dwie właściwości związane z wypełnieniem, które są ustawione na odpowiedzi, wypełnienie-dół i wypełnienie-góra. (w przypadku konkretnego problemu szukasz obrazu tła, więc we właściwościach CSS szukaj „tła”. U góry zobaczysz właściwość „tła” . Dotyczy to elementów treści tej strony. Google ” css background property ", aby dowiedzieć się, jak ta właściwość działa, pokazuje, że może ona zawierać kolor lub adres URL obrazu, wraz z różnymi modyfikatorami. Po przejściu do szczegółów, jak działa właściwość background-image , widzimy niektóre przydatne informacje, domyślna wartość „none” . Chcemy przywrócić obraz tła do wartości domyślnej, więc potrzebujemy tych informacji.)
Teraz używamy stylowego. Alternatywą bez Stylowego byłaby edycja plików opublikowanych w odpowiedzi. Stylowy pozwala nam łatwo zarządzać CSS użytkownika wielu witryn. Stylowy dodaje małą ikonę do okna przeglądarki Firefox, kliknij na nią, a następnie przejdź do „Napisz nowy styl” -> „For” (ta strona) .com. Nadaj stylowi nazwę i opcjonalnie tagi. Będziesz wtedy mógł aby odróżnić ten styl jako ten, który dotyczy Superuser.com lub Stackexchange.com itp. To okno daje nam szablon, który pozwala nam zmieniać CSS tylko dla tej domeny. Jeśli potrzebujesz zmienić CSS dla określonego adresu URL, możesz możesz to zrobić lub możesz też uzyskać pusty styl, jeśli chcesz napisać CSS, który dotyczy wszystkich witryn, po prostu wybierz odpowiedni wpis z menu Stylowe. W moim przykładzie modyfikującym odpowiedź „
```
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("superuser.com") {

}
```
Wszystko, co zostanie umieszczone w bloku @ -moz-document, będzie miało zastosowanie tylko do domeny w nawiasie. Zobacz pogrubione elementy powyżej. Aby zmienić wypełnienie dla odpowiedzi, zaktualizuj pole tekstowe tak, aby wyglądało tak:
```
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("superuser.com") {
    .answer {
        padding-bottom:0px;
        padding-top:0px;
    }
}
```
Aby rozbić to na ludzi, którzy nie znają CSS, najpierw wybieramy klasę (ergo „.” Idzie na początek. Gdybyśmy wybierali według ID, umieścilibyśmy tam „#”.) Odpowiedź (więc „odpowiedź”). Następnie otwieramy blok z nawiasami klamrowymi, aby wyświetlić właściwości wybranego elementu, który będziemy zmieniać. Najpierw zmieniamy padding-bottom i ustawiamy go na 0 pikseli . Następnie robimy to samo dla padding-top . Każda właściwość i wartość jest zakończona średnikiem. Następnie zamykamy blok kędzierzawym klamrą. (w twoim przykładzie unix zrobiłbyś to:
```
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("unix.stackexchange.com") {
    body {
        background:none;
    }
}
```
Tutaj pracujesz w domenie unix.stackexchange.com. Wybieramy element „body” (przy wyborze elementu HTML jest to również selektor CSS, nie ma potrzeby stosowania #s lub .s tutaj). Ustawiamy tło na brak.)
Zwracam uwagę na przyciski u dołu okna edycji stylowego stylu. „Podgląd” wprowadzi wprowadzone przez Ciebie zmiany, dzięki czemu będziesz mógł zobaczyć je w akcji. „Zapisz” zapisze zmiany. „Anuluj” jest dość oczywiste. W przypadku prawie każdej zmiany CSS użytkownika, którą wykonujesz, kliknij przycisk Podgląd, aby zobaczyć, czy zmiana działała tak, jak chcesz. W obu przykładach zobaczysz, że to nie działało. Jest to ważny powód, o którym teraz mówię.
CSS ma określoną hierarchię priorytetów w zakresie określania sposobu postępowania z CSS użytkownika vs. CSS autora vs. CSS przeglądarki. Zwykle mamy CSS dla strony napisanej przez autora strony, która będzie zawierać reguły dla wielu elementów na tej stronie. Jeśli reguła nie jest zdefiniowana przez autora, ale znajduje się w CSS użytkownika, przeglądarka będzie z niej korzystać. Jeśli żadna z nich nie ma zdefiniowanego CSS dla tego elementu, wówczas przeglądarka używa własnych domyślnych reguł CSS dla tego elementu. Istnieje tutaj hierarchia wagi, autor> użytkownik> przeglądarka. Jeśli coś jest zdefiniowane we wszystkich trzech, wtedy CSS o wyższej wadze wygra i zastosuje swój CSS. Istnieje sposób na uzyskanie CSS o niższej wadze, aby zastąpić CSS o wyższej wadze, a to poprzez wyznaczenie ich jako ważnych. Robisz to, włączając „! Ważne”
```
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("unix.stackexchange.com") {
    body {
        background:none !important;
    }
}
```
Teraz ponownie kliknij Podgląd, a zobaczysz, że Twój CSS użytkownika działa. Kliknij Zapisz i ciesz się.

Jeśli używasz Chrome, jego wbudowany inspektor jest już bardzo dobry. Istnieje również stylowe rozszerzenie . Modyfikacje CSS wprowadzasz nieco inaczej: wybierz „Zarządzaj zainstalowanymi stylami”, a następnie kliknij „Napisz nowy styl”, wprowadź witryny lub wzorce adresów URL, aby zastosować post poniżej pola kodu, i wprowadź tylko CSS specyficzny dla domeny w polu „ kod ”, np

body {
  background:none !important;
}

— Zapalony
źródło

2

Zainstaluj firebuga, aby zidentyfikować odpowiednią właściwość CSS, a następnie napisz skrypt fatmonkey, aby go zastąpić.

— Benjamin Bannier
źródło

2

Używanie klucza tłuszczowego do przypadkowej własności css jest jak używanie młotka do wkręcania śruby. Działa, ale nie jest elegancki, a po drodze istnieje większe prawdopodobieństwo, że coś zepsuje.

— Caleb

2

Robisz to, co byś zrobił, gdybyś umieszczał na stronie

foo.bar { background-pattern:none; }

następnie dodaj

!important

przed }. Oto kilka szczegółów na temat używania przez użytkowników bez użycia css, które wciąż wyjaśnia to dla twojego użytku.

— tobylan
źródło