[CSS][inne]kilka css czy 1, waga css czy requesty http Opcje

[fate]

Wpadłem pomysl zeby zamiast wczytywac 1 wiekszy css podzielic go na "CORE" polowe wagi a reszte styli doczytywac w zależnosci od podstrony. Czy to aby dobry pomysl?
Wedlug was takie odchudzenie opowiedzmy o 5kb docelowo pewnie z 10kb lepsze niz czy gorsze niz 2 http requesty zamiast 1 (IMG:style_emoticons/default/co_jest.gif)

[ber32]

pedro84. Muszę się z tobą nie zgodzić co do kwesti

Tak naprawdę to jej sens jest... znikomy. W 99% procentach przypadków różnice pomiędzy przeglądarkami innymi niż IE nie wymagają osobnych arkuszy.

Pokarzę prosty przykład z ładowaniem np. tła strony dla kilu przeglądarek zobacz ile kodu tutaj się znajduje. Oczywiście zakładamy że strona ma obsługiwać praktycznie wszystkie przeglądarki w bardzo dobry sposób.

[PHP] pobierz, plaintext 
  .ga{  
background: rgb(7,7,7); /* Wszystkie prazeglądarki */
background: -moz-linear-gradient(top, rgb(7,7,7) 0%, rgb(89,89,89) 12%, rgb(102,102,102) 25%, rgb(71,71,71) 39%, rgb(44,44,44) 50%, rgb(0,0,0) 60%, rgb(17,17,17) 66%, rgb(43,43,43) 76%, rgb(28,28,28) 91%, rgb(19,19,19) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(76,76,76)), color-stop(12%,rgb(89,89,89)), color-stop(25%,rgb(102,102,102)), color-stop(39%,rgb(7,7,71)), color-stop(50%,rgb(4,44,44)), color-stop(60%,rgb(0,0,0)), color-stop(66%,rgb(17,17,17)), color-stop(76%,rgb(43,43,43)), color-stop(91%,rgb(28,28,28)), color-stop(100%,rgb(19,19,19))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(6,76,76) 0%,rgb(89,89,89) 12%,rgb(102,102,102) 25%,rgb(71,71,71) 39%,rgb(44,44,44) 50%,rgb(0,0,0) 60%,rgb(17,17,17) 66%,rgb(43,43,43) 76%,rgb(28,2,28) 91%,rgb(19,19,19) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgb(76,76,76) 0%,rgb(89,89,89) 12%,rgb(102,102,102) 25%,rgb(71,71,71) 39%,rgb(44,44,44) 50%,rgb(0,0,0) 60%,rgb(17,17,17) 66%,rgb(43,43,43) 76%,rgb(28,2,28) 91%,rgb(1,19,19) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgb(76,76,6) 0%,rgb(89,89,89) 12%,rgb(102,102,102) 25%,rgb(71,71,71) 39%,rgb(44,44,44) 50%,rgb(0,0,0) 60%,rgb(17,17,17) 66%,rgb(43,43,43) 76%,rgb(28,28,28) 91%,rgb(1,19,19) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgb(76,6,76) 0%,rgb(89,89,89) 12%,rgb(102,102,102) 25%,rgb(71,71,71) 39%,rgb(44,44,44) 50%,rgb(0,0,0) 60%,rgb(17,17,17) 66%,rgb(43,3,43) 76%,rgb(2,28,28) 91%,rgb(9,19,19) 100%); /*Standart  W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-8 */
}
[PHP] pobierz, plaintext 

Zobacz ile jest tutaj kodu nie potrzebnego dla jednej przeglądarki, która przegląda tą stronę. A jest to tylko tło. Teraz jeżeli masz sklep, który np. potrzebuje 20 pozycji do wyświetlania i wczytujesz różne kolory tła za obrazkiem plus sam obraz. To kod rozrasta się w zastraszającym tempie. Klasa pozwala zredukować o jedną piątą ilość kodu przesłanego do przeglądarki. Same obciążenie jak mówisz to jedne zapytanie do serwera, w sumie odwołanie się do biblioteki na serwerze, jest o niebo szybsza, niż wczytanie tej masy niepotrzebnych danych w tym przypadku tła. Nie mówiąc już o kodzie responsywnym, w który powielał byś kod tyle razy ile chciałbyś zastosować daną rozdzielczość masakra. Same te tło zajęło by 200 linijek kodu więc cały plik to jakieś 2000 lini. Teraz dla mnie programisty sprawdzanie tego kodu co zawiera 2000 lini jest męczarnią, ciągłe przeskakiwanie przez taką ilość kodu bo to menu gdzieś na 150 lini nie gra to stopka na 1960 lini jest nie tak to content się rozjechał na 150 lini. Co innego jeżeli całość mieści się w 300 liniach. To praca na takiej ilości kodu to sama przyjemność.
com.

a codo media queries to powiedz mi w takim razie co jak sobie np na kompie zmniejszę okienko? albo zamienię orientacje i mi się zwieszy/zmiejszy rozmiar media ma samo dostosować i przeładowac w czasie rzeczywistym a tak to przecież tego nie zrobi bo ma tylko full screen, wide czy coś innego ;P

dzięki za wskazówki tego nie przemyślałem, może się tak stać, uwzględnie taką sytuację w następnej odsłonie klasy.
Zapraszam na pw jeżeli ktoś jest tematem zainteresowany, chętnie udzielę informacji niezbędnych do obsługi klasy o dodatkową funkcjonalność np. facebook, lub obsługą czcionek google.

Ten post edytował ber32 17.10.2013, 16:37:59