Proszę o doradzenie - css3, jquery, dużo przezroczystości

0

Robię stronę na własny użytek (ale do publikacji). Strona ma być wykonana w "nowszych" technikach. Skupiam się w dużej mierze na css3 i jquery (oprócz efektów wizualnych wchodzi w grę także ajax). Mam kilka dylematów i chciałbym prosić o doradzenie.

  1. Na stronie jest dość dużo przezroczystości stąd pytanie, lepiej porobić własne półprzezroczyste pngi i ich używać czy skupić się na css3 i używać opacity bądź rgba, jak tak to które jest "bardziej dostępne" na rożnych przeglądarkach?
  2. Strona ma w dużym stopniu opierać się o efekty takie jak drag'n'drop i resize divów, najprościej byłoby podpiąć jquery ui i cieszyć się efektem draggable i resizeable. Niestety jestem wielkim pedantem i mnie to nie satysfakcjonuje, uważam, że nie warto dołaczać ważącego nie mało jquery ui dla 2 efektów. Używam zwykłego jquery na stornie do rożnych celów, w tym ajaxa. I nasuwa mi się pytanie, czy nie lepiej napisać samemu w jquery metod do drag'n'dropu i resize'u? Całość nie powinna zająć więcej niż 2-4kb, podczas gdy jquery ui waży kilkanaście razy tyle.
  3. Skoro używam już css3 to pozostaje kwestia walidacji, obecnie jest już walidator na css3, ale ostatnio zauważyłem jak kolega po fachu dodaje wszystkie style css3 z poziomu javasciptu, dzięki czemu strona przechodzi walidację na css 2.1, a w stylach nie ma bałaganu z stylami dla rożnych przeglądarek (-moz, -webkit, itd.). Opłaca się bawić w takie coś w obecnych czasach?
  4. Skoro strona jest pisana pod takim kątem to czy warto napisać ją w html5 czy pozostać przy xhtml?

Podkreślam, że nie zależy mi na przeglądarkach poniżej IE8, FF3.5, itd. Kwestię border-radius i box-shadow dla IE8 rozwiązałem dzięki PIE. Dla przeglądarek starszych jest wyświetlana inna wersja strony. Zależy mi głównie na "pięknie kodu" jako, że storna ma być swojego rodzaju wizytówką. Proszę o branie tych czynników podczas udzielania odpowiedzi :P

Z góry dziękuję

2
smutasek napisał(a)
  1. Na stronie jest dość dużo przezroczystości stąd pytanie, lepiej porobić własne półprzezroczyste pngi i ich używać czy skupić się na css3 i używać opacity bądź rgba, jak tak to które jest "bardziej dostępne" na rożnych przeglądarkach?

Lepiej RGBA. Zawsze to mniej obrazków, mniej żądań na serwer i większa elastyczność. opacity działa trochę inaczej, więc to nie to samo (ustawia przezroczystość dla całego elementu: nie tylko tła, ale i zawartości).

Ze wsparciem RGBA w nowoczesnych przeglądarkach jest OK, ale w IE6-8 jest gorzej. Normalna deklaracja nie działa, ale możesz użyć filtru i gradientu, podając jeden kolor od początku do końca wraz z kanałem alfa.

smutasek napisał(a)
  1. Strona ma w dużym stopniu opierać się o efekty takie jak drag'n'drop i resize divów, najprościej byłoby podpiąć jquery ui i cieszyć się efektem draggable i resizeable. Niestety jestem wielkim pedantem i mnie to nie satysfakcjonuje, uważam, że nie warto dołaczać ważącego nie mało jquery ui dla 2 efektów.

W normalnych projektach przeważnie nie opłaca się tracić czasu na takie rzeczy, bo zysk z tych paru(nastu?) kilobajtów jest mniejszy niż koszt napisania czegoś takiego samemu. Weź pod uwagę, że na serwerze powinieneś mieć włączoną kompresję GZIP, co może nawet kilkakrotnie zmniejszyć rozmiar biblioteki. Oczywiście, do tych kilku efektów powinieneś użyć jQuery UI w wersji custom -- z odznaczonym wszystkim, czego nie potrzebujesz.

Możesz także poszukać innej, gotowej implementacji Drag'n'Drop. Napisanie tego samemu też może być dość dobrym ćwiczeniem, a poza tym przyzwoitą wizytówką. Więc jak Ci się chce, to się szarpnij. Ja bym sobie chyba na Twoim miejscu nie zawracał tym głowy na początku i użył czegoś gotowego.

smutasek napisał(a)
  1. Skoro używam już css3 to pozostaje kwestia walidacji, obecnie jest już walidator na css3, ale ostatnio zauważyłem jak kolega po fachu dodaje wszystkie style css3 z poziomu javasciptu, dzięki czemu strona przechodzi walidację na css 2.1, a w stylach nie ma bałaganu z stylami dla rożnych przeglądarek (-moz, -webkit, itd.). Opłaca się bawić w takie coś w obecnych czasach?

IMO nie. Sam stosuję restrykcyjne standardy walidacyjne, ale definiuję też jasno rodzaje błędów, jakie (głupi) walidator może zgłosić i jakimi mam się nie przejmować. Na liście są własności z prefixami wendorskimi oraz własności z CSS3. W projektach, w których reguły kompensacyjne dla IE mam w tym samym arkuszu stylów, co główne reguły (to rozwiązanie ma też pewne plusy), dopuszczam też trochę dalszych błędów, o ile tylko występują w regułach dla IE.

Na pewno nie dołączałbym arkuszy stylów JavaScriptem tylko po to, by arkusze dołączane statycznie mi się walidowały. Mógłbym się zdecydować na takie rozwiązanie, ale z innego powodu: gdybym użył opartego o JS progresywnego wzbogacenia. Czegoś w stylu EnhanceJS. Wtedy w naturalny sposób zaawansowane style, w tym te z CSS3, znalazłyby się w arkuszach dołączanych przez JS.

smutasek napisał(a)
  1. Skoro strona jest pisana pod takim kątem to czy warto napisać ją w html5 czy pozostać przy xhtml?

Zdecydowanie HTML5. Po co Ci XHTML, tak w ogóle? Czemu użyłbyś go zamiast HTML-a 4.01? I czy na pewno przeglądarki rozumiałyby Twój XHTML jako XML?

HTML5 to obecnie największy technologiczny buzzword w Internecie. Ludzie bełkocą o nim nawet gdy tak naprawdę chodzi im o CSS3.

Zawsze możesz użyć HTML-a 5 w absolutnie bezpieczny sposób. Czyli bez nowych tagów, ale za to z paroma uproszczeniami , takimi jak opuszczenie zbędnych atrybutów type, możliwość wsadzania elementów blokowych do linków, atrybuty data-*, nowe atrybuty kontrolek formularza, atrybut ARIA role itp.

W Twoim przypadku dołożyłbym do tego jeszcze nowe, semantyczne tagi. W IE8 i starszych będzie to wymagało niewielkiego skryptu, ale mówi się trudno. Używam tego nawet w komercyjnych projektach. W "popisówce" -- tym bardziej.

0

To ja założyłem ten temat.

bswierczynski, bardzo dziękuję Ci za odpowiedź. Podobne tematy założyłem na na jeszcze 2 innych forach w celu zasięgnięcia opinii jak największej liczby osób. Musze przyznać, że Twoja wypowiedź jest dla mnie najbardziej pomocna i rzetelna. Przy okazji wyrobiłem sobie zdanie o polskiej scenie for o tematyce IT. Szukałem najlepszego i chyba skusze się na dołączenie do tutejszej społeczności bo jest wg. mnie najbardziej profesjonalna.

Na rozluźnienie zarzucę linkem do tematu na forumweb.pl gdzie zostałem "wyśmiany" za wspomnienie o html5... Co więcej, jako argument podano mi adres strony, która rzekomo odradza jego używania, podczas gdy sama jest napisana w tej technologii, a autor popisał ładne ironiczne komentarze w kodzie. Najzabawniejsze w tej sytuacji jest to, że stronę tę w nieświadomy sposób promuje na tamtejszym forum elita użytkowników :| http://www.forumweb.pl/viewtopic.php?p=367443

0

Odkopuję swój temat, bo mam kolejne pytanie odnośnie tej kwestii. Na takiej stronie ("pokazówka") efekty przejścia lepiej robić przy pomocy css-transitions i ogólnie css3 czy jquerowskiego animate() itp. metod z jQuery?

0

Mówię z punktu widzenia osoby, której zdarza się węszyć po czyichś stronach/"pokazówkach" gdy przygotowuję się do przyjęcia typka na rozmowę kwalifikacyjną.

Lepiej CSS3. Animacje z jQuery są oklepane, chyba żebyś zrobił nie-wiadomo-co. Z drugiej strony, wtedy jest spora szansa, że będzie to wyglądało bez sensu. Normalne animacje w jQuery robi się prosto i ich zastosowanie niemal o niczym nie świadczy.

Animacje z CSS3 (czy, jak kto woli, rozszerzenia Webkita :P) mogą już prędzej świadczyć, że ktoś się interesuje nowinkami. U mnie w pracy używa się rutynowo CSS3, więc jeśli ktoś użyje czegoś CSS3-podobnego, to jest to pewien plus.

Tylko to nie będzie działało we wszystkich w miarę nowych przeglądarkach. Jeśli zakodujesz wszystko zgodnie z zasadami "progresywnego wzbogacenia" (czyli: żeby w starszych przeglądarkach wszystko działało, ale najwyżej mniej efektownie), to będzie OK. Osoby, które znają się na kodzie, tj. developerzy, korzystają przeważnie na co dzień z dobrych, wypasionych przeglądarek.

Możesz też zastosować inny bajer: animacje z CSS, a jako fallback te z jQuery (musiałbyś wykrywać, czy animacje są obsługiwane). Albo odwrotnie: animacje CSS, a skrypty by je wyłączały i wstawiały własne animacje. Jakby skrypty były wyłączone, to zostałyby animacje CSS-owe.

1 użytkowników online, w tym zalogowanych: 0, gości: 1