CSS: Różne tryby wyświetlania

0:00Cześć tej lekcji będziemy mówili o różnych trybach wyświetlania.

0:04Brzmi to może tak dosyć źle natomiast.

0:07Będziemy przede wszystkim mówili o

0:09właściwości Display i jej wartościach oraz jakie konsekwencje za sobą niesie Display.

0:15Jest to taka bardzo podstawowa wartość CSS

0:18którą dzięki niej możemy definiować jak dany element ma się rozwiać.

0:23Oczywiście do tego też dochodzą inne właściwości natomiast jest tutaj dużo

0:28takich niewiadomych o których często nie myśli się bo po prostu są dosyć intuicyjne

0:33w przeciwieństwie do mechanizmów takich jak

0:35kaskada.

0:36Domyślnie każdy element HTML ma swój własny Display Mode tzn.

0:41D.W. będą domyślnie stylowe jako elementy blokować.

0:45Czyli tak naprawdę nie jawnie tutaj w tym boksie.

0:48Czy tak naprawdę na każdym piwie jest ustawione Display blok.

0:54Każdy z tych trybów ma swoje

0:57defekty to znaczy na przykład element blokowany zawsze domyślnie rozszerza się

1:01na całą szerokość jeżeli mamy Flow dokumentu.

1:05Taki klasyczny bez żadnych dodatkowych stylów.

1:08Natomiast jeżeli byśmy zmienili tutaj

1:11klasę czy tak tego elementu nas pana są stylowe jako in line tzn.

1:19Jeśli byśmy to napisali sobie jako pana klasa boks dalej zostaje

1:24to widzimy że akurat tutaj ten margines wynika z czegoś innego tutaj mamy po

1:29prostu w Polsce margines ustawiony na klasę boks.

1:34Natomiast problemem jest to że elementy blokował np.

1:38nie mogą mieć swojego marginesu pieniędzy w poziomie po prostu nie mamy

1:43kontroli nad takimi rzeczami nie mamy też kontroli nad ustawianiem ich konkretnej

1:48szerokości tak jakbyśmy się tego spodziewali ponieważ jeśli chcemy to

1:52zrobić to musimy tak naprawdę połączyć dwa różne tryby wyświetlania ze sobą.

1:57Przykładowo jeżeli na body

2:00body ustawiamy tekst line

2:02czyli wyrównywanie tekstu ustawiamy na rajd to widzimy że treść

2:08naszej jedynki została przeciągnięcia w prawo tak samo jak

2:12treść naszego elementu boks który ma teraz znacznik z PAN jako element HTML owy.

2:19No i teraz różnica między tymi dwoma

2:22punktami jest taka że jeżeli ustawiamy sobie może jakiś kolor.

2:29Na tego naszego boksera.

2:32Postawimy mu hołd.

2:35Kolor tutaj używamy Custom Properties.

2:38O tym za chwilę będziemy rozmawiać ustawił Green.

2:42Piszemy

2:44tutaj chyba nie są ustawione.

2:46No to wróćmy po prostu do Ukrainy.

2:48Ręcznie.

2:49No to widzimy że ten element jest tak szeroki jak jego treść.

2:53Natomiast jeśli ustalimy mielibyśmy to na jedynce naszej.

2:59No to widzimy że ten element zajął całą dostępną przestrzeń czyli elementy linowe

3:04w ogóle możemy przesuwać całe poprzez trasy formowanie ich.

3:09Właściwościami takimi jak teksty linę.

3:11Jeżeli ustalimy to na left to element oczywiście będzie wyrównany do lewej.

3:16Treść naszego boksera w tym przypadku naszej jedynki też będzie

3:21przesłuchana ale sam element zajmuje więcej miejsca.

3:25Pomimo tego że różni je tylko tak one zupełnie inaczej się zachowują

3:30ponieważ ten element jest tak szeroki jak cała jego treść.

3:32Natomiast elementy rockowe są

3:35zawsze szerokie na sto procent chyba że faktycznie jawnie im damy inną szerokość

3:40poprzez właściwość no i generalnie różne właściwości.

3:45CSS są przypisywane do różnych znaczników HTML np.

3:49ma domyślnie Display tabel czyli jeśli zmieniliśmy tutaj na tej belce

3:56naszej Display Flex to generalnie nasza tabelka zaczyna wyglądać dziwnie.

4:02Przede wszystkim tego że nie powinniśmy zmieniać domyślną Display dla tabeli.

4:06Wiąże się to z problemami dostępności

4:09ponieważ CSS nie wpływa jedynie na lewo out ale też na to jak dane elementy są

4:16interpretowane tak naprawdę przez samą przeglądarkę.

4:19W związku z czym zmieniając wartość Display tabelki np.

4:23nagroda to częsty

4:25przypadek gdzie niedoświadczeni deweloperzy z czasem

4:28próbują ułatwić sobie życie sterują z tabelki na grilla.

4:31No bo GRID też jest jakby oparty na kolumnach wierszach.

4:36To tak jak tabelki to być może możemy użyć GRID a żeby lepiej sobie oscylować dany

4:43element gdzie dalej zachowujemy teoretycznie dość tabelki.

4:47No niestety tak się nie dzieje.

4:48Zmieniając Display tabelę na Display GRID zmienia się ich schematyczne znaczenie.

4:53W związku z czym nie będą one działały z czynnikami ekranowych.

4:56Być może wyszukiwarki internetowe dalej będą lepiej pozycjonowanie

5:01nasze strony nawet jeżeli tabelka już nie jest tabel tylko siatką.

5:06Natomiast jest to duży błąd i tak naprawdę

5:08w przypadku tabele przynajmniej nie powinniśmy zmieniać nigdy Display a na nic

5:13innego niż tabel i tak samo nie powinniśmy ustawiać Display

5:17tabel na elementy które tabel kamienie są ponieważ ustawiając Display tabel.

5:22Zmieni się to jak elementy będą czytane przez czytniki ekranowych czyli narzędzia

5:28które poprzez głos opisują to co znajduje się na stronie tabelki.

5:32Same w sobie niosą też kilka funkcjonalności które przeglądarka już nam

5:36daje domyślnie więc nie możemy zrobić tabelki na drzewach.

5:43Ustawić sobie tutaj klasę tabel.

5:46Tutaj byśmy musieli sobie ustawić klasę.

5:51No i oczywiście kolejny.

5:56Kolumn.

5:58Jesteśmy w stanie fizycznie ustawić

6:00każdemu elementom dowolną z tych wartości tabel jest prawidłową wartością dla.

6:06Właściwości Display tablet są tak samo.

6:08Tak samo natomiast np.

6:10z poziomu nawigacji klawiaturą.

6:12Te elementy nie są sobie równoważne w związku z czym w kontekście tabeli jak i

6:18trybu wyświetlania polecam zostawiać je tak jak są nie ruszać ich instalować.

6:23Zgodnie z tym jak tabelki należy sterować

6:26natomiast inne elementy takie jak pan czy Vivy które są transparentne czyli

6:31oczywiście możemy im zmieniać display na GRID Flex i zyskiwać tak naprawdę całą

6:37gamę właściwości które działają z tymi trybami wyświetlania.

6:41Czyli jeśli ustawiamy sobie na naszym boksie display na Flex no to oczywiście

6:48wszystkie elementy wewnątrz niego będą ustawiały się za pomocą Xboksa.

6:54Niezależnie od tego jaki mają znacznik

6:56czyli jeśli Tutaj ustawiamy sobie kolejnego diwa bardzo dużo objawów.

7:00Polecam tutaj odwiedzić kurs o dostępności aby wiedzieć dlaczego.

7:04Generalnie należy używać sympatycznych tagów i tutaj dodamy kolejny element.

7:11Tu.

7:13Piszemy to te elementy będą wyświetlane na.

7:16Na flecie i domyślnie Flex ustawia tam różne właściwości typu content Flex start

7:23o tym też będziemy oczywiście mówić w kolejnych lekcjach natomiast teraz dzięki

7:27temu że mamy tutaj Display Flex ustawiony możemy zrobić kontent powiedzmy na.

7:34Prałat.

7:36I zupełnie inaczej nasilające się w tym momencie zachowuje natomiast mamy tę

7:40funkcjonalność tylko dlatego że zmieniliśmy Display danej wartości

7:45w związku z czym Display potrafi zmienić nasz cały lay out.

7:50Nawet jeżeli zmienimy go na jednym elemencie CSS co jest bardzo przydatne

7:55zwłaszcza jeśli tworzymy rozwiązania z Response Web Design na względzie ponieważ

8:01jesteśmy w stanie zmienić tylko jedną właściwość CSS ową często np.

8:05zmienić Display GRID na Display Flex albo po prostu na Display Block I cały nasz DJ

8:11na danej rozdzielczości będzie robił inne kompozycje.

8:15No i będzie po prostu inaczej wyglądał.

8:17Najważniejsze co chciałbym żebyście

8:19wynieśli z tej lekcji to fakt że nie należy czasami zmieniać

8:23Display modów zwłaszcza w przypadku tabeli ponieważ wiąże się to z innymi efektami

8:29ubocznymi takimi jak inne przedstawianie przez script litery

8:33czy inne zachowanie się w kontekście klawiaturą.

8:37No i to że tych trybów wyświetlania jest

8:39naprawdę dużo możemy tworzyć bloki które mają cechy zarówno blok

8:43elementów blok nowych czyli możemy manipulować ich szerokością

8:47wysokością marginesem jak i elementami elementów linowych czyli

8:53że treść zajmuje tak dużo miejsca w szerokości jak dużo jest faktycznie

9:00tekstu wewnątrz niego bądź innych elementów.

9:02Możemy je wtedy też pozycjonowanie przy

9:05pomocy tekst Kleina możemy jeszcze szybko zaprezentować na podstawie box czyli Box

9:10ustawiamy na szybko display na ile blok i przez to że tak zrobiliśmy.

9:18Możemy zarówno pozycjonowanie ten element

9:20za pomocą tekstu Kleina ustawią tutaj tekst na rajd

9:25i w tym momencie ten element cały jako całość został wciągnięty do prawej.

9:30Natomiast możemy ustawiać na nim też hejt czy margines czyli ustawiamy na 10.

9:39Hejt na pięć frejmów.

9:42Grand.

9:44Rebeka.

9:47Tutaj pozbędziemy się literówki.

9:50Piszemy.

9:52No i faktycznie te elementy tutaj się

9:55wyrównały do prawej tekstem no bo na body kierujemy to do prawej.

9:59Ale jeśli byśmy zmienili to na in line no to już to w tym momencie nie zadziała tak

10:04jakbyśmy się tego spodziewali ponieważ nie będzie zaplanowanej.

10:07Wysokości i szerokości.

10:10W tym danym przypadku będzie ona po prostu naturalnie

10:14ustawiona na podstawie tego co dany element ma w sobie bezpośrednio.

10:18I tak naprawdę są bardzo różne wariacje.

10:21Mamy też inna Flex in line GRID bodajże jest też inna Ingrid i tak naprawdę

10:28nie koniecznie powinniście używać innych bloków no bo można to zrobić lepiej np.

10:33za pomocą Xboxa ale warto wiedzieć jakie są dostępne tryby i jakie mają defekty.

10:39To nie jest coś czego musicie się uczyć na pamięć to jest coś co przyjdzie.

10:44Wraz z doświadczeniem po prostu im więcej stron internetowych tworzyć będziecie.