Вопрос: использование css для дублирования элементов html


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

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

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

EDIT: На самом деле создание навигационных ссылок не является проблемой; Я пытался очистить выходной html


13


источник


Ответы:


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

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

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

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

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

смотреть на этот пример скрипки ,

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


12



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

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

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

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


16



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

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


3



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


1



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


1



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

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

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


1



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

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


1



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

Уменьшите размер HTML и пропускную способность

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

Держите HTML довольно

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


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

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


1



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


-2