CSS: Stylowanie notcha oraz ekranów składanych

0:00Część tej lekcji opowiem o problemach

0:03które wynikają po prostu z rozwoju technologii a które my jako deweloperzy

0:08będziemy doświadczać już ładnych parę lat temu mieliśmy problemy natury takiej że

0:13jest coraz więcej rozdzielczości coraz więcej urządzeń mobilnych.

0:18Rozwiązaniem tego problemu był oczywiście Response design.

0:21Potem do tego doszły sytuacje gdzie urządzenia z dużymi ekranami np.

0:26tablety miały wsparcie ekranów dotykowych

0:29czy laptopy z ekranami dotykowym i musieliśmy tworzyć

0:33dalej musimy oczywiście które działają zarówno dla dotyku jak i

0:39klawiatury czy myszki na różnych rozdzielczości itd.

0:42Niestety sprawa się komplikuje niestety albo straty jeżeli faktycznie lubimy robić

0:47to co robimy i lubimy nowe wyzwania w związku na przykład z popularnymi

0:52ostatnimi laty smartfonami z tak zwanym nosem czyli z takim cięciem w ekranie

0:57które zawiera w sobie różnego rodzaju kamery.

1:00Tutaj jest lista urządzeń z takim nowszym jeszcze ta lista sprzed

1:04roku więc podejrzewam że tych telefonów jest w tym momencie o wiele więcej.

1:08W związku z czym sterowanie podnoszona

1:10jest czymś co oczywiście powinniśmy już robić jeżeli zależy nam na bardzo dobrym

1:15user experience i generalnie nie jest to takie łatwe.

1:19Mamy do tego właściwość

1:21dzięki której możemy pobierać jakby zmienne środowiskowe.

1:27Które urządzenie już nam powinno

1:29teoretycznie wystawić jesteśmy w stanie dodawać jakieś np.

1:32.

1:33Parkingi danego elementu bazują właśnie na wartościach tych zmiennych.

1:39Ja tutaj dziękuję.

1:40Całkiem sporo linków w kontekście tego jak sterować.

1:43Tego robić nie będę bo po prostu

1:45może to być problematyczne zwłaszcza że nie da się wyeliminować łatwo

1:50np.

1:50w narzędziach deweloperskich ale są tutaj np.

1:53takie przypadki że musimy dodać dodatkowy

1:56parking w takim miejscu bo Hello World jest przyjęte dosyć dziwnie.

2:00No i jesteśmy w stanie za pomocą składni

2:03dodać tutaj taki żeby wyglądało to faktycznie OK.

2:06I te nasze uszy wyglądały dobrze.

2:08Na domiar tego

2:10jest naszym największym problemem jest już całkiem sporo poradników jak sobie z tym

2:14radzić i jak wyświetlać nasze elementy w sposób aby

2:19dobrze wyświetlają się na danych urządzeniach.

2:21No ale faktycznie pojawienie się Nasha

2:25zainspirowało developerów i trenerów do tworzenia różnych

2:30grafik jak na przykład można tworzyć design pod takiego gracza.

2:33I tutaj widzimy tekst który bardzo ładnie wpływa na czapy.

2:38Oczywiście prawdziwym rozwiązaniem tego

2:40problemu byłoby po prostu stworzenie tutaj jakiejś sekwencji no i zignorowanie tego

2:44jak w tej części ekranu faktycznie tutaj nie było.

2:48No i na domiar złego faktycznie tych problemów z różnymi nowymi typami urządzeń

2:54jest więcej ponieważ niedawno pojawiły się na rynku urządzenia ze składanym ekranami.

3:00W związku z czym

3:02jest oficjalna strona na CSS.

3:05Jak można stylowo mieć strony pod urządzenia ze składanym ekranami.

3:10No bo jeżeli faktycznie ekran będzie

3:13złożony w połowie i załóżmy nasza siatka gnida tutaj miałaby.

3:19Wyświetlać się w ten sposób.

3:23A element będzie.

3:28Po jego środku czyli tutaj mamy nasz.

3:32Podział tego ekranu a nasz GRID będzie przydzielony w ten sposób to nie możemy

3:36dopuścić do tego aby element znajdował się na dwóch ekranach naraz.

3:39W związku z czym tutaj jest oficjalna

3:41specyfikacja jak można podejść do rozwiązania tego problemu.

3:45Mało tego.

3:46Microsoft Edge ten bazujący już na kroju ma nawet specjalne narzędzia deweloperskie

3:53do tego aby sobie dywagować jak celowanie Low ekranów składanych może wyglądać.

4:00Są też różne chwile które pozwolą nam

4:04malować takie zachowanie w przeglądarkach które posiadają już składane ekrany a

4:09jeszcze nie wspierają takich właściwości CSS.

4:11No bo generalnie urządzenie to jedno a software czyli np.

4:15przeglądarka to drugie.

4:16W związku z czym File na takie rozwiązanie też nam będą potrzebne.

4:20To co chciałbym tutaj powiedzieć że.

4:22Front end rozwija się już od

4:26można powiedzieć przynajmniej 20 lat kiedy faktycznie.

4:29Strony internetowe stały się czymś co każdy biznes chciał mieć.

4:35No i będą się dalej rozwijać w zależności

4:37od tego jak rynek urządzeń mobilnych czy innych urządzeń które będą w stanie

4:41wyświetlać strony internetowe będzie się zmieniał.

4:44W związku z czym

4:45zostanie frontem deweloperem który będzie w stanie obsłużyć wszystkie te przypadki.

4:50Robi się coraz coraz trudniejsze i to będzie się po prostu coraz bardziej.

4:55Skal powiało w górę to znaczy będzie coraz ciężej.

4:59Oczywiście będą Framework i będą

5:01biblioteki które będą robiły za nas ale jeśli nie będziemy znali tych

5:04podstawowych fundamentów jak te framework działają no to nie będziemy w stanie

5:08zrozumieć jak tego tak naprawdę używać czyli jak tworzyć takie Framework.

5:12Sami gdy nadejdzie czas że pojawi się

5:15znowu nowe urządzenie którego nie myśleliśmy nie widzieliśmy na horyzoncie i

5:20będziemy musieli my na froncie jakoś to obsłużyć.

5:25Ja bym to traktował jako nowe wyzwania. Mi się bardzo podoba.

5:29Oczywiście jeżeli mamy tutaj presję

5:31biznesu i dołożenie jakiejś delfinów może to być dosyć uciążliwe i może spędzać sen

5:37z powiek ale wydaje mi się że to jest temat na osobny kurs gdzie

5:42można faktycznie mówić jak rozmawiać z biznesem w kontekście tworzenia stron

5:46internetowych bo jest to oczywiście osiągalne.