использование CSS для дублирования HTML-элементов

Question

Я передал дизайн для веб-страницы, которую я пытаюсь реализовать правильно. Этот дизайн содержит элементы навигации, которые частично или полностью дублируются по всей странице - в частности, ссылки на основные 3 категории для навигации присутствуют на странице не менее 4 раз.

Я не специалист по веб-дизайну, но мне не нравится идея дублировать один и тот же контент в html. Могу ли я использовать CSS, чтобы мой HTML содержал один список навигационных ссылок в нормальном формате, но стандартное представление браузера содержит несколько частичных дубликатов?

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

РЕДАКТИРОВАТЬ: На самом деле создание навигационных ссылок не является проблемой; Я искал, чтобы очистить вывод HTML

Answer 1

Краткий ответ: нет.

Длинный ответ: не совсем,

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

ИМХО, вероятно, неразумно хотеть делать это, потому что стиль (и, действительно, контент) может теперь выглядеть одинаково, но нет гарантии, что это будет позже, более того, этот тип контента это контент справедливо относится к разметке, а не к стилю. Если вам не нравится серверная модель включения (что хорошо), я бы обратился к JS, чтобы помочь вам, возможно, повторить разметку, и к CSS, чтобы помочь вам согласованно разрабатывать стиль, но я думаю, что вы не обязательно идете по пути .

Answer 2

Вроде возможно, но все еще не уверен, что вы бы хотели

И создает некоторые серьезные проблемы, которые варьируются в зависимости от контекста.

Одна из проблем заключается в том, что ваша заявленная цель состоит в том, чтобы уменьшить беспорядок и избыточность html. Однако, чтобы иметь ссылку, вам все равно нужно иметь элемент привязки (<a></a>) в качестве корня для ссылки.

Тем не менее, в одну сторону вы могли бы сделать что-то подобное с сегодняшними браузерами (теперь, когда псевдоэлементы поддерживаются более широко), это отделить текст от a, который оставляет пустым якорь в вашем коде. Таким образом, у вас все еще есть HTML a в коде, но вы исключаете излишний текст . Насколько это действительно полезно? Не очень моя мысль. Особенно, если вы имеете дело с встроенными ссылками, которые являются частью текста , потому что то, что вам нужно сделать, это добавить текст к этим ссылкам через псевдоэлемент, что-то вроде:

a[href='#oneUrl']:before {
    content: 'your anchor text';
}

Посмотрите на этот пример скрипки .

Однако есть другой способ , который еще больше сокращает HTML , но имеет некоторые другие серьезные ограничения. Вы могли бы иметь ссылки в самом тексте (скажем), который учитывает соответствующую реальную формулировку содержания в них. Однако каждый из них может иметь два ( max в настоящее время) связанных псевдоэлемента, которые могут «расширяться» до отдельных ссылок в верхних и нижних колонтитулах и т. Д. Посмотрите на этот пример скрипки, Очевидно, это требует от вас точного определения местоположения этих ссылок (возможно, с использованием position: fixed, как в примере), что может быть проблематичным. Большая проблема, однако, заключается в том, что поисковые системы не будут собирать эти дополнительные ссылки или их текст, а программы чтения с экрана - нет, поэтому ваша «основная навигация» фактически становится невидимой в некоторой степени. Это может показаться мне нежелательным, но действительно ограничивает вашу избыточность html .

Answer 3

Короткий ответ нет, в css вы не можете создавать контент или отображать его несколько раз. Обычно об этом повторяющемся контенте заботятся с помощью серверных технологий (PHP, JSP, ASPX) и т. Д. Если ваш сайт имеет статический контент (без обработки на стороне сервера), тогда вам лучше всего скопировать и пропустить.

Было бы возможно сделать это с помощью javascript, но было бы множество недостатков, лучше скопировать и вставить.

Answer 4

Вы говорите, что хотите очистить выходной HTML. Но по какой причине? Я предполагаю, что вы либо хотите уменьшить размер HTML и ширину полосы пропускания, либо сохранить красивый HTML, как исходный код.

Уменьшение размера HTML и полосы пропускания

Лучший способ добиться этого - работать со сжатием HTTP. Большинство HTTP-серверов могут быть настроены для обслуживания контента таким способом. Проверьте документацию вашего сервера.

Сохраняйте красивый HTML

Может быть, вы хотите превратить ваш HTML в шаблонизатор. Для этого есть несколько вариантов, например Mustache.js и Подчеркивание . Однако вы понесете снижение производительности, поскольку для обработки JS будет добавлен дополнительный шаг.

---

В любом случае, я думаю, что вы подходите не к той проблеме. Тот факт, что HTML [несколько] читабелен, не означает, что его следует рассматривать как исходный код. Я прошел через это, и в настоящее время я просто рассматриваю HTML как «ассемблерный код» для браузеров. Использование более совершенных языков шаблонов, таких как Slim , помогает применять этот POV.

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

Answer 5

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

Но предварительная обработка html-страниц, таких как это, - правильная задача, поэтому не делайте этого, если вы не можете сделать это на стороне сервера.

Answer 6

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

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

Кроме того, если вы пользуетесь скриптами, то вам повезло! Вы можете использовать Builder до для динамического создания элементов DOM .

Answer 7

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

Answer 8

ИМХО это не возможно. Моим решением было бы добавить небольшой PHP или другой движок, который автоматически отображает меню в тех местах, где это необходимо. Таким образом, ваш код DRY .

Answer 9

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

.duplicate::before {
    content:attr(title);
    display:block;
}
.duplicate::after {
    content:attr(title);
    display:block;
}

<div class="duplicate" title="text to duplicate"></div>

Answer 10

Я думаю, что вы будете использовать HTML-включения и SSI или серверные включения для включения одинаковых методов на одних и тех же страницах, это формат, который вы будете использовать. <!--#include virtual="path to file/include-file.html" -->, всегда включайте этот файл на каждой похожей странице. просто перейдите по этой ссылке .. http://webdesign.about.com/od/ssi/a/aa052002a.htm