Autor Wątek: Pasek nawigazyjny - CSS  (Przeczytany 1683 razy)

Offline TDM

  • Użytkownik

# Styczeń 06, 2017, 20:13:09
Cześć, mam pytanie co do paska nawigacyjnego a dokładniej wszelkie tutoriale które widuję pokazują jak zrobić pasek nawigacyjny z listą rozwijaną (drop-down) który nie ma stałej pozycji na oknie tzn przewija się wraz ze stroną, a mi żeby zachować funkcjonalność strony potrzeba taki który będzie zawsze widoczny pomimo przesuwania jej w dół. W związku z tym nie wiem czy tego nie powinienem zrobić dodając okienko pop-up ?

Offline Mr. Spam

  • Miłośnik przetworów mięsnych

Offline KeeL

  • Użytkownik

# Styczeń 06, 2017, 20:18:26
Nie wystarczy Ci po prostu
position: fixed dla menu?

Offline TDM

  • Użytkownik

# Styczeń 06, 2017, 21:00:12
Tak ale nie wiem czemu wtedy rozjeżdża mi się działanie drop-down, w sensie rozwijane menu nie jest "osobnym" div'em tylko zwiększa mi się wysokość paska...

Offline lethern

  • Użytkownik

# Styczeń 06, 2017, 21:16:58
na ile moje rozumienie mi podpowiada: rozwijane menu nie może być "wewnątrz" kontenera, bo wtedy kontener próbuje to w sobie zmieścić i się rozszerza. Nie mam na myśli, że trzeba to wyjąć z taga, to co się rozwija powinno już mieć position np. absolute, ja bym temu czemuś ustawiał pozycję wyliczając położenie statycznego diva (javascriptem), ale czy to jest najprostszy sposób to nie wiem

Offline Rakieta

  • Użytkownik

# Styczeń 06, 2017, 22:06:58
fixed
|- -> relative
|- - - -> absolute

Tak powinna wyglądać struktura kontenerów.

Dodam jeszcze, że javascript to zawsze powinna być ostateczność, dlatego, że skrypty można wyłączyć, a razem z nimi wyłączymy np. menu.
« Ostatnia zmiana: Styczeń 06, 2017, 22:12:43 wysłana przez Rakieta »

Offline matheavyk

  • Użytkownik

# Styczeń 08, 2017, 03:38:51
Są też inne powody za tym, żeby javascript był ostatecznością oraz za tym, że wręcz przeciwnie. Ale wszystko tak naprawdę zależy od tego, komu i czemu służy dana strona internetowa. Bo jak na przykład robisz stronę z newsami o grach, to raczej nie ma sensu przejmować się tymi, którzy z powodu wyłączonego javascriptu nic nie obejrzą, ponieważ jest ich bardzo mało. (Chociaż jakiś komunikat, że trzeba włączyć javascript byłby miłym gestem :) ).

Linki do statystyk:
"9.93% of people are getting JavaScript enhancements"
https://blog.yell.com/2016/04/just-many-web-users-disable-cookies-javascript/

http://stackoverflow.com/questions/9478737/browser-statistics-on-javascript-disabled

Offline Rakieta

  • Użytkownik

  • +1
# Styczeń 08, 2017, 13:18:19
Możemy o tym podyskutować.

Pewnie masz rację, jeśli badania zostały przeprowadzone rzetelnie (tzn. wzięto pod uwagę biedniejsze kraje świata typu Polska, a nie tylko przykładowo USA/UK, oraz wzięto pod uwagę wszystkie urządzenia, nie tylko Desktop). Masz również rację, że jeśli tworzymy stronę o grach, to nasi odbiorcy prawdopodobnie będą up to date jeśli chodzi o technologię.

Jednak jako developer stron internetowych tzw. starej szkoły — oto ja, Rakieta, wprowadzam ten termin do branży IT — i tak będę odradzał stosowanie JavaScript do elementów i funkcji, które mogą zostać wykonane w CSS.

1. Po pierwsze, dlatego, że JavaScript można wyłączyć — rozumiem przez to nie tylko "disable javascript"/"do not load js scripts", a również ograniczenia (mobile).

2. To dodatkowy kod. Np. żeby przyczepić element do ekranu, piszemy w CSS: position: fixed. Reszta kodu w przeglądarce. W JavaScript sami musimy napisać daną funkcjonalność, co prowadzi do kolejnych błędów, jak np. to, że według większości devów jQuery jest wymagane nawet dla takich banałów.

Zalet nie znam.

Dobrym przykładem będzie mój telefon. Jako web developer nie chcę go zmieniać, bo jestem świadom, że wielu ludzi nie lubi wydawać pieniędzy na nowe telefony i uznaje to za zbędny wydatek (z rozmów nawet pamiętam określenia typu „chore”). Więc wciąż używam swojego kilkuletniego smartfona Samsung. Poprzednio miałem któregoś Blackberry i choć miał lepszą przeglądarkę, sytuacja była ta sama.

Zdaję sobie sprawę, że gdzieś w badaniach pewnie ktoś napisze, ale 98% ludzi zmienia co roku telefon na nowszy. Moim zadaniem jest zbudowanie aplikacji dla wszystkich, a nie dla grupy wybrańców.

Co się dzieje/działo w tych telefonach: funkcje pracujące na żywo jak w grach, np. podążanie za scrollem nie działają wcale. Jeśli umieścimy element typu menu i damy mu "On scroll > element.position.y = window.position.y" ten element nadal będzie na samej górze strony i nie ruszy się stamtąd.

To znaczy, że jeśli odświeżymy stronę w połowie jej wysokości, to menu przyczepi się w połowie strony i podczas przewijania będzie nam zasłaniać content.

To pierwsza sprawa.

Druga sprawa jest krytyczna. Aplikacje wykonane w JS zamiast w PHP nie działają wcale na starszych urządzeniach. (!!!) To znaczy, że siedzimy w pracy i chcemy zaktualizować projekt o nowy pomysł, wchodzimy więc np. na Asana.com, bo czytaliśmy, że jest dostosowany do urządzeń mobilnych... I co się dzieje? Nic. Biała strona. Telefon się prędzej rozładuje, niż ją otworzy.




W pewnym momencie uważano, że JS może pomóc w tworzeniu witryn zgodnych z każdą przeglądarką, tzn. starymi Internet Explorer itp. Dopóki nie rozwinęły się urządzenia mobile. Teraz responsywność i szybkość witryny mają znaczenie nawet podczas jej pozycjonowania. Myślę, że naszym zadaniem jest zbudowanie witryny, która będzie działać na każdym urządzeniu, bez względu na jej tematykę. Tak samo kiedy budujemy grę na telefony i chcemy zarobić powinniśmy przetestować ją na starszych urządzeniach. Zadowoleni użytkownicy do nas wrócą, więc warto zadbać by było ich jak najwięcej.

Według mnie Javascript tylko do budowy animacji i ewentualnie zarządzania danymi bez odświeżania strony, przy czym w przypadku animacji powinniśmy je wyłączać dla urządzeń mobilnych i budować je mobile-first.

Offline lethern

  • Użytkownik

  • +1
# Styczeń 08, 2017, 18:09:27
Cytuj
Według mnie Javascript tylko do budowy animacji i ewentualnie zarządzania danymi bez odświeżania strony
nie chce stawać po żadnej ze stron, ale porównaj nowy gmail (JSowy) ze starym... i? oba działają, ale jaka różnica. Chciałem powiedzieć, że JS to nie tylko wodotryski i animacje, ale i funkcjonalność i ułatwienia, dokładnie to co człowiek uwielbia

Offline matheavyk

  • Użytkownik

  • +2
# Styczeń 09, 2017, 00:32:04
To nie tak, że mam rację albo ktoś inny ją ma. Uważam, że oba podejścia mają swoje wady i zalety. Oczywiście nie mówię tutaj o podejściu ludzi, którzy uważają, że bez jQuery nie da się zrobić strony internetowej.

Na szybko wypiszę wady i zalety, które dla mnie są istotne. Wiem, że nie zawrę wszystkich, więc nawet nie próbuję ;p.

Zalety "starej szkoły":
- działa na maksymalnie dużej liczbie urządzeń i przeglądarek,
- jest w pełni zgodna z najbardziej restrykcyjnym prawem w niektórych państwach,
- szeroko rozumiana semantyka się zgadza, więc jest większa szansa, że robimy dobrze i bez błędów.
Wady "starej szkoły":
- wolniejszy development,
- kombinowanie przy skomplikowanych układach może prowadzić do łamania semantyki, co może mieć różne konsekwencje.

Zalety robienia jak komu wygodnie (ale z rozsądkiem!):
- szybki development,
- przeniesienie uwagi z poprawności na efektowność i ogólnie front-end. Chodzi mi o to, że przestając się martwić o zgodność ze wszystkim zaczynamy częściej myśleć o wyglądzie końcowym, animacjach itp.,
Wady:
- nie działa na wszystkich urządzeniach,
- jak jest gdzieś restrykcyjne prawo, to czasami słabo podobno (ale sam nie znam takich przypadków).


Ja wywodzę się z, tzn. uczyłem się i doceniam, też "starą szkołę". Ale im jestem starszy tym bardziej się od niej oddalam na rzecz tego, co widzą moi odbiorcy. (Chyba warto, żebym zaznaczył, że nie pracuję w webie). Jasne, że strony np. banków powinny być pod każdym względem tip-top. Tak samo strony usług, które są bardzo popularne i intensywnie używane. Ale uważam, że na przykład strony poświęcone rozrywce będą lepiej zrobione, jeśli będą efektowne niż jeśli będą poprawnie działały na wszystkich urządzeniach. Zawsze zasoby na development jakoś się rozdziela i ja bym na stronie rozrywkowej nie marnował czasu na 0,07% (czy tam nawet 1%), tylko rozwijał coś, co będzie się jeszcze bardziej podobać reszcie.

Moje zdanie na ten temat chyba nie jest jakieś kontrowersyjne, więc pewnie nie ma o czym dyskutować ;p.

Cytuj
(...) i tak będę odradzał stosowanie JavaScript do elementów i funkcji, które mogą zostać wykonane w CSS

Tu pewnie można by się przyczepić i trochę kłócić, czy CSS nie rozwinął się tak, że wyszedł trochę poza swoje własne kompetencje. Mówię na przykład o animacjach przy użyciu transform. Czasami ludzie tak pokombinują, że potrafią zrobić rzeczy, które w sumie być może powinny zostać wykonane w javascript. To tylko takie moje ogólne gdybanie, ale za to fajnie będzie usłyszeć Rakieta Twoją opinię na ten temat. Uważasz, że da się przesadzić z CSS'em i że istnieją sytuacje, w których powinno się użyć javascript mimo, że na upartego CSS'em też się osiągnie podobny efekt?

Offline Xion

  • Moderator
    • xion.log

# Styczeń 09, 2017, 12:32:07
Z obslugą niektórych stylów i feature'ów w CSS jest obecnie prawdopodobnie gorzej niż z JS. Normą jest duplikowanie styli dwa czy trzy razy, głównie dlatego że Chrome czasami ignoruje je bez przedrostka -webkit-. Niekiedy da się to załatwić preprocesorami typu SASS, ale niektóre nowe składnie (jak np. keyframes) niekoniecznie dają się załatawić tak prosto.

No i jeszcze fakt że o ile wsparcie dla feature'ów w JS da się sprawdzić prostym ifem, to podobna rzecz w przypadku CSS jest możliwa tylko przy pomocy zewnętrznej logiki (np. detekcja User-Agent i serwowanie innych styli/dodatkowych klas w HTML).

Offline Rakieta

  • Użytkownik

  • +1
# Styczeń 09, 2017, 13:36:28
Dzięki panowie. Człowiek uczy się cały czas i zawsze warto przeczytać co sądzą inni na dany temat.

Tak @matheavyk, masz rację. CSS Transform to już mała przesada. Raz, że jest wspierane przez mniej urządzeń niż JS, dwa, że wydajność i możliwości są słabe. Wystarczy bardziej złożona animacja i porównanie GSAP vs CSS. Tym samym w JS ustalimy sobie kolejki animacji, tzw. timeline, a w CSS o ile wiem nie.

Zgadzam się również co do wygody. Aplikacja z Chromium i Node w rdzeniu to wielka ulga.
« Ostatnia zmiana: Styczeń 09, 2017, 13:39:14 wysłana przez Rakieta »

Offline TDM

  • Użytkownik

# Styczeń 09, 2017, 14:47:48
Czyli "bezpieczniej" jest mi to zrobić za pomocą JS ?

Offline Rakieta

  • Użytkownik

# Styczeń 09, 2017, 15:53:19
Nie. Do tego służy CSS. Najlepiej jak wstawisz kod na jakiś jsfiddle.

Offline matheavyk

  • Użytkownik

# Styczeń 10, 2017, 01:34:45
Tak, sorry za offtop TDM ;).

Rakieta, dzięki za GSAP, bo nie słyszałem o tym, a wygląda super!

Offline TDM

  • Użytkownik

# Styczeń 14, 2017, 16:13:00
https://jsfiddle.net/adriansikora344/xap4m6L1/ jak nie mam w oby fixed to mi nie działa...