Когда задачу можно выполнить с помощью Javascript или CSS, лучше ли использовать CSS? [закрыто]

11

Я всегда накладываю вето на JavaScript, максимально используя CSS.

т.е. я создаю вкладки и кнопки прокрутки, используя CSS, а не JavaScript.

Я видел несколько решений, в частности веб-фреймворк Wt, которые поддерживают JavaScript; но изящно опуститесь до CSS, если браузер не поддерживает / js-disabled.

Я знаю, что CSS и JavaScript имеют разные цели, однако они частично совпадают; что является основой этого вопроса.

Должен ли я продолжать использовать CSS как можно больше по сравнению с JavaScript?

В
источник

Ответы:

10

Да.

Цель CSS - верстка, внешний вид и анимация

Целью JavaScript является взаимодействие.

Если вы делаете макет, используйте CSS, если вы настраиваете внешний вид, используйте CSS, если ваша анимация использует CSS3

Если вы присоединяете обработчики событий или реагируете на пользовательский ввод, используйте JavaScript.

Обратите внимание, что люди используют JavaScript вместо CSS для поддержки браузера. Существуют и другие решения, такие как эмуляция функций CSS с использованием JavaScript.

Raynos
источник
1
Мне нравится множество функций, реализованных в CSS3, однако поддержка браузеров была медленной, и мне все еще нужно помогать старым браузерам. В противном случае я бы также использовал HTML5 для проверки ввода: P
AT
JavaScript не просто используется для взаимодействия. Он также может быть использован для отправки данных обратно на веб-сервер и многое другое.
Eriawan
@eriawan взаимодействие может быть неопределенным термином. но javascript в основном делает x, когда взаимодействует с пользователем, где x является произвольным
Raynos
12

Ну, это на самом деле довольно интересный вопрос. Я пытаюсь придумать, как вы могли бы сделать эталонный тест для чего-то подобного, тем более, что большую часть времени ни CSS, ни JavaScript не будут делать действительно ресурсоемкие вещи на веб-странице.

Мой интуитивный настрой сказал бы, что используй CSS как можно больше, но не превращай это в жесткое и быстрое правило.

a:hover {
  background-color: green;
}

тогда лучше семантически

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

НО

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

было бы сложно (хотя и не невозможно) в CSS. Вы могли бы сделать это таким образом.

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

a.green {
  background-color: green;
}

Это действительно был бы немного более неловкий способ сделать то, что могло бы быть сделано непосредственно в JavaScript, но я думал об этом пару минут, и даже здесь, например, правильным решением может быть CSS. если вы устанавливаете много атрибутов при выполнении наведения.

** Обратите внимание, что ни один из этого кода не будет работать, это только для демонстрационных целей. **

Брайан Гувер
источник
3
Хорошо сказано, но для вашего второго примера я бы также не стеснялся использовать (лучше названный) класс CSS. Существует определенное совпадение между ними с точки зрения представления и поведения, но в этих примерах это довольно просто - поведение изменяет внешний вид при наведении мыши, внешний вид описывается в CSS.
sevenseacat
3

Подумайте, хотите ли вы следующее из Сети разработчиков Yahoo :

«После подсчета цифр мы обнаружили постоянную частоту запросов с отключенным JavaScript, которые составляют около 1% от фактического трафика посетителей, при этом самый высокий показатель составляет около 2% в Соединенных Штатах, а самый низкий - около 0,25% в Бразилии. другие протестированные страны показали цифры, близкие к 1,3 процента ".

При таком низком процентном отношении (как максимум) вряд ли стоит (если только пользователи ваших веб-сайтов не получают в основном эти 2%) беспокоиться о том, что у пользователей отключен JavaScript. Обычный пользователь не знает, как отключить JavaScript, и, вероятно, не заботится об этом. Если вы разрабатываете технический веб-сайт, вы можете рассмотреть возможность того, что они отключат JavaScript, однако, если они есть, они, вероятно, привыкли к сайтам, работающим некорректно, так как многие веб-сайты активно используют JavaScript.

При этом я обнаружил много случаев, когда разработка javascript значительно облегчает то, что я пытаюсь выполнить, и другие случаи, когда css делает то же самое.

В конце концов, каждый «язык» занимает свое место в веб-разработке и используется с умом, что может улучшить как разработку, так и взаимодействие с пользователем. Узнайте, что это такое (я рекомендую опыт обучения) и применять с умом. По моему опыту, установленные в камне правила, такие как «Никогда не используйте JS, когда существует CSS-решение» (перефразированный), редко бывают лучшими в практическом мире.

Кеннет
источник
Спасибо за это, очень информация. Можете ли вы расширить свой 4-й абзац?
AT
3
CSS - это инструмент для «стилизации», а Javascript - это инструмент для «интерактивности». Я обнаружил, что гораздо проще создавать выпадающие меню, например, стилизованные под CSS, но анимированные с помощью JavaScript. Вы можете сделать это с помощью CSS? да. Можете ли вы забить гвоздь с помощью отвертки? да. В обратном примере, если все, что вам нужно сделать, это изменить цвет ссылки, когда указатель мыши находится над ссылкой, то, вероятно, немного излишне использовать Javascript для этого, когда есть элемент CSS, специально разработанный для этой цели. Можете ли вы сделать это с помощью Javascript? Да ... Можете ли вы убить паука кувалдой? Да ...
Кеннет
2

JavaScript - это настоящий компьютерный язык, то есть он имеет состояние и контроль выполнения программы. Таким образом, нет предела тому, насколько сложным он может быть, и все, что вы пишете в нем, обязательно будет иметь существенный минимум сложности. CSS - это описательный код; его сложность ограничена уровнем сложности, который может иметь рецепт. Поэтому, если что-то можно сделать как в CSS, так и в JavaScript, я бы предпочел использовать CSS, поскольку он должен быть менее сложным.

Майк Накис
источник
1
«если что-то можно сделать с помощью CSS, а не JavaScript, я бы предпочел использовать CSS, поскольку он должен быть менее сложным» ... Как вы думаете? Это действительно зависит от того, что вы пытаетесь сделать, относительно того, будет ли это более сложным в JS против CSS ...
Кеннет
Как я уже сказал, программа с контролем состояния и контролем исполнения обязательно будет намного сложнее, чем любой рецепт.
Майк Накис
например: я считаю, что гораздо сложнее сделать выпадающие меню в css, так как вам нужно сделать так много твиков и добавить много дополнительных html-элементов просто для того, чтобы он работал в обычных браузерах, а затем, если вы хотите, чтобы он работал в старых или заблудшие браузеры (IE и т. д.) еще больше требуются. В javascript для анимации требуется пара простых строк кода, а для стилизации - несколько строк CSS.
Кеннет
Конечно, само собой разумеется, что «программисту нужно усмотрение». Если это не может быть сделано в CSS, или если это не рекомендуется из-за несовместимости браузера, тогда, конечно, JavaScript предпочтительнее. Мой ответ больше на академическую сторону вещей, чем на прагматическую сторону.
Майк Накис
Быстрый вопрос (только для этого ответа): IE6 поддерживает ту же версию JavaScript, что и современные браузеры? - Под этим я подразумеваю абстрагирование информации, поэтому мне не нужно беспокоиться о браузерных «стандартах».
AT
1

Javascript - это язык сценариев, что означает, что он может добавить немного логики. CSS используется для описания внешнего вида и стиля документа. Он был разработан прежде всего для отделения структуры документа от форматирования и макета (презентации).

Вы можете использовать Javascript для изменения внешнего вида веб-страницы, но так как CSS предназначался для этого, я бы выбрал CSS для стиля сайта, а остальное оставлю на усмотрение Javascript.


Википедия:

Использование Javascript:

  • Открытие или отображение нового окна с программным управлением размером, положением и атрибутами нового окна (например, видны ли меню, панели инструментов и т. Д.).
  • Проверка входных значений веб-формы, чтобы убедиться, что они приемлемы перед отправкой на сервер.
  • Изменение изображений при наведении на них курсора мыши. Этот эффект часто используется для привлечения внимания пользователя к важным ссылкам, отображаемым в виде графических элементов.

ОБНОВИТЬ. Что касается третьего пункта, W3C говорит о CSS:

:hoverПсевдо-класс применяется , когда пользователь обозначает элемент с указательным устройством, но не обязательно активировать его. Например, визуальный пользовательский агент может применить этот псевдокласс, когда курсор (указатель мыши) находится над блоком, созданным элементом.


Использование CSS:

До CSS почти все атрибуты представления документов HTML содержались в разметке HTML; все цвета шрифта, стили фона, выравнивание элементов, границы и размеры должны были быть явно описаны, часто многократно, в HTML. CSS позволяет авторам перемещать большую часть этой информации в отдельную таблицу стилей, что значительно упрощает разметку HTML.

pferor
источник
1
«Изменение изображений при перемещении курсора мыши над ними: этот эффект часто используется для привлечения внимания пользователя к важным ссылкам, отображаемым в виде графических элементов». - Разве это не особенность CSS?
AT
@AT Да, вы правы (+1), и спасибо, что подняли этот вопрос. hoverПсевдо-класс имеет эту цель. Я просто цитировал. Ред.
pferor