Narzędzia Deweloperskie w Przeglądarce: Praca z CSS

0:00W tej lekcji zajmiemy się panelem styles który się znajduje również

0:04w zakładce elements jak już zapewne zauważyłeś kiedy

0:08zaznaczymy dowolny element to pojawiają nam się tutaj jego style i

0:12są one pokazane w takim widoku gdzie mamy również

0:16kaskadowość czyli widzimy jakby wszystkie miejsca w których

0:20jakieś style zostały dodane do tego elementu więc skupmy się może na tym przycisku

0:24mamy tutaj taki element li od razu widzimy że ma on dodane

0:28dwie klasy pierwsza jest to klasa okrasa hover czyli pseudoklasa druga

0:33jest to klasa active i że obie te klasy mają przypisane

0:37taki i taki border border color to co jest bardzo ważne tutaj

0:41to to że pokazuje nam również nazwę pliku z którego te style

0:45zostały tutaj zaaplikowane a po dwukropku także linijkę i jeżeli klikniemy to

0:49zostaniemy przeniesieni do panelu sources o którym jeszcze będziemy w tym kursie mówić i

0:54dokładnie do tej linijki w której takie klasy zostały dodane więc tutaj

0:58dokładnie jest to miejsce i dzięki temu gdybyśmy sobie przeszli do style.css

1:03i również zauważmy że jest to linka 905 więc vs code

1:07możemy wpisać to w ten sposób zauważ

1:13że jest dokładnie to samo miejsce jeżeli przyjrzymy się tutaj

1:17niżej to widzimy również kolejne reguły które zostały zaaplikowane i

1:22tak dalej kiedy będziemy zjeżdżać na sam dół to w końcu zobaczymy również coś

1:26takiego jak user agent stylesheet i to oznacza tylko tyle że każda przeglądarka

1:30internetowa ma taki swój domyślny styl swoje style dla wszystkich

1:34elementów czyli wiemy że na przykład li ma takie wyświetlanie i tak

1:38dalej czyli to nie jest z naszych styli to jest ze styli domyślnych przeglądarki które my możemy

1:42w swoim arkuszu nadpisywać no i jak widzisz tutaj również możemy zobaczyć

1:46pseudoelementy i tak dalej jeżeli

1:51klas jest bardzo dużo to możemy je sobie przefiltrować tutaj w ten sposób na

1:56przykład wpiszę sobie project i zauważ że zostaną podświetlone tylko te które mają

2:02takie słowo w swojej nazwie okej tutaj można w ogóle po selektorze

2:06sobie to przefiltrować na przykład w ten sposób zauważ że w zasadzie to

2:10nam wyszukuje nie tylko niekoniecznie selector ale jakby dopasowuje

2:14tekst który wpiszemy i do właściwości css i do klas więc gdzieś

2:19tutaj również moglibyśmy znaleźlibyśmy na przykład pod p coś targetowali i tak dalej tutaj

2:23akurat jest to element li więc ten przykład może nie jest trafiony ale

2:27jak widzisz jeżeli sobie tutaj odpowiednio przefiltrujesz to zobaczysz tylko te style które cię interesują

2:31kolejną ważną rzeczą jest tutaj coś takiego jak element kropka style

2:36i są to style liniowe ten element takich styli nie ma ale gdybyśmy

2:40tutaj napisali na przykład font-size 20 pikseli to

2:46zauważ że tutaj się to pojawia a także atrybut style został dodany czyli

2:50w drzewie dom widzimy tą żywą reprezentację to jest dokładnie tak samo jak byśmy w kodzie html

2:54wpisali style font-size 20 zauważ że każdy styl

2:58można włączać i wyłączać w taki oto sposób jeżeli go wyłączymy on

3:02jest tutaj zakomentowany jeżeli chcemy usunąć wystarczy kliknąć tutaj

3:06i po prostu usunąć całą taką regułę jak

3:10widzisz on nam znika i atrybut style jest teraz pusty oprócz

3:14styli które widzimy tutaj zauważ na przykład

3:19takich jak te skreślone mamy również coś takiego jak computed styles

3:23do których przyjdziemy za sekundę ale chciałbym ci powiedzieć dlaczego czasami style są przekreślone

3:27otóż oznacza to tylko tyle że dla body gdzieś przypisaliśmy line-height

3:311 ale następnie w innym miejscu przy pisaliśmy inny line-height

3:36i być może tutaj gdzieś znajdziemy możemy sobie przefiltrować line-height

3:42w ten sposób zobaczymy jak widzisz dokładnie dla tego elementu line-height

3:46został przypisany na 48 czyli jeżeli gdzieś widzisz przekreśloną regułę

3:50to oznacza że ona targetuje ten element i byłaby do niego przypisana

3:54gdyby nie to że została nadpisana gdzieś indziej czyli przez bardziej

3:59specyficzny selektor jeżeli natomiast nie chciałbyś widzieć wszystkich

4:03styli tak jak tutaj i przekreślonych i nie a tylko te style które są konkretnie zaaplikowane

4:08do danego elementu to możemy sobie przejść do zakładki computed

4:12zauważyłem że zakładka computed nie jest tutaj widoczna nie wiedziałem

4:16z jakiego powodu ale zobacz jeżeli sobie powiększymy tutaj to chrome devtools to

4:21zakładka computed pojawia się w tym miejscu i teraz co

4:25to oznacza co ta zakładka oznacza okej ona chyba tutaj się pojawiała wcześniej jak

4:29widzisz w tym miejscu ale nie była opisana jako computed jeżeli powiększymy pojawia się tutaj

4:33i computed są to style wyliczone dla konkretnego elementu na podstawie

4:38wszystkich styli które my mu przepisaliśmy ale także domyślnych styli przeglądarki

4:42więc teraz zamiast sobie zerkać tutaj jaki jest border-color i

4:46czy on może być nadpisany czy nie możemy przyjść do computed i wtedy dokładnie to zobaczymy

4:51również będziemy mogli wyszukać na przykład border i zauważ że wtedy tylko takie właściwości

4:55nam się pokażą natomiast computed to są style które na ten

4:59moment są zaaplikowane do danego elementu czyli nawet gdybyśmy nie przypisali mu

5:03żadnych styli przeglądarka tak czy siak przypisuje własne style to

5:07dobrze wiesz że jeżeli usuniemy arkusz styli to tak czy siak element H1 jest

5:11większy od elementu p jeśli chodzi o phone size i tak dalej to właśnie

5:16przez to domyślę style które możemy sobie tutaj podejrzeć i to już nie będziemy widzieć jakichś

5:20przekreśleń i tak dalej ale dokładnie te style które są na danym elemencie czyli

5:25jeżeli masz jakiś element na przykład nie jesteś pewien jaki jest jego font-size nie możesz

5:29go znaleźć tutaj bo nigdzie go tak naprawdę nie przypisałeś on może być dziedziczony

5:33z jakiegoś elementu rodzica wystarczy zaznaczyć taki element wejść

5:37w computed i wpisać font-size aby zobaczyć jaki ten font

5:41rzeczywiście jest przypisany do tego elementu i jeżeli natomiast będziesz

5:45koniecznie chciał zobaczyć również kaskadowość tutaj za każdym razem można sobie rozwinąć

5:49taką strzałeczkę i zobaczyć że w stylach jest to 15

5:54pikseli później gdzieś zdefiniowaliśmy jako 100% a

5:58później konkretnie dla tego elementu czyli jest to najbardziej specyficzny selector

6:02przypisaliśmy 16 pikseli czyli tą kaskadowość również tutaj jeżeli chcemy

6:06możemy zobaczyć okej wróćmy jednak do panelu style

6:10powiększymy go trochę i chciałem ci pokazać że tutaj możemy oczywiście wszystko

6:14modyfikować i dodawać co pozwala nam tak naprawdę prototypować czyli

6:18tworzyć naszą stronę na żywo w przeglądarce oczywiście pamiętaj że po odświeżeniu wszystkie

6:23te zmiany niestety znikną więc jeżeli chciałbym tutaj dodać jakąś inną

6:27właściwość na przykład mamy border na tym przycisku i chciałbym

6:31tutaj napisać że border-right zauważ świetne auto

6:35completion widzimy wszystko co wspiera ta przeglądarka napiszemy none to

6:39zauważ że ten przycisk od razu tutaj już nie ma prawego obramowania

6:44jeżeli chcielibyśmy zmieniać jednostki to możemy je tutaj wpisać lub na przykład strzałkami do

6:48góry i w dół te jednostki zmieniać co ciekawe jeżeli przytrzymam

6:52shift i dam strzałkę w górę to zmieniamy jednostki co 10 i podobnie będzie

6:56z pikselami jeżeli chodzi o font-size czy z jednostkami rem wszystkie jednostki

7:01z shiftem i strzałka w dół w górę zmieniamy o 10 natomiast jeżeli

7:05zrobimy to samo z altem to będziemy zmieniać o jedną dziesiątą i to się może

7:09przydać kiedy zmieniamy na przykład font-size innym ciekawym trikiem który chciałbym

7:13ci pokazać jest kopiowanie styli czyli jeżeli sobie już tutaj coś wyprototypowałeś

7:17stwierdziłeś że fajnie to wygląda i chciałbyś to wkleić w swoim edytorze to

7:21możesz na takim elemencie kliknąć prawym przyciskiem i wybrać copy

7:26i następnie copy styles i teraz jeżeli sobie przejdziemy do naszego

7:30CSS zauważ że jeżeli wkleję to są dokładnie te style które

7:34zostały skopiowane okej to możemy usunąć ale

7:39dobrze wiedzieć że style można w łatwy sposób skopiować oczywiście również można

7:43je skopiować tutaj a także tutaj można je wkleić jeżeli wkleję więcej styli jak

7:47widzisz również one się pojawiają odświeżmy może stronę żeby

7:51te zmiany wyrzucić i chciałem ci pokazać jeszcze jedną bardzo bardzo

7:55przydatna rzecz otóż mamy jakiś stan hover na ten element zauważ że po najechaniu

8:00coś nam się tutaj pojawia ale teraz jak to możemy zdiagnozować otóż

8:05klikniemy sobie na taki element będzie to cały ten element i

8:09jeżeli najedziemy to nam się to pojawia ale jeżeli zeskoczę myszką to nam to znika

8:14więc możemy taki element zaznaczyć kliknąć tutaj na hov i

8:18wybrać jego pseudoklasę którą chcemy przypisać kliknę tutaj

8:22i zauważ że teraz nie ważne czy jest to na tym elemencie czy nie on zachowuje się tak jakby

8:26miał pseudoklasę hover podobnie inne klasy jak widzisz można przypisywać

8:30focus przyda się na przykład przy polach input i teraz mogę sobie

8:34klikać na tą strzałeczkę na przykład bez problemu coś zaznaczyć i zobaczyć jak

8:38to się zachowuje właśnie kiedy jest taka klasa a tutaj z kolei

8:43ten punkt pokazuje nam że w tym miejscu coś zostało zmienione więc

8:47teraz to wszystko widzę i mogę dla tej klasy hover która się nam

8:51tutaj pojawiła to będzie na przykład

8:55ten element jak widzimy tutaj thumb hover invisible będziemy mogli poprostu pozmieniac

8:59jakieś style i zobaczyć jak to wygląda na koniec chciałbym krótko

9:04jeszcze wspomnieć o jednej rzeczy która może być dla ciebie przydatna otóż pokazałem ci do

9:08tej pory że tutaj w tym panelu możemy zobaczyć w jakim pliku i w

9:12jakiej linijce znajdują się style przypisane z tego elementu niemniej

9:16jednak często pracujemy przy stronach czy aplikacjach internetowych używając

9:20różnego rodzaju narzędzi takich jak na przykład webpack czy kompilując swój kod twój

9:24sass do css jeżeli jeszcze nie jesteś na tym etapie poznawania

9:29web developmentu nic nie szkodzi natomiast jeżeli jesteś

9:33już osobą bardziej zaawansowaną to pewnie wiesz o tym że właśnie tak

9:37możemy pracować i teraz co to oznacza oznacza to tylko tyle że tak

9:41naprawdę mamy wynikowy plik css i tutaj nam będzie pokazywało w

9:45której linijce w tym pliku coś się znajduje ale my tego pliku nie piszemy bezpośrednio

9:49dlatego że stworzymy swój projekt w innych plikach często w bardzo wielu plikach

9:54które są potem w odpowiedni sposób kompilowane i łączone i jeżeli

9:58w swoim workflow na przykład w webpacku skonfigurujemy coś co nazywa się source

10:02mapą to wtedy będziemy mogli tutaj zobaczyć gdzie w pliku źródłowym

10:06znajdują się te style i żeby to pokazać odpaliłem swobie projekt eduweba tutaj

10:10lokalnie i zauważ że tutaj dokładnie tak to działa otóż jeżeli

10:14na przykład zaznaczę sobie ten element home innovation to zobaczę

10:19że jego style znajdują się w pliku home scss w linijce

10:23396 jeżeli tutaj kliknę to zobaczę

10:27nie style css ale style sass właśnie w tym pliku i

10:31dzięki temu będę mógł zobaczyć jak to wygląda w kodzie źródłowym mimo tego

10:36że przeglądarka tak naprawdę renderuje całą stronę na podstawie skomplikowanego

10:40kodu i jest to linijka 396 dokładnie

10:44jeżeli sobie przejdę do home scss jak widzisz 396

10:49linijka to są dokładnie te style więc pamiętaj że w swoim workflow

10:53możesz skonfigurować coś takiego jak source mapa i wtedy chrome devtools doskonale

10:57wie jak sobie z tym poradzić i będzie ci mapował style które

11:02tak naprawdę renderuje do kodu źródłowego