CSS: Specyficzność selektorów

0:00W tej lekcji mówimy o specyfice czyli

0:03mechanizm którym rządzi się CSS który pozwala mu

0:07rozwiązywać konflikty między różnymi sektorami i aplikować te najsilniejsze.

0:13Jak już wspomnieliśmy w temacie wiadomości jeżeli jest kilka źródeł danych czy kilka

0:19tych samych właściwości CSS musi rozwiązać konflikt i aplikować tą

0:23najsilniejszą która powinna zostać faktycznie wręcz kierowana

0:27do ich specyfiki i tak naprawdę dotyczy każdej pojedynczej właściwości której

0:32możemy zapakować do naszej strony w dowolny sposób czy są to style linowe

0:36czy sektory czy sektory w zewnętrznym arkuszu stylów takich jak

0:44CSS. W naszym przypadku.

0:47No i cały ten kod który jest przez nas stworzony jest interpretowany w jednym

0:53głównym spisie i do tego się przydaje żeby aplikować odpowiednie

0:58wartości do tego czyli w tym przykładzie tutaj Books ma

1:02domyślnie kolor pomarańczowy wpisujemy poprzez.

1:07CSS Custom property is o tym też będziemy

1:09oczywiście mówili w kolejnych lekcjach tego kursu.

1:12Jeśli chcielibyśmy zmienić kolor temu elementów poprzez np.

1:17znacznik DF i ustawioną grę na czerwony

1:22to to się nie stanie ponieważ DF sektory

1:24tagów generalnie mają mniejsze specyfice niż sektory klasy.

1:29Zasada jest taka że.

1:31Pseudo elementy

1:33czy sektory bezpośrednio do tagów mają siłę 1 klasy i pseudo klasy mają siłę 10

1:42stylowe po IT czyli bezpośrednio po identyfikator.

1:46Gdybyśmy tutaj sobie nadali ideę

1:49Box i postulowali poprzez

1:52boks to ten kolor oczywiście tutaj wygra niezależnie już jak będzie ułożony w

1:58naszym kodzie źródłowym ustawiamy go na Rebeka.

2:02No i faktycznie nasz element jest w tym momencie fioletowy.

2:05Nie jest to ważne w którym momencie ten sektor zostanie zablokowany czy to jest w

2:10tym pliku czy byłoby to w pliku podstawowym czy na końcu na początku

2:15specyfikacji deklaruje który element wygrywa w tej walce i który element jest

2:20faktycznie wygenerowany która jego właściwości.

2:22Jest jeszcze oczywiście możliwość ustawienia stylu danego elementu poprzez.

2:29Style linowe czyli możemy

2:31na danym elemencie HTML napisać Still i napisać na przykład Ground

2:38powiedzmy na weekend będzie nabierać koloru naszego tekstu.

2:42Natomiast style i linowe wygrywają ze

2:45stylami po idee które swoją drogą style IT można aplikować do kilku elementów.

2:51O ile błędem w HTML u samym jest

2:54stworzenie kilku elementów o tym samym identyfikator że

2:57to CSS nie działa w ten sposób CSS owi możemy faktycznie stworzyć Box number.

3:05Dać mu te same style tak naprawdę które mieliśmy na naszym poprzednim elemencie

3:09i jak widzisz oba z tych elementów są fioletowe w tym momencie

3:15dzieje się tak dlatego ponieważ sektor tak naprawdę nie zwracał uwagi czy

3:20to jest pierwszy element czy drugi po prostu jeżeli dany element pasuje do tego

3:24sektora gdzie tutaj mamy błąd w naszym HTML u ponieważ mamy dwa identyczne

3:29identyfikatory to CSS tak czy siak to rozwiąże więc z punktu widzenia CSS.

3:34Identyfikator nie różni się tak bardzo od klasy poza właśnie specyficzną siecią.

3:40Możemy usunąć ten fragment kodu.

3:43I jest jeszcze sposób jak napisać style

3:47linowe czego oczywiście nie polecam robić chyba że nie macie kontrolę nad daną

3:51biblioteką i musicie coś w jednym momencie.

3:56Jeżeli tutaj ustawiamy sobie grę na

3:59powiedzmy tym razem czarne to powinno być troszkę widać że ciemniejsze od tła.

4:04No i chcielibyśmy to z innego miejsca w

4:07kodzie pisać style linowe mają specyficzne aż 1000.

4:11Nawet jeśli stworzymy sto klas bo możemy

4:15tak swoją drogą kombinować kilka tych samych lektorów na tym samym

4:21elemencie i w ten sposób bijemy specyficzne danego elektora czterokrotnie

4:27możemy w ten sposób zrobić to jest taki trochę hak natomiast jest to całkiem

4:31przydatne w niektórych przypadkach zwłaszcza jeżeli chcemy mieć tzw.

4:34płaską specyficzną kość o tym też będziemy

4:38za chwilę mówić gdy będziemy omawiać narzędzie giganta.

4:42Natomiast nawet jeżeli byśmy zrobili dwa

4:44tysiące takich sektorów klas no to nie przewidujemy specyficzną sieci stylu

4:49linowych czy specyficzne sieci sterowania po IT.

4:54Po prostu jeżeli coś ma z natury większą

4:57wartość specyfice it no to nie będziemy w stanie tego tak

5:00napisać jeżeli byśmy tutaj trzykrotność sektora drzew

5:05to tak czy siak nie przebije on tej klasy ponieważ klasa ma jakby inny poziom.

5:10Najlepiej to będzie zobrazować poprzez faktyczny specyficzny kalkulator.

5:14On się nazywa specyfice.

5:17Gigant mogę odświeżyć.

5:18I tu jest napisane specyfik i kropka kropka to jest obecny link.

5:22Ta strona czasami zmienia swoją domenę

5:24dlatego najlepiej po prostu szukać w wyszukiwarce specjalisty.

5:28Kilian no i wtedy ten kalkulator na pewno się pojawi.

5:32Jeżeli to porównamy to wpisując trzy razy boks tak jak pisałem tak jak już

5:37wspomniałem wcześniej mamy tutaj specyficzna 30.

5:41Natomiast jeśli stworzymy.

5:44Specyficzny gość poprzez idę na boks.

5:47No to mamy już specyficzną historię i teoretycznie jeżeli byśmy zrobili tutaj

5:52nawet 12 specyficzne dzieci to dalej jest ona niżej w warstwie niż idioci czyli tak

5:58czy siak idioci wygrywały by w tym przypadku aby.

6:02Zignorować tak naprawdę cały mechanizm specyfice City i wstawić

6:07dowolny styl jaki chcemy możemy użyć do tego klauzuli important.

6:12I wtedy nawet DF będzie w stanie.

6:15Nad pisać własności CSS owe nadane poprzez

6:19inną instalację czyli jeśli piszemy sobie na koniec Knight important dowolnej.

6:26Wartości CSS owej no to wtedy ten DF będzie czerwony.

6:32Ale co w przypadku jeżeli mielibyśmy kilka sektorów które miałyby klauzule important.

6:37Co ciekawe specyficzne wtedy wraca do gry i jeżeli będziemy mieli np.

6:42drugi Beef czyli dokładnie ten sam sektor o innym kolorze powiedzmy bólu to wtedy

6:47ten niebieski nam wygrywa ze względu na kaskady CSS a co jest dalej w kodzie jest

6:53silniejsze ma większą większy priorytet niż to co było wcześniej.

6:57Jeśli natomiast zmienimy tutaj.

6:59Kot ponownie pozbędziemy się tego important.

7:03No to oczywiście tutaj ten czerwony kolor wróci.

7:07Ustawiamy go sobie na tym małym boksie czyli sterowaniu poprzez identyfikator.

7:13To kolor będzie tym razem fioletowy pomimo

7:15tego że tutaj też jest important i dlaczego ten important jest silniejszy

7:19niż ten jest silniejszy ponieważ ma większe specyfice.

7:23Więc.

7:25Dopóki nie używamy klauzuli important to nasze specyfice IT jest całkiem

7:30powiedzmy kontrolowane ponieważ unikając rzeczy jak celowanie

7:35identyfikatora którego naprawdę nie powinniście robić ja to tylko pokazuje ze

7:39względu na zrozumienie mechanizmu specyficznej sieci czy kaskady.

7:43No to możemy się spodziewać że idioci będą

7:46miały większą wartość i priorytet nad innymi sektorami.

7:50Natomiast gdy wchodzi do gry important to mało że jesteśmy w stanie napisać tyle ile

7:55linowe które też mają aż 1000 tej specyficznej sieci.

7:59No to jeszcze dochodzi problem że jeżeli

8:02ktoś raz użyje tego important i chcemy go napisać no to możemy go napisać tylko

8:06poprzez użycie kolejnego important a o większej specyficzna.

8:11W związku z czym jeżeli połączymy wszystkie te kropki

8:15i dodamy do tego fakt że każdy może zarządzać naszym sukcesem czy poprzez

8:20CMS czyli systemy zarządzania treścią ktoś kto tworzy treści dla naszego bloga

8:25czy strony internetowej typu e-commerce jakiejś landing page

8:30te osoby mogą też tworzyć CSS no i one nie będą zrozumiałe jak CSS działa

8:35stawiały important ponieważ ich style się nie aplikacją a important można to zrobić

8:40no to wtedy tak naprawdę cała strona w tym deweloperzy którzy zajmują się

8:45utrzymywaniem tej strony będą musieli tego imigranta wziąć pod uwagę.

8:49Jeżeli to był important na jakimś genetycznym sektorze czyli np.

8:53drzewie każdy jeden element byłby na

8:56stronie czerwony chyba że nie byłby drzewem to jest jeden warunek

9:02bądź sam miałby innego important w sobie i miałby wyższe specyfice.

9:07Czyli tak naprawdę używanie important no to jest bomba atomowa.

9:13I to jest też ciekawe.

9:15Można znaleźć różne

9:17obrazki w internecie ja tutaj się postaram załączyć je w źródle które pokazują siłę

9:21specyfice IT i porównywanie ich do faktycznie broni.

9:25No i generalnie important jest to po

9:29prostu bomba honorowa która wygrywa ze wszystkim innym po prostu ma taką siłę

9:33rażenia i taki zasięg że ciężko jest z tym walczyć

9:40więc specyfiki kalkulator na specjalistki gigant jest jednym z

9:45dobrych narzędzi żeby po prostu zrozumieć jak działa.

9:48Ale jeśli już mamy projekt który

9:50przez jakiś czas funkcjonuje i być może jest zarządzany przez

9:54konstruktorów przez wielu deweloperów ma dużo Legacy i kodu jesteśmy w stanie

9:59stworzyć taki graf na podstawie całego naszego kodu źródłowego jeżeli mamy dostęp

10:03do jednego pliku CSS to świetna sytuacja po prostu możemy go wkroczyć na

10:08sesji kalkulator Graf i będziemy mieli wykres specyficzny gości

10:14i danych sektorów czyli w odniesieniu do tego gdzie element znajduje się w

10:20naszym kodzie źródłowym czyli im dalej tym dalej w tej osi czasu.

10:24Im wyżej tym ma większe po najechać myszką na dane

10:29wartość wykresu no to widzimy który sektor ma dla tej specyficznej sieci

10:33no i widzimy że w tym przypadku największe specyficzne 221 czyli na

10:39szczęście nikt nie korzystał z żadnego important stylów nowych

10:44natomiast jest to naprawdę skomplikowany sektor ponieważ po pierwsze zbieramy coś z

10:48bazy nie wybieramy elementu który jest obecnie usuwany itd itd.

10:55Są natomiast dwa sterowania pojedynku które też ciężko będzie napisać ale być

11:01może z dobrego powodu tak tylko dla testów możemy dodać jakiś genetyczny sektor.

11:10I ustawić mu Belgrad na important i zobaczymy czy to coś

11:15zmieniło chyba nie zmieniło tak naprawdę nam.

11:18Naszego.

11:20Tutaj stylu reklamy tego pliku.

11:25Kalkulator chyba się nie odświeża albo po prostu inaczej liczy.

11:28Natomiast trzeba pamiętać że

11:31gdy do gry wchodzi important to tak naprawdę musimy go important już zwalczyć.

11:36Dobrą praktyką jest tworzenie bardziej generycznych sektorów takich jak tutaj na

11:41przykład jest gwiazdka na samym początku naszych arkuszy stylów.

11:45I te bardziej skomplikowane przesuwać na sam koniec będziemy o tym też mówić gdy

11:49będziemy omawiać różne architektury CSS takie jak S czyli inwentarz internet go

11:54CSS którego pomysłodawcą jest Harry Roberts i generalnie specyfice IT.

12:00Czy Kaskada.

12:01Gość Czy dziedziczenie są mechanizmami które musimy zrozumieć

12:05zanim będziemy pracować z koncertami bardziej skomplikowanymi takimi jak

12:10abstrakcyjna architektura czy różne procesory kodu.

12:14Zachęcam cię do eksperymentowania z danymi

12:17narzędziami i być może wrzucenie tutaj swojego kodu aby sprawdzić jak wygląda

12:22twój gra w specyficznej sieci dla twojego projektu.

12:25Być może dzięki temu będziesz łatwiej w

12:28stanie zweryfikować elementy kodu które będą potrzebowały autoryzacji i koniec

12:33końców Twój projekt będzie bardziej zarządzany.

12:36To wszystko w kontekście podstawowych mechanizmów CSS a przejdźmy teraz do

12:40faktycznych wartości i właściwości które mają szeroko sięgające efekty uboczne.

12:46W kontekście tego jak nasz out jest

12:48prezentowany do zobaczenia w kolejnej reakcji.