Kiedy zadanie można wykonać za pomocą Javascript lub CSS, czy lepiej jest używać CSS? [Zamknięte]

11

Zawsze zawetowałem JavaScript, używając CSS w jak największym stopniu.

tzn. tworzę karty i przyciski najazdu używając CSS zamiast JavaScript.

Widziałem pewne rozwiązania - w szczególności framework internetowy Wt - które wspierają JavaScript; ale z wdziękiem zmień wersję na CSS, jeśli przeglądarka nie obsługuje / js-disabled.

Wiem, że CSS i JavaScript mają różne cele, jednak nakładają się; co jest sednem tego pytania.

Czy powinienem nadal używać CSS jak najwięcej w JavaScript?

W
źródło

Odpowiedzi:

10

Tak.

Celem CSS jest układ, wygląd i działanie oraz animacje

Celem JavaScript jest interakcja.

Jeśli wykonujesz układ, użyj CSS, jeśli ustawiasz wygląd i działanie, użyj CSS, jeśli twoja animacja używa CSS3

Jeśli dołączasz procedury obsługi zdarzeń lub reagujesz na dane wejściowe użytkownika, użyj JavaScript.

Pamiętaj, że ludzie używają JavaScript zamiast CSS do obsługi przeglądarki. Istnieją inne rozwiązania, takie jak emulowanie funkcji CSS za pomocą javascript.

Raynos
źródło
1
Lubię wiele funkcji zaimplementowanych w CSS3, jednak obsługa przeglądarki jest powolna i nadal muszę ułatwiać starsze przeglądarki. W przeciwnym razie używałbym HTML5 również do sprawdzania poprawności danych wejściowych: P
AT
javascript nie służy wyłącznie do interakcji. Można go również użyć do wysłania danych z powrotem do serwera WWW i wielu innych rzeczy.
eriawan
Interakcja @eriawan może być niejasnym terminem. ale javascript wykonuje głównie x podczas interakcji z użytkownikiem, gdzie x jest arbitralny
Raynos
12

To właściwie interesujące pytanie. Próbuję wymyślić, w jaki sposób zrobiłbyś nawet test porównawczy na czymś takim, tym bardziej, że ani CSS, ani JavaScript nie robią naprawdę intensywnych obliczeniowo rzeczy na stronie internetowej.

Moje przeczucie powiedziałoby, że używam CSS tak często, jak to możliwe, ale nie rób z tego trudnej i szybkiej reguły.

a:hover {
  background-color: green;
}

jest więc lepiej semantycznie

$('a').onmouseover(function() {
  $(this).css('background-color','green');
})

ALE

$('a').onmouseover(function() {
  if (somethingelsehappened) {
    $(this).css('background-color','green');
  }
})

byłoby trudne (choć nie niemożliwe) w CSS. Możesz to zrobić w ten sposób.

$('a').onmouseover(function() {
  if (somethingelsehappened) {
    $(this).addClass('Green');
  }
})

a.green {
  background-color: green;
}

Byłby to naprawdę nieco bardziej niezręczny sposób, aby zrobić to, co można było zrobić bezpośrednio w JavaScript, ale zastanawiałem się nad tym przez kilka minut i nawet tutaj właściwym rozwiązaniem może być na przykład CSS jeśli ustawiałeś wiele atrybutów podczas najechania kursorem.

** Należy pamiętać, że żaden z tych kodów nie powinien działać, są one wyłącznie w celach demonstracyjnych. **

Brian Hoover
źródło
3
Dobrze powiedziane, ale w drugim przykładzie nie zawahałbym się również użyć (lepiej nazwanej) klasy CSS. Istnieje wyraźne pokrywanie się tych dwóch elementów pod względem prezentacji i zachowania, ale w tych przykładach jest to dość proste - zachowanie zmienia wygląd po najechaniu myszą, wygląd opisano w CSS.
sevenseacat
3

Zastanów się, czy będziesz robił następujące rzeczy z Yahoo Developer Network :

„Po skurczeniu się liczb znaleźliśmy stały odsetek żądań z wyłączoną obsługą JavaScript, które oscylowały wokół 1% rzeczywistego ruchu odwiedzających, przy czym najwyższy wskaźnik wynosił około 2 procent w Stanach Zjednoczonych, a najniższy około 0,25 procent w Brazylii. w pozostałych testowanych krajach liczba ta była bardzo bliska 1,3% ”.

Przy tak niskim odsetku (jako maksimum) nie wydaje się to warte (chyba że użytkownicy twoich stron pochodzą głównie z tych 2%), aby martwić się przypadkiem, w którym użytkownicy mają wyłączony javascript. Przeciętny użytkownik nie wie, jak wyłączyć javascript, i prawdopodobnie nie obchodzi go to. Jeśli tworzysz witrynę techniczną, możesz rozważyć możliwość wyłączenia javascript, ale jeśli tak, to prawdopodobnie są przyzwyczajeni do stron internetowych, które nie działają poprawnie, ponieważ wiele stron internetowych intensywnie używa javascript.

To powiedziawszy, znalazłem wiele przypadków, w których tworzenie javascript sprawia, że ​​to, co próbuję osiągnąć, jest znacznie łatwiejsze, a inne przypadki, w których css robi to samo.

Ostatecznie każdy „język” ma swoje właściwe miejsce w tworzeniu stron internetowych i mądrze używany może poprawić zarówno rozwój, jak i wygodę użytkownika. Dowiedz się, jakie są te zastosowania (polecam doświadczenie uczenia się) i stosuj mądrze. Z mojego doświadczenia wynika, że ​​określone w kamiennych regułach takie jak: „Nigdy nie używaj JS, gdy istnieje rozwiązanie CSS” (sparafrazowane) rzadko są najlepsze w praktycznym świecie.

Kenneth
źródło
Dziękuję za to, bardzo informacje. Czy możesz rozwinąć swój czwarty akapit?
AT
3
CSS to narzędzie do stylizacji, a Javascript to narzędzie do interaktywności. Przekonałem się, że znacznie łatwiej jest tworzyć rozwijane menu, na przykład stylizowane za pomocą css, ale animowane za pomocą javascript. Czy możesz to zrobić za pomocą css? tak. Czy potrafisz wbić gwóźdź śrubokrętem? tak. W odwrotnym przykładzie, jeśli wszystko, co musisz zrobić, to zmienić kolor linku, gdy mysz znajdzie się nad linkiem, to prawdopodobnie nieco przesada w używaniu Javascript, gdy jest specjalnie zaprojektowany do tego element CSS. Czy możesz to zrobić za pomocą Javascript? Tak ... Czy możesz zabić pająka młotem? Tak ...
Kenneth
2

JavaScript jest prawdziwym językiem komputerowym, co oznacza, że ​​ma stan i kontrolę nad wykonywaniem programu. W związku z tym nie ma górnego limitu złożoności, a wszystko, co w nim piszesz, musi mieć znaczną minimalną złożoność. CSS jest kodem opisowym; jego złożoność jest ograniczona do poziomu złożoności, jaki może mieć przepis. Dlatego jeśli coś można zrobić zarówno w CSS, jak i JavaScript, wolałbym raczej używać CSS, ponieważ jest on mniej skomplikowany.

Mike Nakis
źródło
1
„jeśli coś można zrobić za pomocą CSS zamiast JavaScript, wolałbym używać CSS, ponieważ z pewnością będzie to mniej skomplikowane” ... Jak oceniasz? To naprawdę zależy od tego, co próbujesz zrobić, czy byłoby bardziej skomplikowane w JS vs CSS ...
Kenneth
Jak powiedziałem, program stanowy z kontrolą wykonania z pewnością będzie o wiele bardziej złożony niż jakikolwiek przepis.
Mike Nakis,
na przykład: Uważam, że o wiele bardziej skomplikowane jest rozwijanie menu w css, ponieważ musisz zrobić tak wiele poprawek i dodać wiele dodatkowych elementów HTML, aby uruchomić go w normalnych przeglądarkach, a jeśli chcesz, aby działał w starszych lub zbłąkane przeglądarki (IE itp.) są jeszcze potrzebne. W javascript potrzeba kilku prostych linii kodu, aby ożywić go, i kilku linii css, aby go stylizować.
Kenneth,
Oczywiście nie trzeba dodawać, że „wymagana jest dyskrecja programisty”. Jeśli nie można tego zrobić w CSS lub jeśli nie jest to wskazane z powodu niezgodności przeglądarki, to zdecydowanie należy preferować JavaScript. Moja odpowiedź jest bardziej po stronie akademickiej niż pragmatycznej.
Mike Nakis,
Szybkie pytanie poboczne (tylko dla tej odpowiedzi): Czy IE6 obsługuje tę samą wersję JavaScript, co nowoczesne przeglądarki? - Przez to mam na myśli wyodrębnianie informacji, więc nie muszę się martwić o „standardy” specyficzne dla przeglądarki.
AT
1

JavaScript jest językiem skryptowym, co oznacza, że ​​można dodać logikę. CSS służy do opisu wyglądu i stylu dokumentu. Został zaprojektowany przede wszystkim w celu oddzielenia struktury dokumentu od formatowania i układu (prezentacji).

Możesz użyć Javascript, aby zmodyfikować wygląd strony, ale ponieważ CSS miał to zrobić, wybrałbym CSS dla stylu strony, a resztę pozostawiłem Javascript.


Wikipedia:

Używanie Javascript:

  • Otwieranie lub otwieranie nowego okna z programową kontrolą rozmiaru, położenia i atrybutów nowego okna (np. Czy menu, paski narzędzi itp. Są widoczne).
  • Sprawdzanie poprawności wartości wejściowych formularza internetowego w celu upewnienia się, że są one dopuszczalne przed przesłaniem ich na serwer.
  • Zmiana obrazów w miarę przesuwania się nad nimi kursora myszy: Ten efekt jest często używany do zwrócenia uwagi użytkownika na ważne linki wyświetlane jako elementy graficzne.

AKTUALIZACJA. Co do trzeciego punktu, W3C mówi o CSS:

:hoverPseudo-klasa ma zastosowanie, gdy użytkownik wyznacza element z urządzeniem wskazującym, ale niekoniecznie go uaktywnić. Na przykład wizualny agent użytkownika może zastosować tę pseudoklasę, gdy kursor (wskaźnik myszy) unosi się nad polem wygenerowanym przez element.


Zastosowanie CSS:

Przed CSS prawie wszystkie atrybuty prezentacji dokumentów HTML były zawarte w znacznikach HTML; wszystkie kolory czcionek, style tła, wyrównanie elementów, obramowania i rozmiary musiały być wyraźnie opisane, często wielokrotnie, w kodzie HTML. CSS pozwala autorom przenieść większość tych informacji do osobnego arkusza stylów, co znacznie ułatwia znaczniki HTML.

pferor
źródło
1
„Zmiana obrazów w miarę przesuwania się nad nimi kursora myszy: Ten efekt jest często używany do zwrócenia uwagi użytkownika na ważne linki wyświetlane jako elementy graficzne”. - Czy to nie jest cecha CSS?
AT
@AT Tak, masz rację (+1) i dziękuję za poruszenie tej kwestii. hoverPseudo-klasa ma temu celowi. Właśnie cytowałem. Edytowane.
pferor