Z jakich narzędzi korzystacie przy stylach / edycji css?

Szukam w miarę intuicyjnych i praktycznych rozwiązań do szybkiego znajdywania danego stylu , klasy na stronie oraz jej edycji w kodzie.

Nie mam na myśli własnego szablonu stworzonego od podstaw tylko edycji istniejących. Wiem że istnieje w chromie oraz w firefoksie narzędzie dla programistów ale nie potrafię w nich zawsze znaleźć odpowiedniej klasy/szablonu który dokładnie mam edytować.

Czasami metodą prób i błędów szukam jakiegoś butona , szukam szukam i wyszukać nie mogę…

Znacie jakieś dedykowane wtyczki do przeglądarki lub coś takiego co może być pomocne (może coś z tym licznych edytorów online )?
a może wystarczy tak naprawdę jakiś solidny poradnik jak korzystać z wbudowanego narzędzia w przeglądarce? Niby jest tam wszystko ale jakoś nie zawsze się odnajduje co i jak …

Dzięki za pomoc !

Klikasz na button PPM*, wybierasz “Zbadaj element” i pokazuje Ci jego aktualne położenie w kodzie HTML i jego aktualne style CSS.

*prawy przycisk myszy

Dzięki ale tyle to wiem -) bez przesady

To nie jest takie proste, bo…

  • klasy regularnie są nadpisywane w wielu miejscach, więc zostaje sprawdenie przez narzędzia deweloperskie który wpis CSS ma ostateczne zdanie o wyglądzie elementu
  • CSS to często tylko element wynikowy SASS / LESS więc edycja pliku CSS spowoduje utratę zmian przy najbliższej rekompilacji ww. plików
  • CSS często jest minimalizowany (tak się tłumaczy minifying?) z wielu plików CSS, dla szybszego ładowania
  • CSS często pochodzi z zasobu zaciągniętego z CDN albo spoza serwera

Więc zostaje Ci badanie elementu i sprawdzanie który styl ostatecznie zwycięża

image

1lajk

Stylus / x-Style / Stylish?

1lajk

o dzięki sprawdzę przetestuje, a są może jakieś narzędzia - no nie wiem - offline ? - w stylu że ściągam cały styl ze strony i jakieś narzędzie to analizuje ?

dzięki.

chcesz powiedziec że moge nie mieć wpływu całkowicie na wygląd ? przecież jakiś szablon w html musi być do ewentualnej edycji a nie tylko css

Zawsze możesz zdefiniować własny arkusz styli który dołączysz na sam koniec a którym nadpiszesz to co potrzebujesz.

Przecież jak klikasz ctrl+s to zapisują Ci się css-y na dysku, chyba że coś się zmieniło :smiley:
A nawet jeżeli nie to narzędzia developerskie mają zakładkę Sources:

Wystarczy że znajdziesz sobie źródło. Polecam też zapoznać się z Overrides w Chrome :wink: Pozwala zachować edytowane style >>> https://developers.google.com/web/updates/2018/01/devtools <<<

no dobra nadpisać mogę a jak usunę niechciane java scripty ??

1lajk

Edytując szablon strony?


Niby można by blokować z poziomu uBlock Origin na własnej maszynie - natrętne reklamy / komunikaty anty-adblock przykładowo.

Ale trzeba by mieć jakąś wiedzę o JavaScript i skryptozakładkach w uBO: