Как мне следует рассмотреть роль избыточности в прогрессивном улучшении / постепенном ухудшении?

Question

Этот вопрос возник, когда я работал над ответом на другой вопрос о передовых практиках для placeholder текста в inputs и textareas.

Использование HTML5 placeholder, безусловно, оптимально, но на данный момент все еще кажется необходимым добавить устаревшее решение для старых браузеров (с использованием javascript).

JsFiddle здесь: http://jsfiddle.net/leifparker/DvqYU/16/

Вопрос : поскольку оба они выполняют почти одно и то же, зачем их включать? Почему бы просто не использовать решение только для javascript и отказаться от реализации HTML5, пока она не станет (почти) общепринятой?

Конечно, в этом конкретном примере добавление атрибута HTML5 placeholder и функции hasPlaceholderSupport() является довольно минимальным добавлением строк (4), но, поскольку требуется ухудшенная поддержка, есть ли причина беспокоиться о прогрессивная избыточность?

Я уверен, что есть обоснование с обеих сторон, и мне любопытно услышать это.

Заранее спасибо!

Answer 1

Есть причина для беспокойства. Со временем ожидается, что все браузеры будут поддерживать атрибут placeholder. В настоящее время только несколько браузеров не поддерживают его (, что наиболее важно, IE 9 и ниже, а также браузер Android ). Так что, в конце концов, ваш запасной код-заполнитель станет ненужным. Если вы отправите веб-сайт с использованием сценария для всех браузеров, через несколько лет он станет совершенно ненужным.

Вместо этого, используя функцию обнаружения для возврата к решению JavaScript только при необходимости:

1. Нет необходимости запускать немного кода JavaScript в браузерах, которые уже поддерживают атрибут placeholder.
2. Вы можете загружать резервный скрипт только при необходимости, сохраняя несколько байтов.

Это то, что библиотеки, такие как Modernizr и yepnope.js (включены в Modernizr), уже делают. Я бы рекомендовал использовать Modernizr и извлечь заполнитель polyfill в placeholder-polyfill.js файл, чтобы ваш код мог выглядеть так:

Modernizr.load({
  test: Modernizr.placeholder,
  nope: 'placeholder-polyfill.js'
});

Если вы просто хотите yepnope.js и запускаете свои собственные функции обнаружения функций:

yepnope({
  test: hasPlaceholderSupport(),
  nope: 'placeholder-polyfill.js'
});

Таким образом, вы экономите загрузку ресурсов и повышаете производительность для большинства браузеров. В будущем все браузеры просто пройдут тест, улучшая производительность. Затем вы можете просто удалить вызов yepnope.js / Modernizr.

Для меня это скорее образ мыслей о том, как защитить свой код от будущего, и при этом уже использовать возможности современных браузеров.

Answer 2

Я вижу, что вы можете загружать jsFiddle только тогда, когда это необходимо.Это экономит время, необходимое для загрузки, анализа и выполнения дополнительного кода.Ваша страница будет загружаться быстрее, а встроенная поддержка HTML5, вероятно, быстрее, чем эмуляция в JavaScript.