[css] Responsywna - oddzielne style, Pytanie z czystej ciekawości Opcje

[maniek74]

Witam

Przeważnie na stronach responsywnych jest stosowane rozwiązanie jednego arkusza stylów pod stronę, ale przecież jest rozwiązanie owiele bardziej czytelne tj. pod każdy układ zastosować oddzielne style:

[HTML] pobierz, plaintext 
<link rel="stylesheet" type="text/css" media="only screen and (min-width: 100px) and (max-width: 480px)" href="/css/stylePanel_480.css">
<link rel="stylesheet" type="text/css" media="only screen and (min-width: 481px) and (max-width: 800px)" href="/css/stylePanel_800.css">
<link rel="stylesheet" type="text/css" media="only screen and (min-width: 801px) and (max-width: 1024px)" href="/css/stylePanel_1024.css">
<link rel="stylesheet" type="text/css" media="only screen and (min-width: 1025px)" href="/css/stylePanel.css">
 
[HTML] pobierz, plaintext 

Taki układ jest prawie nie stosowany, sprawdziłem to na kilkudziesięciu stronach z poradami na temat reponsywności i każdy stosuje:

[HTML] pobierz, plaintext 
 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
 
   ....................
 
}
 
 
@media only screen and (min-width : 321px) {
   ....................
 
}
 
itd
[HTML] pobierz, plaintext 

Dlaczego?

Pozdrawiam

Ten post edytował maniek74 4.01.2015, 07:07:37

[fate]

zapytania do servera
4:1
to na czym najłatwiej poprawic szybkosc strony

[maniek74]

a jaka różnica jest jesli załaduje 4 pliki po 50kb lub 1 po 200kb, pozatym sam css nie powoduje chyba zamulenia strony, sam css wydaje mi się że to będzie różnica w setnych sekundy, niezauważalna dla użytkownika.

Tak mi się wydaje być może się mylę.

Pozdrawiam

[sf]

a jaka różnica jest jesli załaduje 4 pliki po 50kb lub 1 po 200kb, pozatym sam css nie powoduje chyba zamulenia strony, sam css wydaje mi się że to będzie różnica w setnych sekundy, niezauważalna dla użytkownika.

Im mniej plików się ładuje tym strona ładuje się szybciej. Dlatego wielu programistów wszystkie pliki js łączy w jeden, podobnie css, w przypadku obrazków często się stosuje sprity. Google m.in. w pozycjonowaniu sprawdza szybkość ładowania strony, jest to mały ułamek całego wyliczania pozycji, ale jest. Jak potrzebujesz wyliczenia o ile szybciej taka strona się ładuje to na pewno jest trochę materiałów o tym w sieci, wystarczy poszukać. Głównie chodzi o to, że każde żądanie do serwera jest osobne, czyli zajmujesz zasoby apache czy innego serwera http.

https://developers.google.com/speed/pagespeed/insights/

Ten post edytował sf 4.01.2015, 09:50:55

[korek_a]

Nie wiem jakie ty poradniku czytasz ale umieszczamy jedne z minifikowany plik css.

Po za tym w XXI wieku korzystam z prekobilatorów które pozwalają nam na odpowiednie układanie "logiki" (LOL) w plikach css np.:http://sass-lang.com/

[fate]

1.
sciąganie danych przy obecnych łączach trwa krócej niż łączenie się z serwerem (ping) lub ściślej coraz krócej
2.
tak to milisekundy ale w % to łatwy wzrost wydajności łopatologicznie o 300% w tym sektorze, zminimializuj sobie napisany kod o 300% to będzie znacznie trudniejsze lub niemozliwe,w tym rzecz

nie zgadzam się tez z korek_b czasem moze lepiej samemu przemyslec temat niz wierzyć ślepo w kazdy znaleziony poradnik w necie ktory mogl napisac gimnalista albo seo bot.

[maniek74]

1. Nie korzystam z żadnych gotowców, zawsze piszę cołość sam, wyjątkiem jQuery. Może nie jest to za piękny kod ale mam pewność że nie ma żadnych śmieci.
2. Jest to pytanie retoryczne dlaczego tak jest a nie napisałem że tak piszę,
3. Biorąc pod uwagę łatwiejszą edycje css przy pisaniu strony jest to dobre rozwiązanie przy tworzeniu, bo nie szuka się w tysiącach lini, często mi się zdarza że chce coś poprawić w bloku na komórki a modyfikuje w bloku na tablety,
4. Czytam wiele poradników i stron na dany temat, nigdy jeden i wyciągam średnią rozwiązań. Czasami dobrze jest dać cos na forum pod dyskusję, tak jak to teraz jest, poczytać jak ludzie robią i wtedy pisać swój kod.

Pozdrawiam

[fate]

manku ostatnie zdanie jest do korka chyba nie ogarnąłeś że się tak tłumaczysz
pliki css mozesz trzymac sobie oddzielnie na serwerze i sobie je czytac i zmieniac a skryptem laczysz go w 1 dodatkowy plik i to zminifikowany i w headzie zaczytujesz tylko ten 1 zespolony css tak sie robi.

[maniek74]

No właśnie do korka pije a nie do Ciebie, nie nawidze takiego tonu wypowiedzi jak on napisał, u mnie Ty masz browca

[fate]

bez kitu, nie ogarnałem haha

[by_ikar]

Dodatkowo przeglądarki mają limit połączeń które mogą nawiązać w tym samym czasie do jednego hosta. Więc jak tych plików będziesz miał 20, a limit wynosi 5 (css, obrazki, js, czcionki etc), to na któreś pliki przeglądarka będzie musiała czekać, efektem tego będzie dziwne pierwsze wejście na stronę, że dziwnie się będzie doczytywać etc. Dlatego lepiej jest to lepiej łączyć potem w jeden plik, niż w kilka.

Więcej połączeń, to też większe obciążenie dla webserwera, taki apache średnio lubi sporą ilość requestów..

Ten post edytował by_ikar 4.01.2015, 13:05:46